react-native-video inside flatlist showing black screen after scrolling some videos - react-native

Question

I am developing a flatlist with full screen videos like tiktok, it works fine for first 16/17 videos then when I scroll further it shows black screen.
Following is my code for the flatlist:
<FlatList
style={{
width: width,
height: this.state.videoHeight,
}}
getItemLayout={(data, index) => ({
length: this.state.videoHeight,
offset: this.state.videoHeight * index,
index,
})}
onScrollToIndexFailed={(info) => {
const wait = new Promise((resolve) =>
setTimeout(resolve, 500),
);
wait.then(() => {
this.flatlistRef.current?.scrollToIndex({
index: info.index,
animated: false,
});
});
}}
showsVerticalScrollIndicator={false}
data={this.state.allVideos}
ref={this.flatlistRef}
scrollEnabled={!this.state.isMinimizePlayer}
viewabilityConfig={this.viewabilityConfig}
decelerationRate={0}
removeClippedSubviews={true}
snapToAlignment={'start'}
snapToInterval={this.state.videoHeight}
horizontal={false}
onViewableItemsChanged={this.onViewableItemsChanged}
renderItem={this.renderItem}
keyExtractor={(item, index) => item.id}
/>
Render function code
renderItem = ({item, index}) => (
<PlayerContext.Consumer>
{({setVideo, setMetaData}) => (
<TouchableOpacity
onPress={() => {
if (!this.state.isMinimizePlayer) {
this.setState({isPause: !this.state.isPause});
} else {
this.maximizePlayr();
}
}}
activeOpacity={0.9}
style={{
width: width,
height: this.state.videoHeight,
}}>
<Video
// hideShutterView={false}
// useTextureView={true}
ref={(ref) => {
this.playerRef[index] = ref;
}}
style={{
backgroundColor: 'black',
width: this.state.videoWidth,
height: this.state.videoHeight,
}}
resizeMode={'cover'}
muted={this.state.isMute}
paused={
index == this.state.currentVisibleIndex
? this.state.isPause
: true
// index !== this.state.currentVisibleIndex ||
// !this.state.isPause
}
onLoad={(data) => {
// console.log('===>' + index);
}}
controls={false}
hideShutterView={true}
repeat={this.state.isLoop}
onEnd={() => {
if (!this.state.isLoop) {
if (this.state.isAutoPlay) {
if (
this.state.currentVisibleIndex <
this.state.allVideos.length - 1
) {
if (this.state.setGoNext) {
this.setState({setGoNext: false});
this._goToNextPage();
setTimeout(() => {
this.setState({setGoNext: true});
}, 1000);
}
} else {
setVideo(null);
}
}
}
}}
onProgress={(progress) => {
if (this.state.currentTrackDuration == 0) {
this.setState({
currentTrackDuration: progress.seekableDuration,
});
}
this.setState({
progress: progress.currentTime / progress.seekableDuration,
});
}}
bufferConfig={{
minBufferMs: 15000,
maxBufferMs: 50000,
bufferForPlaybackMs: 1500,
bufferForPlaybackAfterRebufferMs: 1500,
}}
source={{uri: item.url}}
poster={item.url}
onError={(e) => console.log('video load failed!' + index, e)}
onVideoError={(e) =>
console.log('video error load failed!' + index, e)
}
onReadyForDisplay={() => {}}
posterResizeMode={'cover'}></Video>
{this.state.isMinimizePlayer && (
<View
style={{
backgroundColor: this.ThemedColors.happy,
position: 'absolute',
width: this.state.videoWidth,
justifyContent: 'center',
alignItems: 'center',
height: this.state.videoHeight,
}}>
<TouchableOpacity
onPress={() => {
this.setState({isPause: !this.state.isPause});
}}>
<IconM
name={!this.state.isPause ? 'play-arrow' : 'pause'}
size={28}
color={'white'}
/>
</TouchableOpacity>
</View>
)}
{this.state.isMinimizePlayer && (
<View
style={{
flexDirection: 'row',
flex: 1,
height: this.state.videoHeight,
justifyContent: 'space-between',
alignItems: 'center',
top: 0,
bottom: 0,
left: 110,
position: 'absolute',
right: 10,
}}>
<View
style={{
flex: 1,
paddingHorizontal: 10,
justifyContent: 'center',
}}>
<Text style={{}} numberOfLines={1}>
{item.name}
</Text>
<View
style={{
marginTop: 5,
flexDirection: 'row',
paddingLeft: 0,
alignItems: 'center',
}}>
<Image
source={require('../../../assets/Images/icon_eye.png')}
style={{
height: 10,
width: 16,
tintColor: 'black',
resizeMode: 'contain',
}}
/>
<Text style={{marginLeft: 2}}>{this.metaData.from}</Text>
</View>
</View>
<TouchableOpacity
onPress={() => {
setVideo(null);
}}
style={{
height: 50,
width: 50,
alignItems: 'center',
justifyContent: 'center',
}}>
<Icon name="close" size={20} color={'black'} />
</TouchableOpacity>
</View>
)}
{!this.state.isMinimizePlayer && (
<LinearGradient
colors={['#000000', '#80000000']}
style={{
position: 'absolute',
top: 0,
paddingTop: Platform.OS == 'ios' ? width * 0.1 : width * 0.04,
left: 0,
right: 0,
}}>
<Text style={this.ThemedStyles.videoTitleText} numberOfLines={1}>
{item.name}
</Text>
<View style={this.ThemedStyles.videoMomentContaine}>
<Text style={this.ThemedStyles.videoDateText}>
{moment.unix(item.createdAt / 1000).format('MMMM DD, YYYY')}
</Text>
<Text
style={[
this.ThemedStyles.videoMomentText,
{backgroundColor: this.ThemedColors[item.moment]},
]}>
{item.moment}
</Text>
</View>
<View style={this.ThemedStyles.videoMomentTagContaine}>
{item?.tagN?.map((data) => {
return (
<View>
<Text style={this.ThemedStyles.videoDateText}>
#{data}
</Text>
</View>
);
})}
</View>
</LinearGradient>
)}
</TouchableOpacity>
)}
</PlayerContext.Consumer>
);
When scrolling it works and playing videos for first 16 videos then it show black screen for next videos and not playing them. When scrolling back to previous videos they are still playing but videos after 16th are black.