React-native-tab-view: Adding data to FlatList will cause re-render

[AlexJeeee]

I am using FlatList in each tab to show data, routes and tabs both are dynamically generated.
when I scoll to the end, I will get the data from backend, and it should stay where it used to be, but it will jump to the top, I think adding data may cause the re-render.
Current behaviour
jumping to the top when adding new data into FlatList
Expected behaviour
stay where it used to be
Code sample

const Scene: any = () => {
    return (
      <FlatListTab
        key={routes[pageIndex].key}
        data={dataContent}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item}) => _renderItem(item)}
        refreshing={refreshing}
        onRefresh={_onRefresh}
        onEndReachedThreshold={0.3}
        onEndReached={_endReached}
        ListFooterComponent={contentAfterList}
      />
    );
  };
const _renderScene = (props: SceneRendererProps & {route: Route}) => (
    <Scene {...props} index={routes.indexOf(props.route)} />
  );
<TabView
        navigationState={{index, routes}}
        renderScene={_renderScene}
        onIndexChange={setPageIndex}
        initialLayout={initialLayout}
        renderTabBar={_renderTabBars}
        lazy={true}
        lazyPreloadDistance={1}
        renderLazyPlaceholder={_renderLazyPlaceholder}
      />

I've tried same code without using react-native-tab-view,it works well.
any solutions?

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-tab-view
• react-native-gesture-handler
• react-native-reanimated

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[AlexJeeee]

• [email protected]

• [email protected]

• [email protected]

[pietrozp13]

@AlexJeeee Did you check this ? https://github.com/satya164/react-native-tab-view#renderscene-required

"""

IMPORTANT: Do not pass inline functions to SceneMap, for example, don't do the following:

SceneMap({
  first: () => <FirstRoute foo={this.props.foo} />,
  second: SecondRoute,
});

Always define your components elsewhere in the top level of the file. If you pass inline functions, it'll re-create the component every render, which will cause the entire route to unmount and remount every change. It's very bad for performance and will also cause any local state to be lost.

"""

[AlexJeeee]

@pietrozp13 thx for the comment,but I didn't use the SceneMap because my tabs and content of each tab are dynamic and uncertain.I think maybe using renderScene directly cause the re-render.
I've tried SceneMap but failed with dynamic tabs and contents,any suggestions?:(

[makassigithub]

I am having the same behavior although I am feeding my FlatList with items through redux.

"react-native": "0.63.2",
"react-native-tab-view": "2.13.0",

[Michael24884]

Likewise, I'm also having this issue when using a flat list

[AlexJeeee]

Now I can use SceneMap in my app, but the re-render still happens...

routes.map((route, index) => {
    scenesArray[index] = () => (
      <FlatListTab
        key={route.key}
        data={dataContentTest[index]}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item}) => _renderItem(item)}
        refreshing={refreshing}
        onRefresh={() => _onRefresh(index)}
        onEndReachedThreshold={0.3}
        onEndReached={() => _endReached(index)}
        ListFooterComponent={contentAfterList}
      />
    )
  })

  let scenes = {};
  routes?.map((route, index) => {
    scenes[route.key] = scenesArray[index];
  });
  const renderScene = SceneMap(scenes);

[ShivaniScorpion]

@AlexJeeee Any luck? I am facing same issue.

[AlexJeeee]

@AlexJeeee Any luck? I am facing same issue.

not yet :(

[maxgr0]

@AlexJeeee put your FlatListTab outside of the component, wrap in in a context consumer and wrap the actual TabView in a context provider to pass data to the FlatListTab.

[ErkanGorgulu]

My app was stuttering because of this and I decided to follow a tutorial on youtube and create it myself. It's not the same thing but quite similar.

https://www.youtube.com/watch?v=ZiSN9uik6OY

[AlexJeeee]

My app was stuttering because of this and I decided to follow a tutorial on youtube and create it myself. It's not the same thing but quite similar.

https://www.youtube.com/watch?v=ZiSN9uik6OY

Thanks for the solution, I used another tab component instead, and I will check the tutorial as well, thank you ~

[lucascooelho]

Any solution? I'm facing the same problem for a few days and didn't find any solution so far.

[blomax02]

Having the same issue with these revs:
"react-native": "0.63.3"
"react-native-tab-view": "2.15.2"
Really hopping that somebody will fix this issue soon.

[lmrnba6]

Same here

[ZaikinaEvgeniya-2]

any solutions? same here

"react-native": "0.61.5",
"react-native-tab-view": "^2.15.2",
const FirstRoute = () => <FlatList .../> const screens={{ first: FirstRoute, second: SecondRoute, }} const renderScene = SceneMap(screens) <TabView navigationState={{ index, routes }} renderScene={renderScene} onIndexChange={setIndex} initialLayout={initialLayout} />

PS: I change code, and write like this and this not happen anymore
const renderScene = ({ route }) => { switch (route.key) { case 'common': return <FirstRoute /> case 'timeline': return <SecondRoute /> }}

[lmrnba6]

[oh3vci]

[lucascooelho]