Initial tab in child tab view flickers while using react-native-tab-view

[MeghaSuthar20]

Current behavior

https://user-images.githubusercontent.com/118166441/201921012-9f93bef1-1a78-4a2a-bc2d-85d1ea80a663.mp4

const renderCount = new Map(); const stickyTabRoutes = [ {key: 'first', title: strings.toDo}, {key: 'second', title: strings.comments}, {key: 'third', title: strings.done}, ]; export function HomeScreenTab() { return ( <StickyTab activeColor={'blue'} inactiveColor={'gray'} pressColor={'White'} stickyTabRoutes={stickyTabRoutes} stickyRenderTab1={

} stickyRenderTab2={

} /> ); }

function Nav({nbTabs}) { const [index, setIndex] = React.useState(0); const routes = React.useMemo(() => routesParams(nbTabs), [nbTabs]);

const renderScene = SceneMap( Object.fromEntries(routes.map(c => [c.key, Route])), );

return ( <TabView navigationState={{index, routes}} renderScene={renderScene} onIndexChange={setIndex} initialLayout={{width: Dimensions.get('window').width}} /> ); }

function Route({title, id}) { const tabRenderCount = (renderCount.get(id) ?? 0) + 1; renderCount.set(id, tabRenderCount); console.log(Re-rendering ${title} (${tabRenderCount} times in total)); return {title}; }

function routeParam(value) { return {key: value, id: value, title: Tab ${value}}; }

function routesParams(quantity) { return [...Array(quantity).keys()].map(i => routeParam(i)); }

Expected behavior

All routes should render exactly once.

Reproduction

https://snack.expo.dev/jKHFsGJ94

Platform

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

Environment

| package | version |

| -------------------------------------- | ------- | | react-native-tab-view |^3.3.0 | react-native-pager-view |^6.1.0 | react-native |0.70.6

[github-actions[bot]]

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

• react-native (found: 0.70.4, latest: 0.70.5)

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

[github-actions[bot]]

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

• react-native (found: 0.70.5, latest: 0.70.6)

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

[okwasniewski]

Hello, thanks for opening this issue.

I looked through the repo code, and found that you are adding an inline function to SceneMap, which is not recommended in the README:

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

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

Do you see the same behaviour in examples inside the example directory? Please correct the repro code and I will check it.