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

Just add the header and footer in your App.js file or in your NavigationContainer above and below your navigator like in this snack or the following example.

import * as React from 'react';
import { View, Button, Text, Dimensions, StatusBar } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to One"
        onPress={() => navigation.navigate('One')}
      />
      <Button
        title="Go to Two"
        onPress={() => navigation.navigate('Two')}
      />
    </View>
  );
}

function OneScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>One Screen</Text>
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home')}
      />
      <Button
        title="Go to Two"
        onPress={() => navigation.navigate('Two')}
      />
    </View>
  );
}

function TwoScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Two Screen</Text>
      <Button
        title="Go to One"
        onPress={() => navigation.navigate('One')}
      />
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  const width = Dimensions.get('window').width;
  return (
    <NavigationContainer>
      <StatusBar />
      <View
        style={{
          backgroundColor: '#007AFF',
          height: 50,
          width: width,
          justifyContent: 'center',
          alignItems: 'center',
          marginTop: StatusBar.currentHeight,
        }}>
        <Text>Header</Text>
      </View>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="One" component={OneScreen} />
        <Stack.Screen name="Two" component={TwoScreen} />
      </Stack.Navigator>
      <View
        style={{
          backgroundColor: '#007AFF',
          height: 50,
          width: width,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>Footer</Text>
      </View>
    </NavigationContainer>
  );
}

export default App;

Answer 2

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}
});