show a placeholder image and then transforms it into base64 with expo

Elly 0
Viewed 20

I have to show a placeholder image before more images arrive following a network request. How can I transform the url (ex: https: //upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png) into base64? is there a react native library that shows a placeholder image and then transforms it into base64? if there is no library showing a placeholder image, how can I transform a url (eg: https: //upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png) into base64? I've tried using RNFetchBlob but from what I've read around it's not supported by expo.

<View style={ styles.container_image}>
     {this.state.image && <Image 
     source={'how get url placeholder and then transform it into base64??' } style={{ width: 200, height: 200  }} />}
     </View>
placeholder base64 react-native
1 Answers

currently react native doesnt support any fallback / placeholder image.

What you can do is , you download a placeholder image, and display that till the time your api returns an image.

For example

const ImageComp = () => {

if(netWorkLoading){
  return <Image source={require('../ your local image')} />
}

 return <Image source={{uri:response.url}} />

}

Hope it helps. feel free for doubts

Gaurav Roy0
Related