How to not rerender all tabs when swipe to another tab ?

[shop-fluencer]

Current behavior

const SearchMain = ({}: ISearchMain) => {
  const { t } = useTranslation();
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'products', title: 'Produkte'},
    { key: 'shops', title: 'Shops' },
  ]);

  const renderScene = ({ route }: { route: { key: string; title: string; } }) => {
    switch (route.key) {
      case 'products':
        return <SearchProductListRLV index={index} />
      case 'shops':
        return <ShopsCardRLV index={index} />;
      default:
        return null;
    }
  }
  return (
    <TabView
      lazy
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      keyboardDismissMode='auto'
      initialLayout={initialLayout}
      renderTabBar={renderTabBar}
    />
  );

Expected behavior

My tabs are every time rerender when I swiping to a tab. How can I prevent this ?

Reproduction

dd

Platform

• [X] Android
• [ ] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Environment

package	version
react-native-tab-view 3.1.1
react-native-pager-view 5.4.15
react-native
expo 0.45
node
npm or yarn

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions[bot]]

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

• react-native
• expo

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

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-pager-view (found: 5.4.15, latest: 5.4.25)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[satya164]

You're passing index to your tabs which changes when you swipe, there's no way to prevent re-render if you need to pass index - the component needs to re-render to get the new index. If you don't need index, then remove it and apply React.memo to your components or use SceneMap.