Custom animations for scenes (disabling transition animation)

[ywongweb]

In v3 we can use duration={0} to diable the transition aimation. V4 no longer has the duration prop and the doc suggest we should implement custom navigator now instead and pass it as ‘navigator’ prop. Being not familiar with React Navigation, I was wondering if anyone have an example on how to do this?

Thanks 👍

[aksonov]

Very good question. Probably we will implement some workaround soon if ReactNavigation doesn't allow it. What is your use case? You could try to use 'tabs' with tabbar hidden to avoid animation or you could try type 'reset' (check Example/Register UI, or it doesn't allow animation too?)

Check related issue:
react-navigation/react-navigation#175

[ywongweb]

@aksonov Thanks for the link, I will check it out.

My use case is that my app has a static background image that doesn't change or move when you navigate between screens.

In V3 this was achieved by wrapping the Router component with an Image and setting a transpararent background for every scene. Because the default visual effect for transition is to slide in the new scene while fading out the old one, having a duration means that we can see both scenes durings parts of the transition.

In the past I have tried using 'reset' as an alternative and it mostly worked, but I had to manually implement every scene's back behaviour, this can get out of hand very quickly.

[aksonov]

@ywongweb Maybe you could implement own custom navigator for your use case - probably you could just copy & past StackNavigator and remove transitions from there. I will also investigate how to solve this problem...

[aksonov]

Looks like we could add this functionality to RNRF using transitionConfig
react-navigation/react-navigation#1490

PR is welcome!

[aksonov]

Here is helpful post:
https://stackoverflow.com/questions/43974979/react-native-react-navigation-transitions/43981835#43981835

[alexwasner]

@aksonov I created a simple PR for adding transitionConfig to the Navigator. #2062

[JoshStaff]

Did this get resolved? Interested in contributing to this.

[aksonov]

@JoshStaff Feel free to submit PR

[aksonov]

Okey, closing this ticket for now. As I found nice workaround by passing transitionConfig for needed container - this way you can create very customisable transitions:
react-navigation/react-navigation#1759

Also I will add duration support using the trick from react-navigation/react-navigation#1254

P.S. I've just updated Example to make 'Login' animation as standard android 'fade' animation.

[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 }
        //     ]
        // };
    }
});