CODEWITHSUNDEEP
reactjsfirebasereact-nativegoogle-cloud-firestore
E.P
E.P

Reputation: 117

How to show an array of images in react native?

how to show an array of images in react native ?, the images use URLs and are stored in firestore database this is the exact structure it is store as on the database lodash is being used to change the object of user to an array [![the database structure][1]][1]

Object {
"book": "Robin hood", 
"photos": Array [ "https://picsum.photos/id/1001/5616/3744", "https://picsum.photos/id/1002/4312/2868", "https://picsum.photos/id/1003/1181/1772", ],
 }

i tried this but gotten and error saying ''Error while updating property 'src' of a view manged by: RCTImageView null Value for uri cannot be cast from ReadableVativeArray to String''

return this.props.user.map((details) => {
      return (

        <View >

        <Text>{details.book}</Text>

          <Image style={{ width: 350, height: 300 }} source={{ uri: details.photos }} />

        </View>

        );

    });

I also tried this,the console log is showing the images URLs and other data that was fetch, and the book details are showing but for some reason the images aren't showing on the screen 

 return (
      <View style={{ flex: 1 }}>

        {this.props.user.map(details => {
          details.photos.map((image) => {
            console.log(image)
            return (
              <View>
                <Image style={{ width: 350, height: 300 }} source={{ uri: image }} />
              </View>
            );
          })
          return (
            <View>
                  <Text style={styles.b}>{details.book}</Text>
            </View>
          )
        })}
      </View>
    )


  [1]: https://i.sstatic.net/dLvci.png

Upvotes: 0

Views: 4924

Answers (2)

azundo
azundo

Reputation: 6052

The result of details.photos.map in your second example is not being included in the return value. Instead you want something like:

 return (
      <View style={{ flex: 1 }}>

        {this.props.user.map(details => {
          // save the result of the map call to a variable
          const photos = details.photos.map((image) => {
            console.log(image)
            return (
              <View key={image}>
                <Image style={{ width: 350, height: 300 }} source={{ uri: image }} />
              </View>
            );
          })
          return (
            <View>
                  // note the addition of the photos here
                  {photos}
                  <Text style={styles.b}>{details.book}</Text>
            </View>
          )
        })}
      </View>
    )

Upvotes: 2

Roi Dayan
Roi Dayan

Reputation: 907

Assuming that the "Object" refers to "this.props.user" so, you try to iterate on an object and you can't, you can only iterate on an array, like the photos array.

try this:

return (
  <View style={{ flex: 1 }}>

    <Text>{this.props.user.book}</Text>

    {this.props.user.photos.map((photo) => {
      return (
        <Image style={{ width: 350, height: 300 }} source={{ uri: photo }} />
      );
    })}

  </View>
);

Upvotes: 1

Related Questions