react native access title of the current screen in nested drawer navigation

Question

I have a react native app using react-navigation where i want my header to look like this with a title and subtitle.

I'm using native-base Header to achieve this. At the root of the application i have a tabs navigation and each tab has a drawer navigation of its own. Like below

For all the tabs there is separate Header component inside which the Title i have hard coded. The sub title is supposed to be the title of the current active screen similar to the drawerLabel or the title which are configured in the navigation options. But i'm not able to access the same in my header component. I even pass the navigation as a prop to the header but it contains the tab as the active route and not the initialRoute of the drawer as active route. This is how i use the header component

 <MyHeader navigation={navigation} subTitle={''} openDrawer={this.openDrawer}></MyHeader >

Below is my Drawer config

const DrawerConfig = {
   Screen1: {
      screen: Screen1,
      path: 'screen1',
      navigationOptions: ({ navigation }) => ({
         title: `Screen 1`,
         drawerLabel: 'Screen 1',
      }),
   }, Screen2: {
      screen: Screen2,
      path: 'screen2',
      navigationOptions: ({ navigation }) => ({
         title: `Screen 2`,
         drawerLabel: 'Screen 2'
      }),
   }
}
const DrawerNavigator = createDrawerNavigator(DrawerConfig, {
   initialRouteName: 'Screen1',
   contentComponent: CustomDrawerComponent,
});
const MyDrawerNavigator = createAppContainer(DrawerNavigator);
export default MyDrawerNavigator;

I have event tried creating stack for each of the screen and have the default header but i was not able to customize it by passing in a custom header component which the docs say should work.

 const MyScreen1Stack = createStackNavigator(
    {
       Screen1: {
          screen: Screen1,
       }
    },
    {
       navigationOptions: ({ navigation }) => ({
          initialRouteName: 'Screen1',
          title: 'Screen 1',
          drawerLabel: 'Screen 1',
          header: ()=> <MyHeader />,
          heaMode: 'screen'
       }),
    },
 );

Below are the dependencies i have

"native-base": "^2.13.8",
"react": "16.8.1",
"react-native": "0.61.2",
"react-native-gesture-handler": "~1.3.0",
"react-native-modal": "^11.4.0",
"react-native-reanimated": "~1.2.0",
"react-native-screens": "1.0.0-alpha.23",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.1",
"react-navigation-stack": "^1.10.2",
"react-navigation-tabs": "^2.5.6"

Any help will be highly appreciated.

score 1 · Accepted Answer · answered Oct 31 '19 at 05:44

  const MyScreen1Stack = createStackNavigator(
{
   Screen1: {
      screen: Screen1,
      navigationOptions: ({ navigation }) => ({
      header:<CustomHeader navigation={navigation}/>
      });
   }
});

Using custom header to this way and pass navigation props to header so you can access navigation in custom header and you can pass title and subtitle as a props as well.

<CustomHeader title="this is title" subtitle="this is subtitle"/>

react native access title of the current screen in nested drawer navigation

1 Answers1