Animations for transition on Android

[Blapi]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.24?
• react-native v0.50.3

I read some of the issues on the v4 with Android animations and I'm aware that the behaviour should be bottomToTop #2177 , which I see on many other apps.

I'd like to know if something is planned to integrate the previous work on the v3 with the direction horizontal/rightToLeft/vertical/topToBottom because it was very helpful and appreciated.

On this issue : #2502 , it's said

It is default animation for android (bottom to top) for all containers. Please use custom animation like shown in Example to achieve right-to-left.

I installed the Example app on my Android device but all the animations are bottomToTop and I found no example of custom animation which would be helpful, any help on this please? Either if you know that the directions are planned to be done on Android or if there is a way to create a custom animation with an example ?

[aronse]

@aksonov @Blapi any update on this?

[aksonov]

@Blapi Please check custom 'Modal' animation from Example with usage screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid. You may found other screen interpolators from react-navigation or you can build own one. Maybe you could improve docs after you will figure it out.

[Blapi]

Will check this very soon, thanks for your reply !

[aksonov]

Also PR about passing this custom interpolators for 'horizontal' (v3 syntax) prop could be helpful.

[todorone]

BTW, is it possible at the moment to push the new screen to stack navigator w/o any animated transition, like reset does?

[Blapi]

So far, I managed to change the navigation transition using this :

<Stack key='root' hideNavBar transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forHorizontal })} >

But I'm still unable to give a specific transitionConfig for each scenes that I have, the transitionConfig is the same for all the scenes that I have, still working to figure out how I can have a specific transitionConfig for a scene. Anyway, you can at least have a different transitionConfig on your app with giving this prop to the root Scene/Stack/whateverYouHave

[Blapi]

@todorone, on your root Scene/Stack, add transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forInitial })}, you will have no animated transition with this !

Note that it will be applied for all your scenes, I haven't managed to have a specific animated transition for a specific scene

[todorone]

@Blapi
Thanks for the hint, I've also figured out it. I've also figured out that adding duration={0} as prop, we also disabling transition. But figure out how to control specific transition is really needed...

[aksonov]

Looks like it is limitation if react navigation library, so please request it there.

…

7 дек. 2017 г., в 11:04, Todor1 ***@***.***> написал(а): @Blapi Thanks for the hint, I've also figured out it. I've also figured out that adding duration={0} as prop, we also disabling transition. But figure out how to control specific transition is really needed... — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[Blapi]

Ok cool, I checked the issues on the react-navigation library and found this solution :

          <Stack
            key='root'
            hideNavBar
            transitionConfig={() => ({
              screenInterpolator: (props) => {
                const { scene } = props
                switch (scene.route.routeName) {
                  /* case yourKeyScene:
                  return theAnimationYouWant(props)*/
                  case 'groups':
                    return CardStackStyleInterpolator.forVertical(props)
                  case 'home':
                    return CardStackStyleInterpolator.forHorizontal(props)
                  case 'inbox':
                    return CardStackStyleInterpolator.forFade(props)
                  default:
                    return CardStackStyleInterpolator.forInitial
                }
              }
            })}>

(groups, inbox and home are some keys of the scenes I have)

So it's working on my Android app, but there's just a minor thing because the transitions may overlap each other, it's just a logic thing to do I guess and can be solved easily.

You can also implement your own CardStackStyleInterpolator as @aksonov said before, just check the code there https://github.com/react-community/react-navigation/blob/master/src/views/CardStack/CardStackStyleInterpolator.js to see how to create your own transition.

My code logic may not be the best one using a switch, I will certainly change it but it was just an example, so do as you wish ! I guess if you check the props of the screenInterpolator, you can find enough informations to build your own logic !

And be careful, the main transitionConfig prop which will do the trick HAS TO BE in your key='root' Scene !

[aksonov]

@Blapi Great, could you submit PR to docs about it? Also it could be good to generate own transitionConfig automatically by our component (if it is not defined for the root) and return custom animations defined by individual Scene like that switch. PR is welcome.

[Blapi]

@aksonov sure but I won't have time this week, will do that next week

[Blapi]

@aksonov, running late for this PR but will do for sure when I have time.

