How to Use react-router-native-animate-stack Module

React Router Native v5 with your desired customisation transition style!

- The code as simple as it is.

<AnimatedStack>
    <Route exact path='/'>
        <Home />
    </Route>
    <Route path='/about'>
        <About />
    </Route>
    <Route path='/topics' component={Topics} />
</AnimatedStack>

If you want different kind of transition

activedViewStyleHandler={({ location, action, isNestedRoute }) => {
  return {
    transform: [
      {
        translateX: enterAnimKit.interpolate({
          inputRange: [0, 1],
          outputRange: [width, 0]
        })
      },
      {
        scale: enterAnimKit.interpolate({
          inputRange: [0, 0.5, 1],
          outputRange: [1, 0.2, 1]
      })
    }
    ]
  };
}}
deactivedViewStyleHandler={({ location, action, isNestedRoute }) => {
  return {
    transform: [
      {    
        translateX: exitAnimKit.interpolate({
          inputRange: [0, 1],
          outputRange: [0, -width]
        })
      },
      {
        scale: exitAnimKit.interpolate({
          inputRange: [0, 0.5, 1],
          outputRange: [1, 0.2, 1]
      })
    }
    ]
  };
}}

yarn add react-router-native react-router-native-animate-stack

npm install react-router-native react-router-native-animate-stack --save

Visiting https://github.com/Taymindis/react-router-native-animate-stack for more details