Search code examples
react-nativebase64placeholder

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>

Solution

  • 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