React-native-router-flux: how to change android animation direction

[scriptfans]

Version

• react-native-router-flux v4.0.0-beta.14
• react-native v0.46.4

Expected behaviour

the new scene should be animated horizontal.

Actual behaviour

on Android, It's animated from bottom to top, but there is no problem with iOS, how to change it use horizontal direction? thanks.

[aksonov]

You should use 'modal' prop for container Scene for bottom to top animation

[scriptfans]

@aksonov but I want to use left-right animation, It now always from bottom to top on android. this is my code:
`

    <Scene hideNavBar>

      <Scene key="launch" component={Launch} type='reset' initial />

      <Scene key="login" component={Login} type='reset' />

      <Scene key="sign_up" component={Registration} />

      <Scene key="home" component={Home} />
    </Scene>
  </Router>

`

[aksonov]

Oh I misunderstood then. It is really strange, could you check pure react-navigation demos on Android? RNRF uses react-navigation internally. Could you reproduce this issue on Example project from this repo?

[scriptfans]

thanks for reply, there is no problem with iOS:

I will test the demo code on Android, thanks.

[scriptfans]

@aksonov Demo code has the same problem on android:

so is it a bug?

[aksonov]

Yes, it is a bug. Let's find where is it - within RNRF or within react-navigation. Try this intro: https://reactnavigation.org/docs/intro/

[aksonov]

Ops, looks like it is not bug but a "feature" - I see the same behaviour at that tutorial for Android!

[scriptfans]

omg.

[aksonov]

https://github.com/react-community/react-navigation/issues/1400

[aksonov]

It is default android behaviour, closing the ticket.

[trulyenlightened]

i am facing the same, is it possible for us to change transition animation

[Blapi]

@Devansh-Sanghvi check #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 }
        //     ]
        // };
    }
});

[sogangCSmaster]

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

This does not work..using RNRF v4.2.0