Question 295841 in React native Question posted in
The official React Native documentation can be found here.

Firebase Storage & React Native, can't call refFromURL() with dynamic value as parameter correctly

I’m building a simple React Native mobile app for online orders. I store all product-relevant information in Firestore documents as fields (name, price, image URL, etc.). I store the images in Firebase Storage. When I want to create an image reference, I use

const imageRef = storage().refFromURL('gs://testapp-1x2y3z.firebase.com/pics/TestImage.jpg');

The program also works correctly with a static string value. However, when I want to read ImageURL from Firestore document fields e.g.

    const assortmentRef = firestore().collection('Test_Store').doc('Assortment');,
    imageRef = storage().refFromURL(assortmentRef.ImageURL);

an error is triggered even though the string value of the

assortmentRef.ImageURL

has exactly the value of

gs://testapp-1x2y3z.firebase.com/pics/TestImage.jpg I

assume the problem is because reactive native has asynchronous operations. Does anyone have a solution for this? My goal is to enter dynamic values that I can derive from document fields instead of static URLs. Error message:


    Possible Unhandled Promise Rejection (id: 45):
    Error: firebase.storage().refFromURL(*) 'url' must be a string value and begin with 'gs://' or 'https://'.

Whole code:

const ReadAssortment = ({ navigation }) => {
  const [shoeData, setShoeData] = useState([]);

  const fetchData = async () => {
    const assortmentRef = firestore().collection('Test_Store').doc('Assortment');
    const shoesCollection = assortmentRef.collection('Shoes');

    try {
      const querySnapshot = await shoesCollection.get();
      const dataPromises = [];

      querySnapshot.forEach((doc) => {
        const imgURL = doc.data().pictureURL;
        console.log(imgURL);
        
        const imageRef = storage().refFromURL(imgURL);

        dataPromises.push(
          imageRef.getDownloadURL().then((url) => ({
            ...shoeData,
            imageUri: url,
          }))
        );
      });

      const shoeDataWithImages = await Promise.all(dataPromises);
      setShoeData(shoeDataWithImages);
    } catch (error) {
      console.error('Error fetching:', error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <View style={styles.container}>
      {shoeData.map((shoe, index) => (
        <View key={index}>
          <Text>Name: {shoe.Name}</Text>
          <Text>Price: {shoe.Preis}</Text>
          <Text>Info: {shoe.InfoText}</Text>
          {shoe.imageUri && <Image source={{ uri: shoe.imageUri }} style={styles.image} />}
        </View>
      ))}
      <Button title="Back" onPress={() => navigation.goBack()} />
    </View>
  );
};

Regards,
Bob

And yes, I tried to parse the value of ImageURL within single and double quotation marks, but it simply doesn’t work. I would be very grateful for any suggestion for a solution.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved it that way:

        const querySnapshot = await firestore().collection('Test_Store').doc('Assortment').collection(collectionName).get();
    for (const doc of querySnapshot.docs) {
        const product = doc.data();           
       if (product.pic) {
          try {
            const imageUrl = await storage().ref(product.pic).getDownloadURL();
            product.imageUrl = imageUrl;
          } catch (error) {
            console.error("Error fetching product image: ", error);
          }
        }
    }

  2. 0

    If I correctly understand your question you need to fetch the Firestore Document.

    With const assortmentRef = firestore().collection('Test_Store').doc('Assortment'); you only define a DocumentReference

    You need to call the get() method of this DocumentReference, as explained in the documentation: Something along the folllowing lines (with async/await syntax, while the documentation shows the then() syntax)

    const assortmentRef = firestore().collection('Test_Store').doc('Assortment');
const docSnap = await assortmentRef.get()
if (docSnap.exists) {
    const imageURL = doc.data().ImageURL;
    const imageRef = storage().refFromURL(imageURL);
    // ...
} else {
    // doc.data() will be undefined in this case
    console.log("No such document!");
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search