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

Yasin Ugurlu Yasin Ugurlu · Accepted Answer · 2019-05-02T08:40:26

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 Answers