React Native, fixed header and footer for entire app with Navigation Drawer

Question

I need to create a React native app with Navigation Drawer, and i'm facing some problems.

I have 3 different screen: "HomeScreen", "ScreenOne", "ScreenTwo", "ScreenThree" and this is how my code for navigators:

export const HomeNavigator = createStackNavigator({
    Home : { screen : HomeScreen },
    One: { screen : ScreenOne},
    Two : { screen : ScreenTwo }
},{
    unmountInactiveRoutes : true,
    headerMode: 'none'
});

the above navigator is specific for HomeScreen, where user can navigate to screenOne or screenTwo by tapping some element inside it. The navigator below is for entire app:

export const AppDrawerNavigator = createDrawerNavigator({
    HomePage : {
        screen:HomeNavigator,
        navigationOptions: {
            drawerLabel: 'Homepage',
            drawerIcon : ({tintColor}) =>(
                <Icon name="home" color={tintColor}/>
            )
        }
    },
    One: {
        screen:ScreenOne,
        navigationOptions: {
            drawerLabel: 'One'
        }
    },    
    Two: {
        screen:ScreenTwo,
        navigationOptions: {
            drawerLabel: 'Two'
        }
    },    
    Three: {
        screen:ScreenThree,
        navigationOptions: {
            drawerLabel: 'Three'
        }
    },{
        initialRouteName: 'HomePage',
        unmountInactiveRoutes : true,
        headerMode: 'none'
    }
});

Now i need to put a Fixed header and footer for entire app (the drawer must overlay header and footer when is opened), where header must show an Hamburger menu button inside HomePage, and a BackButton near Hamburger inside the other screen (the footer remain the same all over the app). How can i do?

Answer 1

You can configure your header with react navigation using navigationOptions property. Add navigationOptions inside your stack navigator,then all your screens inside the stack navigator should contain a fixed header.

Example:

 {

      navigationOptions: ({ navigation }) => ({
        headerRight: (
          <View>
            <TouchableOpacity
              onPress={() => navigation.openDrawer()}
            >
              <Image source={hamburgerIcon} style={{ height: 15, width: 15 }} />
            </TouchableOpacity>
          </View>
        ),
        headerTintColor: 'color',
        headerTitle: (

          <Text>
           title
          </Text>

        ),
        headerStyle: {
          backgroundColor: '#fff',
        },
      }),
    });

For fixed footer you can use Tab navigation.

Example:

const TabNavigator = createBottomTabNavigator({
   Home: { screen: HomeScreen },
   Settings: { screen: SettingsScreen },
   Gallery: { screen: Gallery}
});