Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jpapillon/react-native-animated-router
React Native router with full control on transition animations.
https://github.com/jpapillon/react-native-animated-router
animations react-native router
Last synced: about 2 months ago
JSON representation
React Native router with full control on transition animations.
- Host: GitHub
- URL: https://github.com/jpapillon/react-native-animated-router
- Owner: jpapillon
- Created: 2017-10-26T00:17:24.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-06T18:53:53.000Z (about 7 years ago)
- Last Synced: 2024-11-20T11:46:07.888Z (2 months ago)
- Topics: animations, react-native, router
- Language: JavaScript
- Size: 198 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-animated-router
React Native router with full control on transition animations.
**This library is currently in development.**
## Installation
```bash
npm install react-native-animated-router --save
```
or
```bash
yarn add react-native-animated-router
```
## Usage
```js
import React, {Component} from 'react';
import {View} from 'react-native';
import {Router} from 'react-native-animated-router';
import Page1Screen from './Page1Screen';
import Page2Screen from './Page2Screen';
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: Animated.spring, // 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)
fn: progress => { // Default function used for animating the pushed view. It receives a progress (Animated.Value) of current transition progress
const translateX = progress.interpolate({
inputRange: [0, 1],
outputRange: [width, 0],
});
return {
transform: [{
translateX
}]
}
}
},
blur: {
config: {}, // Default configuration for all 'blur' animations (animation on the screen which gets another one pushed over)
fn: progress => {} // Default function used for animating the blurred view
},
focus: {
config: {}, // Etc.
fn: progress => {}
},
pop: {
config: {},
fn: progress => {}
}
},
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: {},
fn: progress => {}
},
blur: {
config: {},
fn: progress => {}
},
focus: {
config: {},
fn: progress => {}
},
pop: {
config: {},
fn: progress => {}
}
}, {/* ... */}]
}
export default class App extends Component {
render() {
return (
)
}
}
```
### Actions
```js
import {Actions} from 'react-native-animated-router';
Actions.push('page1', {param1: "Hello World"}); // <-- Will push 'page1' on stack
Actions.pop(); // <-- Pops last view on stack
Actions.reset(); // <-- Resets the stack to the first one
Actions.reset('page2', {param2: "Test"}); // <-- Resets the stack to 'page2'
```
#### Example
```js
...
import {Actions} from 'react-native-animated-router';
class Page1Screen extends Component {
render() {
return (
PAGE 1!
Actions.push("page2", {})}>
push page 2
Actions.pop()}>
pop
Actions.reset()}>
reset
Actions.reset("page2", {})}>
reset to page2
)
}
}
```
This router was inspired by [React Navigation](https://reactnavigation.org) and [RNRF](https://github.com/aksonov/react-native-router-flux).