CODEWITHSUNDEEP
reactjsnavigationnative
J. Doe
J. Doe

Reputation: 15

React Navigation: nesting stack and tab navigator

I have a TabNavigator inside a StackNavigator. I cannot define headers inside the different classes that are within the Tabs themself as the TabNavigator has no header (that I know of). So I tried to define the it when initializing the StackNavigator. A button appears on top, but pressing it gives an error for redirecting to an undefined place. probably the this.props.navigator.navigate part contains the mistake, with the this not referring to what I want it to refer to, but I can't find the right syntax anywhere.

const NestedNavigator = createBottomTabNavigator ({
  "route1" : {screen : Screen1,
  },
  "route2" : Screen2,
  "route3" : Screen3
  }, 
);

const Navigator = createStackNavigator ({
  "routeA" : ScreenA,
  "routeB" : {
    screen : NestedNavigator, 
    navigationOptions: { headerRight: (<Button title="home" onPress={() => this.props.navigation.navigate("routeC")}/>)}},
  "routeC" : ScreenB},
  {
    initialRouteName: "routeA",
  }
);

Upvotes: 1

Views: 1158

Answers (1)

Vahid Al
Vahid Al

Reputation: 1611

navigationOptions is a static property of the component, this does not refer to an instance of the component and therefore no props are available. Instead, if we make navigationOptions a function then React Navigation will call it with an object containing { navigation, navigationOptions, screenProps } -- in this case, all we care about is navigation, which is the same object that is passed to your screen props as this.props.navigation.

navigationOptions = ({ navigation }) => { 
  return {
    headerRight: <Button title="home" onPress={() => 
                   navigation.navigate("routeC")}/>
  }
}

Upvotes: 1

Related Questions