React native flatlist rerenders to top when any item changed in tab view

user_2086359 0
Viewed 685

I'm using react-native-community/react-native-tab-view to render two flatlists which are basically checklists with tickboxes in them.

The code for the flatlist is returned from:

const ListRoute = () => {
return (
 <FlatList
   data={data}
   renderItem={({item, index}) => {
     return (
       <View>
         <Item
           ...checkbox code
         />
       </View>
     );
   }}
   keyExtractor={(item, index) => item.id + '1'}
   listKey={(item, index) => item.id + '2'}
   removeClippedSubviews={true}
   extraData={(updateItem, subscriptionItems)}
 />
);
};

And the tab view code is 

<TabView
renderTabBar={ChallengeTabBar}
navigationState={{index, routes}}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>

With render scene as 

  const renderScene = SceneMap({
    first: ListRoute,
    second: FriendRoute,
  });

The checkbox takes the updateItem function from the main functional class and adds it's ID to the list of ticked boxes. When I use the listRoute function, clicking a tickbox leads to the whole flatlist rerendering and the user being taken to the top of the list. If I don't use a function and just put the flatlist in by itself then this doesn't happen.

Edit: After further investigation, it looks like if I remove the tab view part completely I still get the same problem. If I just put the flatlist in then the list doesn't rerender to the top but If I put the component in then it does.

react-native-tab-view react-native-flatlist react-native
1 Answers

You should use useEffect for avoiding rerenders of FlatList. You need to check immutability means that you want to replace the data of flatlist. use filter method for checkbox tick.

user_83635520
Related