react-native-animated-router
React Native router with full control on transition animations.
Installation
npm install react-native-animated-router --save
or
yarn add react-native-animated-router
Usage
;;; ;; const routes = page1: screen: Page1Screen page2: screen: Page2Screen ; const animations = 'default': config: // Default configuration for all transition animations duration: 3000 // Duration of the animation transition fn: Animatedspring // Function to use for launching the animation progress useNativeDriver: true push: config: {} // Default configuration for all 'push' animations ('config' objects have all the same structure, as shown above) { // Default function used for animating the pushed view. It receives a progress (Animated.Value) of current transition progress const translateX = progress; return transform: translateX } blur: config: {} // Default configuration for all 'blur' animations (animation on the screen which gets another one pushed over) {} // Default function used for animating the blurred view focus: config: {} // Etc. {} pop: config: {} {} custom: // This is where custom animations are defined (e.g. we want a specific animation from route 'page1' to 'page2'). Structure is the same as above. from: 'page1' to: 'page2' config: {} push: config: {} {} blur: config: {} {} focus: config: {} {} pop: config: {} {} /* ... */ { return <View style=flex: 1> <Router routes=routes animations=animations /> </View> }
Actions
; Actions; // <-- Will push 'page1' on stackActions; // <-- Pops last view on stackActions; // <-- Resets the stack to the first oneActions; // <-- Resets the stack to 'page2'
Example
...; { return <View style=stylescontainer> <Text>PAGE 1!</Text> <TouchableOpacity onPress= Actions> <Text>push page 2</Text> </TouchableOpacity> <TouchableOpacity onPress= Actions> <Text>pop</Text> </TouchableOpacity> <TouchableOpacity onPress= Actions> <Text>reset</Text> </TouchableOpacity> <TouchableOpacity onPress= Actions> <Text>reset to page2</Text> </TouchableOpacity> </View> }
This router was inspired by React Navigation and RNRF.