1

I have code like this- I am saving my image to state which is getting and printing the right URL

fetchData = async () => {
this.setState({profilePicUrl: await 
AsyncStorage.getItem('profileImg')});
//here it is printing the right URL
console.log('this.state.profilePicUrl '+this.state.profilePicUrl);
console.log('this.props.profile '+this.props.profile); 
};

However, in the render method of the same component

<Thumbnail source={{uri: this.state.profilePicUrl}} style={{ height: 100, width: null, flex: 1 }} />

this thumbnail is displaying nothing and in EXPO XDE I see source.uri is an empty string

I have logged the profilePicUrl in the render method like this 

render() {
console.log('In Render method of Profile');
console.log('In Render method of Profile this.state.profilePicUrl

'+this.state.profilePicUrl);

and able to get the url in console. However, I see this error

source.uri should not be an empty string in the thumbnail

This question is similar to this one as I am also using Firebase for the storing and retrieving the images

Setting image source to Firebase Storage URL with React Native

Gowtham Pendyala
  • 175
  • 2
  • 8

2 Answers2

0

You need to set height and width of your thumbnail.

nishant
  • 2,526
  • 1
  • 13
  • 19
  • that has been taken care of .The error is source.uri should not be an empty string which implies that this.state.profilePicUrl is empty – Gowtham Pendyala Jun 14 '18 at 21:00
  • then you should try to use this.props.profilePicUrl instead of getting from state – nishant Jun 14 '18 at 21:02
  • this is what set State is for -rerendering the DOM , Why is it not able to re-render the image – Gowtham Pendyala Jun 14 '18 at 21:07
  • okay, i feel that initially your profilepicuri is null then later on you fetch data thats why you see source.uri is null message. you should try logging inside the render method so that you know if your component is rerendering or not when setstate is called – nishant Jun 14 '18 at 21:20
0

It looks like it may be because you're loading the image asynchronously, so react is trying to render the Thumbnail component before the uri is populated. You could use a boolean to track whether the image has been fetched and lazily render the component.

Here's an example of a LazyImage component: https://medium.com/@awesomejerry/image-with-react-native-98e7363f6dfe

Jake Johnson
  • 1,856
  • 1
  • 17
  • 26
  • I have tried something like this . if (img) { thumbnail = console.log('Thumnail img ') } else { thumbnail = null; } even then it did not work – Gowtham Pendyala Jun 15 '18 at 17:09