In React Native I can use images with
The problem is that user images are
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 (
<Image style={styles.base64} source={{uri: this.state.base64}} />
)
You can send headers in the source prop.
<Image
source={
{ uri: 'https://yourdomain.com/get-image',
headers: {
Authorization: 'Bearer xyz'
}
}
}/>
you can specify other parameters as well: ImageSourcePropType.js
Send Header in Image tag in react native
<Image source={{ uri: 'url',
headers: {Authorization: 'Bearer *******'}
}}/>
ref