React Native: Rendering an Image component with uri provided through state variable

Question

A React Native learner here. I am trying to render a Functional Component as shown below. I am fetching the URI through the firebase which get fetched after 1-2 seconds time lag. Once fetched, I update my state variable.

import storage from '@react-native-firebase/storage';

const SearchResultCard = ()=>{
  const [imageURL, setImageURL] = useState('https://www.publicdomainpictures.net/pictures/200000/nahled/plain-red-background.jpg');  // Some placeholder image.
  var storageRef = storage().ref();
  storageRef.child("photos/flower.jpg").getDownloadURL().then((url)=>{console.log(url); setImageURL(url);});  // setting the valid image URL 

  setTimeout(()=> console.log("++++URL fetched: ", imageURL), 2000);  // prints a correct URL after 2 seconds.

  return (
  <View>
    <Image style={styles.SearchResultImage}
          source={{
            uri:
            {imageURL},
          }}
    />
  </View>
  );
}

....
....rendering the SearchResultCard Component
....

However in device, it shows error:

I confirmed, fetching of URL after obvious time lag is successful. My confusion here is, how I can provide Image source.uri through state variable ? Providing a hardcoded url works fine.

Answer 1

The uri property accept the string url, and you are passing url as object. Please pass string in uri as below :

<Image 
  style={styles.SearchResultImage}
  source={{
    uri: imageURL, // remove braces
  }}
/>