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 FlatList
My 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.