react-native-router-flux: implement animation in scene transition in react-native-router-flux

Question

I've been using default scene change style in my react native apps with react-native-router-flux. But i'm trying to use different animation effects in scene transition between two pages. How could we do that ??

score 2 · Answer 1 · answered Mar 15 '17 at 13:07

To do so you'll need to implement your own Animation Style function, the router's DefaultRenderer contains the code for animation - if you start by taking a copy of that you'll see that you can alter position, scale, and opacity for each scene.

It takes some practise to get the effects you're after, but the useful line is:

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

Which can be passed to interpolate to generate transformations, so for instance:

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

Tells the scene:

Transitioning to: start at 0 opacity
When active: have opacity 1
Transitioning from: end up at 0.5 opacity

This simple structure allows you to define all types of effects.

Once you've got a function you're happy with you can specify it when defining your router:

<RouterWithRedux
  scenes={scenes}
  animationStyle={myAnimationStyle}
/>

hi Tom, can you please share some more info. I want to add transition animation using react-native-router-flux — ruyamonis346, Oct 12 '17 at 09:03

score 0 · Answer 2 · edited Jun 12 '19 at 14:40

You can set your custom transition effects like this:

////other imports
import StackViewStyleInterpolator from 'react-navigation-stack';

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

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

    ...more scenes

  </Scene>
</Router>

react-native-router-flux: implement animation in scene transition in react-native-router-flux

2 Answers2