When I scroll down to the last item in the Flatlist and an item on top updates, Flatlist scrolls up a bit. By the way, my Flatlist renders images and videos. When the videos are not visible in the viewport it turns into an image.
Sample code below (not the exact code but similar)
Home.js
onViewableItemsChanged = ({ viewableItems }) => {
for(i = 0; i < viewableItems.length; i++) {
if(this.state.videos.findIndex(x => x.id === viewableItems[i].item.id) > -1) {
this.timer = setTimeout(()=> {
this.setState({isVideoVisible: true})
}, 2000);
}
else {
this.setState({isVideoVisible: false});
clearTimeout(this.timer);
}
}
}
<FlatList
data={this.state.data}
ListEmptyComponent={() => {
return (
<Ghost />
)
}}
renderItem={({ item }) => {
if (item.type == "Image") {
return (<CustomImageComponent data={item}/>)
} else {
return (<MediaPlayer data={item} isVideoVisible={this.state.isVideoVisible}/>)
}
}
}
onViewableItemsChanged={this.onViewableItemsChanged}
viewabilityConfig={this.viewabilityConfig}
keyExtractor={(item, index) => index.toString()}
/>
MediaPlayer.js
<Container>
this.props.isVideoVisible ? <Video /> : <Image />
</Container>
When I scroll down to the last item in the Flatlist and an item on top updates, Flatlist scrolls up a bit. By the way, my Flatlist renders images and videos. When the videos are not visible in the viewport it turns into an image.
Sample code below (not the exact code but similar)