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"/>
.
You should use only 'leaf' scene keys for popTo.