I am trying to display my image from Firebase storage in my React-native app. I get the download URL through this async function:

async function getImage() {
  const url = await storage()
  .ref('garnele.jpg')
  .getDownloadURL()
  console.log(url)
  return url
}

I am trying to display my image from Firebase storage in my React-native app. I get the download URL through this async function:

async function getImage() {
  const url = await storage()
  .ref('garnele.jpg')
  .getDownloadURL()
  console.log(url)
  return url
}

My problem is how to pass the URL to the Image ponent. I tried:

<Image
    source={{uri: getImage() }}
 />

but it only returns the object.

I also found getImage().then(result => console.log(result)) - but I don't know how to use it in my case.

• javascript
• firebase
• async-await
• react-native
• firebase-storage

• I don't have React experience, but related issues suggest storing the return value of the async function in the ponent's state: stackoverflow./questions/59070347/… stackoverflow./questions/55929760/… – bags Commented Jul 16, 2020 at 20:46
• thanks a lot, that was the post i was Looking for! – Margok Commented Jul 16, 2020 at 21:32

1 Answer 1

It is probably not the cleaner solution as I'm still learning react native and firebase products, but, here is what I did :

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

@react-native-firebase and doc

const [imageUrl, setImageUrl] = useState(undefined);

useEffect(() => {
    storage()
      .ref('/' + 'FA984B65-38D4-44B1-BF02-4E7EF089773B.jpg') //name in storage in firebase console
      .getDownloadURL()
      .then((url) => {
        setImageUrl(url);
      })
      .catch((e) => console.log('Errors while downloading => ', e));
  }, []);

return (
    <Image style={{height: 200, width: 200}} source={{uri: imageUrl}} />
);