i am making a Android video gallery app like YouTube using React-Native for that i am using 'react-native-video' , package While using it i had a problem with video auto-play option all videos are playing at a time in the background without viewing the videos and another problem is all videos controls={true} are showing when scrolling the video and they are not moving along with videos.I am doing all this inside FlatListMy code :
import React, { Component, PropTypes } from "react";import { AppRegistry, Image, Platform, StyleSheet, Text, View, TextInput, Button, TouchableHighlight, Alert, TouchableOpacity, ScrollView, ColorPropType, FlatList, SectionList, Dimensions, Keyboard, Modal, NativeModules, SafeAreaView, StatusBar, ViewPropTypes,} from 'react-native';import Video from 'react-native-video';export default class HomeScreen extends Component { constructor(Props) { super(Props); this.state = { error: null, paused: true, playing: false, }; }render() { return (<View style={styles.container}><View style={styles.tabContent}><FlatList style={styles.list} data={this.state.all_Posts} keyExtractor={(data_posts, index) => { return data_posts.id.toString(); }} ItemSeparatorComponent={() => { return (<View style={styles.separator} /> ) }} renderItem={(post, id) => { const items = post.item; return (<View style={styles.card}><View style={styles.cardHeader}><View><Video ref={ref => this.player = ref} source={{ uri: "http://192.168.1.2:3200/"+ items.file_Name }} style={{ width: '100%', height: 700 }} resizeMode="cover volume={1.0} controls={true} volume={this.state.volume} muted={this.state.muted} paused={this.state.paused} onLoad={this.onLoad} onBuffer={this.onBuffer} onError={this.videoError} onProgress={this.onProgress} /></View></View> ) }} /></View></View> ) }}Once check the code clearly and tell me how can i play the video only when the user viewing it and in remaining time it is in pause mode.And video controls={true} need to move or hide along with video.So please help me to find the solution to those two problems.