Reputation: 873
Aim- I want to create an app with 3 navigation (2- types)
react-navigation": "^3.3.2
Authloading
- basically a loading page which checks for a token in
async storage and decide whether to redirect to AuthStack
orAppStack
.
AuthStack
- it has login and signup pages .AppStack
- contaons some pages which opens after loging e.g dashboard, profile etc.What i achieved so far -
I can perform login , sign out, checking at app load if a user is already logged in or not .
What remains- when user comes at Home / Dashboard i want to have an Side-Menu / Drawer to open on sliding and at button press.
i have tried React navigation 3 docs but I think i am too new to understand that, Index.js-
import React from 'react';
import { createStackNavigator, createSwitchNavigator, createAppContainer,
createDrawerNavigator } from 'react-navigation';
import Signup from './Screens/Authentication/SignUp';
import SignInScreen from './Screens/Authentication/Login';
import HomeScreen from './Screens/DashBoard/Home';
import AuthLoadingScreen from './Screens/Authentication/AuthLoadingScreen';
const AppStack = createStackNavigator({
Home: HomeScreen,
// Other: OtherScreen
});
const AuthStack = createStackNavigator({
SignIn: SignInScreen,
SignUp: Signup
}, {
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
});
export default createAppContainer(createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
));
const MyDrawerNavigator = createDrawerNavigator({
App: AppStack
});
const MyApp = createAppContainer(MyDrawerNavigator);
But i am not able to open a drawer Thank you
my index.js file-
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
my package.Json file-
{
"name": "SM",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.8.3",
"react-native": "0.59.0",
"react-native-gesture-handler": "^1.1.0",
"react-navigation": "^3.3.2"
},
"devDependencies": {
"@babel/core": "7.3.4",
"@babel/runtime": "7.3.4",
"babel-jest": "24.5.0",
"jest": "24.5.0",
"metro-react-native-babel-preset": "0.53.0",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
Upvotes: 5
Views: 2466
Reputation: 771
Slightly complex example is below where different stack navigators are added to DrawerNavigator and different drawer navigators are added to bottom tab navigator.
import React from "react";
import { Text, View } from "react-native";
import {
createBottomTabNavigator,
createDrawerNavigator,
createStackNavigator,
createAppContainer
} from "react-navigation";
import DetailsScreen from "./uicomponents/DetailsScreen";
import HomeScreen from "./uicomponents/home/HomeScreen";
import CategoriesScreen from "./uicomponents/categories/CategoriesScreen";
import HamburgerIcon from "./uicomponents/HamburgerIcon";
import HamburgerIconR from "./uicomponents/HamburgerIconR";
import SideMenu from "./uicomponents/SideMenu";
import { styles } from "./customstyles/Styles";
import { fromRight } from "react-navigation-transitions";
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Settings!</Text>
</View>
);
}
}
const MainNavigator = createStackNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: ({ navigation }) => ({
headerTitleStyle: styles.headerTitleStyle,
headerStyle: styles.headerStyle,
headerLeft: <HamburgerIcon navigationProps={navigation} />,
headerRight: <HamburgerIconR navigationProps={navigation} />,
title: `Recipes`,
headerBackTitle: "A much too long text for back button from B to A",
headerBackTitle: null
})
},
Details: {
screen: DetailsScreen,
navigationOptions: () => ({
headerTitleStyle: styles.headerTitleStyle,
headerStyle: styles.headerStyle,
title: `Details`,
headerTintColor: styles.headerTintColor
})
},
Categories: {
screen: CategoriesScreen,
navigationOptions: ({ navigation }) => ({
headerTitleStyle: styles.headerTitleStyle,
headerStyle: styles.headerStyle,
headerRight: <HamburgerIconR navigationProps={navigation} />,
title: `Categories`,
headerTintColor: styles.headerTintColor
})
}
},
{
//initialRouteName: 'Home',
initialRouteName: "Home",
transitionConfig: () => fromRight(500)
}
);
const Drawer = createDrawerNavigator(
{
Home: { screen: MainNavigator },
Regular: { screen: MainNavigator },
Kitchens: { screen: MainNavigator },
Restaurants: { screen: MainNavigator },
Local: { screen: MainNavigator },
Bookmarks: { screen: MainNavigator },
Profile: { screen: MainNavigator },
AboutUs: { screen: MainNavigator },
PrivacyPolicy: { screen: MainNavigator }
},
{
drawerWidth: 300,
contentComponent: SideMenu
}
);
const AppDrawer = createAppContainer(Drawer);
const TabNavigator = createBottomTabNavigator(
{
National: { screen: AppDrawer },
International: { screen: AppDrawer },
Regional: { screen: AppDrawer },
Saved: { screen: AppDrawer }
},
{
tabBarOptions: {
activeTintColor: "yellow",
inactiveTintColor: "white",
style: {
backgroundColor: "#A72428",
paddingBottom:15
}
}
}
);
const App = createAppContainer(TabNavigator);
export default App;
Hope it should help you. !!
Upvotes: 0
Reputation: 674
Try this
import React from 'react';
import { createStackNavigator, createSwitchNavigator, createAppContainer,
createDrawerNavigator } from 'react-navigation';
import Signup from './Screens/Authentication/SignUp';
import SignInScreen from './Screens/Authentication/Login';
import HomeScreen from './Screens/DashBoard/Home';
import AuthLoadingScreen from './Screens/Authentication/AuthLoadingScreen';
const AppStack = createStackNavigator({
Home: MyDrawerNavigator,
// Other: OtherScreen
});
const AuthStack = createStackNavigator({
SignIn: SignInScreen,
SignUp: Signup
}, {
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
});
export default createAppContainer(createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
));
const MyDrawerNavigator = createDrawerNavigator({
Home: HomeScreen
});
Upvotes: 1