[MasterDaveh]

Hey @Blapi, any updates on this? :)

[Blapi]

@MasterDaveh I was working a lot on my app recently as I had to publish it today. Now I will have more time so I will definitely take care of it soon.

[sambwest]

To anyone who stumbles on to this thread - to get the old direction= behaviour back you can just add the following to your root scene... :)

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

...
<Scene
    key="root"
    hideNavBar={true}
    transitionConfig={() => ({
        screenInterpolator: (props) => {
            switch (props.scene.route.params.direction) {
                case 'vertical':
                    return CardStackStyleInterpolator.forVertical(props);
                case 'fade':
                    return CardStackStyleInterpolator.forFade(props);
                case 'none':
                    return CardStackStyleInterpolator.forInitial
                case 'horizontal':
                default:
                    return CardStackStyleInterpolator.forHorizontal(props)
            }
        }
    })}>
    <Scene
        key="JobsSearch"
        component={JobsSearch}
        hideNavBar={true}
        direction="vertical"
        panHandlers={null}
    />
...

</Scene>
...

[ranjithkumar8352]

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

Path has been changed now. Use import CardStackStyleInterpolator from "react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator"; in the latest version.

[ajaykumar97]

You an use your custom transition effects like as follow:

import StackViewStyleInterpolator from 'react-navigation-stack';

<Scene
key='main'
hideNavBar
transitionConfig={transitionConfig}
>

...more scenes

</Scene>

const MyTransitionSpec = ({
    duration: 1000,
    // easing: Easing.bezier(0.2833, 0.99, 0.31833, 0.99),
    // timing: Animated.timing,
});

const transitionConfig = () => ({
    transitionSpec: MyTransitionSpec,
    // screenInterpolator: StackViewStyleInterpolator.forFadeFromBottomAndroid,
    screenInterpolator: sceneProps => {
        const { layout, position, scene } = sceneProps;
        const { index } = scene;
        const width = layout.initWidth;

        //right to left by replacing bottom scene
        // return {
        //     transform: [{
        //         translateX: position.interpolate({
        //             inputRange: [index - 1, index, index + 1],
        //             outputRange: [width, 0, -width],
        //         }),
        //     }]
        // };

        const inputRange = [index - 1, index, index + 1];

        const opacity = position.interpolate({
            inputRange,
            outputRange: ([0, 1, 0]),
        });

        const translateX = position.interpolate({
            inputRange,
            outputRange: ([width, 0, 0]),
        });

        return {
            opacity,
            transform: [
                { translateX }
            ],
        };

        //from center to corners
        // const inputRange = [index - 1, index, index + 1];
        // const opacity = position.interpolate({
        //     inputRange,
        //     outputRange: [0.8, 1, 1],
        // });

        // const scaleY = position.interpolate({
        //     inputRange,
        //     outputRange: ([0.8, 1, 1]),
        // });

        // return {
        //     opacity,
        //     transform: [
        //         { scaleY }
        //     ]
        // };
    }
});

[malithjkmt]

To anyone who stumbles on to this thread - to get the old direction= behaviour back you can just add the following to your root scene... :)

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

...
<Scene
    key="root"
    hideNavBar={true}
    transitionConfig={() => ({
        screenInterpolator: (props) => {
            switch (props.scene.route.params.direction) {
                case 'vertical':
                    return CardStackStyleInterpolator.forVertical(props);
                case 'fade':
                    return CardStackStyleInterpolator.forFade(props);
                case 'none':
                    return CardStackStyleInterpolator.forInitial
                case 'horizontal':
                default:
                    return CardStackStyleInterpolator.forHorizontal(props)
            }
        }
    })}>
    <Scene
        key="JobsSearch"
        component={JobsSearch}
        hideNavBar={true}
        direction="vertical"
        panHandlers={null}
    />
...

</Scene>
...

This works well! :)
Moreover, how we can do separate animation for enter screen and exit screen?
Is there any flag inside props.scene to determine whether it's exiting or entering?

Thanks

[michaelfemi81]

Does not work for tabs. Is there any other solution?

[Jojr]

@michaelfemi81 Did you find any way to implement in tabs?