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>
Related
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>
);
}
So I'm pretty new to programming and while making my first React Native project I got stuck trying to create a modal that's always open behind the bottom nav (The reason I want it that way is for it to be like a cart where whenever the user adds something it'll slightly nudge up to show something new was added), I did manage to get the modal behind the tab but now the bottom tab is unresponsive, does anyone have a fix for this?
my app.js
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import Header from './components/Header';
import RootStack from './components/RootStack';
const App = () => {
return (
<>
<Header />
<NavigationContainer>
<RootStack />
</NavigationContainer>
</>
);
};
export default App;
RootStack:
import React from 'react'
import { createStackNavigator } from '#react-navigation/stack'
import CarrinhoModal from '../CarrinhoModal'
import TabNavigator from '../TabNavigator';
const StackNavigation = createStackNavigator();
const RootStack = () => {
return (
<>
<StackNavigation.Navigator headerMode='none' >
<StackNavigation.Screen name='Tab' component={TabNavigator} />
<StackNavigation.Screen name='Carrinho' getComponent={CarrinhoModal} />
</StackNavigation.Navigator>
</>
)
}
export default RootStack;
TabNavigator:
import React from 'react';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import Home from '../../pages/Home'
import Perfil from '../../pages/Perfil'
import CarrinhoModal from '../CarrinhoModal';
const Tab = createBottomTabNavigator();
const TabNavigator = ({ navigation }) => {
return (
<>
<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: 'white',
inactiveTintColor: 'gray',
activeBackgroundColor: '#1E4B75',
inactiveBackgroundColor: '#1E4B75'
}}
>
{/* <Tab.Screen
name='Carrinho'
component={CarrinhoModal}
listeners={( navigation ) => ({
tabPress: e => {
e.preventDefault();
navigation.navigate(CarrinhoModal)
}
})}
/> */}
<Tab.Screen name='Home' component={Home} />
<Tab.Screen name='Perfil' component={Perfil} />
</Tab.Navigator>
<CarrinhoModal />
</>
)
}
export default TabNavigator;
CarrinhoModal:
import React, { useRef } from 'react'
import { Modalize } from 'react-native-modalize';
import Carrinho from '../../pages/Carrinho';
const CarrinhoModal = (props) => {
return (
<>
<Modalize
ref={props.modalRef}
alwaysOpen={75}
modalHeight={400}
handlePosition='inside'
>
<Carrinho />
</Modalize>
</>
)
}
export default CarrinhoModal;
As I said I'm pretty new in all this so if you could point me in the right direction it would be much apreciated!
I am getting an error that says Component Exception(undefined is not an object (evaluating 'this.renderScreenComponents') when running my react native. I am trying to create a drawer menu. Before I started trying to implement the menu, everything was working fine.
import { StyleSheet } from "react-native";
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import { createDrawerNavigator } from "#react-navigation/drawer";
import ListView from "./src/screens/components/list_view";
import DetailView from "./src/screens/components/detail_view";
import ScreenA from "./src/screens/drawer/screenA.js";
import ScreenB from "./src/screens/drawer/screenB.js";
import ScreenC from "./src/screens/drawer/screenC.js";
const Stack = createStackNavigator()
const Drawer = createDrawerNavigator()
// this is the problematic part
renderScreenComponents = () => (
<Stack.Navigator>
<Stack.Screen name="Home" component={ListView} />
<Stack.Screen name="Detail" component={DetailView} />
</Stack.Navigator>
);
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" children={this.renderScreenComponents} />
<Drawer.Screen name="Screen A" component={ScreenA} />
<Drawer.Screen name="Screen B" component={ScreenB} />
<Drawer.Screen name="Screen C" component={ScreenC} />
</Drawer.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
I have made sure that there are no typos in any of the files, but I still am not sure what is going on. I would sincerely appreciate any help.
Thanks in advance!
P.S. This is JavaScript
Declare your function using const or function keyword.
const renderScreenComponents = () => (
<Stack.Navigator>
<Stack.Screen name="Home" component={ListView} />
<Stack.Screen name="Detail" component={DetailView} />
</Stack.Navigator>
);
I am trying to create a BottomTab navigator and when I refresh the file tabs.js, the icon is not showing at expo mobile app.
I think the main issue is at tabBarIcon
File tab.js
import React from "react"
import {
View,
Image,
TouchableOpacity
} from "react-native"
import {createBottomTabNavigator, BottomTabBar} from "#react-navigation/bottom-tabs"
import Home from "../screens/Home"
import { COLORS, icons } from "../constants"
import {Ionicons} from "#expo/vector-icons"
const Tab = createBottomTabNavigator();
const Tabs = () => {
return (
<Tab.Navigator
>
<Tab.Screen
name="Home"
component={Home}
s
options={{
tabBarIcon: ({focused})=> {
<Ionicons name="cart-outline" size={16} color= "#000000"
}
}}
/>
</Tab.Navigator>
)
}
export default Tabs;
Home.js File
Thanks for help
This will work
<Tab.Navigator>
<Tab.Screen
name="Home"
component={Dashboard}
options={{
tabBarIcon: ({}) => (
<Ionicons name="cart-outline" size={16} color="#000000" />
),
}}
/>
</Tab.Navigator>
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.