How can I show multiple videos with React Native Video in React Native?

Question

How can I show multiple videos with the React Native Video component of React Native?

Here is the React Native Video GitHub repository.

Answer 1

You can store videos in Array like you stored array in var array and use Flatlist and pass data as the array you stored in array variable, then render the Flat list items as video tag.

The flat list will show all the videos in a list.

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native';

const Videos = [
  {
    Videourl: 'url1',
  },
  {
    Videourl: 'url2',
  },
  {
    Videourl: 'url3',
  },
];


export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={({ item }) =>
      <Video source={item.Videourl}  
   ref={(ref) => {
     this.player = ref
   }}                                      
   onBuffer={this.onBuffer}               
   onError={this.videoError}               
   style={styles.backgroundVideo} />}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 10,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});