Selecting pictures in react native - react-native

Question

I am using the react native camera roll function to retrieve videos from my phone's camera roll. I am able to get the videos to show up in a gallery in my app, but I can't seem to figure out how to make a button to open up this video and actually play it. Here is my code so far:
import React, {Component} from 'react';
import {
View,
Image,
FlatList,
PermissionsAndroid,
Platform,
} from 'react-native';
import CameraRoll from '#react-native-community/cameraroll';
class showVideo extends Component {
constructor(props) {
super(props);
this.state = {
data: '',
};
}
async componentDidMount() {
if (Platform.OS === 'android') {
const result = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
{
title: 'Permission Explanation',
message: 'ReactNativeForYou would like to access your photos!',
},
);
if (result !== 'granted') {
console.log('Access to pictures was denied');
return;
}
}
CameraRoll.getPhotos({
first: 50,
assetType: 'All',
})
.then(res => {
this.setState({data: res.edges});
})
.catch(error => {
console.log(error);
});
}
render() {
return (
<View>
<FlatList
data={this.state.data}
numColumns={3}
renderItem={({item}) => (
<Image
style={{
width: '33%',
height: 150,
}}
source={{uri: item.node.image.uri}}
/>
)}
/>
</View>
);
}
}
export default showVideo;
Any pointers or recommendations? All I have is a static overview of videos pulled from my camera roll in my app.

Answer 1

I may suggest you to use <TouchableHighlight /> added outside the <Image/> tag to catch when onPress. Is this what you want? It could know just press on image.
import { TouchableHighlight } from "react-native";
<TouchableHighlight onPress={() => this.functionToPlayVideo(item.node.image.uri)}>
<Image
style={{
width: '33%',
height: 150,
}}
source={{uri: item.node.image.uri}}
/>
</TouchableHighlight>