We Keep Coding

React native react-navigation(v6): How to set presentation options on each screen

I'm building an chat application using react native.(for study)
I wanted to apply modal presentation mode only to the Profile screen, so I passed the option value like options={{ presentation: 'modal', headerShown: true }}, but it was not applied. However, headerShown, one of the option values, was applied normally.
How can I apply different presentation modes to different screens?
For example, in the code below, I want to use the Modal presentation mode for the Profile screen and the Card presentation mode for the Chat screen.
import React from 'react';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import Profile from '../screens/profile';
import Chat from '../screens/chat';
const NativeStack = createNativeStackNavigator();
const ScreensRouter = () => (
<NativeStack.Navigator screenOptions={{ headerShown: false }}>
<NativeStack.Screen name="Profile" component={Profile} />
<NativeStack.Screen name="Chat" component={Chat} />
</NativeStack.Navigator>
);
export default ScreensRouter;
Additionally, below is the full code.
// rootRouter.js : Entry point
import React from 'react';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import ScreensRouter from './screensRouter';
import TabRouter from './tabRouter';
const NativeStack = createNativeStackNavigator();
const RootRouter = () => {
return (
<NativeStack.Navigator
screenOptions={{
headerShown: false,
presentation: 'modal',
}}
>
<NativeStack.Screen name="TabRouter" component={TabRouter} />
<NativeStack.Screen name="ScreensRouter" component={ScreensRouter} />
</NativeStack.Navigator>
);
};
export default RootRouter;
// screensRouter.js
import React from 'react';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import Profile from '../screens/profile';
import AddFriends from '../screens/addFirend';
import SearchFriend from '../screens/searchFriend';
import Chat from '../screens/chat';
import EditProfile from '../screens/editProfile';
import FaceTime from '../screens/faceTime';
import FullImage from '../screens/fullImage';
const NativeStack = createNativeStackNavigator();
const ScreensRouter = () => (
<NativeStack.Navigator screenOptions={{ headerShown: false }}>
<NativeStack.Screen
name="Profile"
component={Profile}
options={{ presentation: 'modal', headerShown: true }}
/>
<NativeStack.Screen name="AddFriend" component={AddFriends} />
<NativeStack.Screen name="SearchFriend" component={SearchFriend} />
<NativeStack.Screen name="Chat" component={Chat} />
<NativeStack.Screen name="EditProfile" component={EditProfile} />
<NativeStack.Screen name="FaceTime" component={FaceTime} />
<NativeStack.Screen name="FullImage" component={FullImage} />
</NativeStack.Navigator>
);
export default ScreensRouter;

As per documentation https://reactnavigation.org/docs/modal/, what you are most likely looking for is <Stack.Group/> for setting different behavior of screens.
Check code below:
function RootStackScreen() {
return (
<RootStack.Navigator>
<RootStack.Group>
<RootStack.Screen name="Home" component={HomeScreen} />
<RootStack.Screen name="Details" component={DetailsScreen} />
</RootStack.Group>
<RootStack.Group screenOptions={{ presentation: 'modal' }}>
<RootStack.Screen name="MyModal" component={ModalScreen} />
</RootStack.Group>
</RootStack.Navigator>
);
}

Issue with React Navigation 6.XX

