Flatlist scrolls up a bit when item on top updates #26760
Description
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>