3

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.

user2086359
  • 325
  • 3
  • 13
  • i also have same problem here : https://snack.expo.io/@luckyamit/9905d4 I have also posted a question : https://stackoverflow.com/questions/62247541/why-scrollbar-resting-on-top-in-react-native-infinite-scrolling-using-react-nati – luckyamit Jun 07 '20 at 21:31
  • did you find any solution. if yes then let me know – luckyamit Jun 07 '20 at 21:32
  • Unfortunately not, however I've simplified the issue and reposted here with simpler examples: https://stackoverflow.com/questions/62261038/react-native-flatlist-returned-from-a-function-or-const-rerenders-from-the-top-w – user2086359 Jun 08 '20 at 12:47

1 Answers1

0

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.

Shahid ali
  • 246
  • 2
  • 5
  • Could you add detail for this? currently to specify whether checkbox is ticked I use items.includes(x.id) to check if the list of completed items includes the id of the checkbox. Are you suggesting that using items.filter(item => item === x) to specify whether a checkbox is ticked instead? What should I put in useEffect here? – user2086359 May 30 '20 at 21:08
  • I've had a look through the expo provided however unfortunately if you move the flatlist to a const like I need it for tab view you get the same problem where clicking on an item at the bottom of the list snaps you back to the top. I've saved what I mean here: https://snack.expo.io/ecO7YYlVZ – user2086359 Jun 08 '20 at 11:22