I am working on a Practice Project like Login/Register Application and I am using Stack Navigation from react-navigations and it's working perfect,
Now when User Login's he should be redirected to the Dashboard Screen where I want a Drawer to the right side of the header "I also added a screenshot" and I created the Dashboard Screen also in Stack Navigation I don't know How I can add that Drawer inside the Stack Navigation I just want Drawer on my Dashboard Screen so anyone who can help with that? Thanks
App.js (Where I added all Stack Screens)
import React from 'react';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
import HomeScreen from './screens/HomeScreen';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import Dashboard from './screens/Dashboard';
const StackNavigation = createStackNavigator({
HomeStack: HomeScreen,
LoginStack: LoginScreen,
RegisterStack: RegisterScreen,
DashboardStack: Dashboard,
}, {
initialRouteName: 'HomeStack',
});
const DrawerNav = createDrawerNavigator({
DashboardStack: Dashboard,
})
export default class App extends React.Component {
render() {
return (
<StackNavigation />
);
}
}
Dashboard.js
import React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
export default class Dashboard extends React.Component {
static navigationOptions = {
headerTitle: 'Dashboard',
headerLeft: null,
headerTitleStyle: {
flex: 1,
color: '#fff',
textAlign: 'center',
alignSelf: 'center',
fontWeight: 'normal',
},
headerStyle: {
backgroundColor: '#b5259e',
},
}
Add a drawer Position
parameter when create Drawer Navigator.
const DrawerNav = createDrawerNavigator({
DashboardStack: Dashboard,
},
{
drawerPosition: 'right'
});
Add a button to the header for toggleDrawer
in Dashboard.js
. You can get the navigation instance as below in navigationOptions
;
class Dashboard extends React.Component {
static navigationOptions = ({navigation, navigationOptions}) => {
return {
headerTitle: 'Dashboard@@',
headerLeft: <Text>Left</Text>,
headerRight: (
<Button onPress = {navigation.toggleDrawer}
title="Menu"
color="#fff">
<Text>Menu</Text>
</Button>
),
headerTitleStyle: {
flex: 1,
color: '#fff',
textAlign: 'center',
alignSelf: 'center',
fontWeight: 'normal',
},
headerStyle: {
backgroundColor: '#b5259e',
},
}
}
You could change button to Touchable Opacity or another one.
AuthStackNavigation
and DrawerNavigation
using another Navigator.Wrap your navigation using createSwitchNavigation
or another and export.
// App.js
import React from 'react';
import {
createStackNavigator,
createDrawerNavigator,
createSwitchNavigator,
} from 'react-navigation';
import HomeScreen from './srcs/screens/Home';
import Dashboard from './srcs/screens/Dashboard';
const AuthStackNavigation = createStackNavigator({
HomeStack: HomeScreen,
LoginStack: HomeScreen,
RegisterStack: HomeScreen,
}, {
initialRouteName: 'HomeStack',
})
const DashboardStack = createStackNavigator({ // For header options
Dashboard: Dashboard
})
const DrawerNav = createDrawerNavigator({
DashboardStack: DashboardStack,
SecondScreen: Dashboard, // You should use another screen.
ThirdScreen: Dashboard,
})
const MainNavigation = createSwitchNavigator({
HomeDrawer: DrawerNav,
AuthStack: AuthStackNavigation, // You will use this.props.navigation.replace('HomeDrawer') after login process.
})
export default MainNavigation // Stack, Drawer, Switch naviagtions return react component.