Passing State in React-Navigation from TabsNavigation to Child StackNavigation
UPDATE: Now with a Snack Demo
I've created a demo on snack so you can see the issue first hand and help me demonstrate a solution in actual code.
Steps to duplicate
- launch app
- Tap "GO TO EVENTTABS" button
- Tap each tab, noticing that the eventId is in scope for the first three tabs
- Tap "More" tab
- Tap "TEAM MEMBERS", noticing that eventId is no longer in scope. This is where the problem lies. How do I pass along eventId?
_____________________________
My App has the following navigation hierarchy, where every instance of <> is just a regular component
App <StackNavigator> {
EventList <>
EventTabs <BottomTabNavigator> {
Quests <>
Leaderboard <>
Gallery <>
More <StackNavigator> {
MoreList <>
TeamMembers <>
}
}
}
Upon entering the app, the user's first screen is EventList. They click a button to navigate into EventTabs, so I'm able to use the navigation.navigate() to transition while passing state like so...
EventList.navigation.navigate(EventTabs, passedParams);
To this point, everything makes sense. But TeamMembers also needs access to the passedParams. I'm confused how to pass those along. Hence my question...how do access passedParams from the TeamMembers component? They seem to be scoped just to the EventTabs.
If the answer is to use navigate.setParams(), then I'm not sure where I'd do that.
If the answer is to use NavigationActions.setParams(), then I'm also not sure where I'd do that.
react-native react-navigation
asked Nov 15 '18 at 2:31
Chris GeirmanChris Geirman
6,88942454
add a comment |
UPDATE: Now with a Snack Demo
I've created a demo on snack so you can see the issue first hand and help me demonstrate a solution in actual code.
Steps to duplicate
- launch app
- Tap "GO TO EVENTTABS" button
- Tap each tab, noticing that the eventId is in scope for the first three tabs
- Tap "More" tab
- Tap "TEAM MEMBERS", noticing that eventId is no longer in scope. This is where the problem lies. How do I pass along eventId?
_____________________________
My App has the following navigation hierarchy, where every instance of <> is just a regular component
App <StackNavigator> {
EventList <>
EventTabs <BottomTabNavigator> {
Quests <>
Leaderboard <>
Gallery <>
More <StackNavigator> {
MoreList <>
TeamMembers <>
}
}
}
Upon entering the app, the user's first screen is EventList. They click a button to navigate into EventTabs, so I'm able to use the navigation.navigate() to transition while passing state like so...
EventList.navigation.navigate(EventTabs, passedParams);
To this point, everything makes sense. But TeamMembers also needs access to the passedParams. I'm confused how to pass those along. Hence my question...how do access passedParams from the TeamMembers component? They seem to be scoped just to the EventTabs.
If the answer is to use navigate.setParams(), then I'm not sure where I'd do that.
If the answer is to use NavigationActions.setParams(), then I'm also not sure where I'd do that.
react-native react-navigation
asked Nov 15 '18 at 2:31
Chris GeirmanChris Geirman
6,88942454
add a comment |
UPDATE: Now with a Snack Demo
I've created a demo on snack so you can see the issue first hand and help me demonstrate a solution in actual code.
Steps to duplicate
- launch app
- Tap "GO TO EVENTTABS" button
- Tap each tab, noticing that the eventId is in scope for the first three tabs
- Tap "More" tab
- Tap "TEAM MEMBERS", noticing that eventId is no longer in scope. This is where the problem lies. How do I pass along eventId?
_____________________________
My App has the following navigation hierarchy, where every instance of <> is just a regular component
App <StackNavigator> {
EventList <>
EventTabs <BottomTabNavigator> {
Quests <>
Leaderboard <>
Gallery <>
More <StackNavigator> {
MoreList <>
TeamMembers <>
}
}
}
Upon entering the app, the user's first screen is EventList. They click a button to navigate into EventTabs, so I'm able to use the navigation.navigate() to transition while passing state like so...
EventList.navigation.navigate(EventTabs, passedParams);
To this point, everything makes sense. But TeamMembers also needs access to the passedParams. I'm confused how to pass those along. Hence my question...how do access passedParams from the TeamMembers component? They seem to be scoped just to the EventTabs.
If the answer is to use navigate.setParams(), then I'm not sure where I'd do that.
If the answer is to use NavigationActions.setParams(), then I'm also not sure where I'd do that.
react-native react-navigation
asked Nov 15 '18 at 2:31
Chris GeirmanChris Geirman
6,88942454
UPDATE: Now with a Snack Demo
I've created a demo on snack so you can see the issue first hand and help me demonstrate a solution in actual code.
Steps to duplicate
- launch app
- Tap "GO TO EVENTTABS" button
- Tap each tab, noticing that the eventId is in scope for the first three tabs
- Tap "More" tab
- Tap "TEAM MEMBERS", noticing that eventId is no longer in scope. This is where the problem lies. How do I pass along eventId?
_____________________________
My App has the following navigation hierarchy, where every instance of <> is just a regular component
App <StackNavigator> {
EventList <>
EventTabs <BottomTabNavigator> {
Quests <>
Leaderboard <>
Gallery <>
More <StackNavigator> {
MoreList <>
TeamMembers <>
}
}
}
Upon entering the app, the user's first screen is EventList. They click a button to navigate into EventTabs, so I'm able to use the navigation.navigate() to transition while passing state like so...
EventList.navigation.navigate(EventTabs, passedParams);
To this point, everything makes sense. But TeamMembers also needs access to the passedParams. I'm confused how to pass those along. Hence my question...how do access passedParams from the TeamMembers component? They seem to be scoped just to the EventTabs.
If the answer is to use navigate.setParams(), then I'm not sure where I'd do that.
If the answer is to use NavigationActions.setParams(), then I'm also not sure where I'd do that.
react-native react-navigation
react-native react-navigation
asked Nov 15 '18 at 2:31
Chris GeirmanChris Geirman
6,88942454
asked Nov 15 '18 at 2:31
Chris GeirmanChris Geirman
6,88942454
edited Nov 15 '18 at 18:27
Chris Geirman
asked Nov 15 '18 at 2:31
Chris GeirmanChris Geirman
6,88942454
asked Nov 15 '18 at 2:31
Chris GeirmanChris Geirman
6,88942454
asked Nov 15 '18 at 2:31
Chris GeirmanChris Geirman
6,88942454
6,88942454
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Unfortunately we don't have good support for this, but you could use a function like this to recursively walk your navigation parents in search of the correct param.
function getParam(navigation, paramName) {
const { getParam, dangerouslyGetParent } = navigation;
let parent = dangerouslyGetParent();
let val = getParam(paramName);
while (val === undefined && parent && parent.getParam) {
val = parent.getParam(paramName);
parent = parent.dangerouslyGetParent();
}
return val;
}
answered Nov 16 '18 at 19:34
Eric VicentiEric Vicenti
1,362912
1
Worked perfectly! Thanks Eric! I've updated the snack demo to demonstrate the solution.
– Chris Geirman
Nov 16 '18 at 22:27
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%2f53311593%2fpassing-state-in-react-navigation-from-tabsnavigation-to-child-stacknavigation%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
Unfortunately we don't have good support for this, but you could use a function like this to recursively walk your navigation parents in search of the correct param.
function getParam(navigation, paramName) {
const { getParam, dangerouslyGetParent } = navigation;
let parent = dangerouslyGetParent();
let val = getParam(paramName);
while (val === undefined && parent && parent.getParam) {
val = parent.getParam(paramName);
parent = parent.dangerouslyGetParent();
}
return val;
}
answered Nov 16 '18 at 19:34
Eric VicentiEric Vicenti
1,362912
1
Worked perfectly! Thanks Eric! I've updated the snack demo to demonstrate the solution.
– Chris Geirman
Nov 16 '18 at 22:27
add a comment |
Unfortunately we don't have good support for this, but you could use a function like this to recursively walk your navigation parents in search of the correct param.
function getParam(navigation, paramName) {
const { getParam, dangerouslyGetParent } = navigation;
let parent = dangerouslyGetParent();
let val = getParam(paramName);
while (val === undefined && parent && parent.getParam) {
val = parent.getParam(paramName);
parent = parent.dangerouslyGetParent();
}
return val;
}
answered Nov 16 '18 at 19:34
Eric VicentiEric Vicenti
1,362912
1
Worked perfectly! Thanks Eric! I've updated the snack demo to demonstrate the solution.
– Chris Geirman
Nov 16 '18 at 22:27
add a comment |
Unfortunately we don't have good support for this, but you could use a function like this to recursively walk your navigation parents in search of the correct param.
function getParam(navigation, paramName) {
const { getParam, dangerouslyGetParent } = navigation;
let parent = dangerouslyGetParent();
let val = getParam(paramName);
while (val === undefined && parent && parent.getParam) {
val = parent.getParam(paramName);
parent = parent.dangerouslyGetParent();
}
return val;
}
answered Nov 16 '18 at 19:34
Eric VicentiEric Vicenti
1,362912
Unfortunately we don't have good support for this, but you could use a function like this to recursively walk your navigation parents in search of the correct param.
function getParam(navigation, paramName) {
const { getParam, dangerouslyGetParent } = navigation;
let parent = dangerouslyGetParent();
let val = getParam(paramName);
while (val === undefined && parent && parent.getParam) {
val = parent.getParam(paramName);
parent = parent.dangerouslyGetParent();
}
return val;
}
answered Nov 16 '18 at 19:34
Eric VicentiEric Vicenti
1,362912
answered Nov 16 '18 at 19:34
Eric VicentiEric Vicenti
1,362912
answered Nov 16 '18 at 19:34
Eric VicentiEric Vicenti
1,362912
answered Nov 16 '18 at 19:34
Eric VicentiEric Vicenti
1,362912
1,362912
1
Worked perfectly! Thanks Eric! I've updated the snack demo to demonstrate the solution.
– Chris Geirman
Nov 16 '18 at 22:27
add a comment |
1
Worked perfectly! Thanks Eric! I've updated the snack demo to demonstrate the solution.
– Chris Geirman
Nov 16 '18 at 22:27
1
1
Worked perfectly! Thanks Eric! I've updated the snack demo to demonstrate the solution.
– Chris Geirman
Nov 16 '18 at 22:27
Worked perfectly! Thanks Eric! I've updated the snack demo to demonstrate the solution.
– Chris Geirman
Nov 16 '18 at 22:27
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%2f53311593%2fpassing-state-in-react-navigation-from-tabsnavigation-to-child-stacknavigation%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
