Transition direction

[kmatias]

Version

• react-native-router-flux "^4.0.0-beta.24"
• react-native "0.50.3"

Is there a way to configure the direction of the transition animation - eg. from left-to-right / right-to-left?

Also, as documented in the API, When navigating using Actions.reset("sceneKey"), no transition occurs. Is there a way to add a transition manually?

[kmatias]

#2628

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

[skomarfaruque]

@ajaykumar97 bro it only works if i add it to root.But what if i want to change for a single scene ?

[ajaykumar97]

You can set a check on the name of particular scene inside the transitionConfig like:

if (scene.route.routeName === 'myScene') {
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 }
            ],
        };
}