Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to switch from one view to the other? #919

Closed
ele828 opened this issue Apr 19, 2015 · 7 comments
Closed

How to switch from one view to the other? #919

ele828 opened this issue Apr 19, 2015 · 7 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@ele828
Copy link

ele828 commented Apr 19, 2015

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

@mwilc0x
Copy link
Contributor

mwilc0x commented Apr 19, 2015

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
Copy link
Author

ele828 commented Apr 19, 2015

Thank you very much @mjw56

@ele828
Copy link
Author

ele828 commented Apr 19, 2015

@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
Copy link
Contributor

mwilc0x commented Apr 19, 2015

@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
Copy link
Contributor

mwilc0x commented Apr 20, 2015

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
Copy link
Contributor

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
Copy link
Collaborator

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

javier-lopez added a commit to javier-lopez/uber-react-native-firebase that referenced this issue Jun 2, 2017
- references:
    - facebook/react-native#919 #How to switch
      from one view to the other?
@facebook facebook locked as resolved and limited conversation to collaborators May 30, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 22, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

5 participants