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

Android - StackNavigator slide from right transition #705

Closed
Traviskn opened this issue Mar 16, 2017 · 10 comments
Closed

Android - StackNavigator slide from right transition #705

Traviskn opened this issue Mar 16, 2017 · 10 comments

Comments

@Traviskn
Copy link

@Traviskn Traviskn commented Mar 16, 2017

It seems that on Android the only animated transition available for the StackNavigator is 'fade in from bottom'. This is a reasonable default, but is it possible to configure a 'slide from right' transition on Android as is available on iOS?

@ferrannp

This comment has been minimized.

Copy link
Contributor

@ferrannp ferrannp commented Mar 17, 2017

Yea, I think right now they are not exported for you to use. Ideally, we should be able to define the transition for each screen so you do not enforce the whole app to have always the same.

@Traviskn

This comment has been minimized.

Copy link
Author

@Traviskn Traviskn commented Jul 11, 2017

We can now pass in custom transition configurations to the stack navigator to enable any kind of animated transition we want on any platform! I considered possibly making a pull request to export the transition configs built into react-navigation, but considering we can write our own I am doubtful such a pull request would be accepted. So, I ported the slide from right transition config contained in react-navigation to this open source library that you can install and use to enable a slide from right transition on android. Check it out here: https://github.com/Traviskn/react-navigation-slide-from-right-transition

@mmerickel

This comment has been minimized.

Copy link

@mmerickel mmerickel commented Jul 18, 2017

It would really help if https://github.com/react-community/react-navigation/blob/d29dc05e739152cc58c89180947b95ecbadd3fd0/src/views/TransitionConfigs.js#L109 would pass in transitionProps, prevTransitionProps and isModal in order for the custom config to be dynamic just like the default config otherwise you cannot define "slide from right" for forward and "slide from left" for backward, etc. That exact example works right now but only if you want an identical transition in both directions.

@Traviskn

This comment has been minimized.

Copy link
Author

@Traviskn Traviskn commented Jul 19, 2017

@mmerickel The slide transition I linked to on my repo does just that, it slides from the right when cards are pushed onto the stack, and slides from left when cards are popped off the stack. Granted, it would still definitely be very useful to change the transition config on the fly depending on which card you are on!

@kernel-lj

This comment has been minimized.

Copy link

@kernel-lj kernel-lj commented Nov 10, 2017

@Traviskn I have four pages , A-B-C-D,now I want to goback to A from D directly, When I use react-navigation-slide-from-right-transition,they will flash in B page and C page, how can I fix it? Thank U!

@rogchap

This comment has been minimized.

Copy link

@rogchap rogchap commented Jan 5, 2018

Exporting the transitionConfigs is a simple addition. It would be better to keep the core transitions in this project, so that everyone can benefit from any updates.

@brentvatne

This comment has been minimized.

Copy link
Member

@brentvatne brentvatne commented Jan 24, 2018

we need to explain how to do this in docs, and if required, make changes to make it work in react-navigation. moving it to track in website: react-navigation/react-navigation.github.io#9

@brentvatne brentvatne closed this Jan 24, 2018
@alzalabany

This comment has been minimized.

Copy link

@alzalabany alzalabany commented Jan 28, 2018

so what is the final solution on that ? currently i'm using react-navigation-slide-from-right-transition package, is there any intention to make this builtin react-navigation ?

@rogchap

This comment has been minimized.

Copy link

@rogchap rogchap commented Jan 29, 2018

@alzalabany this is what I do:

import CardStackStyleInterpolator from 'react-navigation/lib/views/CardStack/CardStackStyleInterpolator';

return StackNavigator(
  {  /* Routes etc... */ },
  {
    transitionConfig: () => ({
      screenInterpolator: sceneProps => {
        return CardStackStyleInterpolator.forHorizontal(sceneProps);
      }
    }),
  }
)
@michaelmika

This comment has been minimized.

Copy link

@michaelmika michaelmika commented Feb 17, 2018

@rogchap For me the module CardStackStyleInterpolator was not found with your solution. Browsing the dir however indicated that lib needs to be src (at least in my case, react-navigation version 1.0.0-beta.27).

So this is the correct import (for me):

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';

@react-navigation react-navigation locked as resolved and limited conversation to collaborators Feb 21, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
9 participants
You can’t perform that action at this time.