Flatlist scrolls up a bit when item on top updates

[n00bm5st3r69]

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>

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.