CODEWITHSUNDEEP
react-nativereact-native-flatlist
Joshua Augustinus
Joshua Augustinus

Reputation: 1670

Images inside react native FlatList fade in instead of just being prerendered

I have a FlatList that renders a bunch of images but they fade in as I'm scrolling instead of being already rendered. I thought that the windowSize prop of FlatList makes it so that some stuff is already rendered outside the view port.

 <FlatList
          windowSize={8}
          numColumns={columns}
          maxToRenderPerBatch={4}
          data={cardObjects}
          renderItem={itemRender}
          keyExtractor={keyExtractor}
        />

The Image component looks like:

  <Image
      source={{
        uri: props.uri,
      }}
      style={{width: '100%', aspectRatio: ASPECT_RATIO}}
    />

I want the images to be already rendered such that when you scroll down it's already there.

Currently it behaves like this: https://www.youtube.com/watch?v=UFFmrAHwAQk

Upvotes: 0

Views: 859

Answers (1)

senthil balaji
senthil balaji

Reputation: 628

Flatlist renders only items that are on screen.

You can pre-render by using these 2 props

initialNumToRender={20}
maxToRenderPerBatch={20}

One more optimization when it comes to rendering images in list react-native-fast-image as recommended in official docs in react-native

Upvotes: 1

Related Questions