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

Question

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.

I don't have React experience, but related issues suggest storing the return value of the async function in the component's state: stackoverflow.com/questions/59070347/… stackoverflow.com/questions/55929760/… — bags
– bags, Commented Jul 16, 2020 at 20:46

XplosiVe06 · Accepted Answer · 2021-01-07 15:48:18Z

9

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

edited Jan 7, 2021 at 15:48

answered Jan 7, 2021 at 15:38

XplosiVe06

6567 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related