Skip to content

Commit 4d67ea6

Browse files
author
woon
committed
update
1 parent 49249c7 commit 4d67ea6

20 files changed

+1430
-1
lines changed

Diff for: ‎.gitignore

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
node_modules/
2+
/lib
3+
/coverage
4+
.DS_Store
5+
.yarn.lock
6+
.vscode
7+
.idea
8+
example/.DS_Store
9+
example/node_modules/
10+
example/.expo/
11+
example/npm-debug.log
12+
example/TODO.md
13+
example/yarn-error.log
14+
example/yarn.lock
15+
example/.idea
16+
example/.vscode

Diff for: ‎.prettierrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"printWidth": 120,
3+
"trailingComma": "all",
4+
"singleQuote": true
5+
}

Diff for: ‎README.md

+163-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,164 @@
1+
[![Codecov Coverage](https://img.shields.io/codecov/c/github/Taymindis/react-router-native-animate-stack/coverage.svg?style=flat-square)](https://codecov.io/gh/Taymindis/react-router-native-animate-stack/)
2+
13
# react-router-native-animate-stack
2-
custom animatable stack design with react router native
4+
5+
[![npm version](https://img.shields.io/npm/v/react-router-native-animate-stack.svg?style=flat-square)](https://www.npmjs.com/package/react-router-native-animate-stack)
6+
[![downloads](https://img.shields.io/npm/dm/react-router-native-animate-stack.svg?style=flat-square)](https://www.npmjs.com/package/react-router-native-animate-stack)
7+
8+
A latest React version react router native animate stack
9+
10+
## purpose of this component
11+
12+
React Router Native v5 with your desired customization transition style! It's design with Animated.View
13+
14+
This package only useable with React Router Native. Use it like a React router native's **Switch**
15+
16+
## Installation
17+
18+
Install `react-router-native` and this package:
19+
20+
`npm install react-router-native react-router-native-animate-stack --save`
21+
22+
OR
23+
24+
`yarn add react-router-native react-router-native-animate-stack`
25+
26+
## Usage
27+
28+
Here's a simple working example of using it.
29+
30+
```jsx
31+
// When no customization, it is just like a stack
32+
<AnimatedStack
33+
swipeCancelSpeed={50}
34+
swipeable={true}>
35+
<Route exact path='/'>
36+
<Home />
37+
</Route>
38+
<Route path='/about'>
39+
<About />
40+
</Route>
41+
<Route path='/topics' component={Topics} />
42+
</AnimatedStack>
43+
```
44+
45+
This is what the above code looks like running on iOS simulator:
46+
47+
![Default Behaviour](https://raw.githubusercontent.com/Taymindis/react-router-native-animate-stack/master/demo/default_bahavior.gif)
48+
49+
The stack component will trigger gesture swipe forward and backward when passing swipeable true.
50+
51+
If you are familiar with [Switch](https://reacttraining.com/react-router/native/api/Switch), you will know how to use this.
52+
53+
## Customizing Animation your desire animation style
54+
55+
###### onMountAnimate
56+
when the component mounted, you can defined how you going to animate
57+
58+
##### onTransitionAnimate
59+
when the component swap between 2 screen, you can animating the view!
60+
61+
##### activedViewStyleHandler
62+
Enter animation style is the ViewStyle for Enter Screen, which is acive screen
63+
64+
##### deactivedViewStyleHandler
65+
Exit animation style is the ViewStyle for Exit Screen, which is deactive screen
66+
67+
Below example you will be more clear:
68+
69+
```jsx
70+
71+
const App = () => {
72+
const enterAnimKit = new Animated.Value(0);
73+
const exitAnimKit = new Animated.Value(0);
74+
const width = useWindowDimensions().width;
75+
return (
76+
<SafeAreaView>
77+
<NativeRouter>
78+
<View style={styles.container}>
79+
<Navigator />
80+
<AnimatedStack
81+
swipeCancelSpeed={50}
82+
swipeable={true}
83+
onMountAnimate={() => {
84+
Animated.timing(enterAnimKit, {
85+
toValue: 1,
86+
duration: 100
87+
}).start();
88+
}}
89+
onTransitionAnimate={({ location, action, isNestedRoute }) => {
90+
if (isNestedRoute) return;
91+
// Enter and exit or one only
92+
enterAnimKit.setValue(0);
93+
exitAnimKit.setValue(0);
94+
95+
Animated.timing(enterAnimKit, {
96+
toValue: 1,
97+
duration: 500,
98+
delay: 200
99+
}).start();
100+
101+
Animated.timing(exitAnimKit, {
102+
toValue: 1,
103+
duration: 500
104+
}).start();
105+
}}
106+
activedViewStyleHandler={({ location, action, isNestedRoute }) => {
107+
return {
108+
transform: [
109+
{
110+
translateX: enterAnimKit.interpolate({
111+
inputRange: [0, 1],
112+
outputRange: [width, 0]
113+
})
114+
}
115+
]
116+
};
117+
}}
118+
deactivedViewStyleHandler={({ location, action, isNestedRoute }) => {
119+
return {
120+
transform: [
121+
{
122+
translateX: exitAnimKit.interpolate({
123+
inputRange: [0, 1],
124+
outputRange: [0, -width]
125+
})
126+
}
127+
]
128+
};
129+
}}
130+
>
131+
<Route exact path='/'>
132+
<Home />
133+
</Route>
134+
<Route path='/about'>
135+
<About />
136+
</Route>
137+
<Route path='/topics' component={Topics} />
138+
</AnimatedStack>
139+
</View>
140+
</NativeRouter>
141+
</SafeAreaView>
142+
);
143+
};
144+
145+
```
146+
147+
With this code given, the transition will be shown as below
148+
149+
![Customize Transiction Animation](https://raw.githubusercontent.com/Taymindis/react-router-native-animate-stack/master/demo/custom_transition.gif)
150+
151+
152+
## Reason of created this
153+
154+
React Router Native still a popular routing engine which native, clean(no other UI kit dependencies) and powerful for routing but no animation.
155+
156+
Now added on animate stack, you can animate the view on run time, changing the animation style on runtime!
157+
158+
React router for routing, let the drawer, menu bar, tab bar and other fancy UI kits bar for other Ui Library control without any breakage.
159+
160+
161+
## Design for latest React Version.
162+
163+
This package is using getDerivedStateFromProps function which going to replace componentWillReceiveProps
164+

Diff for: ‎babel.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: ['module:metro-react-native-babel-preset']
3+
};

Diff for: ‎demo/custom_transition.gif

850 KB
Loading

Diff for: ‎demo/default_bahavior.gif

799 KB
Loading

Diff for: ‎example/App.jsx

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
/**
2+
* Sample React Native App
3+
* https://github.com/facebook/react-native
4+
*
5+
* @format
6+
* @flow
7+
*/
8+
9+
import React from 'react';
10+
import { SafeAreaView, StyleSheet, View, Animated, Easing, useWindowDimensions } from 'react-native';
11+
12+
import { NativeRouter, Route } from 'react-router-native';
13+
14+
import AnimatedStack from 'react-router-native-animate-stack';
15+
import Navigator from './Navigator';
16+
import { Home, Topics, About } from './Components';
17+
18+
const App = () => {
19+
const enterAnimKit = new Animated.Value(0);
20+
const exitAnimKit = new Animated.Value(0);
21+
const width = useWindowDimensions().width;
22+
return (
23+
<SafeAreaView>
24+
<NativeRouter>
25+
<View style={styles.container}>
26+
<Navigator />
27+
<AnimatedStack
28+
swipeable={true}
29+
onMountAnimate={() => {
30+
Animated.timing(enterAnimKit, {
31+
toValue: 1,
32+
duration: 100
33+
}).start();
34+
}}
35+
onTransitionAnimate={({ location, action, isNestedRoute }) => {
36+
if (isNestedRoute) return;
37+
// Enter and exit or one only
38+
enterAnimKit.setValue(0);
39+
exitAnimKit.setValue(0);
40+
41+
Animated.timing(enterAnimKit, {
42+
toValue: 1,
43+
duration: 500,
44+
delay: 200
45+
}).start();
46+
47+
Animated.timing(exitAnimKit, {
48+
toValue: 1,
49+
duration: 500
50+
}).start();
51+
}}
52+
activedViewStyleHandler={({ location, action, isNestedRoute }) => {
53+
return {
54+
transform: [
55+
{
56+
translateX: enterAnimKit.interpolate({
57+
inputRange: [0, 1],
58+
outputRange: [width, 0]
59+
})
60+
}
61+
]
62+
};
63+
}}
64+
deactivedViewStyleHandler={({ location, action, isNestedRoute }) => {
65+
return {
66+
transform: [
67+
{
68+
translateX: exitAnimKit.interpolate({
69+
inputRange: [0, 1],
70+
outputRange: [0, -width]
71+
})
72+
}
73+
]
74+
};
75+
}}
76+
>
77+
<Route exact path='/'>
78+
<Home />
79+
</Route>
80+
<Route path='/about'>
81+
<About />
82+
</Route>
83+
<Route path='/topics' component={Topics} />
84+
</AnimatedStack>
85+
</View>
86+
</NativeRouter>
87+
</SafeAreaView>
88+
);
89+
};
90+
91+
const styles = StyleSheet.create({
92+
container: {
93+
marginTop: 25,
94+
// padding: 10,
95+
width: '100%'
96+
},
97+
header: {
98+
fontSize: 20
99+
},
100+
nav: {
101+
flexDirection: 'row',
102+
justifyContent: 'space-around'
103+
},
104+
navItem: {
105+
flex: 1,
106+
alignItems: 'center',
107+
padding: 10
108+
},
109+
subNavItem: {
110+
padding: 5
111+
},
112+
topic: {
113+
textAlign: 'center',
114+
fontSize: 15
115+
}
116+
});
117+
118+
export default App;

0 commit comments

Comments
 (0)