react-nativereact-native-router-flux

Actions.popTo(tabBarKey) breaks app. - React Native Router Flux


In my current app the user fills out a form that is made up of different Scenes and once the last Scene of the form is reached and the submit was successful, I want to "popTo" back to the initial Scene. However, this initial scene is within a <Tabs> tag and I think it is the reason why its breaking my app.

This is my Router.js:

const RouterComponent = () => {
return (
<Router>
  <Scene key="root">
    <Scene key="spinnerBucket">
      <Scene
        key="spinner"
        component={SpinnerComponent}
        initial
        hideNavBar
        panHandlers={null}
      />
    </Scene>

    <Scene key="authBucket">
      <Scene
        key="login"
        component={LoginComponent}
        initial
        hideNavBar
        panHandlers={null}
      />
    </Scene>


    <Tabs
      lazy
      headerMode="none"
      key="tabBar"
      navBar={NavigationComponent}
      tabBarPosition={'bottom'}
     >
      <Scene
        key="home"
        initial
        component={HomeComponent}
        panHandlers={null}
        />

      <Scene
        key="profile"
        component={ProfileComponent}
        panHandlers={null}
        />

      <Scene
        key="activeJobs"
        component={ActiveJobsComponent}
        panHandlers={null}
        />

      <Scene
        key="favorites"
        component={FavoritesComponent}
        panHandlers={null}
        />

      <Scene
        key="inbox"
        component={InboxComponent}
        panHandlers={null}
        />
    </Tabs>


    <Scene
      key="displayOffer"
      hideNavBar
      component={DisplayOffersComponent}
      panHandlers={null}
    />

    <Scene
      key="selectJob"
      hideNavBar
      component={SelectJobComponent}
      panHandlers={null}
    />

    <Scene
      key="createJob"
      hideNavBar
      component={JobScheduleComponent}
      panHandlers={null}
    />

    <Scene
      key="define_title"
      hideNavBar
      component={DefineTitleComponent}
      panHandlers={null}
    />

    <Scene
      key="requirements"
      hideNavBar
      component={RequirementsComponent}
      panHandlers={null}
    />

    <Scene
      key="quantity_question"
      hideNavBar
      component={QuantityQuestionComponent}
      panHandlers={null}
    />

    <Scene
      key="add_comments"
      hideNavBar
      component={AddCommentsComponent}
      panHandlers={null}
    />

    <Scene
      key="multiple_choice"
      hideNavBar
      component={MultipleChoiceComponent}
      panHandlers={null}
    />

    <Scene
      key="infoMissing"
      hideNavBar
      component={InfoMissingComponent}
      panHandlers={null}
    />

    <Scene
      key="user_description"
      hideNavBar
      component={JobDetailsComponent}
      panHandlers={null}
    />

    <Scene
      key="jobDetailsPhotos"
      hideNavBar
      component={JobTagsAndPhotosComponent}
      panHandlers={null}
    />

    <Scene
      key="googlePlaces"
      hideNavBar
      component={GooglePlacesComponent}
      panHandlers={null}
    />

    <Scene
      key="chat"
      hideNavBar
      component={ChatComponent}
      panHandlers={null}
    />

    <Scene
      key="publicProfile"
      hideNavBar
      component={PublicProfileComponent}
      panHandlers={null}
    />
  </Scene>
</Router>
);
};

Now the issue arises when I am in the

    <Scene
      key="jobDetailsPhotos"
      hideNavBar
      component={JobTagsAndPhotosComponent}
      panHandlers={null}
    />

and I call Actions.popTo("tabBar");. The app just freezes and breaks. My question is: Is the structure of my scenes the fault or is there a special way to popTo a Tab?

My goal is to go back to the <Scene key="home"/>.


Solution

  • You should use only 'leaf' scene keys for popTo.