question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Stream api support within a react-native project

See original GitHub issue

Describe the issue Does axios support Stream api(https://jakearchibald.com/2016/streams-ftw/#creating-your-own-readable-stream) and that too within a react-native project.

Example Code fetch support Stream within browser, and as axios is written over fetch hopefully it should also support Stream. Code with fetch is mentioned below

fetch('https://html.spec.whatwg.org/').then(function(response) {
  var reader = response.body.getReader();
  var bytesReceived = 0;

  reader.read().then(function processResult(result) {
    if (result.done) {
      console.log("Fetch complete");
      return;
    }
    bytesReceived += result.value.length;
    console.log(`Received ${bytesReceived} bytes of data so far`);

    return reader.read().then(processResult);
  });
});

Expected behavior, if applicable So I am expecting that axios will behave same as fetch on browser but will it work within a react-native project, because implementation of fetch is slightly different on web than within react-native environment and so may be implementation of axios(https://stackoverflow.com/questions/56207968/stream-api-with-fetch-in-a-react-native-app),

Additional context/Screenshots It is not a bug and that too not for axios for sure. I am just expecting suggestions if someone have implemented this kind of functionality or is it possible with axios.

Thanks

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
wgriffin13commented, Apr 24, 2020

Same issue here. I tested the following code using Jest and the function worked as intended.

async function streamToString(readableStream) {
    return new Promise((resolve, reject) => {
      const chunks = [];
      readableStream.on("data", (data) => {
        chunks.push(data);
      });
      readableStream.on("end", () => {
        resolve(Buffer.concat(chunks).toString('base64'))
      });
      readableStream.on("error", reject);
    });
}

const getAvatar = async (imgUrl) => {
    return axios.get(SERVER_URL + '/api/img/avatar/' + imgUrl, {
        responseType: 'stream'
    })
        .then(async response => {
            const stream = response.data;
            const rawImage = await streamToString(stream);
            const imageUriPrepend = "data:image/jpeg;base64,";
            const image = imageUriPrepend.concat(rawImage);
            return image;
        })
        .catch(error => {
            // Handles error when no avatar is found on Azure
            console.log(error)
            return
        })
}

However, when we put it into the React Native application, we received the error:

Warning: The provided value ‘stream’ is not a valid ‘responseType’.

0reactions
jasonsaaymancommented, May 14, 2021

Closed see #479

Read more comments on GitHub >

github_iconTop Results From Across the Web

Stream api with fetch in a react-native app - Stack Overflow
On web we can access Stream from response.body.getReader(), where response is just normal result retuned from fetch call of stream url, but in...
Read more >
React Native Introduction - Chat - GetStream.io
This section will help you to build any type of chat or messaging experience for a react-native application. There are two important building...
Read more >
How to build a video streaming app with React Native and Mux
Learn to create a React Native video streaming mobile app using the Mux Video API and Codemagic for building.
Read more >
Live streaming with React Native | Mux blog
One of the nice things about React Native is the community supported libraries. There's virtually a library for everything. However, when ...
Read more >
React Native live stream - api.video Documentation
Code sample ; from 'react' · import · View ; 'react-native'; import · LivestreamView · from ; App = · => · const ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found