List users section by section on the screens React Native

Question

I have 100 users and I want to show 10 user profile photos on each page. I want 10 other users to come as I scroll the page. I tried flatlist optimizations but failed.

I tried Optimizing Flatlist Configuration but it did not work

     <FlatList
       data={userList}
       renderItem={({ item }) => (
         <User
           style={styles.image}
           username={item.username}
           instagramUrl={item.instagramUrl}
           profilePicture={item.profilePicture}
         />
       )}
       // horizontal
       showsHorizontalScrollIndicator={false}
       keyExtractor={(item) => item.id}
       pagingEnabled={false}
       // numColumns={3}
       initialNumToRender={10}
       maxToRenderPerBatch={10}
     />

Answer 1

you can use VirtualizedList from react-native instead for better performance.

   const getItem = (data, index) => {
        return data[index];
      };
return (

         <VirtualizedList
          showsVerticalScrollIndicator={false}
          removeClippedSubviews={true}
          data={data}
          initialNumToRender={5} // inital number to render
          getItemCount={data => data.length}
          getItem={getItem}
          onEndReached={onEndReached}   // you  can fetch list part by part from server        
          renderItem={renderItem}
        />
)