reactjsreact-nativereact-native-tabnavigator

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?


Solution

  • All you have to do is something like this

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