I am still trying to figure out how to create independent tab bar and drawer Navigation in React Native.
The drawer navigation should display for example
Screen01
Screen02
Screen03
Screen04
Screen05
whereas the tab bar navigation should only display
Screen01
Screen03
Screen05.
I already have a drawer/tab bar navigation combination working, but I was not able to make it work independent yet. Every screen is visible for both navigation types.
If you want to see the code, let me know :) Thank you in advance!
EDIT:
This is my code using Erik's answer.
import React from 'react';
import { createDrawerNavigator } from '#react-navigation/drawer'
import { createStackNavigator } from '#react-navigation/stack'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import HomeScreen from './Components/Screens/HomeScreen'
import SearchScreen from './Components/Screens/SearchScreen'
import FavoritesScreen from './Components/Screens/FavoritesScreen'
import ProfileScreen from './Components/Screens/ProfileScreen'
import FAQScreen from './Components/Screens/FAQScreen'
import SettingsScreen from './Components/Screens/SettingsScreen'
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
const container = createAppContainer(Stack)
function TabScreens() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Search" component={SearchScreen} />
<Tab.Screen name="Favorites" component={FavoritesScreen} />
</Tab.Navigator>
);
}
function DrawerScreens() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Profile" component={ProfileScreen} />
<Drawer.Screen name="FAQ" component={FAQScreen} />
</Drawer.Navigator>
);
}
export default function App() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={TabScreens} />
<Stack.Screen name="Drawer" component={DrawerScreens} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>
);
}
Related
I'm very new to react native.. very much still learning. I read the docs for react navigation but I can't get my bottom tab navigator to display. I run the project and it loads up just fine without any errors or warnings but my bottom tab navigation won't display. I'm not really sure where to start.. Below is a copy of what I wrote so far. This is written in a separate .js named tabnavigator.js
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import Dashboard from './src/screens/Dashboard';
import Agencyhome from './src/screens/Agencyhome';
const Tab = createBottomTabNavigator ();
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name='Home' component={Dashboard} />
<Tab.Screen name="Agency" component={Agencyhome} />
</Tab.Navigator>
);
}
export default TabNavigator;
Here is what I have for my App.js
import React from 'react'
import { Provider } from 'react-native-paper'
import { NavigationContainer } from '#react-navigation/native'
import { createStackNavigator } from '#react-navigation/stack'
import firebase from 'firebase/app'
import 'firebase/auth'
import { theme } from './src/core/theme'
import {
AuthLoadingScreen,
StartScreen,
LoginScreen,
RegisterScreen,
ResetPasswordScreen,
Dashboard,
} from './src/screens'
import { FIREBASE_CONFIG } from './src/core/config'
const Stack = createStackNavigator()
if (!firebase.apps.length) {
firebase.initializeApp(FIREBASE_CONFIG)
}
export default function App() {
return (
<Provider theme={theme}>
<NavigationContainer>
<Stack.Navigator
initialRouteName="AuthLoadingScreen"
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen
name="AuthLoadingScreen"
component={AuthLoadingScreen} />
<Stack.Screen name="StartScreen" component={StartScreen} />
<Stack.Screen name="LoginScreen" component={LoginScreen} />
<Stack.Screen name="RegisterScreen" component={RegisterScreen} />
<Stack.Screen name="Dashboard" component={Dashboard} />
<Stack.Screen name="ResetPasswordScreen" component={ResetPasswordScreen} />
</Stack.Navigator>
</NavigationContainer>
</Provider>
)
}
you must use Navigation Container
like this
import { NavigationContainer } from "#react-navigation/native";
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import Dashboard from './src/screens/Dashboard';
import Agencyhome from './src/screens/Agencyhome';
const Tab = createBottomTabNavigator ();
const TabNavigator = () => {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name='Home' component={Dashboard} />
<Tab.Screen name="Agency" component={Agencyhome} />
</Tab.Navigator>
</NavigationContainer>
);
}
export default TabNavigator;
I was able to fix this by using the following component={TabNavigator} within stackscreen
I am extremely new to React and React Native. I need some help regarding nesting a drawer navigator inside the current Stack Navigation.
I have the code on Snack, If someone can please help me i will really appreciate.
https://snack.expo.dev/#smith.james1982/github.com-callstack-react-native-paper-login-template
I want to put the Drawer navigation with Hamburger and Back Arrow using react-native-paper on the Home Screen.
Thanks very much in advance..
This is how i achieved the solution basically 2 navigations and using a state sharing library use-between. Hopefully it can be helpful to someone
import React, { memo, useState } from "react";
import { createStackNavigator } from "#react-navigation/stack";
import { createDrawerNavigator } from "#react-navigation/drawer";
import { NavigationContainer } from "#react-navigation/native";
import { HomeScreen, LoginScreen, RegisterScreen, ForgotPasswordScreen, Dashboard, Demo } from "./screens";
import { useLoginState } from "./core/state";
import { useBetween } from "use-between";
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
//Login navigation
const LoginNav = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName="HomeScreen"
>
<Stack.Screen name="HomeScreen" component={HomeScreen} />
<Stack.Screen name="LoginScreen" component={LoginScreen} />
<Stack.Screen name="RegisterScreen" component={RegisterScreen} />
<Stack.Screen name="ForgotPasswordScreen" component={ForgotPasswordScreen} />
<Stack.Screen name="Dashboard" component={Dashboard} />
</Stack.Navigator>
</NavigationContainer>
);
};
//Logged in Navigation
const LoggedInNav = () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={Demo} />
</Drawer.Navigator>
</NavigationContainer>
);
};
export default function App() {
const { loggedIn, setIsLoggedIn } = useBetween(useLoginState);
return loggedIn ? <LoggedInNav /> : <LoginNav />;
}
I make a Navigation component and put all screen in it.
it working well, but props in Tab.Navigation not work such as barStyle,initialRouteName,....
I make stack for each screen and put all stack in bottom navigation and i wanna change option for bottom navigation but I cant.
I set initialRouteName and bar style but now working at all.
Thanks for response.
import {NavigationContainer} from '#react-navigation/native';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import CollectionScreen from '../screens/Collection';
import LiveScreen from '../screens/Live';
import PrayScreen from '../screens/Pray';
import ProfileScreen from '../screens/Profile';
import PublicationScreen from '../screens/Publication';
import React from 'react';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
const LiveStack = createNativeStackNavigator();
function LiveStackScreen() {
return (
<LiveStack.Navigator screenOptions={{headerShown: false}}>
<LiveStack.Screen name="LiveScreen" component={LiveScreen} />
</LiveStack.Navigator>
);
}
const ProfileStack = createNativeStackNavigator();
function ProfileStackScreen() {
return (
<ProfileStack.Navigator screenOptions={{headerShown: false}}>
<ProfileStack.Screen name="ProfileScreen" component={ProfileScreen} />
</ProfileStack.Navigator>
);
}
const PrayStack = createNativeStackNavigator();
function PrayStackScreen() {
return (
<PrayStack.Navigator screenOptions={{headerShown: false}}>
<PrayStack.Screen name="PrayScreen" component={PrayScreen} />
</PrayStack.Navigator>
);
}
const PublicationStack = createNativeStackNavigator();
function PublicationStackScreen() {
return (
<PublicationStack.Navigator screenOptions={{headerShown: false}}>
<PublicationStack.Screen
name="PublicationScreen"
component={PublicationScreen}
/>
</PublicationStack.Navigator>
);
}
const CollectionStack = createNativeStackNavigator();
function CollectionStackScreen() {
return (
<CollectionStack.Navigator screenOptions={{headerShown: false}}>
<CollectionStack.Screen
name="CollectionScreen"
component={CollectionScreen}
/>
</CollectionStack.Navigator>
);
}
const Tab = createBottomTabNavigator();
export default function Navigation() {
return (
<NavigationContainer>
<Tab.Navigator
// This props not working
initialRouteName="Profile"
barStyle={{backgroundColor: '#694fad'}}>
<Tab.Screen name="Live" component={LiveStackScreen} />
<Tab.Screen name="Profile" component={ProfileStackScreen} />
<Tab.Screen name="Pray" component={PrayStackScreen} />
<Tab.Screen name="Publication" component={PublicationStackScreen} />
<Tab.Screen name="Collection" component={CollectionStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
I know why this snippets not working.
I wrote the code like below
initialRouteName="Profile"
But we must set initialRouteName like below
initialRouteName={'Profile'}
and for changing background color of bottomTab you should do like below
screenOptions={{
headerShown: false,
tabBarStyle: {backgroundColor: 'red'},
}}
I am using react native and react navigation. I am trying to create a nested navigator, i.e., I am trying to place a tab navigator within a stack navigator. When I run the app on iOS simulator, however, the main screen reloads infinitely. What might be wrong with the below code? New to react native...bear with me if this is a simple one!
Below is the part of the code where I am doing the nesting:
import React from 'react';
import Home from './routes/Home'
import Alert from './routes/Alert'
import Profile from './routes/Profile'
import Subs from './routes/Subs'
import Write from './routes/Write'
import OtherProfile from './routes/OtherProfile'
import Post from './routes/Post'
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { SafeAreaView } from 'react-native-safe-area-context';
export default function App() {
const MainStack = createStackNavigator();
const Tab = createBottomTabNavigator();
function HomeTab() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home}/>
<Tab.Screen name="Subs" component={Subs}/>
<Tab.Screen name="Write" component={Write} options={{ tabBarVisible: false }}/>
<Tab.Screen name="Alert" component={Alert}/>
<Tab.Screen name="Profile" component={Profile}/>
</Tab.Navigator>
)
}
function MainStackScreen() {
return (
<MainStack.Navigator>
<MainStack.Screen name="HomeTab" component={HomeTab} options = {{ headerShown: false }} />
<MainStack.Screen name="Post" component={Post} />
<MainStack.Screen name="OtherProfile" component={OtherProfile} />
</MainStack.Navigator>
)
}
return (
<NavigationContainer>
<SafeAreaView style={{flex:1}}>
<MainStackScreen/>
</SafeAreaView>
</NavigationContainer>
)
}
Found the answer right after posting this.
I declared the navigators and the navigation components outside of the App component and it works.
I am updating my code to use the react-navigation 5.x, but I don't know how to implement the stack navigation with a bottom tab navigator in this version. I use the bottom tab navigator only on the screens that appear after the user logs in. On the initial screen, there is only navigation with custom buttons. My problem is I don't know how to create the route to that necessity I have. I've been looking for a code example, but I only found codes that use the bottom tab navigator alone. Could you please give me an example of code I can use? I would appreciate it
I have this piece of code that is what I have working right now
import React from 'react'
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import Login from '../screens/Login'
import Register from '../screens/Register'
import Main from '../screens/Main'
import Ex1 from '../screens/Ex1'
import Ex2 from '../screens/Ex2'
const AuthStack = createStackNavigator();
const AuthStackScreen = () => (
<NavigationContainer>
<AuthStack.Navigator
initialRouteName="Login"
screenOptions={{
headerShown: false
}}>
<AuthStack.Screen
name="Login"
component={Login}
/>
<AuthStack.Screen
name="Register"
component={Register}
/>
</AuthStack.Navigator>
</NavigationContainer>
);
export default AuthStackScreen
you can do somethin like this:
export default function ComponentC() {
return(
<View>
<Text>It Works!</Text>
</View>
)
}
export default function ComponentB() {
return (
<Stack.Navigator initialRouteName={'Main'}>
<Stack.Screen name={'Main'} component={ComponentC} />
</Stack.Navigator>
);
}
export default function ComponentA () {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName={'ComponentB'}
>
<Tab.Screen name={'ComponentB'} component={ComponentB} options={{ tabBarIcon: ({color}) => (
<FontAwesome5 color={color} name={'check-square'} size={20}/>
)}} />
</Tab.Navigator>
</NavigationContainer>
);
}
The Component B going to be called in the Bottom Tab Navigator and the initial route is gonna be the Component C.