2

I am trying to do something similar to what Instagram has for their select video screen. Where a grid of local videos that can be uploaded and it'll kind of 'preview' the one that is currently selected above the grid itself.

I'm using the react-native-community/cameraroll and this is the code I'm trying to get the Videos with.

CameraRoll.getPhotos({first: 20, assetType: "All"})
        .then(r => this.setState({ videos: r.edges }))
        .catch((err) => {
            console.log('getVideosErr:' + err)
        })

and I am trying to display the grid with some sample code I found and tried playing around with:

<ScrollView>
     {this.state.videos.map((p, i) => {
          return (
           <Video
              key={i}
              style={{
              width: 300,
              height: 100,
           }}
            source={{ uri: p.node.video.uri }}
            />
        ;
})}

I have one video on the simulator but I am getting an error saying "TypeError: Cannot read property 'uri' of undefined" everytime I try grabbing the video.

Not so sure what the issue is right now, I followed the samples on the documentation for the cameraroll but haven't had any luck yet. Any advice/examples would be appreciated.

dmouawad
  • 539
  • 1
  • 5
  • 13

1 Answers1

0

Use react-native-media-helper

implementation:

import MediaHelper from 'react-native-media-helper'

  <MediaHelper
    numVideos={20} // for android
    media='Videos'   // for ios
    num={20}      // for ios
    onCancel={() => this.setState({visible: false})}
    onSelectedItem={(item) => alert(JSON.stringify(item))}
  />
Vinil Prabhu
  • 1,279
  • 1
  • 10
  • 22