Search code examples
react-nativenavigationreact-native-iosreact-navigationreact-native-router-flux

Pop out from the stack Navigation on react-native-router-flux


This is my Router navigation setup. I navigated from EmployeeList to EmployeeCreate component. I want to back to the EmployeeList when I click a Create Button.

<Router>
   <Scene key="root" hideNavBar={true}>
     <Scene key="auth">
       <Scene key="login" component={LoginForm} title="Login" />
     </Scene>

     <Scene key="main">
      <Scene
        onRight={() => Actions.employeeCreate()}
        rightTitle="Add"
        key="employeeList"
        component={EmployeeList}
        title="Employee List"
        initial={true}
      />
      <Scene key="employeeCreate" component={EmployeeCreate} title="Employee Create"/>
     </Scene>
  </Scene>
</Router>

I have tried like this. But got an error:

"There is no route defined for key employeeCreate. Must be one of: 'auth','main'"

Actions.employeeCreate({ type: 'reset' });

EmployeeCreate.js

onButtonPress() {
    const { name, phone, shift } = this.props;
   this.props.employeeCreate({name, phone, shift: shift || 'Monday'});
 }

export const employeeCreate = ({ name, phone, shift }) => {
  return() => {
    Actions.employeeCreate({ type: 'reset' });
  }
};

How could I call employeeList Scene inside main Scene?


Solution

  • For go back to previous component you should use

    Actions.pop()
    

    If you need to go to a specific scene who is present in the group of scenes you are working on. You can call the scene by the key you defined in your Scene

    Actions.employeeList()
    

    If you need to go to an other group of scene you have to call the key of the parent scene

    Actions.auth()