I have Home, Categories, and About pages and I want to create a navigation drawer and have access to all these pages in my navigation drawer, how can I do this?
To start, you'll need to install the "react native navigation drawer" library like so npm install #react-navigation/drawer
Once you've done that, add this code to your App.js file, or whatever page you want to have it on.
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
Where <Drawer.Screen name="Home" component={HomeScreen} /> represents each screen you want to add to the drawer.
Related
So Currently i'm using Stack.Navigator with multiple Stack.Group and Stack.Screens
now i want to plug on the bottom of the navigator:
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
But it throws:
Any idea how to fix it?
You need to create a component for the screens with bottom navigation, like this:
const Tab = createBottomTabNavigator();
const TabScreens = () => {
return (
<Tab.Navigator>
<Tab.Screen nome={'home'} component={Home} />
</Tab.Navigator>
);
}
And then, put it into Stack Navigator just like a normal component/screen
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name={'TabScreens'} component={TabScreens} />
</Stack.Navigator>
</NavigationContainer>
//am building a react native app, i have used both drawer navigation and stack navigation. The problem am having is that, both the drawer and stack navigation are providing their own headers. as a result its showing two headers in every screen, but i want to show only one in specific screens. How can i dismiss Drawer header where i only need the stack navigation header ??
MainStack.js
import React from "react";
import { createStackNavigator } from "#react-navigation/stack";
//The pages to navigate between in stack
import {Home} from "../components/Home";
import {Notes} from "../components/Notes";
//Default Title holders
import * as DefaultTitle from "../components/DefaultTitles";
//Creating navigation constant
const Stack = createStackNavigator();
export function MainStack(){
return(
<Stack.Navigator>
<Stack.Screen
name={DefaultTitle.HomeTitle}
component={Home}
//Here i only need drawer header, so i have successfuly dismissed the stack header
options={{headerTitleAlign: "center", headerShown: false,}} />
<Stack.Screen name="Notes" component={Notes} />
</Stack.Navigator>
);
}
DrawerStack.js
import React from "react";
import { createDrawerNavigator } from "#react-navigation/drawer";
//imported pages
import {MainStack} from "./MainStack";
import {AboutStack} from "./AboutStack";
//Default holders
import * as DefaultTitle from "../components/DefaultTitles";
//Creating navigation constant
const Drawer = createDrawerNavigator();
export default function DrawerStack(){
return(
<Drawer.Navigator >
<Drawer.Screen name="Home" component={MainStack}/>
<Drawer.Screen name="About" component={AboutStack} />
</Drawer.Navigator>
)
}
App.js
import React from "react";
import { NavigationContainer } from "#react-navigation/native";
//imported Main Route
import DrawerStack from "./navigationRoutes/DrawerStack";
export default function App() {
return (
<NavigationContainer>
<DrawerStack />
</NavigationContainer>
);
}
You can remove the headers from the drawer navigator by adding the following prop to the <Drawer.Screen /> component:
<Drawer.Screen options={{headerShown: false}} />
This will remove the header from the drawer screens inside the drawer navigator, and leave you with the stack navigator headers as you requested!
Edit: Even better, if you want to remove them from all screens completely, you can use the screenOptions prop on the navigator like so:
<Drawer.Navigator screenOptions={{headerShown: false}} />
This will remove all screen headers that are inside of the Drawer.Navigator parent!
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>
);
}
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.