Unable to show multiple images in react native

Question

I am working on a react native application. I have to show multiple images. My code is:

render() {
  if (!this.props.data) {
    return(<Text style={styles.noIMG}>Keine Bilder vorhanden</Text>)
  }
  return (
    <View>
      <View style={styles.view}>
        {
          (
            this.props.data == '' || 
            this.props.data == null || 
            this.props.data == undefined
          ) ? null :
          this.props.data.map(img => {
            console.log(img.image);
            console.log("Image displayed");
            return(
            <TouchableHighlight 
              key={this.uuidv4()} 
              onPress={()=>{
                this.setState({zoom: img.image})
              }}
            >
              <Image 
                style={styles.imagePreview} 
                source={{uri: img.image}} 
              />
            </TouchableHighlight>)
        })
        }
      </View>
      { this.state.zoom ? 
        <Card>
          <PinchZoomView scalable={false}>
            <FitImage resizeMode="contain" source={{uri: this.state.zoom}}/>
          </PinchZoomView>
          <TouchableOpacity 
            style={styles.btn} 
            onPress={() => this.deleteImage(this.state.zoom)}>
            <Text style={{color:'white'}}>Delete Image</Text>
          </TouchableOpacity>
        </Card> : 
        <View style={styles.container}><Text>Bild zum vergrößern antippen.</Text></View>
      }
    </View>
  );
}

I do get two images in "props.data" but on screen only one image is displayed. The css code is:

const styles = StyleSheet.create({
    imagePreview:{
    width: 100,
    height: 100,
    margin: 5
    }
});

The inner view's check for falsey `this.props.data` is unreachable because of the outer truthy check. I suspect you may have some CSS styling issue, can you provide a more complete example that reproduces your issue? The entire component code, stylesheet, etc.. — Drew Reese, Sep 24 '19 at 14:19
oh, thanks for finding that issue, i ll update the code. I have edited the question and added the CSS code too @DrewReese — Waleed Naveed, Sep 24 '19 at 14:26

score 1 · Answer 1 · answered Nov 11 '19 at 11:27

render() {
  return (
    <View style={{ flex: 1, flexDirection:'row'}}>
      {data.map((value, i) => {
        return (
          <View key={i}>
           <TouchableOpacity>
            <Image
              source={{ uri: value.imageUrl }}
              style={{ width: 50, height: 50 }}
              resizeMode={"stretch"}
            />
          </View>
         </TouchableOpacity>
        );
      })}
    </View>
  );
}

score 0 · Answer 2 · answered Sep 24 '19 at 14:21

Try using a FlatList

<FlatList   
    data={this.props.data}
    extraData={this.state}
    renderItem={({ item }) => {
             return (
            <View>
                <TouchableOpacity onPress={() =>  this.setState({zoom: img.image})}>
                    <Image
                        source={{ uri: item.image }}
                        PlaceholderContent={<ActivityIndicator />}                     
                    />
                </TouchableOpacity>

            </View>
        )
    }}
    keyExtractor={(item, index) => index.toString()}
/>

Unable to show multiple images in react native

2 Answers2