Dual drawer navigation react native expo
I'm trying to implement a left drawer and right drawer for my app. I'm unable to find any usable examples online. I've tried 3-4 examples including the example from react native docs itself and I'm getting undefined is a not an object (evaluating'Component.router). If anyone has a working example of an app with a left and right drawer navigator that would be great. Thanks!
react-native react-navigation expo
asked Nov 19 '18 at 10:03
jacob blankenshipjacob blankenship
307
add a comment |
I'm trying to implement a left drawer and right drawer for my app. I'm unable to find any usable examples online. I've tried 3-4 examples including the example from react native docs itself and I'm getting undefined is a not an object (evaluating'Component.router). If anyone has a working example of an app with a left and right drawer navigator that would be great. Thanks!
react-native react-navigation expo
asked Nov 19 '18 at 10:03
jacob blankenshipjacob blankenship
307
add a comment |
I'm trying to implement a left drawer and right drawer for my app. I'm unable to find any usable examples online. I've tried 3-4 examples including the example from react native docs itself and I'm getting undefined is a not an object (evaluating'Component.router). If anyone has a working example of an app with a left and right drawer navigator that would be great. Thanks!
react-native react-navigation expo
asked Nov 19 '18 at 10:03
jacob blankenshipjacob blankenship
307
I'm trying to implement a left drawer and right drawer for my app. I'm unable to find any usable examples online. I've tried 3-4 examples including the example from react native docs itself and I'm getting undefined is a not an object (evaluating'Component.router). If anyone has a working example of an app with a left and right drawer navigator that would be great. Thanks!
react-native react-navigation expo
react-native react-navigation expo
asked Nov 19 '18 at 10:03
jacob blankenshipjacob blankenship
307
asked Nov 19 '18 at 10:03
jacob blankenshipjacob blankenship
307
asked Nov 19 '18 at 10:03
jacob blankenshipjacob blankenship
307
asked Nov 19 '18 at 10:03
jacob blankenshipjacob blankenship
307
asked Nov 19 '18 at 10:03
jacob blankenshipjacob blankenship
307
307
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I believe that you could do something like this, create a new file 'AppNav.js' to handle all your navigation/drawers etc~
AppNav.js
const LeftDrawer = createDrawerNavigator(
{
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
}, {
headerMode: 'none',
drawerWidth: SCREEN_WIDTH * 0.6,
drawerPosition: 'left',
})
const RightDrawer = createDrawerNavigator(
{
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
}, {
headerMode: 'none',
drawerWidth: SCREEN_WIDTH * 0.6,
drawerPosition: 'right',
})
const RootNavigator = createStackNavigator({
LeftDrawer: { screen: LeftDrawer },
RightDrawer: { screen: RightDrawer }
})
export default AppNav = props => {
return <RootNavigator />
}
EDIT: Plus, on the RootNavigator, before the call of LeftDrawer, you can set the main screen of your app and set it as 'initialRouteName'
answered Nov 19 '18 at 11:17
kivulkivul
545217
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372244%2fdual-drawer-navigation-react-native-expo%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I believe that you could do something like this, create a new file 'AppNav.js' to handle all your navigation/drawers etc~
AppNav.js
const LeftDrawer = createDrawerNavigator(
{
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
}, {
headerMode: 'none',
drawerWidth: SCREEN_WIDTH * 0.6,
drawerPosition: 'left',
})
const RightDrawer = createDrawerNavigator(
{
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
}, {
headerMode: 'none',
drawerWidth: SCREEN_WIDTH * 0.6,
drawerPosition: 'right',
})
const RootNavigator = createStackNavigator({
LeftDrawer: { screen: LeftDrawer },
RightDrawer: { screen: RightDrawer }
})
export default AppNav = props => {
return <RootNavigator />
}
EDIT: Plus, on the RootNavigator, before the call of LeftDrawer, you can set the main screen of your app and set it as 'initialRouteName'
answered Nov 19 '18 at 11:17
kivulkivul
545217
add a comment |
I believe that you could do something like this, create a new file 'AppNav.js' to handle all your navigation/drawers etc~
AppNav.js
const LeftDrawer = createDrawerNavigator(
{
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
}, {
headerMode: 'none',
drawerWidth: SCREEN_WIDTH * 0.6,
drawerPosition: 'left',
})
const RightDrawer = createDrawerNavigator(
{
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
}, {
headerMode: 'none',
drawerWidth: SCREEN_WIDTH * 0.6,
drawerPosition: 'right',
})
const RootNavigator = createStackNavigator({
LeftDrawer: { screen: LeftDrawer },
RightDrawer: { screen: RightDrawer }
})
export default AppNav = props => {
return <RootNavigator />
}
EDIT: Plus, on the RootNavigator, before the call of LeftDrawer, you can set the main screen of your app and set it as 'initialRouteName'
answered Nov 19 '18 at 11:17
kivulkivul
545217
add a comment |
I believe that you could do something like this, create a new file 'AppNav.js' to handle all your navigation/drawers etc~
AppNav.js
const LeftDrawer = createDrawerNavigator(
{
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
}, {
headerMode: 'none',
drawerWidth: SCREEN_WIDTH * 0.6,
drawerPosition: 'left',
})
const RightDrawer = createDrawerNavigator(
{
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
}, {
headerMode: 'none',
drawerWidth: SCREEN_WIDTH * 0.6,
drawerPosition: 'right',
})
const RootNavigator = createStackNavigator({
LeftDrawer: { screen: LeftDrawer },
RightDrawer: { screen: RightDrawer }
})
export default AppNav = props => {
return <RootNavigator />
}
EDIT: Plus, on the RootNavigator, before the call of LeftDrawer, you can set the main screen of your app and set it as 'initialRouteName'
answered Nov 19 '18 at 11:17
kivulkivul
545217
I believe that you could do something like this, create a new file 'AppNav.js' to handle all your navigation/drawers etc~
AppNav.js
const LeftDrawer = createDrawerNavigator(
{
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
}, {
headerMode: 'none',
drawerWidth: SCREEN_WIDTH * 0.6,
drawerPosition: 'left',
})
const RightDrawer = createDrawerNavigator(
{
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
}, {
headerMode: 'none',
drawerWidth: SCREEN_WIDTH * 0.6,
drawerPosition: 'right',
})
const RootNavigator = createStackNavigator({
LeftDrawer: { screen: LeftDrawer },
RightDrawer: { screen: RightDrawer }
})
export default AppNav = props => {
return <RootNavigator />
}
EDIT: Plus, on the RootNavigator, before the call of LeftDrawer, you can set the main screen of your app and set it as 'initialRouteName'
answered Nov 19 '18 at 11:17
kivulkivul
545217
answered Nov 19 '18 at 11:17
kivulkivul
545217
answered Nov 19 '18 at 11:17
kivulkivul
545217
answered Nov 19 '18 at 11:17
kivulkivul
545217
545217
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372244%2fdual-drawer-navigation-react-native-expo%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
