CODEWITHSUNDEEP
reactjsreact-nativereact-native-tabnavigator
Justin Priede
Justin Priede

Reputation: 119

Bottom tab across all pages

I understand that if I make the second page a tab, that the bottom tab will render. Although, I do not want to have it as a separate tab, I would just like the bottom tab to render regardless across all screens.

I have made a replica in this snack here

Also, why does the header show when I set it to false?

Upvotes: 1

Views: 2908

Answers (1)

Rizwan Atta
Rizwan Atta

Reputation: 3295

All you have to do is something like this

  • Root Stack as Tab Navigator Stack
  • add a Tab Screen which contains a StackNavigator having code for the home page as top stack Screen and then the rest of the pages should be there too afterward

Here a Snack Code is shown for it LINK

CODE CAN BE SEEN HERE TOO:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import SecondPage from './screens/SecondPage';

import Home from './screens/Home'

const Tab = createBottomTabNavigator();

function MyNonTabStack() {
//    const dispatch = useDispatch();
//    const auth = useSelector((state) => state.auth);
  return (
    <Stack.Navigator
      initialRouteName="Home"
    >
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
           headerShown:false,
        }}
      />
     <Stack.Screen name="SecondPage" component= {SecondPage} options={{headerShown: false}}/> 
    </Stack.Navigator>
  );
}

export default function App() {

  return (
    <NavigationContainer>
     <Tab.Navigator
      initialRouteName="Home"
      tabBarOptions={{
        activeTintColor: '#F60081',
        style: {
          backgroundColor: '#FFFFFF',
          borderTopColor: 'transparent'
        }
      }}
     
    >
      <Tab.Screen
        name="Home"
        component={MyNonTabStack}
        options={{
          headerShown:false,
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />

    </Tab.Navigator>
  );
    </NavigationContainer>
  );
}

const Stack = createStackNavigator();

Upvotes: 7

Related Questions