How to switch from one view to the other?

[ele828]

Hi, I am wonder how to switch from one view to the other with some animation? Thanks

[mwilc0x]

You could use the Navigator for setting up scenes of your app and transitioning between them.

Navigator has a configureScene prop which you can provide to the initial Navigator component to play around with some initial animations.

The available animation properties on Navigator.SceneConfigs are:

FloatFromBottom
FloatFromRight
HorizontalSwipeJump
PushFromRight

So for instance if you wanted to provide some default animation for transition between scenes, you could do this:

<Navigator
  renderScene={this.renderScene}
  style={styles.container}
  configureScene={(route) => {
    if (route.sceneConfig) {
      return route.sceneConfig;
    }
    return Navigator.SceneConfigs.FloatFromRight;
  }}
  initialRoute={{
    component: MyApp,
    title: 'My App',
  }}
/>

and then later in your app when you want to override that animation you can provide a sceneConfig with the animation:

this.props.navigator.push({
  title: 'Next Route',
  component: NextRouteComponent,
  sceneConfig: Navigator.SceneConfigs.FloatFromBottom
})

[ele828]

Thank you very much @mjw56

[ele828]

@mjw56 I met another problem, the Push method works well, but when I try to use this.props.navigator.replace(), it goes wrong with Navigator.SceneConfigs.FloatFromBottom, and all the other animation doesn't work.

Cause I want to prevent user to goback to previous Scene. So I have to use replace method. thanks a lot :)

[mwilc0x]

@ele828 hm, I am not sure about replace as I have not used that yet.

@ericvicenti do you know if animations work with replace? Also, will the example above work with 0.4.0?

[mwilc0x]

I can confirm animation doesn't work with replace in 0.4.0. Probably we should close this and open a new issue for this.

[ericvicenti]

We currently don't support animations on replace. The closest thing we have so far is the ability to put a Navigator inside of a Navigator and do a push on the inside one. Or you could simply do a push and then call popToRoute when you want to go back. This has worked fine for us so far, but I see why an animated replace would be easier to use.

We usually want to avoid the animations for replace, because it lets us re-configure the route and the scene without causing any movement. If replace animates then we would loose that ability.

I'm happy to hear more thoughts on how this can be improved!

[brentvatne]

@mjw56 @ericvicenti - if there is still interest in pursuing animations on replace, let's open a new issue for it