I created two basic DrawerNavigators. One is for the left side, and the other is for the right side of the top bar:
const LeftDrawer = DrawerNavigator({
MenuScreen: { screen: MenuScreen }
}, getDrawerConfig(300, 'left', 'MainScreen'));
export default LeftDrawer;
const RightDrawer = DrawerNavigator({
AccountScreen: { screen: AccountScreen }
}, getDrawerConfig(300, 'right', 'MainScreen'));
export default RightDrawer;
Is it possible to use both drawers inside the MainScreen view?
Thanks!
Using one DrawerNavigator as the main navigator and nesting the other DrawerNavigator inside the first one should do.
const MainDrawer = DrawerNavigator({
OtherDrawer: DrawerNavigator({
AccountScreen: { screen: AccountScreen }
}, getDrawerConfig(300, 'right', 'MainScreen')),
MenuScreen: { screen: MenuScreen }
}, getDrawerConfig(300, 'left', 'MainScreen'));
export default MainDrawer;
Related
have to create a drawer and that drawer I want to use on several screens and inside believe a stack but when it comes to running the app I only get the variable when it comes to creating the stack
const DrawerNav = createDrawerNavigator(
{
screensStack : createStackNavigator({
Welcome: Welcome,
Wellness: Wellness,
Market: Market,
})
},
{
drawerWidth: Dimensions.get("window").width * 0.75,
drawerHeight: Dimensions.get("window").height,
drawerPosition: "left",
contentComponet: DrawerContent
}
)
export default createAppContainer(DrawerNav);
in the drawer only the word screensStack appears
just replace your code with this
const Drawer = createDrawerNavigator(
{
Welcome: { screen: Welcome },
Wellness: { screen: Wellness },
Market: { screen: Market },
},
{
initialRouteName: 'Welcome',
}
)
const AppNavigator = createStackNavigator(
{
Drawer: { screen: Drawer },
},
{
initialRouteName: 'Drawer',
headerMode: 'none',
}
)
const AppContainer = createAppContainer(AppNavigator)
export default () => <AppContainer />
it'll work
The createStackNavigator is located in the drawer. Therefore, when you click a variable in the drawer, you will go to the first screen of the stack navigator.
If you want to make all three variables visible, you need to reposition them.
createAppContainer
createStackNavigator
createDrawerNavigator
Welcome: Welcome,
Wellness: Wellness,
Market: Market,
My router setup is as below
import { createAppContainer, createDrawerNavigator, createStackNavigator, createSwitchNavigator } from "react-navigation";
import Home from "./components/Home";
import Search from "./components/Search";
import Map from "./components/Map";
import Login from "./components/Login";
import ForgotPassword from "./components/ForgotPassword";
import SideMenu from "./SideMenu";
const DashboardStack = createStackNavigator(
{
Home: { screen: Home },
Search : {screen : Search}
}
);
const MapStack = createStackNavigator(
{
Map: { screen: Map },
}
);
const AuthStack = createStackNavigator(
{
Login: { screen: Login },
ForgotPassword: { screen: ForgotPassword },
}
);
export const DrawerStack = createDrawerNavigator(
{
Dashboard: { screen: DashboardStack },
Map: { screen: MapStack },
},
{
contentComponent: SideMenu,
drawerWidth: 250
}
);
export const AppNavigator = createStackNavigator(
{
Drawer: { screen: DrawerStack },
Auth: { screen: AuthStack },
},
{
// initialRouteName: "Drawer",
headerMode: 'none',
mode: 'modal',
}
);
export default createAppContainer(DrawerStack);
Everything working fine, just a small issue. When I navigate to search screen from home and then switch to the Map screen with parameters, those parameters are not reaching to the Map screen.
My current setup is at codepan
Your problem is that your MapStack and your Map screen both have the same name, 'Map'.
Just replace the MapStack route to something else like 'MapStack' and you'll get the params.
See here: https://snack.expo.io/SyTFUPZUB
export const DrawerStack = createDrawerNavigator(
{
Dashboard: { screen: DashboardStack },
MapStack: { screen: MapStack },
},
{
contentComponent: SideMenu,
drawerWidth: 250
}
);
#sfratini is right
The issue is indeed "Map" key being present in two places.
So navigation.navigate("Map") will navigate to MapStack.
Navigating to stack means going to current screen of that stack which defaults to initialRouteName or first screen in the stack.
To verify this, add another screen as first screen in MapStack and check the behaviour.
So, solution to your issue is to rename "Map" key to something else, as suggested by #sfratini.
It works fine by just adding map screen to dashboard stack
const DashboardStack = createStackNavigator(
{
Home: { screen: Home },
Search : {screen : Search},
Map: { screen: Map }
}
);
then use
this.props.navigation.getParam('name', 'name is coming')
to get the name params value
here is the code
https://snack.expo.io/HyEFZeyLB
you can reach the parameters in your Map screen like following:
update this :
render() {
return (
<SafeAreaView style={styles.container}>
<Text>Map</Text>
</SafeAreaView>
)
}
to this :
render() {
return (
<SafeAreaView style={styles.container}>
<Text>{this.props.navigation.state.params.name}</Text>
</SafeAreaView>
)
}
and you have to put your Map screen in with home and search Stack like following:
import { createAppContainer, createDrawerNavigator, createStackNavigator,
createSwitchNavigator } from "react-navigation";
import Home from "./components/Home";
import Search from "./components/Search";
import Map from "./components/Map";
import Login from "./components/Login";
import ForgotPassword from "./components/ForgotPassword";
import SideMenu from "./SideMenu";
const DashboardStack = createStackNavigator(
{
Home: { screen: Home },
Search : {screen : Search},
Map: { screen: Map },
}
);
const AuthStack = createStackNavigator(
{
Login: { screen: Login },
ForgotPassword: { screen: ForgotPassword },
}
);
export const DrawerStack = createDrawerNavigator(
{
Dashboard: { screen: DashboardStack },
},
{
contentComponent: SideMenu,
drawerWidth: 250
}
);
export const AppNavigator = createStackNavigator(
{
Drawer: { screen: DrawerStack },
Auth: { screen: AuthStack },
} ,
{
// initialRouteName: "Drawer",
headerMode: 'none',
//mode: 'modal',
}
);
export default createAppContainer(DrawerStack);
the result from your snak :
hope this will help.
I can not remove the header from all screens, I tried this setting below, but still the headers are not removed. Is it if I'm putting the navigationOptions settings incorrectly?
import React, {Component} from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Home from './telas/Home'
import Login from './telas/Login'
import Cadastro from './telas/Cadastro'
const stackNavigator = createStackNavigator({
Home:{
screen:Home,
},
Login:{
screen:Login
},
Cadastro:{
screen:Cadastro
},
},
{
navigationOptions:{
header:null
}
})
const AppContainer = createAppContainer(stackNavigator);
export default AppContainer;
Pass defaultNavigationOptions instead of navigationOptions.
defaultNavigationOptions: {
header: null
}
You can use headermode
headerMode - Specifies how the header should be rendered:
float - Render a single header that stays at the top and animates
as screens are changed. This is a common pattern on iOS.
screen - Each screen has a header attached to it and the header
fades in and out together with the screen. This is a common pattern
on Android.
none - No header will be rendered.
Exmaple
const ModalNavigator = createStackNavigator(
{
Main: { screen: Main },
Login: { screen: Login },
},
{
headerMode: 'none',
mode: 'modal',
defaultNavigationOptions: {
gesturesEnabled: false,
}
}
)
Usage
const stackNavigator = createStackNavigator({
Home:{
screen:Home,
},
Login:{
screen:Login
},
Cadastro:{
screen:Cadastro
},
},
{
headerMode: 'none'
})
We need to specify the headerMode in createStackNavigator.
Try using this
const stackNavigator = createStackNavigator({
Home:{
screen:Home,
},
Login:{
screen:Login
},
Cadastro:{
screen:Cadastro
},
},
{
headerMode: 'none'
})
I am building an App on React-Native for which I am using React-Navigation
Now, Inside that i am using Stack-Navigation and TabNavigator (updated it DrawerNavigator)
import {
createStackNavigator,
TabNavigator,
DrawerNavigator
} from 'react-navigation';
import CoinCapCharts from "./src/container/CoinCapCharts.js"
import CoinCap from './src/container/CoinCap.js';
//THis is being Exported to App.js
export const Tab = TabNavigator({
TabA: {
screen: CoinCap
},
TabB: {
screen: CoinCap
}
}, {
order: ['TabA', 'TabB'],
animationEnabled: true,
})
export const MyScreen = createStackNavigator({
Home: {
screen: CoinCap
},
CoinCapCharts: {
screen: CoinCapCharts
}
},{
initialRouteName: 'Home',
headerMode: 'none'
});
export const Drawer = DrawerNavigator({
Tabs: { screen: Tab },
Stack: { screen: MyScreen },
})
I am importing this in my App.js where I am doing something like this
import React from 'react';
import {
Drawer
}from './Screen.js';
import {
View
} from 'react-native';
export default class App extends React.Component {
render() {
return (
<View>
<Drawer/>
<Tab/>
</View>
);
}
}
Now, This is indeed showing Tab the first time I run my app but after I navigate to different screen and return back, It doesn't appear to be showing that Tab again
[Question:] What could I be doing wrong and How can I fix it?
Try to define one within the other.
Something like:
const Tab = TabNavigator({
TabA: {
screen: Home
},
TabB: {
screen: Home
}
}, {
order: ['TabA', 'TabB'],
animationEnabled: true,
})
export const MyStack = createStackNavigator({
Home: {
screen: Home
},
CoinCapCharts: {
screen: CoinCapCharts
},
Tab: {
screen: Tab
},
},{
initialRouteName: 'Home',
headerMode: 'none'
});
Now, render MyStack (not sure that Screen is the best name :)
export default class App extends React.Component {
render() {
return (
<View>
<MyStack />
</View>
);
}
}
I am trying to implement a drawer navigator in my project. The drawer will appear in all of the following Scenes: AllPractice, Practice, Playing Tests, Question (all tabs)
Individuals, Groups, Pending. (also tabs).
And all of the other main screens: Awards, GameOn, Uploads.
The issue is I don't know where to implement it in my project.
All my navigation is in the navigation folder.
This is the basic code for the drawer:
AppDrawerNavigator = DrawerNavigator({
FirstScreen: { Screen: FirstScreen },
SecondScreen: { Screen: SecondScreen }
});
Here is where all my navigation code is: its in this file
import { StackNavigator, TabNavigator, DrawerNavigator } from 'react-navigation';
// Home scenes
import Home from '../scenes/Home';
// Authentication scenes
import Login from '../scenes/authentication/Login';
import SignUpStep from '../scenes/authentication/SignUpStep';
import SelectTeachers from '../scenes/authentication/SelectTeachers';
// import Dashboard from '../components/Dashboard'
// import FeedScreen from '../components/FeedScreen'
import AwardsScreen from '../scenes/award/AwardsScreen';
// import StudentsScreen from '../components/StudentsScreen'
import GameOnScreen from '../scenes/game/GameOnScreen';
// All practice scenes
import AllPractice from '../scenes/practice/AllPractice';
import Practice from '../scenes/practice/Practice';
import PlayingTests from '../scenes/practice/PlayingTests';
import Questions from '../scenes/practice/Questions';
import Individuals from '../scenes/practice/Individuals';
import FirstScreen from '../scenes/drawer/firstScreen';
import SecondScreen from '../scenes/drawer/secondScreen';
// Group
import Groups from '../scenes/group/Groups';
// Upload
import UploadsScreen from '../scenes/upload/UploadsScreen';
import Pending from '../scenes/upload/Pending';
// Constant for tab menus
const submissionMenu = {
screen: TabNavigator({
All: { screen: AllPractice },
Practice: { screen: Practice },
PlayingTests: { screen: PlayingTests },
Questions: { screen: Questions }
}, {
tabBarPosition: 'top',
flex: 2 / 3,
tabBarOptions: {
activeTintColor: '#33ACDE',
labelStyle: {
fontSize: 12,
},
tabStyle: {
width: 50
},
}
}
)
};
const studentMenu = {
screen: TabNavigator({
Individuals: { screen: Individuals },
Groups: { screen: Groups },
Pending: { screen: Pending }
}, {
tabBarPosition: 'top',
flex: 1 / 2,
tabBarOptions: {
activeTintColor: '#33ACDE',
}
}
)
};
// Navigation defined
const navigator = StackNavigator({
home: { screen: Home },
signup: { screen: SignUpStep },
login: { screen: Login },
selectTeachers: { screen: SelectTeachers },
dashboard: {
screen: TabNavigator({
Submissions: submissionMenu,
Students: studentMenu,
Awards: { screen: AwardsScreen },
GameOn: { screen: GameOnScreen },
Uploads: { screen: UploadsScreen }
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#33ACDE',
}
}),
navigationOptions: {
title: 'PRACTICIA',
headerLeft: null,
headerStyle: {
backgroundColor: '#33ACDE',
},
headerTitleStyle: {
color: 'white'
}
}
}
});
export default navigator;
Drawer Navigation is like a Tab navigation. It means if you want to use a Drawer to offer a user to navigate your app, then forget about the tabs.
Or, if you want to use a drawer just as a controller like you put some buttons on it.
then, it will be like this.
AppDrawerNavigator = DrawerNavigator({
FirstScreen: { Screen: navigator },
});
I put your 'navigator' on the drawer navigation. Then you can use AppDrawerNavigator as a root.
Then, you can use 'contentComponent' in drawerNavigatorOption to put some buttons or view.