Tabs do not navigate correctly!

[bramvbilsen]

First of all, I'm sorry if the title is unclear. I had no idea how to call it...

But here is the problem: My tabnavigator gets confused(?) and starts going back to other tabs automatically for some reason. I'll try to explain it more, but first...
The layout of my router looks a bit like this:
`

RootStack

    HomeStack

        HomeTabs

        OtherScreensStack...`

First I noticed that my tabnavigator was slow in updating titles but that wasn't a huge issue for me. But now, the randomly jumping back to previous tabs is something that simply can't happen. Here is a gif that shows the problem:

Like you can see, the titles don't update instantly as expected and in the end the title shows "Find users" while the page showing is actually the "Home" page.

---

I figures some code would be useful so here it is:

The stack with the tabnavigator in:
`
export const HomeStack = StackNavigator(

{

    HomeTabs: {

        screen: HomeTabs,

        navigationOptions: {

            headerStyle: {

                shadowOpacity: 0,

                shadowColor: 'rgba(0,0,0,0)',

                backgroundColor: "white",

                shadowOffset: { width: 0, height: 0 },

                elevation: 0

            },

            cardStack: {

                gesturesEnabled: false,

            }

        }

    },

}`

The actual tabnavigator:
`export const HomeTabs = TabNavigator(

{
    OnlineAdventuresFeed: {

        screen: Home,

        navigationOptions: {

            title: "Home",

            tabBarIcon: <Icon name="home" size={21} color="#4F8EF7" />

        },

    },

    SavedAdventuresFeed: {

        screen: SavedAdventures,

        navigationOptions: {

            title: "My Adventures",

            tabBarIcon: <Icon name="favorite" size={21} color="#4F8EF7" />

        },

    },

    UserFinder: {

        screen: UserFinder,

        navigationOptions: {

            title: "Find users",

            tabBarIcon: <Icon name="person-add" size={21} color="#4F8EF7" />

        }

    },

    Profile: {

        screen: Profile,

        navigationOptions: {

            title: "Profile",

            tabBarIcon: <Icon name="person" size={21} color="#4F8EF7" />

        },

    }

},

{

    tabBarComponent: TabView.TabBarBottom,

    tabBarPosition: "top",

    swipeEnabled: false,

    tabBarOptions: {

        style: {

            backgroundColor: "white",

            borderTopColor: "rgba(0,0,0,0)",

            borderBottomWidth: 0.5,

            borderBottomColor: "rgba(0.5, 0.5, 0.5, 0.5)",

            height: 45

        },

        showLabel: false

    }

}

);`

I'm sorry, it's really a hard thing to explain. But hopefully it's clear.
Anyone with some help?

---

Update

I think the reason because of this unwanted behavior is because the page changes instantly when I press the tab, but the navigate action only gets fired +- 10 seconds later. Navigating to other pages out of the tabnavigator result in instant navigate actions on my devices.

react-navigation@1.0.0-beta.8
react-native-cli: 2.0.1
react-native: 0.42.0

[matthamil]

Does this still occur when you clear the focus on the input before navigating?

[bramvbilsen]

@matthamil It does always happen when the focus isn't cleared yet, but it also happens on random other occasions.
I think this is the reason why:
This unwanted behavior is probably caused because the page changes instantly when I press the tab, but the navigate action only gets fired +- 10 seconds later.

[matthamil]

Does this still occur if you disable the animation that happens when you navigate between tab screens? The animation could be locking the JS thread while you attempt to navigate to other screens, which causes the delay.

Add animationEnabled: false to your tab navigator config.

[bramvbilsen]

@matthamil That does not fix it. Still the late trigger of the action.

[grabbou]

CC: @satya164

[bramvbilsen]

This btw only appears to happen on Android, IOS seems smooth.

[satya164]

Can you use master branch instead?

[bramvbilsen]

@satya164 I changed it in my package.json file reinstalled but it still doesn't work.

It does however hides my tabbar for some reason, anyway to get it back while staying on master? I adapted the code for the icons in the tabbar to tabBarIcon and adapted header: {style:{}} to headerStyle, so that shouldn't be it I think.

"react-navigation": "^1.0.0-beta.9"

[MatthieuPeyrot]

hi
i have the same issue since the update , when i swipe fast between the two tabs, it's begin to swipe automatically.

[bramvbilsen]

@MatthieuPeyrot Looks like the same problem, did your tabbar also dissapear with the latest update?

[MatthieuPeyrot]

@bramvbilsen it didn't dissapear , but when i desable the swipe , it's not doing the swipe loop. but i need the swipe.

[bramvbilsen]

Any update on this?

[MatthieuPeyrot]

Any new ?

[bramvbilsen]

@MatthieuPeyrot I haven't found a solution so far...

[laclance]

i run into the same issue a few days ago. I think i maybe fixed it by flattening my nav structure.

@bramvbilsen have you tried placing HomeTabs and OtherScreensStack... into your root navigator?

This works for me:

Root
    Home
    SignIn
    TabNavigator
    Others

[ptilli]

Had this problem but now it is not reproducing. Not sure if I'm doing things in a bit kinky way. My stack

StackNavigator 
  |-- Screen A
  |         |- TabNavigator (yes, Screen A renders a tab navigator, because I need to 
  |                       |            render some intermediate stuff in certain scenarios)
  |                       |-- Tab A
  |                       |-- Tab B
  |                       |-- Tab C
  |                       |-- Tab D
  |
  |-- Screen B

I added react https://github.com/satya164/react-navigation-addons and enhanced tabnavigator. Now I get focus/blur states on tabs via listeners.

On each tab I have

  componentDidMount() {
    this.props.navigation.addListener('focus', this._onFocus);
    this.props.navigation.addListener('blur', this._onBlur);
  }

  componentWillUnmount() {
    this.props.navigation.removeListener('blur', this._onBlur);
    this.props.navigation.removeListener('focus', this._onFocus);
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.isFocused && nextState.isFocused) {
      return true;
    }
    return false;
  }

  _onFocus = () => {
    // Update focus state. Latter state update is to refresh the content once
    // focus state is updated. Temp fix for react navigation tab swiping issues.
    // See https://github.com/react-community/react-navigation/issues/1257
    this.setState({isFocused: true}, () => { this.setState(this.state)});
  };

  _onBlur = () => {
    this.setState({isFocused: false});
  };

Bad and dirty? Probably. Worked for me for now :)

[kelset]

Pinging OP @bramvbilsen since this issue is quite old and related to an old version of the lib. If no answer I'll close in 7 days.

It may have been fixed via react-native-tab-view; if not and this still happen it would be really helpful to have the bug reproduced in a Snack Expo.

[kelset]

Hi there @bramvbilsen ,

In an effort to cleanup this project and prioritize a bit, since this issue had no follow up since my last comment I'm going to close it.

If you are still having the issue (especially if it's a bug report) please open a new issue that uses the new Issue Template to provide some more details to help us solve it.