I have 3 bottom tabs in my home screen stack. The first tab, which is home, has some buttons on it. On click of each button, a new screen is supposed to be displayed. So far, it hasn't worked. I keep getting this error:
The action 'NAVIGATE' with payload {"name":"ScreenName"} was not handled by any navigator.
Do you have a screen named 'ScreenName'?
Here's an overview of my Navigators:
StackNavigator -> Home Screen (BottomNavigator) -> HomeStackScreen(Stack Navigtor)...others are just screens in the bottom navigator for now
In code:
import * as React from 'react'
import { StatusBar, View, StyleSheet } from 'react-native'
import { NavigationContainer, Theme } from '#react-navigation/native'
import { createNativeStackNavigator } from '#react-navigation/native-stack'
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import { navigationRef } from './NavigationService'
const Stack = createNativeStackNavigator()
const AuthStack = createNativeStackNavigator()
const BottomStack = createBottomTabNavigator()
const HomeStack = createNativeStackNavigator()
import Home from 'app/screens/Home'
import Notifications from 'app/screens/WearNotifications'
import ScanCloth from 'app/screens/ScanCloth'
import MyWardrobe from 'app/screens/MyWardrobe'
const HomeStackScreen = () => { // problem occurs with the screens in this navigator
return <HomeStack.Navigator
screenOptions={{
headerShown: false,
}}
>
<HomeStack.Screen
name="Home"
component={Home}
/>
<HomeStack.Screen
name="ScreenName"
component={ComponentToDisplayOnClick}
/>
<HomeStack.Screen
name="ScreenName"
component={ComponentToDisplayOnClick}
/>
</HomeStack.Navigator>
}
const LoggedInNavigator = () => (
<BottomStack.Navigator
screenOptions={() => ({
tabBarStyle: {
backgroundColor: '#1B1464',
height: 65,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
paddingBottom: 10,
paddingTop: 10
},
headerShown: false,
tabBarLabel: () => {return null}
})}
>
<BottomStack.Screen
name="HomeStack"
component={HomeStackScreen}
options={{
tabBarIcon: ({color}) => (
<View
style={styles.bottomNavCircle}
>
<MaterialCommunityIcons
name="home"
color={color}
size={30}
/>
</View>
)
}}
/>
... other bottom tabs
</BottomStack.Navigator>
)
const App: React.FC = () => {
return (
<NavigationContainer ref={navigationRef} >
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen
name="UnAuthenticated"
component={AuthNavigator}
/>
<Stack.Screen
name="Home"
component={LoggedInNavigator}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default App
Is there anything I'm doing wrong? I only want to navigate to a different screen on my home page, which is the first tab of the bottom navigator. Haven't seen any useful articles for this, all are showing stand alone use cases for navigators.
I started with React Native 12 days ago, from a Flutter background. Thanks

I solved this question by delaying the navigation call method invocation with ()=> arrow function. It navigates now, however, the bottom navigation bar still persists. Is there a way to hide the bottom bar on navigation? Thanks

Top header is not showing with Bottom tab in react navigation v5

I am trying to implement the bottom tab using react-navigation v5 but I am facing an issue. The top header is not showing in-app, When I implement header style is not showing. Could someone please help me how to resolve this issue? I really tried hard but was not able to achieve it.
Thanks
Note: I am using react-navigation v5.
import React from "react";
import {
FontAwesome5,
Ionicons,
Feather,
FontAwesome,
} from "#expo/vector-icons";
import { NavigationContainer } from "#react-navigation/native";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import MainAppNavigator from "../navigations/AppNavigator";
const Tab = createBottomTabNavigator();
const AppNavigator = () => (
<Tab.Navigator initialRouteName="Home">
<Tab.Screen
name="Home"
component={MainAppNavigator}
options={{
headerTitle: "Simply Dispatch",
headerTintColor: "#fff",
headerStyle: {
backgroundColor: "#495AEC",
},
tabBarIcon: ({ color, size }) => (
<FontAwesome name="truck" size={size} color={color} />
),
}}
/>
</Tab.Navigator>
);
export default AppNavigator;

How to use Multiple Navigators in React Native version 6.x

Im new to react native. Im trying to use multiple navigations in my app - bottom tab navigaton and drawer navigation. I have successfully added bottom tab navigation but when Im trying to add a drawer navigation I have an error:
"Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container. "
I want to use both navigators in my app.
Here is my code:
bottomTabs.js:
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import React from "react";
import about from "../screens/about";
import home from "../screens/home";
import reviewDetails from "../screens/reviewDetails";
const Tab = createBottomTabNavigator();
const AppNavigator = () => (
<Tab.Navigator>
<Tab.Screen
name="about"
component={about}
options={{
title: "About",
}}
></Tab.Screen>
<Tab.Screen
name="home"
component={home}
options={{
title: "Home",
}}
></Tab.Screen>
<Tab.Screen name="reviewDetails" component={reviewDetails}></Tab.Screen>
</Tab.Navigator>
);
export default AppNavigator;
drawerNavigation.js
import React from "react";
import { createDrawerNavigator } from "#react-navigation/drawer";
import { NavigationContainer } from "#react-navigation/native";
import "react-native-gesture-handler";
import home from "../screens/about";
import about from "../screens/home";
const Drawer = createDrawerNavigator();
export default function App() {
return (
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={home} />
<Drawer.Screen name="About" component={about} />
</Drawer.Navigator>
);
}
app.js
import React from "react";
import { NavigationContainer, useNavigation } from "#react-navigation/native";
import BottomTabs from "./navigation/bottomTabs";
import DrawerNavigator from "./navigation/drawerNavigarion";
export default function App() {
return (
<>
<NavigationContainer>
<BottomTabs></BottomTabs>
<DrawerNavigator></DrawerNavigator>
</NavigationContainer>
</>
);
}
And here is what I want to have:
What should I change in my code if I want to use both like on the picture example?

In order to use multiple navigations, you need to use nesting.
Ref: https://reactnavigation.org/docs/nesting-navigators/
Ex: GitHub
Modifications:
App.js
<NavigationContainer>
<DrawerNavigator />
</NavigationContainer>
DrawerNavigation.js
import BottomTabs from "./navigation/bottomTabs";
//...
<Drawer.Navigator initialRouteName="Tab">
<Drawer.Screen name="Tab" component={BottomTabs} />
</Drawer.Navigator>
BottomTabs.js
<Tab.Navigator initialRouteName="Home">
<Tab.Screen name="About" component={About} />
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="ReviewDetails" component={ReviewDetails} />
</Tab.Navigator>

How to hide the header from Tab navigation (bottom-tabs) in react navigation 5.x?

i am trying to use createBottomTabNavigator function for create bottom navigation tab, i want to hide the
header, bellow the screenshot:
I have a BottomTabNavigator inside a stackNavigator bellow the code:
This is the rooter configuration file rooter.js
import React, { Component } from 'react';
import WelcomeScreen from '../component/WelcomeScreen';
import Login from '../component/login/Login';
import Register from '../component/register/Register';
import RegisterTwo from '../component/register/RegisterTwo';
import TabsBottom from '../component/tabs/TabsNavigation'
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
const AppSwitchNavigator = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="WelcomeScreen">
<Stack.Screen name="TabsBottom" component={TabsBottom} />
<Stack.Screen name="WelcomeScreen" component={WelcomeScreen} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="RegisterTwo" component={RegisterTwo} />
<Stack.Screen name="Login" component={Login} />
</Stack.Navigator>
</NavigationContainer>
);
}
export const AppContainer = AppSwitchNavigator;
This is my nested navigator TabsNavigation.js
import React, { Component } from 'react';
import Explore from '../Explore';
import Settings from '../Settings';
import Profile from '../Profile';
import Search from '../Search';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome5';
import colors from '../../../styles/colors/index';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Explore') {
iconName = focused ? 'home': 'home';
color = focused ? colors.mainColor : colors.gray03;
} else if (route.name === 'Settings') {
iconName = focused ? 'cog' : 'cog';
color = focused ? colors.mainColor : colors.gray03;
}
else if (route.name === 'Search') {
iconName = focused ? 'search' : 'search';
color = focused ? colors.mainColor : colors.gray03;
}
else if (route.name === 'Profile') {
iconName = focused ? 'user-alt' : 'user-alt';
color = focused ? colors.mainColor : colors.gray03;
}
return <Icon name={iconName} size={30} color={color} />;
}
})}
tabBarOptions={{
activeTintColor: colors.mainColor,
inactiveTintColor: colors.gray03
}}
>
<Tab.Screen name="Explore" component={Explore} />
<Tab.Screen name="Search" component={Search} />
<Tab.Screen name="Profile" component={Profile} />
<Tab.Screen name="Settings" component={Settings} />
</Tab.Navigator>
);
}
export default function TabsBottom() {
return (
<MyTabs />
);
}
I want delete the screen's headres
Thanks for your help

