satya164/react-native-tab-view

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

MeghaSuthar20 opened this issue · 3 comments

MeghaSuthar20 commented

Current behavior

XRecorder_Edited_15112022_180342.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

  • Android
  • 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 commented

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 commented

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 commented

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.