Render images sources from parsed array of objects in react native

Question

I\'m building a react native application which suppose to use some \'meta-data\' objects as sources. I\'m parsing each object in array and returning a JSX layout for each

Answer 1

You can do something like this

  Details = [
        {
          type: "Party",
          image: require("../../../images/icons/photographer/Party.png")
        },
        {
          type: "Wedding",
          image: require("../../../images/icons/photographer/Wedding.png")
        },
        {
          type: "Architecture",
          image: require("../../../images/icons/photographer/Arhitecture.png")
        },
        {
          type: "Christening",
          image: require("../../../images/icons/photographer/Christening.png")
        }
  ];

  render() {
    let renderPhotoTypes = () => {
      let type = [];

      this.Details.map( ( item )=> {
        type.push(
          <View style={styles.imageSelectItem} key={item.type}>
            <TouchableWithoutFeedback>
              <View>
                <View style={styles.imageContainer}>
                  <Image style={styles.image} source={item.image}/>
                </View>
                <Text style={styles.text}>{item.type}</Text>
              </View>
            </TouchableWithoutFeedback>
          </View>
        );
      } );

      return type;
    };