How to play list of videos sequentially by default without clicking next button accessing from local files of the device using react native cli

Question

const filePath = `${dirs.DownloadDir}/samplevideos/1.mp4`;
const filePath1 = `${dirs.DownloadDir}/samplevideos/2.mp4`;
const paths = [{path:filePath},{path:filePath1}]

 {paths&&paths.map((data,inx)=>{
      return  <Video key={inx} source={{uri:data.path }}
                     volume={50}
                     resizeMode="cover"
                     style={styles.videoStyle}
              />
    })}

I have tried this but playing only last video. Any help will be appreciated.

Answer 1

I found solution for this question, So posting here it may help someone in the future.

there is a onEnd callback available in react-native-video based on that increasing index of next video

import React,{useEffect,useState} from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  Dimensions,
  PermissionsAndroid
} from 'react-native';

import Video from 'react-native-video';
import RNFetchBlob from 'rn-fetch-blob';

const FILE_PATHS = `${RNFetchBlob.fs.dirs.DownloadDir}/samplevideos/`;

const App = () => {

  const [videoPaths,setVideosPath] = useState([]);
  const [inxofCurrentVideo,setVideoIndex] = useState(0);

  useEffect(() => {
    PermissionsAndroid.RESULTS.GRANTED;
    getVideoPaths();
  },[])


  const getVideoPaths = ()=>{
    RNFetchBlob.fs.ls(FILE_PATHS).then(files => {
      setVideosPath(files);
    }).catch(error => console.log(error))
  };
      const onEnd =()=> {
    if((inxofCurrentVideo < videoPaths.length) || (videoPaths.length === inxofCurrentVideo)){
      setVideoIndex(inxofCurrentVideo+1);
    }
  }

  return (
    <View style={styles.videoContainer}>
      <View style={styles.row}>
      {videoPaths.length>0&&<Video onEnd = {onEnd}
        source={{uri:(FILE_PATHS + videoPaths[inxofCurrentVideo])}}
        volume={50}
        resizeMode="cover"
        style={styles.videoStyle}
       /> }      
      </View>

    </View>
  );
};

const styles = StyleSheet.create({
  videoContainer: {
    flex: 1,

   // backgroundColor: 'black',
  },
  row: {
    flex: 1,
    flexDirection: "row",
    width: '100%'
  },
  col6: {
    width: "50%"
  },
videoStyle: {
    position: 'absolute',
    top: 0,
    bottom: 5,
    left: 0,
    right: 0,
},
});

export default App;