React native navigation parameter not working with Switch navigator

Viewed 591

I'm using react native navigation and redux in my code. Below is my navigation structure

const MainTabNavigator = createBottomTabNavigator({
    Home,
    Tenants,
    WorkOrders: {
      screen: WorkOrders,
      navigationOptions: {
        title: 'Work Orders',
        headerTitle: 'Work Orders'
      }
    }
}, {
  navigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state.routes[navigation.state.index];
      return {
        headerTitle: routeName
      };
  }
});

const MainStackNavigator = createStackNavigator({
    MainTabNavigator
}, {
  defaultNavigationOptions: ({ navigation }) => {
      return {
        headerLeft: (
          <Icon
            style={{ paddingLeft: 10 }}
            onPress={() => navigation.openDrawer()}
            name="md-menu"
            size={30}
          />
        )
      };
    }
});

const AppDrawerNavigator = createDrawerNavigator({
  Menu: {
    screen: MainStackNavigator
  }
});

const AppSwitchNavigator = createSwitchNavigator({
  Login: { screen: Login },
  Main: { screen: AppDrawerNavigator }
});

Then, I have an action file where I navigate from the Login to the Main pages.

async
...
console.debug(response.data);  // Here the console shows value 10
NavigationService.navigate('Main', { userID: response.data });

In the HomeScreen page I tried to see the parameter value:

const { navigation } = this.props;
const userID = navigation.getParam('userID', '0');
console.debug(userID); // HERE THE VALUE IS 0, BUT SHOULD BE 10

What I am doing wrong? Thanks

1 Answers

You can't pass params with a SwitchNavigator, it's clearly intended in the doc:

By default, it does not handle back actions and it resets routes to their default state when you switch away.

If you really need to share objects between screens, you should use redux rather than react-navigation.

Related