How to display particular image by clicking one flatlist images in react native? - react-native

Question

I have a flat list that returns multiple images. but I want to show an image on another view by clicking FlatList image. when I click on FlatList image that particular image will be shown in another view. how to do please suggest.
Here is my FlatList:
<FlatList
data={this.state.images}
renderItem={this.renderGalleryImage}
keyExtractor={(item, index) => index}
horizontal={true}
/>;
renderGalleryImage = ({ item }) => {
return <Image source={item} style={styles.moreImg} />;
};
and here is the view where I want to display
<View>
</View>

Answer 1

You can approach this problem in several ways; The easiest way is to wrap the renderGalleryImage return statement with a Touchable primitive and add an onPress event handler.
You can use the useState hook in tandem to save the selected Image from the FlatList.
Here's a sample code snippet.
const [selectedItem, setSelectedItem] = useState("");
renderGalleryImage = ({ item }) => {
const setImage = () => setSelectedItem(item);
return (
<TouchableWithoutFeedBack onPress={() => setSelectedItem(item)}>
<Image source={item} style={styles.moreImg} />;
</TouchableWithoutFeedBack>
);
};
return <View>{selectedItem && <Image source={{ uri: selectedItem }} />}</View>;
Note: If you're using class-based components, follow this approach:
export default class App extends Component {
state = {
selectedImage: "",
};
renderGalleryImage = ({ item }) => {
const setImage = () => this.setState({ selectedImage: item.image });
return (
<TouchableWithoutFeedback onPress={setImage} style={{ margin: 30 }}>
<Image
source={{ uri: item.image }}
style={{ width: 100, height: 100 }}
/>
</TouchableWithoutFeedback>
);
};
render() {
const renderImage = () => (
<View>
<Image
source={{ uri: this.state.selectedImage }}
style={{ width: 100, height: 100,borderColor:'red',borderWidth:1 }}
/>
</View>
);
return (
<View>
<FlatList data={users} renderItem={this.renderGalleryImage} />;
<Text>Selected Image</Text>
{renderImage()}
</View>
);
}
}
Here's the link to a working demo on Expo.