React Native - How to show one specific Image from Camera Roll using TouchableHighlights

Question

My Goal is to show the Image in that white space whenever is touched (TouchableHighlight) from CameraRoll to the <Image/>. I can't find any tutorial to do this and I just have a little knowledge in JavaScript so I decided to ask a question in Stack Overflow.

I just want an idea to make this Goal done. Thank you, guys!

This is the image to be understandable, it is more of like Instagram.

Here are my Codes:

state = {
photos: [],
 index: null,
 pickedImage: null
}

componentDidMount() {
 requestExternalStoragePermission();
 this.getPhotos();
};

setIndex = (index) => {
if (index === this.state.index) {
  index = null
}
this.setState({ index })
};

getPhotos = () => {
CameraRoll.getPhotos({
  first: 200,
  assetType: 'All'
})
.then(res => {
  this.setState({ 
    photos: res.edges,
  });
})
.catch((err) => {
  console.log('Error image: ' + err);
});
};

render() {
return(
  <View style={styles.container}>
    <Image source={this.state.index} style={styles.image}/>
    <ScrollView contentContainerStyle={styles.scrollView} showsVerticalScrollIndicator={false}>
      {this.state.photos.map((photos, index) => {
        return(
            <TouchableHighlight 
              style={{opacity: index === this.state.index ? .5 : 1}}
              onPress={() => this.setIndex(index)}
              key={index}
              underlayColor='transparent'
            >
              <Image
                style={{width: width / 3, height: width /3}}
                source={{uri: photos.node.image.uri}}
                resizeMode='cover'
              />
            </TouchableHighlight>
        );
      })}
    </ScrollView>
  </View>
);
}

Not very clear about your question.You want to go to a detail page show the image?In your code, you will just change the opacity of the selected image. — Devin Gong, Jun 26 '19 at 08:13
`TypeError: evaluating 'this.state.photos[this.state.index].node`. I follow your code, but I get this error. — Liza Catherine Ombyaw, Jun 26 '19 at 08:38

sachin mathew · Accepted Answer · 2019-06-26T09:47:55.490

First thing first the syntax you are using <Image source={this.state.index} style={styles.image}/> is WRONG it should be like <Image source={{uri : this.state.pickedImage}} style={styles.image}/>

your state initially have 3 values in it

state = {
photos: [],
 index: null,
 pickedImage: null
}

in your <TouchableHighlight/> button click you are saving the index of the image you clicked to the state and you are passing that index in the Image component .That is not enough to Show the image

Solution

first you have to save the image you clicked to state by doing

onPress={() => this. setState({pickedImage: photos.node.image.uri})}

console log this.state.pickedImage will give you the uri to the image

and pass that uri to Image component

<Image source={{uri : this.state.pickedImage}} style={styles.image}/>

The final code looks like

<ScrollView contentContainerStyle={styles.scrollView} showsVerticalScrollIndicator={false}>
  {this.state.photos.map((photos, index) => {
    return(
        <TouchableHighlight 
          style={{opacity: index === this.state.index ? .5 : 1}}
          onPress={() => this. setState({pickedImage: photos.node.image.uri})}
          key={index}
          underlayColor='transparent'
        >
          <Image
            style={{width: width / 3, height: width /3}}
            source={{uri: photos.node.image.uri}}
            resizeMode='cover'
          />
        </TouchableHighlight>
    );
  })}
</ScrollView>



<Image source={{uri : this.state.pickedImage}} style={styles.image}/>

you are receiving error TypeError: evaluating 'this.state.photos[this.state.index].node because your index state initially have null value in it. — sachin mathew, Jun 26 '19 at 09:17
The first one works! Thank you. Can you explain to me how that codes works? — Liza Catherine Ombyaw, Jun 26 '19 at 09:26
Thank you so much! That info really help and add to my knowledge. Thanks again! — Liza Catherine Ombyaw, Jun 26 '19 at 10:28

React Native - How to show one specific Image from Camera Roll using TouchableHighlights

1 Answers1