Custom VideoPlayerComponent:

This is a Custom Video Player List Component which helps us play a list of videos and scroll through them in either a vertical or horizontal list. This component starts playing the video when we the data is loaded and pauses the current Video when we scroll down to the next video. If we scroll back up the video will fom where it was paused when we started scrolling. This also has a mute functionality built into it, wherein we can mute or unmute videos while scrolling through them.

It takes the following props:

1. data => Here we can send the array of objects which can contain the following keys: a. media_url : contains the video link to be played b. thumbnail_image_url : contains thumbnail which shows up when video takes time to buffer c. created_by.name : shows the name of whoever create the video, this comes up as header in the video d. description: desciption of the video which comes up as a footer of the video e. likes and total_claps: shows likes and total claps count information and comes as a part of the footer in the video
2. textColor => This prop is used to change the color of the header and footer text displayed on the Video Component.By default it is kept as white.
3. cardGradient => There is Gradient card used to enhance the readability of the text on the Video and it has a Gradient. We can change the gradient by passing a object to this prop, which can have gradient start and end value like so. Eg: cardGradient = { start: 'rgba(0,0,0,0.1)', end: 'rgba(0,0,0,0.6)', } // This is the default value for this props.We can customise the start and end gradient colors accordingly.
4. vertical => This prop can be used to change the direction in which we scroll the VideoPlayer List.We can scroll it vertically or horizontally. We can pass true for vertical scroll and false for horizontal scroll.

Installation => Run npm i react-native-videoplayerlist, then go to ios folder and do pod install.

Usage =>

import VideoPlayerList from 'react-native-videoplayerlist'

<VideoPlayerList data={data} vertical={false} textColor={'green'} cardGradient={{ start: 'rgba(0,0,0,0.1)', end: 'rgba(0,0,0,1)', }} />