I have the following navigation with drawer working with react navigation 4.x, and need to migrate to version 6.x, but have not been able to do so.
I already have migrated my imports so it matches v6.x, and installed accordingly, but im strugling while trying to create the exact same structure for v6
Any help appreciated i looked for examples about migration but they are very few
import { Dimensions } from "react-native";
import { createStackNavigator } from "react-navigation-stack";
import { createDrawerNavigator } from "react-navigation-drawer";
import { createAppContainer } from "react-navigation";
const { width, height } = Dimensions.get("window");
import FirstScreen from "../Containers/Mainscreens/MainScreen/MainScreen";
/* Vehicle List START */
import PickUp from "../Containers/Vehicle/PickUp/index";
import VehicleSideMenu from "../Containers/Vehicle/SideMenu/SideMenu";
import Dashboard from "../Containers/Vehicle/Dashboard/index";
import RoadTrip from "../Containers/Vehicle/RoadTrip/index";
import Notifications from "../Containers/Vehicle/Notifications/index";
import NotificationsDetails from "../Containers/Vehicle/NotificationsDetails/index";
import History from "../Containers/Vehicle/History/index";
import HistoryDetails from "../Containers/Vehicle/HistoryDetails/index";
import RoadsideAssistance from "../Containers/Vehicle/RoadsideAssistance/index";
import TemperatureControl from "../Containers/Vehicle/TemperatureControl/index";
/* Vehicle List END */
/* Vehicle Drawer START */
const DrawerStackVehical = createStackNavigator(
{
Dashboard: { screen: Dashboard },
PickUp: { screen: PickUp },
RoadTrip: { screen: RoadTrip },
Notifications: { screen: Notifications },
NotificationsDetails: { screen: NotificationsDetails },
RoadsideAssistance: { screen: RoadsideAssistance },
HistoryDetails: { screen: HistoryDetails },
History: { screen: History },
TemperatureControl: { screen: TemperatureControl },
},
{
headerMode: "none",
navigationOptions: ({ navigation }) => ({
gesturesEnabled: false,
}),
}
);
const DrawerNavigationVehical = createDrawerNavigator(
{
DrawerStackVehical: { screen: DrawerStackVehical },
},
{
gesturesEnabled: false,
contentComponent: VehicleSideMenu,
}
);
const MainStack = createStackNavigator(
{
FirstScreen: { screen: FirstScreen },
},
{
headerMode: "none",
navigationOptions: {
gesturesEnabled: false,
},
}
);
const PrimaryNav = createStackNavigator(
{
mainStack: { screen: MainStack },
DrawerNavigationVehical: { screen: DrawerNavigationVehical },
},
{
headerMode: "none",
initialRouteName: "mainStack",
gesturesEnabled: false,
}
);
export default createAppContainer(PrimaryNav);
I'll try to cover most of the changes that are made.
Stack Navigation is done like below
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
function DrawerStackVehical() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="Dashboard" component={Dashboard} />
<Stack.Screen name="PickUp" component={PickUp} />
<Stack.Screen name="RoadTrip" component={RoadTrip} />
<Stack.Screen name="Notifications" component={Notifications} />
</Stack.Navigator>
</NavigationContainer>
);
}
Drawer Navigation
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
const Drawer = createDrawerNavigator();
function DrawerNavigationVehical() {
return (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="DrawerStackVehical" component={DrawerStackVehical} />
<Drawer.Screen name="Article" component={Article} />
</Drawer.Navigator>
</NavigationContainer>
);
}
And you don't need to use createAppContainer now. You just need to use
'NavigationContainer` and wrap your component inside.
Related
I have my next splash, my idea is to be able to show my app logo when opening the application and then go to the start of the application, it works fine:
import React from 'react';
import { StyleSheet, Image, View, Text } from 'react-native';
import { StackActions, NavigationActions } from 'react-navigation';
export default class Splash extends React.Component {
goToScreen(routeName){
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: routeName })],
});
this.props.navigation.dispatch(resetAction);
}
/*goToScreen(routeName){
this.props.navigation.navigate(routeName)
}*/
componentDidMount(){
setTimeout( () => {
this.goToScreen('Home')
}, 2000, this)
}
render(){
return (
<View style={styles.container}>
<Image source={{uri: 'https://i.imgur.com/r0jUwOD.png'}} style={{width: 250, height: 250}} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#33B747',
alignItems: 'center',
justifyContent: 'center'
},
});
The problem is the location of the splash, since in this way if it shows me, but it creates a lower button called Splash, on the other hand the splash when loading is shown in conjunction with the lower buttons and that should not happen, the splash must display only in full screen and not create a button.
AppNavigator.js
import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';
import { MaterialIcons, MaterialCommunityIcons } from '#expo/vector-icons';
import Splash from '../screens/Splash';
import NewsListScreen from '../screens/NewsListScreen';
import NewsItemScreen from '../screens/NewsItemScreen';
const StackNavigator = createStackNavigator({
Splash: {
screen: Splash,
navigationOptions: {
headerShown: false,
}
},
News: {
screen: NewsListScreen
},
Root: {
screen: BottomTabNavigator,
},
NewsItem: {
screen: NewsItemScreen,
navigationOptions: {
headerTitle: 'News Item'
}
},
},{
initialRouteName: 'Splash'
});
const BottomTabNavigator = createBottomTabNavigator({
Home: {
screen: StackNavigator,
navigationOptions: {
tabBarIcon: () => <MaterialIcons name="home" size={24} />
}
},
News: {
screen: StackNavigator,
navigationOptions: {
tabBarIcon: () => <MaterialCommunityIcons name="newspaper-variant-outline" size={24} />
}
}
})
export default createAppContainer(BottomTabNavigator);
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { AppLoading } from 'expo';
import { Provider } from 'react-redux';
import AppNavigator from './app/resources/navigation/AppNavigator';
import ReduxStore from './app/resources/redux/ReduxStore';
export default function App() {
return (
<Provider store={ReduxStore}>
<AppNavigator />
</Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Attached capture of the error upload in imgur capture 1 and capture 2
The recommended way to add a splash screen to an expo managed app can be found here.
I've managed to create an expo project and achieve the exact same behavior that you've looking for.
I've used react-navigation 4.x.x
This is how it looks and you can find the full code here
Here is the code I've used.
Splash.js
import React, { Component } from "react";
import { Text, SafeAreaView, View, StyleSheet } from "react-native";
import { StackActions, NavigationActions } from "react-navigation";
export class Splash extends Component {
goToScreen(routeName) {
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: routeName })],
});
this.props.navigation.dispatch(resetAction);
}
componentDidMount() {
setTimeout(
() => {
this.goToScreen("Root");
},
2000,
this
);
}
render() {
return (
<SafeAreaView style={styles.mainContainer}>
<Text style={styles.text}> Splash Screen </Text>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#efef21",
},
text: {
fontSize: 22,
},
});
export default Splash;
Navigator.js
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import Home from "./Home";
import Splash from "./Splash";
import TabNavigator from "./BottomTabNavigator";
const AppNavigator = createStackNavigator(
{
Splash: {
screen: Splash,
navigationOptions: {
headerShown: false,
},
},
Root: {
screen: TabNavigator,
navigationOptions: {
headerShown: false,
},
},
},
{
initialRouteName: "Splash",
}
);
export default createAppContainer(AppNavigator);
BottomTabNavigator.js
import { createAppContainer } from "react-navigation";
import { createBottomTabNavigator } from "react-navigation-tabs";
import Home from "./Home";
import News from "./News";
const TabNavigator = createBottomTabNavigator({
Home: {
screen: Home,
navigationOptions: {
title: "Home",
},
},
News: {
screen: News,
navigationOptions: {
title: "News",
},
},
});
export default createAppContainer(TabNavigator);
Also, I've achieved the same behavior using react-navigation 5.x.x
You can find my code here
Edit 01
If you want to have the headers, You need to use a Stack Navigator for each tab.
Here is the updated code of BottomTabNAvigator.js
import { createAppContainer } from "react-navigation";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createStackNavigator } from "react-navigation-stack";
import Home from "./Home";
import News from "./News";
const HomeStack = createStackNavigator({
Home: Home,
});
const NewsStack = createStackNavigator({
News: News,
});
const TabNavigator = createBottomTabNavigator({
Home: {
screen: HomeStack,
navigationOptions: {
headerTitle: "Home",
title: "Home",
},
},
News: {
screen: NewsStack,
navigationOptions: {
title: "News",
},
},
});
export default createAppContainer(TabNavigator);
You have used Splash: {screen: Splash}, in your BottomTabNavigator so obviously it will add splash as on bottom navigator.
Remove Splash: {screen: Splash}, from BottomTabNavigator and paste it on StackNavigator and set splash as initialRouteName
const StackNavigator = createStackNavigator({
News: {
screen: NewsListScreen
},
Splash: {screen: Splash},
NewsItem: {
screen: NewsItemScreen,
navigationOptions: {
headerTitle: 'News Item'
}
},
},
{
initialRouteName : 'Splash'
});
you have to move splash screen to StackNavigator and add BottomTabNavigator into StackNavigator as a screen like this
import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';
import { MaterialIcons } from '#expo/vector-icons';
import Splash from '../screens/Splash';
import NewsListScreen from '../screens/NewsListScreen';
import NewsItemScreen from '../screens/NewsItemScreen';
const StackNavigator = createStackNavigator({
Splash: {
screen: Splash
},
Home: {
screen: BottomTabNavigator
},
News: {
screen: NewsListScreen
},
NewsItem: {
screen: NewsItemScreen,
navigationOptions: {
headerTitle: 'News Item'
}
}
},
{
initialRouteName: "Splash",
});
const BottomTabNavigator = createBottomTabNavigator({
Home: {
screen: StackNavigator,
navigationOptions: {
tabBarIcon: () => <MaterialIcons name="home" size={24} />
}
}
})
export default createAppContainer(StackNavigator);
I am trying to add a drawer navigation to my Home screen how can i do that? Here's my code.
class Navigation extends React.Component {
render() {
return (
<NavigationContainer>
<StatusBar barStyle="light-content" />
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} options={{ title: this.state.name, }} />
<Stack.Screen name="DrawerScreen" options={{ title: 'DrawerScreen' }} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
How can I get use DrawerScreen in my Navigation class? I tried THAT^ but it gives me error saying couldn't find a component for DrawerScreen.
function DrawerScreen() {
return (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={Home} />
</Drawer.Navigator>
</NavigationContainer>
);
}
You can do something like this:
import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';
import { View, Text, StyleSheet,Button, SafeAreaView, ScrollView, Image } from "react-native";
import Load from './components/Load';
import Home from './components/Homescreen'
import SignIn from './components/SignIn'
import SignUp from './components/SignOut'
const MainDrawer = createDrawerNavigator({
SignUp:SignUp,
},
);
const App = createStackNavigator({
Load: {
screen: Load,
navigationOptions: {
headerShown:false
},
},
Home: {
screen: Home,
navigationOptions: {
headerShown:false,
},
},
SignIn: {
screen: SignIn,
navigationOptions: {
headerShown:false,
},
},
SignUp: {
screen: MainDrawer,
navigationOptions: {
headerShown:false,
},
},
});
export default createAppContainer(App);
Hope this helps!
I have made my custom header and i want to remove react-native default header.
I have tried with
Setting option "header: null" in navigationOptions of
createBottomTabNavigator
header:null in HomeScreen.js file
but it's not working. Please help to solve this issue. Here is my navigation code. I am attaching screenshot exactly what i want to remove.
import React from "react";
import { Platform } from "react-native";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";
import TabBarIcon from "../components/TabBarIcon";
import HomeScreen from "../screens/HomeScreen";
import SavedScreen from "../screens/SavedScreen";
import BookingScreen from "../screens/BookingScreen";
import BeAHostScreen from "../screens/BeAHostScreen";
import ReferEarnScreen from "../screens/ReferEarnScreen";
import BookingInnerScreen from "../screens/BookingInnerScreen";
import { Icon } from "react-native-elements";
const config = Platform.select({
web: { headerMode: "screen" },
default: {}
});
const tabNavigator = createBottomTabNavigator({
Home: {
screen: HomeScreen,
defaultNavigationOptions: {
title: "App Name Here"
},
navigationOptions: {
tabBarLabel: "Home",
tabBarOptions: {
activeTintColor: "#00E8AC"
},
tabBarIcon: ({ focused }) => {
return focused ? (
<Icon name="md-home" type="ionicon" color="#00E8AC" />
) : (
<Icon name="md-home" type="ionicon" color="#ccc" />
);
}
}
},
Saved: {
screen: SavedScreen,
defaultNavigationOptions: {
title: "Saved"
},
navigationOptions: {
tabBarLabel: "Saved",
tabBarOptions: {
activeTintColor: "#00E8AC"
},
tabBarIcon: ({ focused }) => {
return focused ? (
<Icon name="md-heart" type="ionicon" color="#00E8AC" />
) : (
<Icon name="md-heart" type="ionicon" color="#ccc" />
);
}
}
}
});
const MyApp = createStackNavigator(
{
BookingInner: BookingInnerScreen,
Tabs: {
screen: tabNavigator
}
},
{
initialRouteName: "Tabs"
}
);
export default MyApp;
Try this :
const MyApp = createStackNavigator(
{
BookingInner: BookingInnerScreen,
Tabs: {
screen: tabNavigator
}
},
{
initialRouteName: "Tabs",
headerMode: 'none',
}
);
I am trying to use two Const in createAppContainer but it dose not allow me to do so i have to use createBottomTabNavigator and createStackNavigator both in app.js. here is my code
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {createStackNavigator, createAppContainer , createBottomTabNavigator} from 'react-navigation';
import { DrawerNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import AntIcon from "react-native-vector-icons/AntDesign";
import home from './src/Home/home';
import EmployerLayout from './src/Home/EmployerLayout';
import Employers from './src/CompleteEmployers/Employers';
import Jobs from './src/CompleteJobs/Jobs';
import Freelancers from './src/CompleteFreelancers/Freelancers';
import Profile from './src/ProfileSetting/Profile';
import DetailFreelancerScreen from './src/DetailFreelancer/DetailFreelancerScreen';
import DetailJobScreen from './src/DetailJobs/DetailJobScreen';
import DetailCompanyScreen from './src/DetailCompany/DetailCompanyScreen';
import SearchScreen from './src/DetailSearch/SearchScreen';
console.disableYellowBox = true;
const RootStack= createStackNavigator({
home:home,
Profile:Profile,
Employers:Employers,
Jobs:Jobs,
DetailFreelancerScreen:DetailFreelancerScreen,
DetailJobScreen:DetailJobScreen,
DetailCompanyScreen:DetailCompanyScreen,
SearchScreen:SearchScreen,
EmployerLayout:EmployerLayout,
})
const MainNavigator = createBottomTabNavigator({
// MainNavigator: MainDrawer},{
Home:{
screen: home,
navigationOptions:{
tabBarLabel:'Home',
tabBarIcon:({tintColor})=>(
<AntIcon name="home" color={tintColor} size={25} />
)
}
},
Jobs:{
screen: Jobs,
navigationOptions:{
tabBarLabel:'Jobs',
tabBarIcon:({tintColor})=>(
<AntIcon name="appstore-o" color={tintColor} size={25} />
)
}
},
Freelancers:{
screen: Freelancers,
navigationOptions:{
tabBarLabel:'Freelancers',
tabBarIcon:({tintColor})=>(
<AntIcon name="user" color={tintColor} size={25}/>
)
}
},
Employers:{
screen: Employers,
navigationOptions:{
tabBarLabel:'Employers',
tabBarIcon:({tintColor})=>(
<AntIcon name="wallet" color={tintColor} size={25}/>
)
}
},
Profile:{
screen: Profile,
navigationOptions:{
tabBarLabel:'Profile',
tabBarIcon:({tintColor})=>(
<AntIcon name="setting" color={tintColor} size={25} />
)
}
}
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused }) => {
const { routeName } = navigation.state;
let IconComponent = CONST.IC_HOME;
if (routeName === CONST.MENU_HOME) {
IconComponent = focused ? CONST.IC_HOME_SELECTED : CONST.IC_HOME;
} else if (routeName === CONST.MENU_CALENDAR) {
IconComponent = focused ? CONST.IC_CALENDAR_SELECTED : CONST.IC_CALENDAR;
}
return IconComponent;
}
}),
tabBarOptions: {
activeTintColor: '#ff5851',
},
});
const App = createAppContainer(RootStack);
export default App;
IN the above code i have two const RootStack and MainNavigator but i am not able to use both at a same time can anyone please help me regarding this.
your MainNavigator should come inside RootStack, i.e there should be only root navigation
MainNavigator = createBottomTabNavigator(
{
Home: home,
Jobs: Jobs
},
);
RootStack = createStackNavigator(
{
SplashScreen: SplashScreen,
DrawerNavigation: HomeNavigation
}
);
const App = createAppContainer(RootNavigation);
export default App;
I am developing an app using react-native-navigation and I want to have a StackNavigator and a DrawerNavigator in the project. So, I have implemented them in the app.js but the apps crashes giving this error "The development server returned response error with code: 500".I have implemented them separetly and it works but I couldn't implement them together.Any suggestion?
this is my code for app.js
import React, {
Component
} from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import {
createStackNavigator,
DrawerNavigator,
DrawerItems
} from "react-navigation";
import {
Container,
Header,
Content,
Thumbnail,
Button,
Body
} from 'native-base';
import Profile from './components/Profile.js';
import Main from './components/Main.js';
import Login from './components/Login.js';
import Product from './components/Product.js';
export default class App extends Component {
render() {
return (
<Navapp />
);
}
}
const styles = StyleSheet.create({
// styles here
});
export const Drawer = DrawerNavigator({
Main: {
screen: Main
},
Profile: {
screen: Profile
},
}, {
initialRouteName: 'Main',
contentComponent: CustomDrawer,
drawerPosition: 'Left',
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
});
export const CustomDrawer = (props) => (
<Container>
<Header style = {
styles.headerStyle
}>
<Body style = {
styles.bodyStyle
}>
<Thumbnail style = {
{
height: 100,
width: 100
}
}
source = {
require('../image/logo.png')
}/>
</Body>
</Header>
<Content>
<DrawerItems { ...props} />
</Content >
</Container>
)
export const Navapp = createStackNavigator({
Login: {
screen: Login
},
Drawer: {
screen: Drawer
},
Product: {
screen: Product
},
});
I had a very similar setup for my app, this is how I went about handling it. First I created a stack navigator with the routes that I wanted logged in users to see, and I place that navigator inside a drawer navigator (you can put more than one in there if you want). Finally I created my top-level navigator, whose initial route points to the login page; upon logging in I navigate the user to the second route, which points to my drawer navigator.
In practice it looks like this:
// Main Screens for Drawer Navigator
export const MainStack = StackNavigator({
Dashboard: {
screen: Dashboard,
navigationOptions: {
title: 'Dashboard',
gesturesEnabled: false,
headerLeft: null
}
},
Notifications: {
screen: Notifications,
navigationOptions: {
title: 'Notifications'
}
}
}, { headerMode: 'screen' } );
// Drawer Navigator
export const Drawer = DrawerNavigator({
MainStack: {
screen: MainStack
}
});
// Main App Navigation
export const AppStack = StackNavigator({
Login: {
screen: Login,
navigationOptions: {
header: null,
gesturesEnabled: false
}
},
Drawer: {
screen: Drawer,
navigationOptions: {
header: null,
gesturesEnabled: false
}
}
}, { headerMode: 'none' } );
// In Your App.js
<AppStack />
Note that in the last stack navigator, the drawer screen has header set to null; this is because with nested stack navigators you can sometimes run into an issue where you'll have duplicate headers. This will hide the top-level navigator's header and let you show / customize the headers for your nested navigators.
Probably the way we can implement both Stack and Drawer Navigation has been made much simpler. Here you guys can refer to my code.
import * as React from "react";
import { createStackNavigator } from "#react-navigation/stack";
import { createDrawerNavigator } from "#react-navigation/drawer";
import MenuComponent from "../MenuComponent";
import DishDetailComponent from "../DishDetailComponent";
import HomeComponent from "../HomeComponent";
/**
* #author BadalSherpa
* #function HomeNavigation
**/
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const HomeNavigation = (props) => {
return (
<Stack.Navigator initialRouteName='Home'>
<Stack.Screen name='Home' component={HomeComponent} />
<Stack.Screen name='Menu' component={MenuComponent} />
<Stack.Screen name='Dish-Detail' component={DishDetailComponent} />
</Stack.Navigator>
);
};
const MenuNavigation = (props) => {
return (
<Stack.Navigator initialRouteName='Home'>
<Stack.Screen name='Menu' component={MenuComponent} />
</Stack.Navigator>
);
};
const DrawerNavigation = () => {
return (
<Drawer.Navigator>
<Drawer.Screen name='Home' component={HomeNavigation} /> //Here is where we are combining Stack Navigator to Drawer Navigator
<Drawer.Screen name='Menu' component={MenuNavigation} />
</Drawer.Navigator>
);
};
export default DrawerNavigation;
Then you can simple return this inside NavigationContainer which will have both Stack and Drawer Navigator working together.
<NavigationContainer>
<HomeNavigation />
</NavigationContainer>
This is how I use them
const HomeStackNavigator = StackNavigator(
{
Home: {
screen: HomeScreen,
},
Chat: {
screen: ChatScreen,
},
},
{
initialRouteName: 'Home',
headerMode: 'screen',
},
);
const MainDrawerNavigator = DrawerNavigator(
{
Home: {
screen: HomeStackNavigator,
},
},
{
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
contentComponent: SlideMenu,
navigationOptions: {
drawerLockMode: 'locked-closed',
},
},
);
same issue with me, Then i just change my emulator and update the version and it worked 100%.
This is a slightly different take where the drawer navigator controls a stack navigator. Each selection in the drawer will push a child stack element so there is a one-to-one match between the drawer and stack. This is more typical behavior in my experience. All but the home have a title with back navigation indicator.
import React from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import {
CompositeNavigationProp,
NavigationContainer,
} from '#react-navigation/native';
import {
createStackNavigator,
StackNavigationProp,
} from '#react-navigation/stack';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';
import {
createDrawerNavigator,
DrawerContentComponentProps,
DrawerContentOptions,
DrawerContentScrollView,
DrawerItem,
DrawerNavigationProp,
} from '#react-navigation/drawer';
type NoProps = Record<string, object>;
export type ScreenNavigationProps = CompositeNavigationProp<
StackNavigationProp<NoProps>,
DrawerNavigationProp<NoProps>
>;
export type DrawerProps = DrawerContentComponentProps<DrawerContentOptions>;
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator(); // https://reactnavigation.org/docs/stack-navigator/
/**
* Render the content of the drawer. When an item is selected
* it closes the drawer and pushes an element on the stack nav.
* #param props
*/
function CustomDrawerContent(props: DrawerProps) {
const navigation = (props.navigation as unknown) as ScreenNavigationProps;
const openScreen = (name: string) => () => {
navigation.navigate('Home', {screen: name});
navigation.closeDrawer();
};
return (
<DrawerContentScrollView {...props}>
{/* <DrawerItemList {...props} /> */}
<DrawerItem label="Home" onPress={openScreen('Home')} />
<DrawerItem label="Settings" onPress={openScreen('Settings')} />
</DrawerContentScrollView>
);
}
/**
* Render the Home Stack Navigator.
*/
function HomeStack() {
return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeScreen}
options={{headerShown: false}}
/>
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>
);
}
/**
* Render the Home Drawer with a custom drawerContent.
*/
function HomeDrawer() {
return (
<Drawer.Navigator
initialRouteName="Home"
drawerContent={(props) => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Home" component={HomeStack} />
</Drawer.Navigator>
);
}
const App = () => {
return (
<SafeAreaView style={styles.app}>
<NavigationContainer>
<HomeDrawer />
</NavigationContainer>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
app: {flex: 1},
});
export default App;
The HomeScreen can provide a menu to open the drawer:
const navigation = useNavigation<ScreenNavigationProps>();
const openDrawer = () => {
navigation.openDrawer();
};