React Native Image with 'Bearer' authentication token

Question

In React Native I can use images with

The problem is that user images are

Answer 1

Your options are this one: https://rnplay.org/apps/UowZmw (in order to see the simulator, type document.querySelector('.editor-container').style.width = '50%' in dev console, RNPlay is a bit broken with lengthy content).

Basically what you do is to: 1. serve your images as blobs 2. fetch them with fetch() to the app. 3. use base64 data as content of uri property

Do this in your componentWillMount():

fetch(YOUR_IMAGE_URI, {
    method: 'GET',
    headers: {
      'Authorization': 'Bearer ' + 'TOKEN'
    }
  }
).then((res) => res.text())
.then((content) => {
  this.setState({
    base64: content
  })
})

You may notice I use res.text() instead of res.blob(). This is because, while writing this, RN doesn't support .blob().

And this goes to render():

return (
  
)