react-native-router-flux navigation direction between scenes

Question

Version: react-native-router-flux: v4.0.5, react: v16.4.2, react-native: v0.56.0

I have a situation for navigating between scenes as follows:

Scene A (param: xA) -> Scene B (param: xB) -> Scene A (param: yA) -> Scene B (param: yB)

This is kind of a loop. I should also be able to go back to previous scene with back button in NavBar.

The problem comes with direction of animation. Usually it is right-to-left. But when going to Scene A (param: yA) from Scene B (param: xB) the direction is left-to-right (feels like tapping back button). I want this to be normal direction right-to-left.

Any suggestions?

Ajay Ajay · Accepted Answer · 2018-11-04T10:27:20

You an use your custom transition effects like as follow and modify according to your need:

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

react-native-router-flux navigation direction between scenes

1 Answers