Drawer Navigation react native paper - react-native

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 />;
}

Related

Can't get react navigation bottom tabs to display on my app-no errors

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

Combine Drawer.Navigator and Stack.Navigator without creating separate navigation bars

I would like to have stack and drawer navigators use the same navigation bar. However, both are creating their own navigation bars refer to the below image making the app look messy. How can I achieve that?
Below is my code:
import * as React from "react";
import { createStackNavigator } from "#react-navigation/stack";
import { createDrawerNavigator } from "#react-navigation/drawer";
import Home from "../screens/Home";
import Contact from "../screens/Contact";
import About from "../screens/About";
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const HomeNavigation = (props) => {
return (
<Stack.Navigator initialRouteName='Home'
screenOptions={{
headerTitleAlign:'center',
//headerShown: false
}}
>
<Stack.Screen name='Home' component={Home} />
<Stack.Screen name='Contact' component={Contact} />
<Stack.Screen name='About' component={About} />
</Stack.Navigator>
);
};
const MenuNavigation = (props) => {
return (
<Stack.Navigator initialRouteName='Home'
screenOptions={{
headerTitleAlign:'center',
//headerShown: false
}}>
<Stack.Screen name='Menu' component={About} />
</Stack.Navigator>
);
};
const DrawerNavigation = () => {
return (
<Drawer.Navigator>
<Drawer.Screen name='HomeNavigation' component={HomeNavigation} />
<Drawer.Screen name='MenuNavigation' component={MenuNavigation} />
</Drawer.Navigator>
);
};
export default DrawerNavigation;

Props in Tab.Navigation react navigation not working

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'},
}}

React Native independent (tab/drawer) navigation

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>
);
}

Open the drawer when I click the icon react navigation version 5

I want to open the drawer when I click the icon in the headerLeft part, I also have try to this.props.navigation.dispatch but is gives an error also navigation.dispatch gives error
The code below does not gives errors but is does not open the drawer
import { DrawerActions } from '#react-navigation/native';
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { createStackNavigator } from '#react-navigation/stack';
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
export default class App extends Component {
createHomeStack = () =>
<Stack.Navigator>
<Stack.Screen
initialRouteName="login"
headerMode="screen"
name="main"
children={ this.createBottomTabs}
options={{
title: "Fitbit",
headerLeft: () => (
<Icon
name="menu"
size={25}
color="#D4AF37"
onPress={() => {DrawerActions.openDrawer() }}
/>
)} } />
</Stack.Navigator>
createDrawer = ({navigation}) =>
<Drawer.Navigator initialRouteName="Main" >
<Drawer.Screen name="Main" component={Main} />
<Drawer.Screen name="Contacts" component={Food} />>
</Drawer.Navigator>
render() {
return (
<NavigationContainer>
{this.createHomeStack()}
</NavigationContainer>
);
}
}
In order to achieve that you need to wrap the stack into the drawer as the documentation says.
Documentation here
I would probably use something like this:
EDIT:
Added full code
import React,{Component} from 'react'
import { NavigationContainer } from '#react-navigation/native'
import { createDrawerNavigator } from '#react-navigation/drawer'
import { createStackNavigator } from '#react-navigation/stack'
import { View } from 'react-native'
import Icon from 'react-native-vector-icons/dist/Feather'
const Drawer = createDrawerNavigator()
const Stack = createStackNavigator()
const Main = () => <View></View>
const Food = () => <View></View>
const Home = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen name="Main" component={Main} options={{
headerLeft: () => <Icon
name="menu"
size={25}
color="#D4AF37"
onPress={() => navigation.openDrawer()}
/>
}} />
</Stack.Navigator>
)
const DrawerNavigator = () => (
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={Home} />
<Drawer.Screen name="Contacts" component={Food} />
</Drawer.Navigator>
)
export default props => (
<NavigationContainer>
<DrawerNavigator />
</NavigationContainer>
)
You need To import DrawerActions
import {DrawerActions } from '#react-navigation/native';
And You Can Open Using
navigation.dispatch(DrawerActions.openDrawer());