CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
quirky purple
quirky purple

Reputation: 2219

React-native change stack navigator title based on what is selected from nested drawer navigation

I have a drawer navigator nested inside a stack navigator like so

const DrawerNavigation = DrawerNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      drawerLabel: 'Home',
      drawerIcon: () => (
        <MaterialCommunityIcons name={'home'} size={25} />
        )
    },
  },
  Customers: {
    screen: Customers,
    navigationOptions: {
      drawerLabel: 'Customers',
      drawerIcon: () => (
        <MaterialCommunityIcons name={'account-switch'} size={25} />
        )
    },
  },
}, {
  drawerPosition: 'right',
})

const Navigation = StackNavigator({
  Home: {
    screen : DrawerNavigation,
    navigationOptions: ({ navigation }) => ({
      title: navigation.state.routeName, // Always 'Home'
    }),
  },
})

This gave me the layout I desired, with a "title bar" that displays on both IOS and android, and makes the drawer navigation the main method of navigating the application. However, I would like the title prop for the stack navigator to display the name of whatever screen is selected from the drawer navigator rather than a static string. Is this possible with this current setup? Perhaps this is the incorrect approach - I am new to react-native's navigation.

Upvotes: 0

Views: 2448

Answers (1)

magneticz
magneticz

Reputation: 2440

You can add title for each screen in the navigationOptions for each screen.

const DrawerNavigation = DrawerNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      drawerLabel: 'Home',
      title: 'Home, sweet home!' // <=== add this
      drawerIcon: () => (
        <MaterialCommunityIcons name={'home'} size={25} />
        )
    },
  },
  Customers: {
    screen: Customers,
    navigationOptions: {
      drawerLabel: 'Customers',
      title: 'Dear customers', // <=== and this
      drawerIcon: () => (
        <MaterialCommunityIcons name={'account-switch'} size={25} />
        )
    },
  },
}, {
  drawerPosition: 'right',
})

const Navigation = StackNavigator({
  Home: {
    screen : DrawerNavigation,
    navigationOptions: ({ navigation }) => ({
      title: navigation.state.routeName, // <=== remove this
    }),
  },
})

Also, you can set title on each screen component, more details here

Upvotes: 1

Related Questions