Tab.screen has always re-render when switch tabs #10174

bumjin1013 · 2021-12-01T06:46:12Z

Current behavior

I'm using TopTabNavigator from '@react-navigation/material-top-tabs.
When i switch tab screen, the components are re-rendered at once again.

<Tab.screen
component={console.log('first component')}
/>
<Tab.screen
component={console.log('second component')}
/>
<Tab.screen
component={console.log('third component')}
/>

Every time swich tabs, all console logs are executed at once

Expected behavior

I want prevent re-rerendering, just render only once

Reproduction

https://github.com/bumjin1013/node-react-food-delivery.git

Platform

Packages

@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs
@react-navigation/stack
@react-navigation/native-stack

Environment

package	version
@react-navigation/native
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs
@react-navigation/stack
@react-navigation/native-stack
react-native-safe-area-context
react-native-screens
react-native-gesture-handler
react-native-reanimated
react-native-tab-view
react-native-pager-view
react-native
expo
node
npm or yarn

github-actions · 2021-12-01T06:46:25Z

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

@react-navigation/native
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs
@react-navigation/stack

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

sergeymorkovkin · 2022-05-25T05:31:35Z

@bumjin1013 We are facing same issue on iOS. Were you able to work around this?

Jamal-ReachFirst · 2022-11-29T06:23:02Z

All the screens get rendered while switching b/w tabs(@react-navigation/material-top-tabs).

sanduluca · 2022-12-02T11:51:19Z

Same here. All of the tabs are re-redering when I switch between them

williamliangwl · 2022-12-05T10:18:59Z

same here, facing same issue in both Android + iOS, using the bottom tab https://reactnavigation.org/docs/5.x/bottom-tab-navigator

github-actions · 2022-12-05T10:51:15Z

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. 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.

The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then please provide the repro in a GitHub repository.

Jamal-ReachFirst · 2022-12-14T05:33:05Z

Did anyone figure out why this happening???

github-actions · 2023-01-14T01:54:47Z

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

raajnadar · 2023-01-14T06:00:13Z

Please read this doc -> https://reactnavigation.org/docs/troubleshooting#screens-are-unmountingremounting-during-navigation

If you still have an issue, please give a snack repro that renders a component, not a console.log, in your case console.log is seen as a new change on each render & it is fired every time you switch tab

github-actions · 2023-01-14T06:00:24Z

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

Jamal-ReachFirst · 2023-01-14T11:26:43Z

Why is this closed?

sanduluca · 2023-01-14T11:56:18Z

Why did you closed it ? @raajnadar
Too much people report the problem and you still think no one of them didn't read the docs ?

raajnadar · 2023-01-14T12:13:34Z

This issue is open for a long time without a minimal reproducer, you cannot expect maintainers to dig into your codebase to find the bug nor the version are added correctly to see if the issue is solved in the latest versions

@sanduluca why don't you provide a minimal reproducer? I am happy to reopen the issue if you can provide one

constantinescu-vlad · 2023-03-25T16:44:41Z

Here I have a simple tab navigator inside a stack navigator. Whenever I switch tabs I get this re-render:

StaticContainer
whyDidYouRender.js:690
{StaticContainer: ƒ}
'Re-rendered because of props changes:'
whyDidYouRender.js:704 props.route
whyDidYouRender.js:705 different objects that are equal by value. (more info at http://bit.ly/wdyr02)
whyDidYouRender.js:706
{prev route: {…}}
prev route
:
{key: 'tabs-1WgYOk1PVEjotvjQYTwqC', name: 'tabs', params: undefined}
[[Prototype]]
:
Object
'!=='
{next route: {…}}
next route
:
{key: 'tabs-1WgYOk1PVEjotvjQYTwqC', name: 'tabs', params: undefined}
[[Prototype]]
:
Object

const TabNav = createBottomTabNavigator();

const renderTabBarButton = props => {
    return (
        <TouchableOpacity {...props}>
            <Text style={{color: 'red'}}>{props.to}</Text>
        </TouchableOpacity>
    )
}

const TAB_OPTIONS = () => ({
    tabBarButton: renderTabBarButton
})

const TestNavigator = () => {
    return (
        <TabNav.Navigator>
            <TabNav.Screen options={TAB_OPTIONS()} name={'tab1'} component={TestScreen}/>
            <TabNav.Screen options={TAB_OPTIONS()} name={'tab2'} component={TestScreen}/>
        </TabNav.Navigator>
    )
}

const StackNav = createNativeStackNavigator();
const Main = () => {
    return (
        <StackNav.Navigator>
            <StackNav.Screen name={'tabs'} component={TestNavigator}/>
            <StackNav.Screen name={'asd'} component={TestScreen}/>
        </StackNav.Navigator>
    )
}

class App {
  render() {
          return (
              <NavigationContainer>
                  <Main/>
              </NavigationContainer>
          );
  }
}

okwasniewski · 2023-03-25T18:11:16Z

Here I have a simple tab navigator inside a stack navigator. Whenever I switch tabs I get this re-render:

Hey @constantinescu-vlad,

Why are you passing options as a function? This way every time you are creating a new reference to the returned object. Please replace this:

const TAB_OPTIONS = () => ({
    tabBarButton: renderTabBarButton
})

const TestNavigator = () => {
    return (
        <TabNav.Navigator>
            <TabNav.Screen options={TAB_OPTIONS()} name={'tab1'} component={TestScreen}/>
            <TabNav.Screen options={TAB_OPTIONS()} name={'tab2'} component={TestScreen}/>
        </TabNav.Navigator>
    )
}

with:

const TAB_OPTIONS = {
    tabBarButton: renderTabBarButton
}

const TestNavigator = () => {
    return (
        <TabNav.Navigator>
            <TabNav.Screen options={TAB_OPTIONS} name={'tab1'} component={TestScreen}/>
            <TabNav.Screen options={TAB_OPTIONS} name={'tab2'} component={TestScreen}/>
        </TabNav.Navigator>
    )
}

constantinescu-vlad · 2023-03-25T18:50:29Z

Here I have a simple tab navigator inside a stack navigator. Whenever I switch tabs I get this re-render:

Hey @constantinescu-vlad,

Why are you passing options as a function? This way every time you are creating a new reference to the returned object. Please replace this:

const TAB_OPTIONS = () => ({
    tabBarButton: renderTabBarButton
})

const TestNavigator = () => {
    return (
        <TabNav.Navigator>
            <TabNav.Screen options={TAB_OPTIONS()} name={'tab1'} component={TestScreen}/>
            <TabNav.Screen options={TAB_OPTIONS()} name={'tab2'} component={TestScreen}/>
        </TabNav.Navigator>
    )
}

with:

const TAB_OPTIONS = {
    tabBarButton: renderTabBarButton
}

const TestNavigator = () => {
    return (
        <TabNav.Navigator>
            <TabNav.Screen options={TAB_OPTIONS} name={'tab1'} component={TestScreen}/>
            <TabNav.Screen options={TAB_OPTIONS} name={'tab2'} component={TestScreen}/>
        </TabNav.Navigator>
    )
}

okwasniewski hey thanks for the reply. It doesnt matter how I write the tab navigator options. the StaticContainer still re-renders unnecessarily

okwasniewski · 2023-03-25T20:21:55Z

@constantinescu-vlad I've just checked your comment one more time. StaticContainer is supposed to rerender every time you change a route and it prevents child routes from rerendering. So this is not a bug.

constantinescu-vlad · 2023-03-26T07:49:38Z

@okwasniewski ok got it, thank you for your information

wilmxre · 2023-04-27T13:05:40Z

@constantinescu-vlad hey man, did you manage to solve this issue?

constantinescu-vlad · 2023-04-27T13:10:08Z

@wilmxre no, I still get the re-render

Jamal-ReachFirst · 2023-04-28T04:02:02Z

Yes, re-render all tab screens when tab is changed

mahbubshaun · 2023-12-22T13:06:38Z

I'm also facing same issue!

Cheizr · 2024-03-03T03:41:43Z

I had a similar issue, when i switch between two tabs for example, every component was re-rendered.

The problem was that I was passing a Contextprovider as a child of NavigationContainer, i level up my ContextProvider and the re-renders stopped

wilmxre · 2024-03-06T19:45:25Z

yeah, a context provider caused the re-rendering for me too

Cheizr · 2024-03-07T05:24:18Z

yeah, a context provider caused the re-rendering for me too

Try what i said in my previous comment, that fixed it

FadyBoj · 2024-06-16T08:52:49Z

I had a similar issue, when i switch between two tabs for example, every component was re-rendered.

The problem was that I was passing a Contextprovider as a child of NavigationContainer, i level up my ContextProvider and the re-renders stopped

Yes this solution worked for me too , thanks

bumjin1013 added the bug label Dec 1, 2021

github-actions bot added package:material-top-tabs platform:ios repro provided labels Dec 1, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tab.screen has always re-render when switch tabs #10174

Tab.screen has always re-render when switch tabs #10174

bumjin1013 commented Dec 1, 2021

github-actions bot commented Dec 1, 2021

sergeymorkovkin commented May 25, 2022

This comment was marked as spam.

Jamal-ReachFirst commented Nov 29, 2022 •

edited

Loading

sanduluca commented Dec 2, 2022

williamliangwl commented Dec 5, 2022

github-actions bot commented Dec 5, 2022

Jamal-ReachFirst commented Dec 14, 2022

github-actions bot commented Jan 14, 2023

raajnadar commented Jan 14, 2023

github-actions bot commented Jan 14, 2023

Jamal-ReachFirst commented Jan 14, 2023

sanduluca commented Jan 14, 2023

raajnadar commented Jan 14, 2023 •

edited

Loading

constantinescu-vlad commented Mar 25, 2023

okwasniewski commented Mar 25, 2023

constantinescu-vlad commented Mar 25, 2023

okwasniewski commented Mar 25, 2023 •

edited

Loading

constantinescu-vlad commented Mar 26, 2023

wilmxre commented Apr 27, 2023

constantinescu-vlad commented Apr 27, 2023

Jamal-ReachFirst commented Apr 28, 2023

mahbubshaun commented Dec 22, 2023

Cheizr commented Mar 3, 2024

wilmxre commented Mar 6, 2024

Cheizr commented Mar 7, 2024

This comment was marked as resolved.

FadyBoj commented Jun 16, 2024

Tab.screen has always re-render when switch tabs #10174

Tab.screen has always re-render when switch tabs #10174

Comments

bumjin1013 commented Dec 1, 2021

Current behavior

Expected behavior

Reproduction

Platform

Packages

Environment

github-actions bot commented Dec 1, 2021

sergeymorkovkin commented May 25, 2022

This comment was marked as spam.

Jamal-ReachFirst commented Nov 29, 2022 • edited Loading

sanduluca commented Dec 2, 2022

williamliangwl commented Dec 5, 2022

github-actions bot commented Dec 5, 2022

Jamal-ReachFirst commented Dec 14, 2022

github-actions bot commented Jan 14, 2023

raajnadar commented Jan 14, 2023

github-actions bot commented Jan 14, 2023

Jamal-ReachFirst commented Jan 14, 2023

sanduluca commented Jan 14, 2023

raajnadar commented Jan 14, 2023 • edited Loading

constantinescu-vlad commented Mar 25, 2023

okwasniewski commented Mar 25, 2023

constantinescu-vlad commented Mar 25, 2023

okwasniewski commented Mar 25, 2023 • edited Loading

constantinescu-vlad commented Mar 26, 2023

wilmxre commented Apr 27, 2023

constantinescu-vlad commented Apr 27, 2023

Jamal-ReachFirst commented Apr 28, 2023

mahbubshaun commented Dec 22, 2023

Cheizr commented Mar 3, 2024

wilmxre commented Mar 6, 2024

Cheizr commented Mar 7, 2024

This comment was marked as resolved.

FadyBoj commented Jun 16, 2024

Jamal-ReachFirst commented Nov 29, 2022 •

edited

Loading

raajnadar commented Jan 14, 2023 •

edited

Loading

okwasniewski commented Mar 25, 2023 •

edited

Loading