From version 6.x.x
You just need to add
<Tab.Navigator screenOptions={{ headerShown: false }}>
or
<HomeStack.Navigator screenOptions={{ headerShown: false }}>
and it will hide the header

For the latest version in React Native:
If you want to remove the header for all bottom tabs, use this prompt:
<TabNavigator.Navigator screenOptions={{headerShown:false}}/>
Or, if you want to remove it for a particular bottomTabScreen, use this:
<TabNavigator.Screen name="home" component={HomeStack} />

Use following line. Write headerShown as false. It will remove header:
<Stack.Screen name="TabsBottom" options={{headerShown: false}} component={TabsBottom} />

To hide the 'Tabs Bottom' header you have to add a headerShown: false option to your TabsBottom Stack.Screen component like this:
const Stack = createStackNavigator();
const AppSwitchNavigator = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="WelcomeScreen">
<Stack.Screen name="TabsBottom" component={TabsBottom} options={{ headerShown: false }} />
<Stack.Screen name="WelcomeScreen" component={WelcomeScreen} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="RegisterTwo" component={RegisterTwo} />
<Stack.Screen name="Login" component={Login} />
</Stack.Navigator>
</NavigationContainer>
);
}
export const AppContainer = AppSwitchNavigator;

Use this syntax in bottomtab.js file
<Tab.Navigator screenOptions={{headerShown:false}}>
</Tab.Navigator>

(React Nav ver6.x) add this code snipet "options={{headerShown: false}}" in "<Tab.Screen />".It will delete header of each tab you add into.

I'm not really good at react-native stuff but the documentation about hiding tab bar
says that, in nested navigator (tabNavigator inside stackNavigator in the doc), you have to put your screen in the parent navigator, which make sense since each navigator handle their own screen.
If I refer to your screen, you have a stackNavigator and a tabNavigator, so just apply this principle. If you still need help, please provide a repro (A Snack expo would be appreciated, or just paste your full code in your question) so we can work on it.