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>
);
}

Answer 1

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}/>