React Native: How to play video in FlatList - reactjs

Question

I have been in this code for a while in trying to list my videos from local directory to my react native app. I have asked couple of questions as a newbie in this regards earlier as I started the project but did not get any answer. Somehow I managed to get to this point.
I have been able to get my videos from my local directory but the issue am having now is that my videos are only showing grey thumbnails, and when I tap on any video it gives a ReferenceError: Can't find variable: videos
Below is my screenshot and my code. Please I need to correct the wrong things am doing on this code. Thanks in advance for your help.
constructor(Props) {
super(Props);
this.state = {
videos: [],
playing: false,
screenType: 'content',
resizeMode: 'contain',
currentTime: 0,
videoPlayer: null,
duration: 0,
isFullScreen: false,
isLoading: true,
paused: false,
playerState: PLAYER_STATES.PLAYING,
};
This is my constructor
componentDidMount() {
var filePath = RNFetchBlob.fs.dirs.MovieDir + '/Voc Vedos/';
RNFetchBlob.fs.ls(filePath)
.then(files => {
this.setState({videos:files});
console.warn(files);
}).catch(err=>alert(err.toString()))
}
This is where I got my videos from my local directory on my device
render() {
const { duration, currentTime, paused, overlay } = this.state
return(
<View style={styles.container}>
<FlatList
data={this.state.videos}
keyExtractor={item=>item}
ItemSeparatorComponent={() => { return (<View style={styles.separator} />) }}
// viewabilityConfig={this.viewabilityConfig}
// onViewableItemsChanged={this.onViewableItemsChanged}
// viewabilityConfig={{
// itemVisiblePercentThreshold: 95
// }}
numColumns={3}
renderItem={({ item, index, separators }) => (
<TouchableOpacity
onPress={() => this._onPress(item)}
style={{width:100,height:100}}>
<View
style={{width:100,height:100, margin:8}}
>
<Video
source ={{uri: '/storage/emulated/0/Movies/Voc Vedos/'+{item}}}
ref={(ref: Video) => { this.video = ref }}
style={{width:100,height:100}}
rate={this.state.rate}
paused={this.state.paused}
volume={this.state.volume}
muted={this.state.muted}
resizeMode={this.state.resizeMode}
onLoad={this.onLoad}
onProgress={this.onProgress}
onEnd={this.onEnd}
onAudioBecomingNoisy={this.onAudioBecomingNoisy}
onAudioFocusChanged={this.onAudioFocusChanged}
/>
<MediaControls
isFullScreen={this.state.isFullScreen}
duration={duration}
isLoading={this.state.isLoading}
mainColor="purple"
onFullScreen={noop}
onPaused={this.state.onPaused}
onReplay={this.state.onReplay}
onSeek={this.state.onSeek}
onSeeking={this.state.onSeeking}
playerState={this.state.playerState}
progress={currentTime}
/>
</View>
</TouchableOpacity>
)}
/>
</View>
This is my render code.
please I need help on how to display my videos correctly and play video when tapped

Answer 1

according to react-native-video docs:
for file source in device storage, must write 'file://' begin of path
Example:
source={{ uri: 'file:///sdcard/Movies/sintel.mp4' }}
read document https://github.com/react-native-community/react-native-video#source