CODEWITHSUNDEEP
reactjsfirebasereact-nativegoogle-cloud-firestore
user17713871
user17713871

Reputation:

Image is not display only image area showing firebase React Native

I am retrieving images from Firestore but it shows this in image area. I cannot solve this problem.

enter image description here

Method:

useLayoutEffect(() => {
    const unsubscribeimage = db
        .collection("token")
     
        .onSnapshot((snapshot) =>
            setPhoto(
                snapshot.docs.map((doc) => ({
                    id: doc.id,                
                    dataimg: doc.data(),
                    
                    
                }))
            

            )

        );
    return unsubscribeimage;
    

    
}, []);

My return code:

 <View { photo.map(({dataimg,id }) =>
            
            <View  style={styles.sender} key={id}>
            <Avatar source={{uri: dataimg}} style={{ width: 200, height: 200 }}  />
            </View>

I am fetching this image:

enter image description here

Upvotes: 0

Views: 744

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 85201

dataimg: doc.data()

doc.data() is going to return the entire document object, which in this case looks like:

{
  imageURL: "https://**etc*",
}

So later when you do source={{uri: dataimg}}, uri is the entire object, not just the uri. Instead you need to do source={{uri: dataimg.imageURL}}.

Upvotes: 1

Related Questions