I have this navigator, I want to hide the header only from component = {PagRoutes} (pagRoutes is a tabNavigator)
I appreciate any help
export default function Routes() {
return (
<Stack.Navigator
initialRouteName='Login'
>
<Stack.Screen
name="Home"
component={PagRoutes}
options={{
title: 'Dashboard'
}}
/>
<Stack.Screen name="Login" component={Login}
options={{
headerTitleAlign: 'center',
title: 'Login',
}} />
<Stack.Screen name="Registro" component={Registro}
options={{
headerTitleAlign: 'center',
title: 'Registro',
}} />
</Stack.Navigator>
)
}
export default function PagRoutes() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Exercicios" component={Exercicios} />
</Tab.Navigator>
)
}
You can give extra config to the <Stack.Screen />. You're looking for the option: headerShown: none. I'd do something like this:
<Stack.Screen
name="Home"
component={PagRoutes}
options={{
title: 'Dashboard',
headerShown: none
}}
/>
Related
Hey lets suppose we got the following:
<Drawer.Navigator
initialRouteName="Home"
drawerContent={props => {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem label="B"/>
</DrawerContentScrollView>
)}
}>
<Drawer.Screen options={{
drawerLabel: 'A',
title: ''
}} name="Home" component={HomeScreen} />
<Drawer.Screen options={{
drawerLabel: 'C',
title: ''
}} name="Login" component={LoginScreen} />
</Drawer.Navigator>
As you can see I got a DrawerItem labeled B that I want to be between the screens labeled A and C, is there a solution for this?
I have 5 pages in bottomTab, and I want to navigate to others from these 5 pages. I looked at the docs in the official site of React navigation, wrote my code the same way, but it doesnt work.. I'm putting my code below, so you can have a look at it.
//This is my bottomTab
function Tabs(){
return(
<Tab.Navigator screenOptions={() => ({
tabBarActiveTintColor: '#fff',
tabBarInactiveTintColor: '#777',
headerTintColor:"#fff",
headerStyle:{
backgroundColor: '#000',
},
tabBarStyle: {
backgroundColor: '#000',
paddingBottom: 5,
paddingTop: 5,
},
})}>
<Tab.Screen
name='Historico' component={Historico}
options={{ tabBarIcon: ({ size, color }) => ( <AntDesign name='profile' size={size} color={color}/>)
}} />
<Tab.Screen
name='Relatorios'
component={Relatorios}
options={{ tabBarIcon: ({ size, color }) => (<AntDesign name='areachart' size={size} color={color}/> )
}} />
<Tab.Screen
name='Plus'
component={Plus}
options={{
tabBarLabel: '',
tabBarIcon: ({ size, color }) => (<AntDesign name='plus' size = {28} color={color}/> ),
headerShown: false
}} />
<Tab.Screen
name='Lembretes'
component={ShowLembretes}
options={{
tabBarLabel: 'Lembretes',
tabBarIcon: ({ size, color }) => (<AntDesign name='clockcircleo' size={size} color={color}/>)
}} />
<Tab.Screen
name='Mais'
component={Mais}
options={{ tabBarIcon: ({ size, color }) => (<AntDesign name='ellipsis1' size={size} color={color}/>)
}} />
</Tab.Navigator>
)
}
//These are my routes of my app, I put my `Tab` inside my `stack`
export default function Routes(){
return(
<NavigationContainer>
<Stack.Navigator initialRouteName="Tabs"> //Its `Tabs` just for development
<Stack.Screen name= "Preload" component= {Preload} options={{ headerShown: false}}/>
<Stack.Screen name= "Tabs" component={Tabs} options={{ headerShown: false }}/>
<Stack.Screen name= "Despesa" component={Despesa} />
<Stack.Screen name= "Serviço" component={Serviço} />
<Stack.Screen name= "Receita" component={Receita} />
<Stack.Screen name= "AddLembrete" component={AddLembrete} />
<Stack.Screen name= "Abastecimento" component={Abastecimento} />
<Stack.Screen name= "Veiculos" component={Veiculos} />
</Stack.Navigator>
</NavigationContainer>
)
}
export default function Plus({ navigation }){
return (
<TelaPlus style={estilos.tela}>
<View style={estilos.linha1}>//This is the way Im trying to navigate,is it wrong?
<Box onPress={()=> navigation.navigate('Despesa')}>
<MaterialCommunityIcons name="elevation-decline" size={24} color="white" />
<Texto>Despesa</Texto>
</Box>
<Box onPress={()=> navigation.navigate('Serviço')}>
<MaterialCommunityIcons name="car-wrench" size={24} color="white" />
<Texto>Serviço</Texto>
</Box>
<Box onPress={()=> navigation.navigate('Receita')}>
<MaterialCommunityIcons name="elevation-rise" size={24} color="white" />
<Texto>Receita</Texto>
</Box>
</View>
<View style={estilos.linha2} onPress={()=> navigation.navigate('Lembrete')}>
<Box style={estilos.box}>
<MaterialCommunityIcons name="clock-plus-outline" size={24} color="white" />
<Texto>Lembrete</Texto>
</Box>
<Box onPress={()=> navigation.navigate('Abastecimento')}>
<MaterialCommunityIcons name="gas-station" size={24} color="white" />
<Texto>Abastecimento</Texto>
</Box>
</View>
</TelaPlus>
)
};
Please, any help will be welcome! Thanks!
Sorry for my English, its not mt first language, still learning it too.
you can set tabLongPress act like tabPress
<BottomTab.Navigator
screenListeners={({ navigation }) => ({
tabLongPress: (e) => {
navigation.jumpTo(e.target.split('-')[0]);
},
})}
>
for more detail, check this link
When navigating to a screen from my second bottom tab(tab2), the app switches to tab1 and then navigates to the screen. When you click on the text to change screens, you can see the tab1 screen flash right before it swipes to the page.
How can I stay on the tab I am navigating from? I want to navigate to screen3 while keeping the tab on tab2.
Why is it changing tabs upon navigation?
To reproduce the bug... Click Tab2 -> click the text -> and you can see the bottom tab switch and the tab1 screen flashing before going to screen3.
Here is a snack code reproducing my project exactly along with my app.js below.
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Stack.Navigator
initialRouteName="Home">
<Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
<Stack.Screen name="Screen1" component= {Screen1} options={{headerShown: false}}/>
<Stack.Screen name="Screen2" component= {Screen2} options={{headerShown: false}}/>
<Stack.Screen name="Screen3" component= {Screen3} options={{headerShown: false}}/>
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Tab1"
screenOptions={{
tabBarActiveTintColor: 'white',
tabBarInactiveTintColor: '#4d4d4d',
tabBarStyle: {
backgroundColor: '#d1cfcf',
borderTopColor: 'transparent',
},
}}
>
<Tab.Screen
name="Tab1"
component={MyTabs}
options={{
tabBarLabel: 'Tab1',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Tab2"
component={Screen2}
options={{
tabBarLabel: 'Tab2',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
const Stack = createStackNavigator();
In your demo code, navigating to screen1 shows the bottomTabBar at the bottom, is this your required use case or a bug. I am assuming that it is bug and you don't want that.
To achieve that , it is recommended to use screens first and then BottomTabs. So define your bottomTabs in screen1 then your existing code works as you want it.
your App should return
<NavigationContainer>
<Stack.Navigator
initialRouteName="Tabs">
<Stack.Screen name="Tabs" component= {MyTabs} options={{headerShown: false}}/>
<Stack.Screen name="Screen1" component= {Screen1} options={{headerShown: false}}/>
<Stack.Screen name="Screen2" component= {Screen2} options={{headerShown: false}}/>
<Stack.Screen name="Screen3" component= {Screen3} options={{headerShown: false}}/>
</Stack.Navigator>
your MyTabs function should return
<Tab.Navigator
initialRouteName="Home"
screenOptions={{
tabBarActiveTintColor: 'white',
tabBarInactiveTintColor: '#4d4d4d',
tabBarStyle: {
backgroundColor: '#d1cfcf',
borderTopColor: 'transparent',
},
}}
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: 'Tab1',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Tab2"
component={Screen2}
options={{
tabBarLabel: 'Tab2',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
Working snack code is here
Edit: for bottomTabs to be visible even after navigation, you should create another Stacknavigator as you did for Tab1.
your code should look something like this,
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen1"
component={Screen1}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen2"
component={Screen2}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen3"
component={Screen3}
options={{ headerShown: false }}
/>
</Stack.Navigator>
);
}
function MySecondTabs() {
return (
<Stack.Navigator initialRouteName="Screen2">
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen1"
component={Screen1}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen2"
component={Screen2}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen3"
component={Screen3}
options={{ headerShown: false }}
/>
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Tab1"
screenOptions={{
tabBarActiveTintColor: 'white',
tabBarInactiveTintColor: '#4d4d4d',
tabBarStyle: {
backgroundColor: '#d1cfcf',
borderTopColor: 'transparent',
},
}}>
<Tab.Screen
name="Tab1"
component={MyTabs}
options={{
tabBarLabel: 'Tab1',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Tab2"
component={MySecondTabs}
options={{
tabBarLabel: 'Tab2',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
working snack code
I am using React-Navigation.5 while doing bottom-tab-menu i am getting following errors
TypeError: Cannot read property'_context' of undefined
this error is located at in forwardRef(BaseNavigationContainer) (at navigationcontainer.tsx)
in themeProvider(at NavigationContainer.tsx.)
in FOrwardRef(NavigationContainer)
Require cycle: node_modules#react-navigation\core\src\BaseNavigationContainer.tsx -> node_modules#react-navigation\core\src\useOptionsGetters.tsx -> node_modules#react-navigation\core\src\BaseNavigationContainer.tsx
My app.js code
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import React, { useEffect, Component } from 'react';
// import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createDrawerNavigator, DrawerItems } from '#react-navigation/drawer';
import { NavigationActions } from '#react-navigation/compat';
import 'react-native-gesture-handler';
// import Icon from 'react-native-vector-icons/Ionicons';
import Icon from 'react-native-vector-icons/FontAwesome5';
// import Icon from 'react-native-vector-icons/FontAwesome';
import HomeScreen from './screens/HomeScreen';
import AddPostScreen from './screens/AddPostScreen';
import ProfileScreen from './screens/ProfileScreen';
import SearchScreen from './screens/SearchScreen';
import SavedPostsScreen from './screens/SavedPostsScreen';
import CommentsScreen from './screens/CommentsScreen';
import LogInScreen from './screens/LogInScreen';
import RegisterScreen from './screens/RegisterScreen';
import EditProfileScreen from './screens/EditProfileScreen';
import EditMobileScreen from './screens/EditMobileScreen';
import EditPasswordScreen from './screens/EditPasswordScreen';
import EditProfilePicScreen from './screens/EditProfilePicScreen';
import ProfilePostsScreen from './screens/ProfilePostsScreen';
import UsersProfileScreen from './screens/UsersProfileScreen';
import UsersPostsScreen from './screens/UsersPostsScreen';
import ViewPostScreen from './screens/ViewPostScreen';
import FollowersListScreen from './screens/FoollwersListScreen';
import FollowingListScreen from './screens/FollowingListScreen';
import ForgotPasswordScreen from './screens/ForgotPasswordScreen';
import EditForgotPasswordScreen from './screens/EditForgotPasswordScreen';
import SettingsScreen from './screens/SettingsScreen';
import ContactScreen from './screens/ContactScreen';
import { enableScreens } from 'react-native-screens';
enableScreens();
import AuthScreen from './screens/AuthScreen';
import Example from './screens/Example';
const HomeStack = createStackNavigator();
function HomeStackScreen() {
return (
<HomeStack.Navigator>
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: false,
headerTitle: false,
// tabBarLabel: 'Home!'
}}
/>
<HomeStack.Screen
name="LogIn"
component={LogInScreen}
options={{
headerTitle: 'LogIn',
tabBarLabel: 'Login!'
}}
/>
<HomeStack.Screen
name="Register"
component={RegisterScreen}
options={{
headerTitle: 'Register',
tabBarLabel: 'Register!'
}}
/>
<HomeStack.Screen
name="ForgotPassword"
component={ForgotPasswordScreen}
options={{
headerTitle: 'Forgot Password',
tabBarLabel: 'Forgot Password!'
}}
/>
<HomeStack.Screen
name="UsersProfile"
component={UsersProfileScreen}
options={{
headerTitle: 'Users Profile',
tabBarLabel: 'Users Profile!'
}}
/>
<HomeStack.Screen
name="UsersPosts"
component={UsersPostsScreen}
options={{
headerShown: false,
headerTitle: false,
// headerTitle: 'Users Posts',
tabBarLabel: 'Users Posts!'
}}
/>
<HomeStack.Screen
name="Comments"
component={CommentsScreen}
options={{
headerTitle: 'Comments',
tabBarLabel: 'Comments!'
}}
/>
</HomeStack.Navigator>
);
}
const SearchStack = createStackNavigator();
function SearchStackScreen() {
return (
<SearchStack.Navigator>
<SearchStack.Screen
name="Search"
component={SearchScreen}
options={{
headerShown: false,
headerTitle: false,
// headerTitle: 'Search',
tabBarLabel: 'Search!'
}}
/>
<SearchStack.Screen
name="UsersProfile"
component={UsersProfileScreen}
options={{
// headerTitle: 'Users Profile',
tabBarLabel: 'UsersProfile!'
}}
/>
<SearchStack.Screen
name="UsersPosts"
component={UsersPostsScreen}
options={{
// headerTitle: ' Users Posts',
tabBarLabel: ' Users Posts!'
}}
/>
<SearchStack.Screen
name="ViewPost"
component={ViewPostScreen}
options={{
// headerTitle: 'View Post',
tabBarLabel: 'View Post!'
}}
/>
</SearchStack.Navigator>
);
}
const AddPostStack = createStackNavigator();
function AddPostStackScreen() {
return (
<AddPostStack.Navigator>
<AddPostStack.Screen
name="AddPost"
component={AddPostScreen}
options={{
headerTitle: 'AddPost',
tabBarLabel: 'AddPost!'
}}
/>
<AddPostStack.Screen
name="LogIn"
component={LogInScreen}
options={{
headerTitle: 'LogIn',
tabBarLabel: 'Login!'
}}
/>
<AddPostStack.Screen
name="Register"
component={RegisterScreen}
options={{
headerTitle: 'Register',
tabBarLabel: 'Register!'
}}
/>
<AddPostStack.Screen
name="ForgotPassword"
component={ForgotPasswordScreen}
options={{
headerTitle: 'Forgot Password',
tabBarLabel: 'Forgot Password!'
}}
/>
</AddPostStack.Navigator>
);
}
const SavedPostsStack = createStackNavigator();
function SavedPostsStackScreen() {
return (
<SavedPostsStack.Navigator>
<SavedPostsStack.Screen
name="SavedPosts"
component={SavedPostsScreen}
options={{
headerShown: false,
headerTitle: false,
// headerTitle: 'SavedPosts',
tabBarLabel: 'SavedPosts!'
}}
/>
<SavedPostsStack.Screen
name="LogIn"
component={LogInScreen}
options={{
headerTitle: 'LogIn',
tabBarLabel: 'Login!'
}}
/>
<SavedPostsStack.Screen
name="Register"
component={RegisterScreen}
options={{
headerTitle: 'Register',
tabBarLabel: 'Register!'
}}
/>
<SavedPostsStack.Screen
name="ForgotPassword"
component={ForgotPasswordScreen}
options={{
headerTitle: 'Forgot Password',
tabBarLabel: 'Forgot Password!'
}}
/>
<SavedPostsStack.Screen
name="Comments"
component={CommentsScreen}
options={{
headerTitle: 'Comments',
tabBarLabel: 'Comments!'
}}
/>
</SavedPostsStack.Navigator>
);
}
const ProfileStack = createStackNavigator();
const ProfileStackScreen = () => {
return (
<ProfileStack.Navigator>
<ProfileStack.Screen
name="Profile"
component={ProfileScreen}
options={{
headerShown: false,
headerTitle: false,
// headerTitle: 'Profile',
// tabBarLabel: 'profile!'
}}
/>
<ProfileStack.Screen
name="LogIn"
component={LogInScreen}
options={{
headerTitle: 'LogIn',
tabBarLabel: 'Login!'
}}
/>
<ProfileStack.Screen
name="Register"
component={RegisterScreen}
options={{
headerTitle: 'Register',
tabBarLabel: 'Register!'
}}
/>
<ProfileStack.Screen
name="ForgotPassword"
component={ForgotPasswordScreen}
options={{
headerTitle: 'Forgot Password',
tabBarLabel: 'Forgot Password!'
}}
/>
<ProfileStack.Screen
name="EditProfile"
component={EditProfileScreen}
options={{
headerTitle: 'Edit Profile',
tabBarLabel: 'Edit Profile!'
}}
/>
<ProfileStack.Screen
name=" EditPassword"
component={EditPasswordScreen}
options={{
headerTitle: ' Edit Password',
tabBarLabel: ' Edit Password!'
}}
/>
<ProfileStack.Screen
name="EditMobile"
component={EditMobileScreen}
options={{
headerTitle: 'Edit Mobile',
tabBarLabel: 'Edit Mobile!'
}}
/>
<ProfileStack.Screen
name="EditProfilePic"
component={EditProfilePicScreen}
options={{
headerTitle: 'Edit ProfilePic',
tabBarLabel: 'Edit ProfilePic!'
}}
/>
<ProfileStack.Screen
name="EditForgotPassword"
component={EditForgotPasswordScreen}
options={{
headerTitle: 'Edit ForgotPassword',
tabBarLabel: 'Edit ForgotPassword!'
}}
/>
<ProfileStack.Screen
name="ProfilePosts"
component={ProfilePostsScreen}
options={{
headerShown: false,
headerTitle: false,
// headerTitle: 'Profile Posts',
tabBarLabel: 'Profile Posts!'
}}
/>
<ProfileStack.Screen
name="FollowersList"
component={FollowersListScreen}
options={{
headerTitle: 'Followers List',
tabBarLabel: 'Followers List!'
}}
/>
<ProfileStack.Screen
name="FollowingList"
component={FollowingListScreen}
options={{
headerTitle: 'Following List',
tabBarLabel: 'Following List!'
}}
/>
<ProfileStack.Screen
name="UsersProfile"
component={UsersProfileScreen}
options={{
headerTitle: 'Users Profile',
tabBarLabel: 'Users Profile!'
}}
/>
<ProfileStack.Screen
name="UsersPosts"
component={UsersPostsScreen}
options={{
headerShown: false,
headerTitle: false,
// headerTitle: 'Users Posts',
tabBarLabel: 'Users Posts!'
}}
/>
</ProfileStack.Navigator>
);
}
const AppTabs = createBottomTabNavigator();
const AppTabsScreen = () => (
<AppTabs.Navigator
tabBarOptions={{
activeTintColor: '#00a63f',
inactiveTintColor: '#010203',
labelStyle: {
fontSize: 12,
fontWeight: 'bold'
},
style: {
backgroundColor: '#ffffff',
justifyContent: 'center',
},
// showIcon: true,
// showLabel: true,
// tabStyle: { height: 50, backgroundColor: '#f0ffff' },
// indicatorStyle: { backgroundColor: 'red', },
// iconStyle: { width: '100%' },
}}
// lazy={true}
>
<AppTabs.Screen
name="Home"
component={HomeStackScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name="home" color={color} size={size} solid />
),
}}
/>
<AppTabs.Screen
name="Search"
component={SearchStackScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name="search" color={color} size={size} solid />
),
}}
/>
<AppTabs.Screen
name="AddPost"
component={AddPostStackScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name="plus-circle" color={color} size={size} solid />
),
}}
/>
<AppTabs.Screen
name="SavedPosts"
component={SavedPostsStackScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name="save" color={color} size={size} />
),
}}
/>
<AppTabs.Screen
name="Profile"
component={ProfileStackScreen}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name="user" color={color} size={size} />
),
}}
/>
</AppTabs.Navigator >
);
const AppDrawer = createDrawerNavigator();
const AppDrawerScreen = () => (
<AppDrawer.Navigator>
<AppDrawer.Screen name="Home-Screen" component={AppTabsScreen} />
<AppDrawer.Screen name="Settings" component={SettingsScreen} />
<AppDrawer.Screen name="Contact" component={ContactScreen} />
</AppDrawer.Navigator>
);
// const RootStack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<AppDrawerScreen />
</NavigationContainer>
);
}
If anyone know the solution for the error please tell me
I'm building a React-Native app with Expo. I try to implement BottomTabNavigator, but for some reason the content (TripsPage) appears twice.
this is my Implementation of the navigation:
<NavigationContainer>
<Stack.Navigator
initialRouteName="TripsPage"
screenOptions={{
headerStyle: {
backgroundColor: Colors.primary,
},
headerTintColor: 'black',
headerTitleAlign: 'center',
headerTitleStyle: {
fontWeight: 'bold',
fontSize: 18,
},
}}
>
<Stack.Screen
name="TripDetails"
component={TripDetails}
options={{ title: 'Trip Details' }}
/>
<Stack.Screen
name="TripsPage"
component={TripsPage}
options={{ title: 'Home' }}
/>
<Stack.Screen
name="MVPForm"
component={Form}
options={{ title: 'Trippy' }}
/>
<Stack.Screen
name="Result"
component={Result}
options={{ title: 'Car Allocation' }}
/>
</Stack.Navigator>
</NavigationContainer>
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={TripsPage} />
</Tab.Navigator>
</NavigationContainer>
Is anyone familiar with this issue?
Hello try using only one <NavigationContainer> and wrap all the navigators in that, like this:
<NavigationContainer>
<Stack.Navigator
initialRouteName="TripsPage"
screenOptions={{
headerStyle: {
backgroundColor: Colors.primary,
},
headerTintColor: 'black',
headerTitleAlign: 'center',
headerTitleStyle: {
fontWeight: 'bold',
fontSize: 18,
},
}}
>
<Stack.Screen
name="TripDetails"
component={TripDetails}
options={{ title: 'Trip Details' }}
/>
<Stack.Screen
name="TripsPage"
component={TripsPage}
options={{ title: 'Home' }}
/>
<Stack.Screen
name="MVPForm"
component={Form}
options={{ title: 'Trippy' }}
/>
<Stack.Screen
name="Result"
component={Result}
options={{ title: 'Car Allocation' }}
/>
</Stack.Navigator>
<Tab.Navigator>
<Tab.Screen name="Home" component={TripsPage} />
</Tab.Navigator>
</NavigationContainer>