Weird onTabChange behaviour

[yunussim]

Hi, I'm practically new on react-native, and I got to see this great bottom navigation, however there's a little problem with the onTabChange behaviour

I put the BottomNavigation as the navigationBar in my Navigator.

I made 3 Tabs. When I change from the 1st to the 2nd tab, it is okay. The navigator shows the 2nd page without any problem. However when I change the tab from the 2nd to the 3rd, it will go back to the 1st tab right away. It is fine if I only use alert to show the newtab, but when I make update on the navigator, it will do the weird behaviour.

here's my code :

<Navigator
        initialRoute={{name: 'listing'}}
        configureScene={() => Navigator.SceneConfigs.FadeAndroid}
        renderScene={RouteMapper}
        navigationBar={
          <BottomNavigation
            labelColor="white"
            rippleColor="white"
            style={{ height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0 }}
            onTabChange={this._handleTabChange}
            >
            <Tab
              barBackgroundColor="#37474F"
              label="Home"
              icon={<Icon size={24} color="white" name="home" />}
            />
            <Tab
              barBackgroundColor="#00796B"
              label="Category"
              icon={<Icon size={24} color="white" name="list" />}
            />
            <Tab
              barBackgroundColor="#5D4037"
              label="Search"
              icon={<Icon size={24} color="white" name="search" />}
            />
          </BottomNavigation>
          }
        />

_handleTabChange(newTabIndex, oldTabIndex) {
    if(newTabIndex == 0 && oldTabIndex != newTabIndex) {
      _lastTab = newTabIndex;
      _navigator.popToTop();
    } else if(newTabIndex == 1 && oldTabIndex != newTabIndex) {
        _navigator.push({
          title: 'sample',
          name: 'sample'
        });
    } else if(newTabIndex == 2 && oldTabIndex != newTabIndex) {
        _navigator.push({
          title: 'search',
          name: 'search'
        });
    }
  }

const RouteMapper = function(route, navigationOperations, onComponentRef) {
  _navigator = navigationOperations;
  if(route.name == 'listing') {
    return (
      <Listing navigator={navigationOperations} > </Listing>
    );
  } else if(route.name == 'sample') {
    return(
      <CategoryList navigator={navigationOperations}> </CategoryList>
    );
  } else if(route.name == 'search') {
    return(
      <Search navigator={navigationOperations}> </Search>
    );
  }
};

[timomeh]

I don't know how React Native's built in Navigator actually works, but I think the Problem is that the activeTab of the BottomNavigation isn't stored in your state, thus – if the Navigator ever feels like he wants to re-mount the navigationBar – the BottomNavigation loses its activeTab.

I think that's the Problem. Not 100% sure. To solve it, use it like this:

Store the activeTab inside your state, and pass it to the Bottom Navigation like this:

<BottomNavigation activeTab={this.state.activeTab}>

Update the state in your _handleTabChange, but maybe you shouldn't use setState in this case, since this would cause a rerender (and thus calling _handleTabChange again and again and again...). You could simply use this.state.activeTab = newTabIndex instead of setState.

This way your Navigator can re-mount the BottomNavigation without losing its state.

[timomeh]

@yunussim Were you able to solve your problem?

[yunussim]

@timomeh no I can't. It seems like every time I changed the tab twice, it called to change the tab to the first one automatically. I did not know what happened, but it does happen when I update the navigator, and it does not happen if I do something else that doesn't update my navigator.

so here's the flow

tab at 0 navigator push the first one newtabindex at 1 navigator push the second one newtabindex at 2 newtabindex at 0 navigator push the first one

is it memory problem ? Because if I use regular view as my bottomnavigation (view, and text only) it does not have any problem at all.

Thank you for your support though!

[timomeh]

If you use a regular view, the onTabChange event from the BottomNavigation doesn't get triggered. That's the Problem here. You'd have to figure out why onTabChange get's called if it shouldn't.

The onTabChange event get's fired in two cases:

• If a tab was pressed
• If the activeTab prop changes

---

I would highly advise you to replace your Navigator. The old Navigation Module from React Native was deprecated many months ago. You would save time and write better code if you use something like react-navigation.

Since this is an Issue related to the Navigator/your Code, I can't help you and have to close this issue.