React-Native custom transaction animation each screen

Question

I want custom transaction animation each screen for Example A->B diffirent B->C.

I found: https://stackoverflow.com/questions/43974979/react-native-react-navigation-transitions

But i don't know how to use it with: this.props.navigation.navigate('SearchVideo',{keywork:keywork})

Anyone can help me?

score 1 · Accepted Answer · answered May 05 '18 at 15:46

If you use react-navigation, then customising screen transition can be done using transitionConfig of StackNavigator. Original source is here. However, it cannot know the previous screen, so you can only customise based on information of current screen.

An example with transition to B is left => right and to C is top=>bottom:

const myNavigator = StackNavigator(
  {
    A: { screen: A },
    B: { screen: B },
    C: { screen: C }
  },
  transitionConfig: () => ({
    screenInterpolator: screenProps => {
      const { layout, position, scene } = sceneProps
      const { index, route: { routeName } } = scene

      const width = layout.initWidth
      const height = layout.initHeight
      let translateX = 0
      let translateY = 0
      const opacity = position.interpolate({
        inputRange: [index - 1, index - 0.99, index],
        outputRange: [0, 1, 1],
      })

      switch (routeName) {
        case 'B':
          translateX = position.interpolate({
            inputRange: [index - 1, index, index + 1],
            outputRange: [-width, 0, 0],
          })
          break;
        case 'C':
        default:
          translateY = position.interpolate({
            inputRange: [index - 1, index, index + 1],
            outputRange: [-height, 0, 0],
          })
      }
      return {
        opacity, transform: [
          { translateX },
          { translateY }
        ]
      }
    }  
  })
)

React-Native custom transaction animation each screen

1 Answers1