CODEWITHSUNDEEP
react-nativebase64placeholder
Elly
Elly

Reputation: 337

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

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>

Upvotes: 0

Views: 834

Answers (1)

Gaurav Roy
Gaurav Roy

Reputation: 12215

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

Upvotes: 1

Related Questions