React-native-router-flux: Example of custom scene transition

Created on 15 Feb 2017 · 3Comments · Source: aksonov/react-native-router-flux

Version

Tell us which versions you are using:

react-native-router-flux v3.?.?
react-native v0.?.?

Is there any example or source code showing how to implement animationStyle function for scene transition ?

Source

easydaniel

Most helpful comment

Below is code I pretty much had to figure out by myself by reading the source code so it might not be the best example but it's better than nothing.

The documentation for this project could use a lot of work.

<Scene 
  key="pageThree"
  component={PageThree}
  animationStyle={animate}
  applyAnimation={applyAnimation} />

const animate = props => {
  const { position, scene } = props;
  const SCREEN_WIDTH = Dimensions.get("window").width;

  const index = scene.index;
  const inputRange = [ index - 1, index + 1 ];
  const outputRange = [ SCREEN_WIDTH, -SCREEN_WIDTH ];

  const translateX = position.interpolate({ inputRange, outputRange });
  return { transform: [ { translateX } ] };
}

const applyAnimation = (pos, navState) => {
  Animated.spring(pos, { toValue: navState.index, friction: 5 }).start();
};

andrew-d-jackson on 18 Feb 2017

❤3 🎉2 👍2

All 3 comments

Below is code I pretty much had to figure out by myself by reading the source code so it might not be the best example but it's better than nothing.

The documentation for this project could use a lot of work.

<Scene 
  key="pageThree"
  component={PageThree}
  animationStyle={animate}
  applyAnimation={applyAnimation} />

const animate = props => {
  const { position, scene } = props;
  const SCREEN_WIDTH = Dimensions.get("window").width;

  const index = scene.index;
  const inputRange = [ index - 1, index + 1 ];
  const outputRange = [ SCREEN_WIDTH, -SCREEN_WIDTH ];

  const translateX = position.interpolate({ inputRange, outputRange });
  return { transform: [ { translateX } ] };
}

const applyAnimation = (pos, navState) => {
  Animated.spring(pos, { toValue: navState.index, friction: 5 }).start();
};

andrew-d-jackson on 18 Feb 2017

❤3 🎉2 👍2

Thanks a lot!!!

easydaniel on 23 Feb 2017

+1 @andrew-d-jackson This was a great help in getting rid of some nav jank...Still supporting a v3 app 😢