StackNavigator nested into TabNavigator changing selected tab at launch

[ou2s]

My app is structured as followed:

const AStack = enhance(StackNavigator)(ARoute, defaultNavigationOptions);

const BStack = enhance(StackNavigator)(BRoute, defaultNavigationOptions);

const CStack = enhance(StackNavigator)(CRoute, defaultNavigationOptions);

const Tab = TabNavigator(
  {
    A: { screen: AStack },
    B: { screen: BStack },
    C: { screen: CStack }
  },
  {
    tabBarPosition: "bottom",
     initialRouteName: "A",
    tabBarOptions: {
         ...
    }
  }
);

class App extends React.Component<{}, {}> {
  public render() {
  return (
      <Provider store={store}>
        <Tab />
      </Provider>
    );
  }
}

The problem: My app is launching with the 3rd tab (C) selected instead of the 1st one (A). The problem does not occur when I don't enhance the StackNavigator. Unfortunately, I'm not able to programmatically change the selected tab so I'm stuck...

Version used:

• React Navigation beta-15
• React Native 48.4

[elivinsky]

Did you try setting the initialRouteName?

https://reactnavigation.org/docs/navigators/tab#TabNavigatorConfig

[ou2s]

@elivinsky Unfortunately, this parameter does not work when StackNavigators are enhanced. I've updated the code sample.

[ou2s]

Found a way to prevent this unwanted behavior.

initialRouteName was not the problem since it was going to this route in the first place, but 1/2 second after it was taken to the last tab of my tab navigator.

I had to comment the componentWillMount in enhanceScreen.js. I only use this library for setOptions and I did not notice any problem by commenting this code.

[ou2s]

It seems like this issue is related to an underlying problem:
when you call setOptions into a screen, this screen triggers a switch in the tab navigator so that the screen has now focus.

This is problematic if I have a setOptions called after loading data from the API to configure the header with API data. If you switch to another tab during the loading time, it will switch back to the tab wheresetOptions was called once the loading is finish.