Passing State in React-Navigation from TabsNavigation to Child StackNavigation










1















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



  1. launch app

  2. Tap "GO TO EVENTTABS" button

  3. Tap each tab, noticing that the eventId is in scope for the first three tabs

  4. Tap "More" tab

  5. 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.










share|improve this question




























    1















    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



    1. launch app

    2. Tap "GO TO EVENTTABS" button

    3. Tap each tab, noticing that the eventId is in scope for the first three tabs

    4. Tap "More" tab

    5. 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.










    share|improve this question


























      1












      1








      1








      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



      1. launch app

      2. Tap "GO TO EVENTTABS" button

      3. Tap each tab, noticing that the eventId is in scope for the first three tabs

      4. Tap "More" tab

      5. 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.










      share|improve this question
















      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



      1. launch app

      2. Tap "GO TO EVENTTABS" button

      3. Tap each tab, noticing that the eventId is in scope for the first three tabs

      4. Tap "More" tab

      5. 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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 15 '18 at 18:27







      Chris Geirman

















      asked Nov 15 '18 at 2:31









      Chris GeirmanChris Geirman

      6,86942354




      6,86942354






















          1 Answer
          1






          active

          oldest

          votes


















          1














          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;






          share|improve this answer


















          • 1





            Worked perfectly! Thanks Eric! I've updated the snack demo to demonstrate the solution.

            – Chris Geirman
            Nov 16 '18 at 22:27










          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
          );



          );













          draft saved

          draft discarded


















          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









          1














          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;






          share|improve this answer


















          • 1





            Worked perfectly! Thanks Eric! I've updated the snack demo to demonstrate the solution.

            – Chris Geirman
            Nov 16 '18 at 22:27















          1














          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;






          share|improve this answer


















          • 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








          1







          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;






          share|improve this answer













          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;







          share|improve this answer












          share|improve this answer



          share|improve this answer










          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












          • 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



















          draft saved

          draft discarded
















































          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.




          draft saved


          draft discarded














          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





















































          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







          Popular posts from this blog

          Top Tejano songwriter Luis Silva dead of heart attack at 64

          政党

          天津地下鉄3号線