Ask Your Question

How can I utilize a view above and between bottom tabs in React Native Navigation?

asked 2023-02-22 11:00:00 +0000

nofretete gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted

answered 2022-10-30 22:00:00 +0000

pufferfish gravatar image

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>

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.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} />
  1. Wrap the screens with the Stack Navigator:
    tabBarLabel: 'Fourth',
    tabBarIcon: ({ color }) => (
      <MaterialIcons name="folder" size={24} color={color} />
  {() => (
      <Stack.Screen name="Fourth" component={FourthScreen} />
  1. Place the Header component in the Stack Navigator:
    options={{ header: () => <Header /> }}

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

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer

Question Tools


Asked: 2023-02-22 11:00:00 +0000

Seen: 9 times

Last updated: Oct 30 '22