React Native - Navigating to other screen from a component in Tab Navigation
I'm having an issue with Navigation in React Native
My app has Tab Navigation(Main Screen). The first component has a list of articles. When an user taps on an articles. A detail article screen will appear overlay the Main Screen
In the First component. I created a createStackNavigator to open the detail article screen. But the problem is that it seems to replace the First component instead of overlaying the Main Screen
Here is the problem
But what I want is like below
reactjs react-native navigation
asked Nov 23 at 10:09
Én Xinh Lung Linh
29210
add a comment |
I'm having an issue with Navigation in React Native
My app has Tab Navigation(Main Screen). The first component has a list of articles. When an user taps on an articles. A detail article screen will appear overlay the Main Screen
In the First component. I created a createStackNavigator to open the detail article screen. But the problem is that it seems to replace the First component instead of overlaying the Main Screen
Here is the problem
But what I want is like below
reactjs react-native navigation
asked Nov 23 at 10:09
Én Xinh Lung Linh
29210
add a comment |
I'm having an issue with Navigation in React Native
My app has Tab Navigation(Main Screen). The first component has a list of articles. When an user taps on an articles. A detail article screen will appear overlay the Main Screen
In the First component. I created a createStackNavigator to open the detail article screen. But the problem is that it seems to replace the First component instead of overlaying the Main Screen
Here is the problem
But what I want is like below
reactjs react-native navigation
asked Nov 23 at 10:09
Én Xinh Lung Linh
29210
I'm having an issue with Navigation in React Native
My app has Tab Navigation(Main Screen). The first component has a list of articles. When an user taps on an articles. A detail article screen will appear overlay the Main Screen
In the First component. I created a createStackNavigator to open the detail article screen. But the problem is that it seems to replace the First component instead of overlaying the Main Screen
Here is the problem
But what I want is like below
reactjs react-native navigation
reactjs react-native navigation
asked Nov 23 at 10:09
Én Xinh Lung Linh
29210
asked Nov 23 at 10:09
Én Xinh Lung Linh
29210
asked Nov 23 at 10:09
Én Xinh Lung Linh
29210
asked Nov 23 at 10:09
Én Xinh Lung Linh
29210
asked Nov 23 at 10:09
Én Xinh Lung Linh
29210
29210
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You can do that by hiding the tab navigator bar in specific pages of the stack navigator.
const FeedStack = createStackNavigator({
FeedHome: FeedScreen,
Details: DetailsScreen,
});
FeedStack.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index != 0) {
tabBarVisible = false;
}
return {
tabBarVisible,
};
};
In this example FeedStack is the stack navigator you have inside you tab navigator. The if statement decides in which screens to show the tab navigator based on the id. In your case you want to show the navigator only on one screen. I suppose that the id of that screen is 0, but if it isn't you can just replace it with the id you want. The id of the screens is based on the order in which they are declared inside the stack navigator configuration.
answered Nov 23 at 10:32
nikos fotiadis
5941514
I've just tried your code but it doesn't work. My News component is just an example but what all i want is any components in tab navigation can open another screen overlaying the Main Screen
– Én Xinh Lung Linh
Nov 23 at 16:08
You components inside your tab navigator cannot render on top of the tab bar if that is what you mean by overlaying. The only way to get that result is to hide the tab bar of the bottom navigator. The example above is from the documentation of react-navigation, and it has worked for me in the past. Here you can find the official documentation: reactnavigation.org/docs/en/…
– nikos fotiadis
Nov 23 at 16:53
Thank you for your good explanation. I understand it & it works for my app now
– Én Xinh Lung Linh
Nov 25 at 5:32
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%2f53444610%2freact-native-navigating-to-other-screen-from-a-component-in-tab-navigation%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
You can do that by hiding the tab navigator bar in specific pages of the stack navigator.
const FeedStack = createStackNavigator({
FeedHome: FeedScreen,
Details: DetailsScreen,
});
FeedStack.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index != 0) {
tabBarVisible = false;
}
return {
tabBarVisible,
};
};
In this example FeedStack is the stack navigator you have inside you tab navigator. The if statement decides in which screens to show the tab navigator based on the id. In your case you want to show the navigator only on one screen. I suppose that the id of that screen is 0, but if it isn't you can just replace it with the id you want. The id of the screens is based on the order in which they are declared inside the stack navigator configuration.
answered Nov 23 at 10:32
nikos fotiadis
5941514
I've just tried your code but it doesn't work. My News component is just an example but what all i want is any components in tab navigation can open another screen overlaying the Main Screen
– Én Xinh Lung Linh
Nov 23 at 16:08
You components inside your tab navigator cannot render on top of the tab bar if that is what you mean by overlaying. The only way to get that result is to hide the tab bar of the bottom navigator. The example above is from the documentation of react-navigation, and it has worked for me in the past. Here you can find the official documentation: reactnavigation.org/docs/en/…
– nikos fotiadis
Nov 23 at 16:53
Thank you for your good explanation. I understand it & it works for my app now
– Én Xinh Lung Linh
Nov 25 at 5:32
add a comment |
You can do that by hiding the tab navigator bar in specific pages of the stack navigator.
const FeedStack = createStackNavigator({
FeedHome: FeedScreen,
Details: DetailsScreen,
});
FeedStack.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index != 0) {
tabBarVisible = false;
}
return {
tabBarVisible,
};
};
In this example FeedStack is the stack navigator you have inside you tab navigator. The if statement decides in which screens to show the tab navigator based on the id. In your case you want to show the navigator only on one screen. I suppose that the id of that screen is 0, but if it isn't you can just replace it with the id you want. The id of the screens is based on the order in which they are declared inside the stack navigator configuration.
answered Nov 23 at 10:32
nikos fotiadis
5941514
I've just tried your code but it doesn't work. My News component is just an example but what all i want is any components in tab navigation can open another screen overlaying the Main Screen
– Én Xinh Lung Linh
Nov 23 at 16:08
You components inside your tab navigator cannot render on top of the tab bar if that is what you mean by overlaying. The only way to get that result is to hide the tab bar of the bottom navigator. The example above is from the documentation of react-navigation, and it has worked for me in the past. Here you can find the official documentation: reactnavigation.org/docs/en/…
– nikos fotiadis
Nov 23 at 16:53
Thank you for your good explanation. I understand it & it works for my app now
– Én Xinh Lung Linh
Nov 25 at 5:32
add a comment |
You can do that by hiding the tab navigator bar in specific pages of the stack navigator.
const FeedStack = createStackNavigator({
FeedHome: FeedScreen,
Details: DetailsScreen,
});
FeedStack.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index != 0) {
tabBarVisible = false;
}
return {
tabBarVisible,
};
};
In this example FeedStack is the stack navigator you have inside you tab navigator. The if statement decides in which screens to show the tab navigator based on the id. In your case you want to show the navigator only on one screen. I suppose that the id of that screen is 0, but if it isn't you can just replace it with the id you want. The id of the screens is based on the order in which they are declared inside the stack navigator configuration.
answered Nov 23 at 10:32
nikos fotiadis
5941514
You can do that by hiding the tab navigator bar in specific pages of the stack navigator.
const FeedStack = createStackNavigator({
FeedHome: FeedScreen,
Details: DetailsScreen,
});
FeedStack.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index != 0) {
tabBarVisible = false;
}
return {
tabBarVisible,
};
};
In this example FeedStack is the stack navigator you have inside you tab navigator. The if statement decides in which screens to show the tab navigator based on the id. In your case you want to show the navigator only on one screen. I suppose that the id of that screen is 0, but if it isn't you can just replace it with the id you want. The id of the screens is based on the order in which they are declared inside the stack navigator configuration.
answered Nov 23 at 10:32
nikos fotiadis
5941514
answered Nov 23 at 10:32
nikos fotiadis
5941514
answered Nov 23 at 10:32
nikos fotiadis
5941514
answered Nov 23 at 10:32
nikos fotiadis
5941514
5941514
I've just tried your code but it doesn't work. My News component is just an example but what all i want is any components in tab navigation can open another screen overlaying the Main Screen
– Én Xinh Lung Linh
Nov 23 at 16:08
You components inside your tab navigator cannot render on top of the tab bar if that is what you mean by overlaying. The only way to get that result is to hide the tab bar of the bottom navigator. The example above is from the documentation of react-navigation, and it has worked for me in the past. Here you can find the official documentation: reactnavigation.org/docs/en/…
– nikos fotiadis
Nov 23 at 16:53
Thank you for your good explanation. I understand it & it works for my app now
– Én Xinh Lung Linh
Nov 25 at 5:32
add a comment |
I've just tried your code but it doesn't work. My News component is just an example but what all i want is any components in tab navigation can open another screen overlaying the Main Screen
– Én Xinh Lung Linh
Nov 23 at 16:08
You components inside your tab navigator cannot render on top of the tab bar if that is what you mean by overlaying. The only way to get that result is to hide the tab bar of the bottom navigator. The example above is from the documentation of react-navigation, and it has worked for me in the past. Here you can find the official documentation: reactnavigation.org/docs/en/…
– nikos fotiadis
Nov 23 at 16:53
Thank you for your good explanation. I understand it & it works for my app now
– Én Xinh Lung Linh
Nov 25 at 5:32
I've just tried your code but it doesn't work. My News component is just an example but what all i want is any components in tab navigation can open another screen overlaying the Main Screen
– Én Xinh Lung Linh
Nov 23 at 16:08
I've just tried your code but it doesn't work. My News component is just an example but what all i want is any components in tab navigation can open another screen overlaying the Main Screen
– Én Xinh Lung Linh
Nov 23 at 16:08
You components inside your tab navigator cannot render on top of the tab bar if that is what you mean by overlaying. The only way to get that result is to hide the tab bar of the bottom navigator. The example above is from the documentation of react-navigation, and it has worked for me in the past. Here you can find the official documentation: reactnavigation.org/docs/en/…
– nikos fotiadis
Nov 23 at 16:53
You components inside your tab navigator cannot render on top of the tab bar if that is what you mean by overlaying. The only way to get that result is to hide the tab bar of the bottom navigator. The example above is from the documentation of react-navigation, and it has worked for me in the past. Here you can find the official documentation: reactnavigation.org/docs/en/…
– nikos fotiadis
Nov 23 at 16:53
Thank you for your good explanation. I understand it & it works for my app now
– Én Xinh Lung Linh
Nov 25 at 5:32
Thank you for your good explanation. I understand it & it works for my app now
– Én Xinh Lung Linh
Nov 25 at 5:32
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%2f53444610%2freact-native-navigating-to-other-screen-from-a-component-in-tab-navigation%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
