2

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}
                            />
digiware
  • 33
  • 4

0 Answers0