React-native-router-flux: Tab switching changes routes.scene to tab wrapper on the second time you click the tab.

[vnovick]

Version

Tell us which versions you are using (react native 0.26 is required for v3):

"react-native": "^0.26.2",
"react-native-router-flux": "^3.26.5"

When switching between tab bars "routes.scene.name inside reducer" is changed to "tabbar" instead of the correct route name.

<Provider store={ store }>
      <RouterWithRedux>
          <Scene key="root" hideNavBar hideTabBar>
            <Scene key="launch" component={ Launch } title="Launch" initial={ true }/>
            <Scene key="tabBar" tabs={true} icon={ TabIcon } style={ tabStyling } duration={0}>
                <Scene key="schedule"
                       title="Schedule"
                       icon={ TabIcon }>

                  <Scene key="scheduleMain"
                         title="Schedule"
                         component={ Schedule }/>

                  <Scene key="talkDetails"
                         title="Talk Details"
                         component={ TalkDetails }/>
                </Scene>

                <Scene key="tickets"
                       title="Tickets"
                       icon={ TabIcon }
                       component={ Tickets }/>

                <Scene key="directions"
                       title="Directions"
                       icon={ TabIcon }
                       component={ Info }/>
            </Scene>
          </Scene>
      </RouterWithRedux>
    </Provider>

This is "routes.scene" the first time I access tickets tab:

This is the second time I try to access the tab:

[aksonov]

Please always use latest RNRF version (now it is 3.26.16)

[vnovick]

Updated the version. Still the same

[aksonov]

Please provide github repo with our Example project modification to demonstrate issue.

[gouxlord]

Got same issue, any idea how to fix it?

[andrispraulitis]

@aksonov Example: https://github.com/andrispraulitis/tournament

The issue actually seems that the second time you tap on a tab it doesn't call focus action on the scene. (In my example 2nd tap on tab focus only called on drawer)

[therealaldo]

Hey everyone, I've had the same issue and I found a quick workaround for the time being. I'm not really sure how viable of a solution it can be.

What I realized was the second go around through the different tabs, an array containing the children would be added to the scene object as well as the index the tab is in that array. I decided to just add a conditional to the routes reducer.

switch(action.type) {
    case 'focus':
      if(action.scene.index) {
        return {
          ...state,
          scene: action.scene.children[action.scene.index],
        }
      }
      return {
        ...state,
        scene: action.scene,
      }

    default:
      return state;
  }

[Herlevsen]

I have the same problem, using the drawer example from the documentation. In my scenario it's just the Drawer that gets focus the second time. Is a fix coming? @aksonov

[diegocouto]

That's great, @therealaldo! This issue was driving me mad, but I could solve this thanks to your workaround. In order to make it work for tabs with index 0 I modified your first condition a little bit:

if (action.scene.hasOwnProperty('index') && action.scene.children) { ... }