React Native: FlatList flickering for a large list of items, not for smaller lists

Viewed 541

Here is what is happening:

-I am developing a blogging app in RN. Each user has a profile page, where all the posts written by the users are visible.

-Each post has a thumbnail image, and I am rendering the posts in FlatList as I should.

-However, if the list is large enough, e.g. 100+, the images in the posts flicker when scrolling up/down, for both iOS and Android. This is understandably a bad user experience.

-Interesting thing is if list is reasonably small, the images won't flicker at all. If this were a syntax issue, all the images should flicker.

-Is this kind of behavior expected in using FlatList? i.e. when rendering a large list of items it will have issues? If so, what can I do to prevent flickering?

FYI, below is the code that I am using for FlatList component. Simple enough:

     const PostArray = (props) => {
         return (
             (props.postarray===null ?
             null  :
             <FlatList
                 data={props.postarray}
                 style={{marginTop:10}}
                 renderItem={({ item }) =>
                 <ProfilePostsPreview item={item}/>
             }
             keyExtractor={(item, index) => index.toString()}
             />
             )
         )
     }

Any advice? Thanks in advance!

0 Answers
Related