Revision history [back]

To utilize a view above and between bottom tabs in React Native Navigation, you can add a Stack Navigator with a header and place it between the bottom tabs and the screens. Here are the steps:

1. Create a Stack Navigator:

const Stack = createStackNavigator();

1. Create a component for the header that will be placed in the Stack Navigator:

const Header = () => {
  return (
    <View style={styles.headerContainer}>
      <Text style={styles.headerText}>Header</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  headerContainer: {
    backgroundColor: 'white',
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

1. Add the Stack Navigator to the bottom tabs navigation:

<Tab.Navigator>
  <Tab.Screen name="First" component={FirstScreen} />
  <Tab.Screen name="Second" component={SecondScreen} />
  <Tab.Screen name="Third" component={ThirdScreen} />
  <Tab.Screen name="Fourth" component={FourthScreen} />
  <Tab.Screen name="Fifth" component={FifthScreen} />
</Tab.Navigator>

1. Wrap the screens with the Stack Navigator:

<Tab.Screen
  name="Fourth"
  options={{
    tabBarLabel: 'Fourth',
    tabBarIcon: ({ color }) => (
      <MaterialIcons name="folder" size={24} color={color} />
    ),
  }}
>
  {() => (
    <Stack.Navigator>
      <Stack.Screen name="Fourth" component={FourthScreen} />
    </Stack.Navigator>
  )}
</Tab.Screen>

1. Place the Header component in the Stack Navigator:

<Stack.Navigator>
  <Stack.Screen
    name="Fourth"
    component={FourthScreen}
    options={{ header: () => <Header /> }}
  />
</Stack.Navigator>

This will add a header component above the FourthScreen and between the bottom tabs. You can customize the Header component as per your requirements.