React native router flux - simulate android push

Question

In react-native-router-flux, is it possible to simulate the standard Android transition where the navbar does NOT animate in from right to left when a new screen is added to the navigator stack via type PUSH? I'm not talking about using a type of REPLACE or RESET as those don't allow you to go back to original scene. The behavior I want is that the new view fades in (which I'm able to do by setting the animation prop), and the navbar is simply replaced with new one without any animation - as it does with REPLACE and RESEST. However, I haven't been able to figure out how to prevent the right to left animation on a PUSH transition.

Here's my code:

<Scene
    key="gray"
    component={GrayScreen}
    title="Gray"
    animation={(Platform.OS === 'ios') ? '' : 'fade'}
    hideBackImage={!(Platform.OS === 'ios')}
 />

you could try to override the `animationStyle` function. `animation` can't be set to `''` because `fade` is the only available option — Tobias Lins, Mar 13 '17 at 13:42
@TobiasLins I tried overriding animationStyle and it didn't work - I think cause I'm not as experienced with it. I was hoping the library would include a straightforward way to do it given that's how every commercial android app functions (i.e. without the horizontal animation on the nav bar). I set `animation` to `''` for the iOS case and it ignores it, which is what I want — brillajank, Mar 13 '17 at 17:58

score 0 · Answer 1 · answered May 02 '19 at 08:40

You have to use transitionConfig on the screen

import StackViewStyleInterpolator and use it you want screen style change forHorizontal, forVertical, forFadeFromBottomAndroid, forFade

import StackViewStyleInterpolator from 'react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator';

<Scene 
   key="root"
   transitionConfig={() => ({ screenInterpolator: StackViewStyleInterpolator.forFadeFromBottomAndroid })}>

React native router flux - simulate android push

1 Answers1