React-native with react-navigation. How to make screen from tabBarNavigator invisible on TabBar?
I use react-navigation version 3.x. How to make screen from tabBarNavigator invisible on TabBar?
I need to remove main screen from tabBar(it should be invisible) but TabBar must be on main screen.
My screen structure is next:
const AppStackNavigator = createStackNavigator({
loginFlow: {
screen: createStackNavigator({
intro: { screen: Intro },
login: { screen: Login },
registration: { screen: Registration }
})
},
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someTab: {
screen: createBottomTabNavigator({
main: { screen: Home },
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
}
});
react-native react-navigation react-navigation-stack
edited Dec 16 '18 at 10:50
halfer
14.7k759116
asked Nov 22 '18 at 11:04
HannibalHannibal
226
add a comment |
I use react-navigation version 3.x. How to make screen from tabBarNavigator invisible on TabBar?
I need to remove main screen from tabBar(it should be invisible) but TabBar must be on main screen.
My screen structure is next:
const AppStackNavigator = createStackNavigator({
loginFlow: {
screen: createStackNavigator({
intro: { screen: Intro },
login: { screen: Login },
registration: { screen: Registration }
})
},
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someTab: {
screen: createBottomTabNavigator({
main: { screen: Home },
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
}
});
react-native react-navigation react-navigation-stack
edited Dec 16 '18 at 10:50
halfer
14.7k759116
asked Nov 22 '18 at 11:04
HannibalHannibal
226
Your question is contradicting itself. You want to remove main screen from tabBar(it should be invisible) but TabBar must be on main screen? What exactly is that you are expecting to do? Please attach screenshots if it helps you explain better.
– Manju Basha
Nov 22 '18 at 11:44
main screeen must have tabBar but on babBar must be visible only 4 icons and title for Tab1-Tab4
– Hannibal
Nov 22 '18 at 12:31
How did you get on with the help rendered below, Hannibal?
– halfer
Dec 16 '18 at 10:50
add a comment |
I use react-navigation version 3.x. How to make screen from tabBarNavigator invisible on TabBar?
I need to remove main screen from tabBar(it should be invisible) but TabBar must be on main screen.
My screen structure is next:
const AppStackNavigator = createStackNavigator({
loginFlow: {
screen: createStackNavigator({
intro: { screen: Intro },
login: { screen: Login },
registration: { screen: Registration }
})
},
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someTab: {
screen: createBottomTabNavigator({
main: { screen: Home },
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
}
});
react-native react-navigation react-navigation-stack
edited Dec 16 '18 at 10:50
halfer
14.7k759116
asked Nov 22 '18 at 11:04
HannibalHannibal
226
I use react-navigation version 3.x. How to make screen from tabBarNavigator invisible on TabBar?
I need to remove main screen from tabBar(it should be invisible) but TabBar must be on main screen.
My screen structure is next:
const AppStackNavigator = createStackNavigator({
loginFlow: {
screen: createStackNavigator({
intro: { screen: Intro },
login: { screen: Login },
registration: { screen: Registration }
})
},
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someTab: {
screen: createBottomTabNavigator({
main: { screen: Home },
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
}
});
react-native react-navigation react-navigation-stack
react-native react-navigation react-navigation-stack
edited Dec 16 '18 at 10:50
halfer
14.7k759116
asked Nov 22 '18 at 11:04
HannibalHannibal
226
edited Dec 16 '18 at 10:50
halfer
14.7k759116
asked Nov 22 '18 at 11:04
HannibalHannibal
226
edited Dec 16 '18 at 10:50
halfer
14.7k759116
edited Dec 16 '18 at 10:50
halfer
14.7k759116
edited Dec 16 '18 at 10:50
halfer
14.7k759116
14.7k759116
asked Nov 22 '18 at 11:04
HannibalHannibal
226
asked Nov 22 '18 at 11:04
HannibalHannibal
226
asked Nov 22 '18 at 11:04
HannibalHannibal
226
226
Your question is contradicting itself. You want to remove main screen from tabBar(it should be invisible) but TabBar must be on main screen? What exactly is that you are expecting to do? Please attach screenshots if it helps you explain better.
– Manju Basha
Nov 22 '18 at 11:44
main screeen must have tabBar but on babBar must be visible only 4 icons and title for Tab1-Tab4
– Hannibal
Nov 22 '18 at 12:31
How did you get on with the help rendered below, Hannibal?
– halfer
Dec 16 '18 at 10:50
add a comment |
Your question is contradicting itself. You want to remove main screen from tabBar(it should be invisible) but TabBar must be on main screen? What exactly is that you are expecting to do? Please attach screenshots if it helps you explain better.
– Manju Basha
Nov 22 '18 at 11:44
main screeen must have tabBar but on babBar must be visible only 4 icons and title for Tab1-Tab4
– Hannibal
Nov 22 '18 at 12:31
How did you get on with the help rendered below, Hannibal?
– halfer
Dec 16 '18 at 10:50
Your question is contradicting itself. You want to remove main screen from tabBar(it should be invisible) but TabBar must be on main screen? What exactly is that you are expecting to do? Please attach screenshots if it helps you explain better.
– Manju Basha
Nov 22 '18 at 11:44
Your question is contradicting itself. You want to remove main screen from tabBar(it should be invisible) but TabBar must be on main screen? What exactly is that you are expecting to do? Please attach screenshots if it helps you explain better.
– Manju Basha
Nov 22 '18 at 11:44
main screeen must have tabBar but on babBar must be visible only 4 icons and title for Tab1-Tab4
– Hannibal
Nov 22 '18 at 12:31
main screeen must have tabBar but on babBar must be visible only 4 icons and title for Tab1-Tab4
– Hannibal
Nov 22 '18 at 12:31
How did you get on with the help rendered below, Hannibal?
– halfer
Dec 16 '18 at 10:50
How did you get on with the help rendered below, Hannibal?
– halfer
Dec 16 '18 at 10:50
add a comment |
2 Answers
2
active
oldest
votes
Your question is worded weirdly, but I'll give you answers to both of my interpretations:
If you want so remove a screen from your tab bar, simply comment it out:
// main: { screen: Home },
If you want to have the main screen in the same stack as the rest of your tab bar, but not want it to show within the tab bar, you could nest it inside a switchNavigator:
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someSwitch: createSwitchNavigator({
main: { screen: Home },
someTab: {
screen: createBottomTabNavigator({
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
})
}
edited Dec 16 '18 at 10:49
halfer
14.7k759116
answered Nov 23 '18 at 8:43
J. HestersJ. Hesters
8951437
add a comment |
Actually I just use my own TabBar component. just need to use tabBarComponent properties
answered 15 hours ago
HannibalHannibal
226
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%2f53429536%2freact-native-with-react-navigation-how-to-make-screen-from-tabbarnavigator-invi%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your question is worded weirdly, but I'll give you answers to both of my interpretations:
If you want so remove a screen from your tab bar, simply comment it out:
// main: { screen: Home },
If you want to have the main screen in the same stack as the rest of your tab bar, but not want it to show within the tab bar, you could nest it inside a switchNavigator:
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someSwitch: createSwitchNavigator({
main: { screen: Home },
someTab: {
screen: createBottomTabNavigator({
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
})
}
edited Dec 16 '18 at 10:49
halfer
14.7k759116
answered Nov 23 '18 at 8:43
J. HestersJ. Hesters
8951437
add a comment |
Your question is worded weirdly, but I'll give you answers to both of my interpretations:
If you want so remove a screen from your tab bar, simply comment it out:
// main: { screen: Home },
If you want to have the main screen in the same stack as the rest of your tab bar, but not want it to show within the tab bar, you could nest it inside a switchNavigator:
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someSwitch: createSwitchNavigator({
main: { screen: Home },
someTab: {
screen: createBottomTabNavigator({
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
})
}
edited Dec 16 '18 at 10:49
halfer
14.7k759116
answered Nov 23 '18 at 8:43
J. HestersJ. Hesters
8951437
add a comment |
Your question is worded weirdly, but I'll give you answers to both of my interpretations:
If you want so remove a screen from your tab bar, simply comment it out:
// main: { screen: Home },
If you want to have the main screen in the same stack as the rest of your tab bar, but not want it to show within the tab bar, you could nest it inside a switchNavigator:
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someSwitch: createSwitchNavigator({
main: { screen: Home },
someTab: {
screen: createBottomTabNavigator({
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
})
}
edited Dec 16 '18 at 10:49
halfer
14.7k759116
answered Nov 23 '18 at 8:43
J. HestersJ. Hesters
8951437
Your question is worded weirdly, but I'll give you answers to both of my interpretations:
If you want so remove a screen from your tab bar, simply comment it out:
// main: { screen: Home },
If you want to have the main screen in the same stack as the rest of your tab bar, but not want it to show within the tab bar, you could nest it inside a switchNavigator:
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someSwitch: createSwitchNavigator({
main: { screen: Home },
someTab: {
screen: createBottomTabNavigator({
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
})
}
edited Dec 16 '18 at 10:49
halfer
14.7k759116
answered Nov 23 '18 at 8:43
J. HestersJ. Hesters
8951437
edited Dec 16 '18 at 10:49
halfer
14.7k759116
edited Dec 16 '18 at 10:49
halfer
14.7k759116
edited Dec 16 '18 at 10:49
halfer
14.7k759116
14.7k759116
answered Nov 23 '18 at 8:43
J. HestersJ. Hesters
8951437
answered Nov 23 '18 at 8:43
J. HestersJ. Hesters
8951437
answered Nov 23 '18 at 8:43
J. HestersJ. Hesters
8951437
8951437
add a comment |
add a comment |
Actually I just use my own TabBar component. just need to use tabBarComponent properties
answered 15 hours ago
HannibalHannibal
226
add a comment |
Actually I just use my own TabBar component. just need to use tabBarComponent properties
answered 15 hours ago
HannibalHannibal
226
add a comment |
Actually I just use my own TabBar component. just need to use tabBarComponent properties
answered 15 hours ago
HannibalHannibal
226
Actually I just use my own TabBar component. just need to use tabBarComponent properties
answered 15 hours ago
HannibalHannibal
226
answered 15 hours ago
HannibalHannibal
226
answered 15 hours ago
HannibalHannibal
226
answered 15 hours ago
HannibalHannibal
226
226
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%2f53429536%2freact-native-with-react-navigation-how-to-make-screen-from-tabbarnavigator-invi%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
Your question is contradicting itself. You want to remove main screen from tabBar(it should be invisible) but TabBar must be on main screen? What exactly is that you are expecting to do? Please attach screenshots if it helps you explain better.
– Manju Basha
Nov 22 '18 at 11:44
main screeen must have tabBar but on babBar must be visible only 4 icons and title for Tab1-Tab4
– Hannibal
Nov 22 '18 at 12:31
How did you get on with the help rendered below, Hannibal?
– halfer
Dec 16 '18 at 10:50