Reputation: 33
I tried to get a grid list of video files saved on my device as video gallery in my react native app, but I think there's something am not doing right, I used react-native-fs to fetch the files from my custom folder I created. I get a typeError message.
state = {
index: null
}
componentWillMount() {
RNFS.readDir(RNFS.ExternalStorageDirectoryPath + "CustomFolder Videos")
.then((result) => {
console.log('GOT RESULT', result);
return Promise.all([RNFS.stat(result[0].path), result[0].path]);
})
.then((statResult) => {
let videos = [];
var allowedExtensions = /(\.avi|\.mp4|\.mov|\.wmv|\.avi)$/i;
statResult.forEach(item => {
if (item.isFile() && !allowedExtensions.exec(item.originalFilepath)) {
videos.push(item);
}
});
console.log(videos)
})
}
setIndex = (index) => {
if (index === this.state.index) {
index = null;
}
this.setState({
index
})
}
render() {
return ( <
View style = {
styles.container
} >
<
ScrollView contentContainerStyle = {
styles.scrollview
} {
...this.state.videos.map((p, i) => {
const isSelected = i === this.state.index;
const divide = isSelected && this.share === true ? 1 : 3;
return ( <
Video source = {
{
uri: videos
}
}
style = {
{
opacity: i === this.state.index ? 0.5 : 1,
width: width / divide,
height: width / divide
}
}
key = {
i
}
underlayColor = 'transparent'
onPress = {
() => this.setIndex(i)
}
ref = {
ref => {
this.player = ref;
}
} // Store reference
onError = {
this.videoError
} // Callback when video cannot be loaded
/>
)
})
} >
<
/ScrollView> <
/View>
);
}
}
Upvotes: 1
Views: 968
Reputation: 1105
change you render methods like below, that will works,
state = {
index: null,
videos:[]
}
render() {
return (
<View style={styles.container}>
<ScrollView
contentContainerStyle = {styles.scrollview}
{
this.state.videos&& this.state.videos.length>0 && this.state.videos.map((p, i) => {
const isSelected = i === this.state.index;
const divide = isSelected && this.share === true ? 1 : 3;
return(
<Video
source={{uri: videos}}
style={{opacity: i === this.state.index ? 0.5 : 1, width: width/divide, height: width/divide}}
key={i}
underlayColor='transparent'
onPress={() => this.setIndex(i)}
ref={ref => {
this.player = ref;
}} // Store reference
onError={this.videoError} // Callback when video cannot be loaded
/>
)
})
}
>
</ScrollView>
</View>
);
}
}
the point is that
this.state.videos
is empty till the api response will get
Upvotes: 1
Reputation: 89
videos is not defined in the state. You need to initialise state first and then setstate to update the values.
Upvotes: 0