CODEWITHSUNDEEP
javascriptfirebaseasync-awaitreact-nativefirebase-storage
Margok
Margok

Reputation: 55

How to display Image from Firebase storage in React-native?

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 component. 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.

Upvotes: 4

Views: 7397

Answers (1)

XplosiVe06
XplosiVe06

Reputation: 646

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}} />
);

Upvotes: 9

Related Questions