Initial tab in child tab view flickers while using react-native-tab-view #1406
Description
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