React-native-router-flux: Custom Animation for Scene Transition

Created on 9 Jul 2016 · 3Comments · Source: aksonov/react-native-router-flux

Version

react-native-router-flux v3.26.13
react-native v0.26.3

The default spring animation on scene transition is a little bit slower than I expected, so I'm wondering if its possible to create and use a custom animation. Any pointer would be appreciated.

Source

VictorK1902

👍3

All 3 comments

Hi, here's how I did it to handle rtl languages (such as arabic, so that the transition is right to left.

  rtlAwareAnimation(pos, navState) {
    const factor = I18n.rtl() ? -1 : 1;
    Animated.spring(
      pos,
      {
        bounciness: 0,
        toValue: factor*navState.index,
      }
    ).start();
  },

  render() {
    return (
      <Router>
        <Scene key="signIn" component={SignIn} title={I18n.t('signIn')} initial={true} applyAnimation={this.rtlAwareAnimation} />
        <Scene key="dashboard" component={Dashboard}applyAnimation={this.rtlAwareAnimation} />
      </Router>
    );

However, it's still not really useful as the scenes are placed in special positions which means that the transition direction must match the place where the next scene is

wrousseau on 9 Jul 2016

😕2 👍1

How would it be top to down or viceversa? it seems to handle only 1 dimension.

jsdario on 2 Oct 2016

👍1

They have already fixed this issue. All you need to do is to provide the direction property because by default the direction is rightToLeft.
import { I18nManager } from 'react-native'
let directionSide = I18nManager.isRTL ? 'leftToRight' : null
<Scene key='xXXXX' component={XXXXX} title='XXXXX' direction={directionSide}/>