I am attempting to use the React Natie CameraRoll module to save and load videos from my device's camera roll. I can save videos to the camera roll, but am unable to load those videos in my app.
Here is the code I have right now:
constructor() { super(); this.state = { videos: [] }; } async componentDidMount() { // try { CameraRoll.getPhotos({ first: 3, // groupTypes: 'Album', // groupName: 'VMET', assetType: 'Videos', }) .then(r => { this.setState({ videos: r.edges }); }) .catch((err) => { console.error("error loading videos", err); }); } render() { const { videos } = this.state; console.log("hi") console.log(videos) return (<View style={styles.container}><Text style={styles.headline}>Videos</Text> {videos.map(({ p, i }) => (<Video id={i} source= {{uri: p.node.photo.uri}} /> ))}</View> ); }
When I console.log(videos)
, I get output that looks like this:
{ node: { timestamp: 1595280410, type: 'video', group_name: 'All Photos', location: null, image: { width: 1920, height: 1080, filename: 'BA41EB20-FC89-4687-84A9-F3F46B7AA61A.mov', fileSize: 2418882, playableDuration: 1.935, uri: 'ph://7A64B0B2-883E-470A-9BE5-D9FDD66AB061/L0/001' } } },
but am getting the error that
undefined is not an object (evaluating 'p.node')
Does anyone know how to fix this? It seems like the videos are being saved/loaded properly, but for some reason I am unable to access the URI parameter.