How to add side menu icon in wix-react-native-navigation v2?
I am new to react-native. i want to add side menu icon like the following image
in wix-react-native-navigation v1 was fairly simple. We need to just add
{
tabs:[
screen: "myscreenName",
label: "MyLabel",
icon: require('icon-url')
]
}
But in V2 documentation they said if you add to side menu use this but they didn't say about how to add icon.
{
root: {
sideMenu: {
left: {
component: {
name: 'sideDrawer'
}
},
center: {
bottomTabs: {
.....
}
}
}
}
}
As a result a side drawer is appear if i dragged from left side but the icon is missing.
Any idea ho do i add a icon like this on wix-react-native-navigation v2
react-native react-native-navigation wix-react-native-navigation
asked Nov 12 '18 at 4:48
Torikul Alam
5329
add a comment |
I am new to react-native. i want to add side menu icon like the following image
in wix-react-native-navigation v1 was fairly simple. We need to just add
{
tabs:[
screen: "myscreenName",
label: "MyLabel",
icon: require('icon-url')
]
}
But in V2 documentation they said if you add to side menu use this but they didn't say about how to add icon.
{
root: {
sideMenu: {
left: {
component: {
name: 'sideDrawer'
}
},
center: {
bottomTabs: {
.....
}
}
}
}
}
As a result a side drawer is appear if i dragged from left side but the icon is missing.
Any idea ho do i add a icon like this on wix-react-native-navigation v2
react-native react-native-navigation wix-react-native-navigation
asked Nov 12 '18 at 4:48
Torikul Alam
5329
add a comment |
I am new to react-native. i want to add side menu icon like the following image
in wix-react-native-navigation v1 was fairly simple. We need to just add
{
tabs:[
screen: "myscreenName",
label: "MyLabel",
icon: require('icon-url')
]
}
But in V2 documentation they said if you add to side menu use this but they didn't say about how to add icon.
{
root: {
sideMenu: {
left: {
component: {
name: 'sideDrawer'
}
},
center: {
bottomTabs: {
.....
}
}
}
}
}
As a result a side drawer is appear if i dragged from left side but the icon is missing.
Any idea ho do i add a icon like this on wix-react-native-navigation v2
react-native react-native-navigation wix-react-native-navigation
asked Nov 12 '18 at 4:48
Torikul Alam
5329
I am new to react-native. i want to add side menu icon like the following image
in wix-react-native-navigation v1 was fairly simple. We need to just add
{
tabs:[
screen: "myscreenName",
label: "MyLabel",
icon: require('icon-url')
]
}
But in V2 documentation they said if you add to side menu use this but they didn't say about how to add icon.
{
root: {
sideMenu: {
left: {
component: {
name: 'sideDrawer'
}
},
center: {
bottomTabs: {
.....
}
}
}
}
}
As a result a side drawer is appear if i dragged from left side but the icon is missing.
Any idea ho do i add a icon like this on wix-react-native-navigation v2
react-native react-native-navigation wix-react-native-navigation
react-native react-native-navigation wix-react-native-navigation
asked Nov 12 '18 at 4:48
Torikul Alam
5329
asked Nov 12 '18 at 4:48
Torikul Alam
5329
edited Nov 13 '18 at 5:42
asked Nov 12 '18 at 4:48
Torikul Alam
5329
asked Nov 12 '18 at 4:48
Torikul Alam
5329
asked Nov 12 '18 at 4:48
Torikul Alam
5329
5329
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
You can check this link
https://github.com/wix/react-native-navigation/issues/796
The hamburger button is no longer added by default since a lot of
users asked to control when it's displayed and when not. In every
screen you'd like to have the hamburger button, add it explicitly:
static navigatorButtons = { leftButtons: [
{
id: 'sideMenu'
} ] };
answered Nov 12 '18 at 6:20
shojol80
262
add a comment |
You can try the below code. This creates a tab based screen. If you want as screen, you can use Navigation.startSingleScreenApp(...)
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
sideMenu: {
id: "sideMenu",
left: {
component: {
id: "Drawer",
name: "navigation.Drawer"
}
},
center: {
stack: {
id: "AppRoot",
children: [{
component: {
id: "App",
name: "navigation.AppScreen"
}
}]
}
}
}
}
});
}
answered Nov 12 '18 at 5:30
TheHound.developer
212213
you are right this only works in version 1 in version 2 how do i do that. In version 2 there is no method named startTabBasedApp
– Torikul Alam
Nov 12 '18 at 5:34
I have edited the answer. Please check it.
– TheHound.developer
Nov 12 '18 at 5:41
still didn't see the icon option and icon doesn't appear
– Torikul Alam
Nov 12 '18 at 6:00
github.com/wix/react-native-navigation/blob/v2/docs/docs/…
– TheHound.developer
Nov 12 '18 at 6:13
Please check that link. You can customize the side menu. Try adding icon:require('icon.png')
– TheHound.developer
Nov 12 '18 at 6:15
add a comment |
You can add this static function with different configs in your screen:
export default class Screen extends Component {
static get options() {
return {
topBar: {
title: {
text: 'Screen',
},
leftButtons: [
{
icon: require('../../../assets/icons/burgerMenu.png'),
id: 'toggleDrawer',
},
],
},
};
}
}
The complete list of options can be found in the docs in this link: topBar options
answered Dec 19 '18 at 10:22
ketimaBU
241419
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%2f53256111%2fhow-to-add-side-menu-icon-in-wix-react-native-navigation-v2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can check this link
https://github.com/wix/react-native-navigation/issues/796
The hamburger button is no longer added by default since a lot of
users asked to control when it's displayed and when not. In every
screen you'd like to have the hamburger button, add it explicitly:
static navigatorButtons = { leftButtons: [
{
id: 'sideMenu'
} ] };
answered Nov 12 '18 at 6:20
shojol80
262
add a comment |
You can check this link
https://github.com/wix/react-native-navigation/issues/796
The hamburger button is no longer added by default since a lot of
users asked to control when it's displayed and when not. In every
screen you'd like to have the hamburger button, add it explicitly:
static navigatorButtons = { leftButtons: [
{
id: 'sideMenu'
} ] };
answered Nov 12 '18 at 6:20
shojol80
262
add a comment |
You can check this link
https://github.com/wix/react-native-navigation/issues/796
The hamburger button is no longer added by default since a lot of
users asked to control when it's displayed and when not. In every
screen you'd like to have the hamburger button, add it explicitly:
static navigatorButtons = { leftButtons: [
{
id: 'sideMenu'
} ] };
answered Nov 12 '18 at 6:20
shojol80
262
You can check this link
https://github.com/wix/react-native-navigation/issues/796
The hamburger button is no longer added by default since a lot of
users asked to control when it's displayed and when not. In every
screen you'd like to have the hamburger button, add it explicitly:
static navigatorButtons = { leftButtons: [
{
id: 'sideMenu'
} ] };
answered Nov 12 '18 at 6:20
shojol80
262
answered Nov 12 '18 at 6:20
shojol80
262
answered Nov 12 '18 at 6:20
shojol80
262
answered Nov 12 '18 at 6:20
shojol80
262
262
add a comment |
add a comment |
You can try the below code. This creates a tab based screen. If you want as screen, you can use Navigation.startSingleScreenApp(...)
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
sideMenu: {
id: "sideMenu",
left: {
component: {
id: "Drawer",
name: "navigation.Drawer"
}
},
center: {
stack: {
id: "AppRoot",
children: [{
component: {
id: "App",
name: "navigation.AppScreen"
}
}]
}
}
}
}
});
}
answered Nov 12 '18 at 5:30
TheHound.developer
212213
you are right this only works in version 1 in version 2 how do i do that. In version 2 there is no method named startTabBasedApp
– Torikul Alam
Nov 12 '18 at 5:34
I have edited the answer. Please check it.
– TheHound.developer
Nov 12 '18 at 5:41
still didn't see the icon option and icon doesn't appear
– Torikul Alam
Nov 12 '18 at 6:00
github.com/wix/react-native-navigation/blob/v2/docs/docs/…
– TheHound.developer
Nov 12 '18 at 6:13
Please check that link. You can customize the side menu. Try adding icon:require('icon.png')
– TheHound.developer
Nov 12 '18 at 6:15
add a comment |
You can try the below code. This creates a tab based screen. If you want as screen, you can use Navigation.startSingleScreenApp(...)
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
sideMenu: {
id: "sideMenu",
left: {
component: {
id: "Drawer",
name: "navigation.Drawer"
}
},
center: {
stack: {
id: "AppRoot",
children: [{
component: {
id: "App",
name: "navigation.AppScreen"
}
}]
}
}
}
}
});
}
answered Nov 12 '18 at 5:30
TheHound.developer
212213
you are right this only works in version 1 in version 2 how do i do that. In version 2 there is no method named startTabBasedApp
– Torikul Alam
Nov 12 '18 at 5:34
I have edited the answer. Please check it.
– TheHound.developer
Nov 12 '18 at 5:41
still didn't see the icon option and icon doesn't appear
– Torikul Alam
Nov 12 '18 at 6:00
github.com/wix/react-native-navigation/blob/v2/docs/docs/…
– TheHound.developer
Nov 12 '18 at 6:13
Please check that link. You can customize the side menu. Try adding icon:require('icon.png')
– TheHound.developer
Nov 12 '18 at 6:15
add a comment |
You can try the below code. This creates a tab based screen. If you want as screen, you can use Navigation.startSingleScreenApp(...)
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
sideMenu: {
id: "sideMenu",
left: {
component: {
id: "Drawer",
name: "navigation.Drawer"
}
},
center: {
stack: {
id: "AppRoot",
children: [{
component: {
id: "App",
name: "navigation.AppScreen"
}
}]
}
}
}
}
});
}
answered Nov 12 '18 at 5:30
TheHound.developer
212213
You can try the below code. This creates a tab based screen. If you want as screen, you can use Navigation.startSingleScreenApp(...)
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
sideMenu: {
id: "sideMenu",
left: {
component: {
id: "Drawer",
name: "navigation.Drawer"
}
},
center: {
stack: {
id: "AppRoot",
children: [{
component: {
id: "App",
name: "navigation.AppScreen"
}
}]
}
}
}
}
});
}
answered Nov 12 '18 at 5:30
TheHound.developer
212213
edited Nov 12 '18 at 5:41
answered Nov 12 '18 at 5:30
TheHound.developer
212213
answered Nov 12 '18 at 5:30
TheHound.developer
212213
answered Nov 12 '18 at 5:30
TheHound.developer
212213
212213
you are right this only works in version 1 in version 2 how do i do that. In version 2 there is no method named startTabBasedApp
– Torikul Alam
Nov 12 '18 at 5:34
I have edited the answer. Please check it.
– TheHound.developer
Nov 12 '18 at 5:41
still didn't see the icon option and icon doesn't appear
– Torikul Alam
Nov 12 '18 at 6:00
github.com/wix/react-native-navigation/blob/v2/docs/docs/…
– TheHound.developer
Nov 12 '18 at 6:13
Please check that link. You can customize the side menu. Try adding icon:require('icon.png')
– TheHound.developer
Nov 12 '18 at 6:15
add a comment |
you are right this only works in version 1 in version 2 how do i do that. In version 2 there is no method named startTabBasedApp
– Torikul Alam
Nov 12 '18 at 5:34
I have edited the answer. Please check it.
– TheHound.developer
Nov 12 '18 at 5:41
still didn't see the icon option and icon doesn't appear
– Torikul Alam
Nov 12 '18 at 6:00
github.com/wix/react-native-navigation/blob/v2/docs/docs/…
– TheHound.developer
Nov 12 '18 at 6:13
Please check that link. You can customize the side menu. Try adding icon:require('icon.png')
– TheHound.developer
Nov 12 '18 at 6:15
you are right this only works in version 1 in version 2 how do i do that. In version 2 there is no method named startTabBasedApp
– Torikul Alam
Nov 12 '18 at 5:34
you are right this only works in version 1 in version 2 how do i do that. In version 2 there is no method named startTabBasedApp
– Torikul Alam
Nov 12 '18 at 5:34
I have edited the answer. Please check it.
– TheHound.developer
Nov 12 '18 at 5:41
I have edited the answer. Please check it.
– TheHound.developer
Nov 12 '18 at 5:41
still didn't see the icon option and icon doesn't appear
– Torikul Alam
Nov 12 '18 at 6:00
still didn't see the icon option and icon doesn't appear
– Torikul Alam
Nov 12 '18 at 6:00
github.com/wix/react-native-navigation/blob/v2/docs/docs/…
– TheHound.developer
Nov 12 '18 at 6:13
github.com/wix/react-native-navigation/blob/v2/docs/docs/…
– TheHound.developer
Nov 12 '18 at 6:13
Please check that link. You can customize the side menu. Try adding icon:require('icon.png')
– TheHound.developer
Nov 12 '18 at 6:15
Please check that link. You can customize the side menu. Try adding icon:require('icon.png')
– TheHound.developer
Nov 12 '18 at 6:15
add a comment |
You can add this static function with different configs in your screen:
export default class Screen extends Component {
static get options() {
return {
topBar: {
title: {
text: 'Screen',
},
leftButtons: [
{
icon: require('../../../assets/icons/burgerMenu.png'),
id: 'toggleDrawer',
},
],
},
};
}
}
The complete list of options can be found in the docs in this link: topBar options
answered Dec 19 '18 at 10:22
ketimaBU
241419
add a comment |
You can add this static function with different configs in your screen:
export default class Screen extends Component {
static get options() {
return {
topBar: {
title: {
text: 'Screen',
},
leftButtons: [
{
icon: require('../../../assets/icons/burgerMenu.png'),
id: 'toggleDrawer',
},
],
},
};
}
}
The complete list of options can be found in the docs in this link: topBar options
answered Dec 19 '18 at 10:22
ketimaBU
241419
add a comment |
You can add this static function with different configs in your screen:
export default class Screen extends Component {
static get options() {
return {
topBar: {
title: {
text: 'Screen',
},
leftButtons: [
{
icon: require('../../../assets/icons/burgerMenu.png'),
id: 'toggleDrawer',
},
],
},
};
}
}
The complete list of options can be found in the docs in this link: topBar options
answered Dec 19 '18 at 10:22
ketimaBU
241419
You can add this static function with different configs in your screen:
export default class Screen extends Component {
static get options() {
return {
topBar: {
title: {
text: 'Screen',
},
leftButtons: [
{
icon: require('../../../assets/icons/burgerMenu.png'),
id: 'toggleDrawer',
},
],
},
};
}
}
The complete list of options can be found in the docs in this link: topBar options
answered Dec 19 '18 at 10:22
ketimaBU
241419
answered Dec 19 '18 at 10:22
ketimaBU
241419
answered Dec 19 '18 at 10:22
ketimaBU
241419
answered Dec 19 '18 at 10:22
ketimaBU
241419
241419
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53256111%2fhow-to-add-side-menu-icon-in-wix-react-native-navigation-v2%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
