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!