Android - StackNavigator slide from right transition

[Traviskn]

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]

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]

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]

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]

@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]

@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]

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]

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

[alzalabany]

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]

@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]

@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';