Search code examples
react-nativereact-native-iosreact-native-router-flux

How I close de current screen and open another screen with react-native-router-flux


I'm use the react-native-router-flux and I try close current screen, and open another screen, how I do this? Version of react-native-router-flux is 4.0.0


Solution

  • The react-navigation-router-flux API has different functions to navigate (push, replace, reset...), and the one you have to use depends depends on your needs:

    • If you want to navigate from the first to the second screen and then you want to be able to go back doing Actions.pop() then you just need to navigate to the second screen by doing Actions.push("second-screen").

    • On the other hand, if you need just to change from the first screen to the second one (and you don't want to be able to go back after that), then you can do Actions.reset("second-screen"), which resets the navigation stack.

    • Or you could also need to use Actions.replace("second-screen") which would remove the "first-screen" from your navigation stack and then will push the "second-screen" to it, so you will navigate too.

    To do that you should have declared of course your routes before, for instance you could do something like this:

    import { Router, Scene } from 'react-native-router-flux';
    
    ...
    
    
      <Router>
       ...
        <Scene>
          <Scene key="first-screen" component={FirstComponent} />
          <Scene key="second-screen" component={SecondComponent} />
        </Scene>
        ...
      </Router>
    

    Here you can find all the Actions documentation.