My RNCameraRoll videos and photos are saved on my custom folder in my device, I want to display the videos in my app...I used getPhotos method to display or create my photo gallery, but for videos it displays only images.
setIndex = (index) => {
if (index === this.state.index) {
index = null
}
this.setState({ index })
}
getPhotos = () => {
CameraRoll.getPhotos({
first: 20,
groupTypes: 'Album',
groupName: 'Vocajam Videos',
assetType: 'Videos'
})
.then(r => this.setState({ photos: r.edges}))
}
I tried using video package to play the videos, but I discovered all the videos where playing at the same time, and there were no visuals, my screen is blank, only audio was playing.
What am I doing doing wrong. Please your help will be appreciated, thanks in advance.
<ScrollView
contentContainerStyle={styles.scrollView}>
{
this.state.photos.map((p, i) => {
const isSelected = i === this.state.index;
const divide = isSelected && this.share === true ? 1 : 3;
return (
<TouchableHighlight
style={{opacity: i === this.state.index ? 0.5 : 1}}
key={i}
underlayColor='transparent'
onPress={() => this.setIndex(i)}
>
<Image
style={{
width: width/divide,
height: width/divide
}}
source={{uri: p.node.image.uri}}
/>
<TouchableOpacity style={styles.fullScreen} onPress={() => {this.setState({paused: !this.state.paused})}}>
<Video
style={{
width: width/divide,
height: width/divide
}}
source={{uri: p.node.videoUri}}
style={styles.fullScreen}
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={() => { console.log('Done!') }}
repeat={true}
/>