Skip to content
This repository was archived by the owner on Feb 25, 2020. It is now read-only.

Commit 2ae1ea5

Browse files
satya164satya164
committed
wip: rewrite based on reanimated
1 parent 10fe551 commit 2ae1ea5

46 files changed

Lines changed: 1994 additions & 4621 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎example/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ import { useScreens } from 'react-native-screens';
3636
I18nManager.forceRTL(false);
3737

3838
const data = [
39-
{ component: SimpleStack, title: 'Simple', routeName: 'SimpleStack' },
4039
{ component: HeaderPreset, title: 'UIKit Preset', routeName: 'UIKit' },
40+
{ component: SimpleStack, title: 'Wipe Preset', routeName: 'SimpleStack' },
4141
{ component: ImageStack, title: 'Image', routeName: 'ImageStack' },
4242
{ component: ModalStack, title: 'Modal', routeName: 'ModalStack' },
4343
{ component: FullScreen, title: 'Full Screen', routeName: 'FullScreen' },

‎example/src/FullScreen.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { createStackNavigator } from 'react-navigation-stack';
44

55
class Screen extends React.Component {
66
static navigationOptions = {
7-
header: null,
7+
header: () => null,
88
};
99

1010
render() {

‎example/src/HeaderBackgrounds.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function createHeaderBackgroundExample(options = {}) {
1919
navigationOptions: {
2020
headerTitle: 'Login Screen',
2121
headerTintColor: '#fff',
22-
headerBackground: (
22+
headerBackground: () => (
2323
<View style={{ flex: 1, backgroundColor: '#FF0066' }} />
2424
),
2525
},
@@ -38,7 +38,7 @@ function createHeaderBackgroundExample(options = {}) {
3838
navigationOptions: {
3939
headerTitle: 'Games Screen',
4040
headerTintColor: '#fff',
41-
headerBackground: (
41+
headerBackground: () => (
4242
<View style={{ flex: 1, backgroundColor: '#3388FF' }} />
4343
),
4444
},

‎example/src/HeaderPreset.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import * as React from 'react';
22
import { Button, StatusBar } from 'react-native';
33
import { SafeAreaView } from '@react-navigation/native';
4-
import { createStackNavigator } from 'react-navigation-stack';
4+
import {
5+
createStackNavigator,
6+
TransitionPresets,
7+
} from 'react-navigation-stack';
58

69
class HomeScreen extends React.Component {
710
static navigationOptions = {
@@ -100,9 +103,7 @@ const StackWithHeaderPreset = createStackNavigator(
100103
ScreenWithNoHeader: ScreenWithNoHeader,
101104
ScreenWithLongTitle: ScreenWithLongTitle,
102105
},
103-
{
104-
headerTransitionPreset: 'uikit',
105-
}
106+
TransitionPresets.SlideFromRightIOS
106107
);
107108

108109
export default StackWithHeaderPreset;

‎example/src/ImageStack.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ class ListScreen extends React.Component {
77
static navigationOptions = ({ navigation }) => ({
88
title: 'Image list',
99
headerBackTitle: 'Back',
10-
headerLeft: (
10+
headerLeft: () => (
1111
<Button title="Back" onPress={() => navigation.navigate('Home')} />
1212
),
1313
});

‎example/src/SimpleStack.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import * as React from 'react';
22
import { Dimensions, Button, View, Text } from 'react-native';
33
import { withNavigation } from '@react-navigation/core';
4-
import { createStackNavigator } from 'react-navigation-stack';
4+
import {
5+
createStackNavigator,
6+
TransitionPresets,
7+
} from 'react-navigation-stack';
58

69
const Buttons = withNavigation(props => (
710
<React.Fragment>
@@ -148,11 +151,7 @@ export default createStackNavigator(
148151
},
149152
{
150153
initialRouteName: 'List',
151-
152-
// these are the defaults
153-
cardShadowEnabled: true,
154-
cardOverlayEnabled: false,
155-
156-
// headerTransitionPreset: 'uikit',
154+
headerMode: 'screen',
155+
...TransitionPresets.WipeFromBottomAndroid,
157156
}
158157
);

‎example/src/TransparentStack.js‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import * as React from 'react';
2-
import { Animated, Button, Easing, View, Text } from 'react-native';
2+
import { Button, View, Text } from 'react-native';
33
import { createStackNavigator } from 'react-navigation-stack';
4+
import Animated from 'react-native-reanimated';
5+
6+
const { interpolate, multiply, cond } = Animated;
47

58
class ListScreen extends React.Component {
69
render() {
@@ -78,23 +81,26 @@ export default createStackNavigator(
7881
navigationOptions: {
7982
gesturesEnabled: false,
8083
},
81-
transitionConfig: () => ({
82-
transitionSpec: {
83-
duration: 300,
84-
easing: Easing.inOut(Easing.ease),
85-
timing: Animated.timing,
86-
},
87-
screenInterpolator: sceneProps => {
88-
const { position, scene } = sceneProps;
89-
const { index } = scene;
84+
cardStyleInterpolator: ({ positions: { current }, layout, closing }) => {
85+
const translateY = interpolate(current, {
86+
inputRange: [0, 1],
87+
outputRange: [multiply(layout.height, 0.08), 0],
88+
});
9089

91-
const opacity = position.interpolate({
92-
inputRange: [index - 1, index],
93-
outputRange: [0, 1],
94-
});
90+
const opacity = cond(
91+
closing,
92+
current,
93+
interpolate(current, {
94+
inputRange: [0, 0.5, 0.9, 1],
95+
outputRange: [0, 0.25, 0.7, 1],
96+
})
97+
);
9598

96-
return { opacity };
97-
},
98-
}),
99+
return {
100+
cardStyle: {
101+
opacity,
102+
},
103+
};
104+
},
99105
}
100106
);

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@
6363
"react": "16.5.0",
6464
"react-dom": "16.5.0",
6565
"react-native": "~0.57.7",
66-
"react-native-gesture-handler": "^1.1.0",
66+
"react-native-gesture-handler": "^1.2.1",
67+
"react-native-reanimated": "^1.0.1",
6768
"react-native-screens": "^1.0.0-alpha.22",
6869
"react-test-renderer": "16.5.0",
6970
"release-it": "^11.0.0",
@@ -76,6 +77,7 @@
7677
"react": "*",
7778
"react-native": "*",
7879
"react-native-gesture-handler": "^1.0.0",
80+
"react-native-reanimated": "^1.0.0",
7981
"react-native-screens": "^1.0.0 || ^1.0.0-alpha"
8082
},
8183
"jest": {

‎src/TransitionConfigs/CardStyleInterpolators.tsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import Animated from 'react-native-reanimated';
2+
import { CardInterpolationProps, CardInterpolatedStyle } from '../types';
3+
4+
const { cond, multiply, interpolate } = Animated;
5+
6+
/**
7+
* Standard iOS-style slide in from the right.
8+
*/
9+
export function forHorizontalIOS({
10+
positions: { current, next },
11+
layout,
12+
}: CardInterpolationProps): CardInterpolatedStyle {
13+
const translateFocused = interpolate(current, {
14+
inputRange: [0, 1],
15+
outputRange: [layout.width, 0],
16+
});
17+
const translateUnfocused = next
18+
? interpolate(next, {
19+
inputRange: [0, 1],
20+
outputRange: [0, multiply(layout.width, -0.3)],
21+
})
22+
: 0;
23+
24+
const opacity = interpolate(current, {
25+
inputRange: [0, 1],
26+
outputRange: [0, 0.07],
27+
});
28+
29+
const shadowOpacity = interpolate(current, {
30+
inputRange: [0, 1],
31+
outputRange: [0, 0.3],
32+
});
33+
34+
return {
35+
cardStyle: {
36+
backgroundColor: '#eee',
37+
transform: [
38+
// Translation for the animation of the current card
39+
{ translateX: translateFocused },
40+
// Translation for the animation of the card on top of this
41+
{ translateX: translateUnfocused },
42+
],
43+
shadowOpacity,
44+
},
45+
overlayStyle: { opacity },
46+
};
47+
}
48+
49+
/**
50+
* Standard iOS-style slide in from the bottom (used for modals).
51+
*/
52+
export function forVerticalIOS({
53+
positions: { current },
54+
layout,
55+
}: CardInterpolationProps): CardInterpolatedStyle {
56+
const translateY = interpolate(current, {
57+
inputRange: [0, 1],
58+
outputRange: [layout.height, 0],
59+
});
60+
61+
return {
62+
cardStyle: {
63+
backgroundColor: '#eee',
64+
transform: [
65+
// Translation for the animation of the current card
66+
{ translateY },
67+
],
68+
},
69+
};
70+
}
71+
72+
/**
73+
* Standard Android-style fade in from the bottom for Android Oreo.
74+
*/
75+
export function forFadeFromBottomAndroid({
76+
positions: { current },
77+
layout,
78+
closing,
79+
}: CardInterpolationProps): CardInterpolatedStyle {
80+
const translateY = interpolate(current, {
81+
inputRange: [0, 1],
82+
outputRange: [multiply(layout.height, 0.08), 0],
83+
});
84+
85+
const opacity = cond(
86+
closing,
87+
current,
88+
interpolate(current, {
89+
inputRange: [0, 0.5, 0.9, 1],
90+
outputRange: [0, 0.25, 0.7, 1],
91+
})
92+
);
93+
94+
return {
95+
cardStyle: {
96+
opacity,
97+
transform: [{ translateY }],
98+
},
99+
};
100+
}
101+
102+
/**
103+
* Standard Android-style wipe from the bottom for Android Pie.
104+
*/
105+
export function forWipeFromBottomAndroid({
106+
positions: { current, next },
107+
layout,
108+
}: CardInterpolationProps): CardInterpolatedStyle {
109+
const containerTranslateY = interpolate(current, {
110+
inputRange: [0, 1],
111+
outputRange: [layout.height, 0],
112+
});
113+
const cardTranslateYFocused = interpolate(current, {
114+
inputRange: [0, 1],
115+
outputRange: [multiply(layout.height, 95.9 / 100, -1), 0],
116+
});
117+
const cardTranslateYUnfocused = next
118+
? interpolate(next, {
119+
inputRange: [0, 1],
120+
outputRange: [0, multiply(layout.height, 2 / 100, -1)],
121+
})
122+
: 0;
123+
const overlayOpacity = interpolate(current, {
124+
inputRange: [0, 0.36, 1],
125+
outputRange: [0, 0.1, 0.1],
126+
});
127+
128+
return {
129+
containerStyle: {
130+
transform: [{ translateY: containerTranslateY }],
131+
},
132+
cardStyle: {
133+
transform: [
134+
{ translateY: cardTranslateYFocused },
135+
{ translateY: cardTranslateYUnfocused },
136+
],
137+
},
138+
overlayStyle: { opacity: overlayOpacity },
139+
};
140+
}

0 commit comments

Comments
 (0)