CODEWITHSUNDEEP
reactjsreact-nativereact-native-router-flux
Aayush Thapa
Aayush Thapa

Reputation: 161

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

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 ??

Upvotes: 0

Views: 3913

Answers (2)

Ajay
Ajay

Reputation: 500

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>

Upvotes: 0

Tom Walters
Tom Walters

Reputation: 15616

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:

  1. Transitioning to: start at 0 opacity
  2. When active: have opacity 1
  3. 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}
/>

Upvotes: 2

Related Questions