├── .gitignore
├── App.js
├── README.md
├── app.json
├── package.json
├── src
    ├── App.tsx
    ├── TransitionConfigs
    │   ├── CardStyleInterpolators.tsx
    │   ├── HeaderStyleInterpolators.tsx
    │   ├── TransitionPresets.tsx
    │   └── TransitionSpecs.tsx
    ├── assets
    │   ├── back-icon-mask.png
    │   ├── back-icon.png
    │   ├── back-icon@1.5x.android.png
    │   ├── back-icon@1.5x.ios.png
    │   ├── back-icon@1x.android.png
    │   ├── back-icon@1x.ios.png
    │   ├── back-icon@2x.android.png
    │   ├── back-icon@2x.ios.png
    │   ├── back-icon@3x.android.png
    │   ├── back-icon@3x.ios.png
    │   ├── back-icon@4x.android.png
    │   └── back-icon@4x.ios.png
    ├── components
    │   ├── BorderlessButton.tsx
    │   ├── Card.tsx
    │   ├── Header
    │   │   ├── HeaderAnimated.tsx
    │   │   ├── HeaderBackButton.tsx
    │   │   ├── HeaderBar.tsx
    │   │   ├── HeaderSegment.tsx
    │   │   ├── HeaderSimple.tsx
    │   │   └── HeaderTitle.tsx
    │   ├── Stack.tsx
    │   └── TouchableItem.tsx
    ├── types.tsx
    └── utils
    │   └── memoize.tsx
├── tsconfig.json
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 
3 | node_modules
4 | .expo
5 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
1 | export { default } from './src/App.tsx'
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Reanimated Stacks
2 | 
3 | Experiment trying to re-implement react navigation stack with reanimated and gesture-handler.
4 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "reanimated-stacks",
 4 |     "description": "No description",
 5 |     "slug": "snack-BJ9M8a6jV",
 6 |     "privacy": "unlisted",
 7 |     "sdkVersion": "32.0.0",
 8 |     "version": "1.0.0",
 9 |     "orientation": "portrait",
10 |     "primaryColor": "#cccccc",
11 |     "icon": "https://d1wp6m56sqw74a.cloudfront.net/~assets/c9aa1be8a6a6fe81e20c3ac4106a2ebc",
12 |     "loading": {
13 |       "icon": "https://d1wp6m56sqw74a.cloudfront.net/~assets/c9aa1be8a6a6fe81e20c3ac4106a2ebc",
14 |       "hideExponentText": false
15 |     },
16 |     "packagerOpts": {
17 |       "assetExts": [
18 |         "ttf",
19 |         "mp4",
20 |         "otf",
21 |         "xml"
22 |       ]
23 |     },
24 |     "ios": {
25 |       "supportsTablet": true
26 |     }
27 |   }
28 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "reanimated-stacks",
 3 |   "version": "0.0.0",
 4 |   "description": "No description",
 5 |   "author": null,
 6 |   "private": true,
 7 |   "main": "node_modules/expo/AppEntry.js",
 8 |   "scripts": {
 9 |     "typescript": "tsc --noEmit"
10 |   },
11 |   "dependencies": {
12 |     "expo": "^32.0.0",
13 |     "react": "16.5.0",
14 |     "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
15 |     "react-native-paper": "2.2.8"
16 |   },
17 |   "devDependencies": {
18 |     "@types/expo": "^32.0.13",
19 |     "@types/react": "^16.8.16",
20 |     "@types/react-native": "^0.57.51",
21 |     "typescript": "^3.4.5"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { View, Text, Button, StyleSheet } from 'react-native';
 3 | import Stack, { SceneProps } from './components/Stack';
 4 | import { Route } from './types';
 5 | import { DefaultTransition } from './TransitionConfigs/TransitionPresets';
 6 | 
 7 | type State = {
 8 |   routes: Route[];
 9 |   initialRoutes: string[];
10 |   closingRoutes: string[];
11 | };
12 | 
13 | export default class App extends React.Component<{}, State> {
14 |   state: State = {
15 |     routes: [{ key: '0' }, { key: '1' }],
16 |     initialRoutes: ['0', '1'],
17 |     closingRoutes: [],
18 |   };
19 | 
20 |   private key = 2;
21 | 
22 |   private renderScene = ({ route, index }: SceneProps<Route>) => {
23 |     return (
24 |       <View style={styles.scene}>
25 |         <Text style={styles.item}>{index}</Text>
26 |         <View style={styles.item}>
27 |           <Button
28 |             title="Add screen"
29 |             onPress={() => {
30 |               this.setState(state => ({
31 |                 routes: [...state.routes, { key: String(this.key++) }],
32 |               }));
33 |             }}
34 |           />
35 |         </View>
36 |         {index !== 0 ? (
37 |           <View style={styles.item}>
38 |             <Button
39 |               title="Go back"
40 |               onPress={() =>
41 |                 this.setState(state => ({
42 |                   closingRoutes: [...state.closingRoutes, route.key],
43 |                 }))
44 |               }
45 |             />
46 |           </View>
47 |         ) : null}
48 |       </View>
49 |     );
50 |   };
51 | 
52 |   render() {
53 |     return (
54 |       <Stack
55 |         routes={this.state.routes}
56 |         initialRoutes={this.state.initialRoutes}
57 |         closingRoutes={this.state.closingRoutes}
58 |         onGoBack={({ route }) =>
59 |           this.setState(state => ({
60 |             closingRoutes: [...state.closingRoutes, route.key],
61 |           }))
62 |         }
63 |         onCloseRoute={({ route }) =>
64 |           this.setState(state => ({
65 |             routes: state.routes.filter(r => r !== route),
66 |             closingRoutes: state.closingRoutes.filter(key => key !== route.key),
67 |             initialRoutes: state.initialRoutes.filter(key => key !== route.key),
68 |           }))
69 |         }
70 |         renderScene={this.renderScene}
71 |         {...DefaultTransition}
72 |       />
73 |     );
74 |   }
75 | }
76 | 
77 | const styles = StyleSheet.create({
78 |   item: {
79 |     margin: 8,
80 |   },
81 |   scene: {
82 |     flex: 1,
83 |     alignItems: 'center',
84 |     justifyContent: 'center',
85 |   },
86 | });
87 | 


--------------------------------------------------------------------------------
/src/TransitionConfigs/CardStyleInterpolators.tsx:
--------------------------------------------------------------------------------
  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 | }
141 | 


--------------------------------------------------------------------------------
/src/TransitionConfigs/HeaderStyleInterpolators.tsx:
--------------------------------------------------------------------------------
 1 | import Animated from 'react-native-reanimated';
 2 | import { HeaderInterpolationProps, HeaderInterpolatedStyle } from '../types';
 3 | 
 4 | const { interpolate, add } = Animated;
 5 | 
 6 | export function forUIKit({
 7 |   positions: { current, next },
 8 |   layouts,
 9 | }: HeaderInterpolationProps): HeaderInterpolatedStyle {
10 |   const leftSpacing = 27;
11 | 
12 |   // The title and back button title should cross-fade to each other
13 |   // When screen is fully open, the title should be in center, and back title should be on left
14 |   // When screen is closing, the previous title will animate to back title's position
15 |   // And back title will animate to title's position
16 |   // We achieve this by calculating the offsets needed to translate title to back title's position and vice-versa
17 |   const backTitleOffset = layouts.backTitle
18 |     ? (layouts.screen.width - layouts.backTitle.width) / 2 - leftSpacing
19 |     : undefined;
20 |   const titleLeftOffset = layouts.title
21 |     ? (layouts.screen.width - layouts.title.width) / 2 - leftSpacing
22 |     : undefined;
23 | 
24 |   // When the current title is animating to right, it is centered in the right half of screen in middle of transition
25 |   // The back title also animates in from this position
26 |   const rightOffset = layouts.screen.width / 4;
27 | 
28 |   const progress = add(current, next ? next : 0);
29 | 
30 |   return {
31 |     leftButtonStyle: {
32 |       opacity: interpolate(progress, {
33 |         inputRange: [0.3, 1, 1.5],
34 |         outputRange: [0, 1, 0],
35 |       }),
36 |     },
37 |     backTitleStyle: {
38 |       // Title and back title are a bit different width due to title being bold
39 |       // Adjusting the letterSpacing makes them coincide better
40 |       letterSpacing: backTitleOffset
41 |         ? interpolate(progress, {
42 |             inputRange: [0.3, 1, 2],
43 |             outputRange: [0.35, 0, 0],
44 |           })
45 |         : 0,
46 |       transform: [
47 |         {
48 |           // Avoid translating if we don't have its width
49 |           // It means there's no back title set
50 |           translateX: backTitleOffset
51 |             ? interpolate(progress, {
52 |                 inputRange: [0, 1, 2],
53 |                 outputRange: [backTitleOffset, 0, -rightOffset],
54 |               })
55 |             : 0,
56 |         },
57 |       ],
58 |     },
59 |     titleStyle: {
60 |       opacity: interpolate(progress, {
61 |         inputRange: [0.4, 1, 1.5],
62 |         outputRange: [0, 1, 0],
63 |       }),
64 |       transform: [
65 |         {
66 |           translateX: titleLeftOffset
67 |             ? interpolate(progress, {
68 |                 inputRange: [0.5, 1, 2],
69 |                 outputRange: [rightOffset, 0, -titleLeftOffset],
70 |               })
71 |             : 0,
72 |         },
73 |       ],
74 |     },
75 |   };
76 | }
77 | 
78 | export function forFade({
79 |   positions: { current, next },
80 | }: HeaderInterpolationProps): HeaderInterpolatedStyle {
81 |   const progress = add(current, next ? next : 0);
82 |   const opacity = interpolate(progress, {
83 |     inputRange: [0, 1, 2],
84 |     outputRange: [0, 1, 0],
85 |   });
86 | 
87 |   return {
88 |     leftButtonStyle: { opacity },
89 |     titleStyle: { opacity },
90 |   };
91 | }
92 | 
93 | export function forNoAnimation(): HeaderInterpolatedStyle {
94 |   return {};
95 | }
96 | 


--------------------------------------------------------------------------------
/src/TransitionConfigs/TransitionPresets.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   forHorizontalIOS,
 3 |   forVerticalIOS,
 4 |   forWipeFromBottomAndroid,
 5 |   forFadeFromBottomAndroid,
 6 | } from './CardStyleInterpolators';
 7 | import { forUIKit, forNoAnimation } from './HeaderStyleInterpolators';
 8 | import {
 9 |   TransitionIOSSpec,
10 |   WipeFromBottomAndroidSpec,
11 |   FadeOutToBottomAndroidSpec,
12 |   FadeInFromBottomAndroidSpec,
13 | } from './TransitionSpecs';
14 | import { TransitionPreset } from '../types';
15 | import { Platform } from 'react-native';
16 | 
17 | const ANDROID_VERSION_PIE = 28;
18 | 
19 | // Standard iOS navigation transition
20 | export const SlideFromRightIOS: TransitionPreset = {
21 |   direction: 'horizontal',
22 |   headerMode: 'float',
23 |   transitionSpec: {
24 |     open: TransitionIOSSpec,
25 |     close: TransitionIOSSpec,
26 |   },
27 |   cardStyleInterpolator: forHorizontalIOS,
28 |   headerStyleInterpolator: forUIKit,
29 | };
30 | 
31 | // Standard iOS navigation transition for modals
32 | export const ModalSlideFromBottomIOS: TransitionPreset = {
33 |   direction: 'vertical',
34 |   headerMode: 'screen',
35 |   transitionSpec: {
36 |     open: TransitionIOSSpec,
37 |     close: TransitionIOSSpec,
38 |   },
39 |   cardStyleInterpolator: forVerticalIOS,
40 |   headerStyleInterpolator: forNoAnimation,
41 | };
42 | 
43 | // Standard Android navigation transition when opening or closing an Activity on Android < 9
44 | export const FadeFromBottomAndroid: TransitionPreset = {
45 |   direction: 'vertical',
46 |   headerMode: 'screen',
47 |   transitionSpec: {
48 |     open: FadeInFromBottomAndroidSpec,
49 |     close: FadeOutToBottomAndroidSpec,
50 |   },
51 |   cardStyleInterpolator: forFadeFromBottomAndroid,
52 |   headerStyleInterpolator: forNoAnimation,
53 | };
54 | 
55 | // Standard Android navigation transition when opening or closing an Activity on Android >= 9
56 | export const WipeFromBottomAndroid: TransitionPreset = {
57 |   direction: 'vertical',
58 |   headerMode: 'screen',
59 |   transitionSpec: {
60 |     open: WipeFromBottomAndroidSpec,
61 |     close: WipeFromBottomAndroidSpec,
62 |   },
63 |   cardStyleInterpolator: forWipeFromBottomAndroid,
64 |   headerStyleInterpolator: forNoAnimation,
65 | };
66 | 
67 | export const DefaultTransition = Platform.select({
68 |   ios: SlideFromRightIOS,
69 |   default:
70 |     Platform.OS === 'android' && Platform.Version < ANDROID_VERSION_PIE
71 |       ? FadeFromBottomAndroid
72 |       : WipeFromBottomAndroid,
73 | });
74 | 


--------------------------------------------------------------------------------
/src/TransitionConfigs/TransitionSpecs.tsx:
--------------------------------------------------------------------------------
 1 | import { Easing } from 'react-native-reanimated';
 2 | import { TransitionSpec } from '../types';
 3 | 
 4 | export const TransitionIOSSpec: TransitionSpec = {
 5 |   timing: 'spring',
 6 |   config: {
 7 |     stiffness: 1000,
 8 |     damping: 500,
 9 |     mass: 3,
10 |     overshootClamping: true,
11 |     restDisplacementThreshold: 0.01,
12 |     restSpeedThreshold: 0.01,
13 |   },
14 | };
15 | 
16 | // See http://androidxref.com/7.1.1_r6/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
17 | export const FadeInFromBottomAndroidSpec: TransitionSpec = {
18 |   timing: 'timing',
19 |   config: {
20 |     duration: 350,
21 |     easing: Easing.out(Easing.poly(5)),
22 |   },
23 | };
24 | 
25 | // See http://androidxref.com/7.1.1_r6/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml
26 | export const FadeOutToBottomAndroidSpec: TransitionSpec = {
27 |   timing: 'timing',
28 |   config: {
29 |     duration: 150,
30 |     easing: Easing.in(Easing.linear),
31 |   },
32 | };
33 | 
34 | // See http://androidxref.com/9.0.0_r3/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
35 | export const WipeFromBottomAndroidSpec: TransitionSpec = {
36 |   timing: 'timing',
37 |   config: {
38 |     duration: 425,
39 |     // This is super rough approximation of the path used for the curve by android
40 |     // See http://androidxref.com/9.0.0_r3/xref/frameworks/base/core/res/res/interpolator/fast_out_extra_slow_in.xml
41 |     easing: Easing.bezier(0.35, 0.45, 0, 1),
42 |   },
43 | };
44 | 


--------------------------------------------------------------------------------
/src/assets/back-icon-mask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-navigation/reanimated-stacks/cab34e703a1860851435d458fcc427b0f8821262/src/assets/back-icon-mask.png


--------------------------------------------------------------------------------
/src/assets/back-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-navigation/reanimated-stacks/cab34e703a1860851435d458fcc427b0f8821262/src/assets/back-icon.png


--------------------------------------------------------------------------------
/src/assets/back-icon@1.5x.android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-navigation/reanimated-stacks/cab34e703a1860851435d458fcc427b0f8821262/src/assets/back-icon@1.5x.android.png


--------------------------------------------------------------------------------
/src/assets/back-icon@1.5x.ios.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-navigation/reanimated-stacks/cab34e703a1860851435d458fcc427b0f8821262/src/assets/back-icon@1.5x.ios.png


--------------------------------------------------------------------------------
/src/assets/back-icon@1x.android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-navigation/reanimated-stacks/cab34e703a1860851435d458fcc427b0f8821262/src/assets/back-icon@1x.android.png


--------------------------------------------------------------------------------
/src/assets/back-icon@1x.ios.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-navigation/reanimated-stacks/cab34e703a1860851435d458fcc427b0f8821262/src/assets/back-icon@1x.ios.png


--------------------------------------------------------------------------------
/src/assets/back-icon@2x.android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-navigation/reanimated-stacks/cab34e703a1860851435d458fcc427b0f8821262/src/assets/back-icon@2x.android.png


--------------------------------------------------------------------------------
/src/assets/back-icon@2x.ios.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-navigation/reanimated-stacks/cab34e703a1860851435d458fcc427b0f8821262/src/assets/back-icon@2x.ios.png


--------------------------------------------------------------------------------
/src/assets/back-icon@3x.android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-navigation/reanimated-stacks/cab34e703a1860851435d458fcc427b0f8821262/src/assets/back-icon@3x.android.png


--------------------------------------------------------------------------------
/src/assets/back-icon@3x.ios.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-navigation/reanimated-stacks/cab34e703a1860851435d458fcc427b0f8821262/src/assets/back-icon@3x.ios.png


--------------------------------------------------------------------------------
/src/assets/back-icon@4x.android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-navigation/reanimated-stacks/cab34e703a1860851435d458fcc427b0f8821262/src/assets/back-icon@4x.android.png


--------------------------------------------------------------------------------
/src/assets/back-icon@4x.ios.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-navigation/reanimated-stacks/cab34e703a1860851435d458fcc427b0f8821262/src/assets/back-icon@4x.ios.png


--------------------------------------------------------------------------------
/src/components/BorderlessButton.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { Animated, Platform } from 'react-native';
 3 | import { BaseButton } from 'react-native-gesture-handler';
 4 | 
 5 | const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
 6 | 
 7 | type Props = React.ComponentProps<typeof BaseButton> & {
 8 |   activeOpacity: number;
 9 | };
10 | 
11 | export default class BorderlessButton extends React.Component<Props> {
12 |   static defaultProps = {
13 |     activeOpacity: 0.3,
14 |     borderless: true,
15 |   };
16 | 
17 |   private opacity = new Animated.Value(1);
18 | 
19 |   private handleActiveStateChange = (active: boolean) => {
20 |     if (Platform.OS !== 'android') {
21 |       Animated.spring(this.opacity, {
22 |         stiffness: 1000,
23 |         damping: 500,
24 |         mass: 3,
25 |         overshootClamping: true,
26 |         restDisplacementThreshold: 0.01,
27 |         restSpeedThreshold: 0.01,
28 |         toValue: active ? this.props.activeOpacity : 1,
29 |         useNativeDriver: true,
30 |       }).start();
31 |     }
32 | 
33 |     this.props.onActiveStateChange && this.props.onActiveStateChange(active);
34 |   };
35 | 
36 |   render() {
37 |     const { children, style, enabled, ...rest } = this.props;
38 | 
39 |     return (
40 |       <AnimatedBaseButton
41 |         {...rest}
42 |         onActiveStateChange={this.handleActiveStateChange}
43 |         style={[
44 |           style,
45 |           Platform.OS === 'ios' && enabled && { opacity: this.opacity },
46 |         ]}
47 |       >
48 |         {children}
49 |       </AnimatedBaseButton>
50 |     );
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/components/Card.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import { View, StyleSheet, ViewProps } from 'react-native';
  3 | import Animated from 'react-native-reanimated';
  4 | import {
  5 |   PanGestureHandler,
  6 |   State as GestureState,
  7 | } from 'react-native-gesture-handler';
  8 | import { TransitionSpec, CardStyleInterpolator } from '../types';
  9 | import memoize from '../utils/memoize';
 10 | 
 11 | type Props = ViewProps & {
 12 |   closing?: boolean;
 13 |   next?: Animated.Node<number>;
 14 |   current: Animated.Value<number>;
 15 |   layout: { width: number; height: number };
 16 |   direction: 'horizontal' | 'vertical';
 17 |   onOpen?: () => void;
 18 |   onClose?: () => void;
 19 |   children: React.ReactNode;
 20 |   animateIn: boolean;
 21 |   gesturesEnabled: boolean;
 22 |   transitionSpec: {
 23 |     open: TransitionSpec;
 24 |     close: TransitionSpec;
 25 |   };
 26 |   styleInterpolator: CardStyleInterpolator;
 27 | };
 28 | 
 29 | type Binary = 0 | 1;
 30 | 
 31 | const TRUE = 1;
 32 | const FALSE = 0;
 33 | const NOOP = 0;
 34 | const UNSET = -1;
 35 | 
 36 | const DIRECTION_VERTICAL = -1;
 37 | const DIRECTION_HORIZONTAL = 1;
 38 | 
 39 | const SWIPE_VELOCITY_THRESHOLD_DEFAULT = 500;
 40 | const SWIPE_DISTANCE_THRESHOLD_DEFAULT = 60;
 41 | 
 42 | const SWIPE_DISTANCE_MINIMUM = 5;
 43 | 
 44 | const {
 45 |   cond,
 46 |   eq,
 47 |   neq,
 48 |   set,
 49 |   and,
 50 |   or,
 51 |   greaterThan,
 52 |   lessThan,
 53 |   abs,
 54 |   add,
 55 |   max,
 56 |   block,
 57 |   stopClock,
 58 |   startClock,
 59 |   clockRunning,
 60 |   onChange,
 61 |   Value,
 62 |   Clock,
 63 |   call,
 64 |   spring,
 65 |   timing,
 66 |   interpolate,
 67 | } = Animated;
 68 | 
 69 | export default class Card extends React.Component<Props> {
 70 |   static defaultProps = {
 71 |     animateIn: true,
 72 |     gesturesEnabled: true,
 73 |   };
 74 | 
 75 |   componentDidUpdate(prevProps: Props) {
 76 |     const { layout, direction, closing, animateIn } = this.props;
 77 |     const { width, height } = layout;
 78 | 
 79 |     if (
 80 |       width !== prevProps.layout.width ||
 81 |       height !== prevProps.layout.height
 82 |     ) {
 83 |       this.layout.width.setValue(width);
 84 |       this.layout.height.setValue(height);
 85 | 
 86 |       this.position.setValue(
 87 |         animateIn
 88 |           ? direction === 'vertical'
 89 |             ? layout.height
 90 |             : layout.width
 91 |           : 0
 92 |       );
 93 |     }
 94 | 
 95 |     if (direction !== prevProps.direction) {
 96 |       this.direction.setValue(
 97 |         direction === 'vertical' ? DIRECTION_VERTICAL : DIRECTION_HORIZONTAL
 98 |       );
 99 |     }
100 | 
101 |     if (closing !== prevProps.closing) {
102 |       this.isClosing.setValue(closing ? TRUE : FALSE);
103 |     }
104 |   }
105 | 
106 |   private isVisible = new Value<Binary>(TRUE);
107 |   private nextIsVisible = new Value<Binary | -1>(UNSET);
108 | 
109 |   private isClosing = new Value<Binary>(FALSE);
110 | 
111 |   private clock = new Clock();
112 | 
113 |   private direction = new Value(
114 |     this.props.direction === 'vertical'
115 |       ? DIRECTION_VERTICAL
116 |       : DIRECTION_HORIZONTAL
117 |   );
118 | 
119 |   private layout = {
120 |     width: new Value(this.props.layout.width),
121 |     height: new Value(this.props.layout.height),
122 |   };
123 | 
124 |   private distance = cond(
125 |     eq(this.direction, DIRECTION_VERTICAL),
126 |     this.layout.height,
127 |     this.layout.width
128 |   );
129 | 
130 |   private position = new Value(
131 |     this.props.animateIn
132 |       ? this.props.direction === 'vertical'
133 |         ? this.props.layout.height
134 |         : this.props.layout.width
135 |       : 0
136 |   );
137 | 
138 |   private gesture = new Value(0);
139 |   private offset = new Value(0);
140 |   private velocity = new Value(0);
141 | 
142 |   private gestureState = new Value(0);
143 | 
144 |   private isSwiping = new Value(FALSE);
145 |   private isSwipeGesture = new Value(FALSE);
146 | 
147 |   private toValue = new Value(0);
148 |   private frameTime = new Value(0);
149 | 
150 |   private transitionState = {
151 |     position: this.position,
152 |     time: new Value(0),
153 |     finished: new Value(FALSE),
154 |   };
155 | 
156 |   private runTransition = (isVisible: Binary | Animated.Node<number>) => {
157 |     const { open: openingSpec, close: closingSpec } = this.props.transitionSpec;
158 | 
159 |     const toValue = cond(isVisible, 0, this.distance);
160 | 
161 |     return cond(eq(this.position, toValue), NOOP, [
162 |       cond(clockRunning(this.clock), NOOP, [
163 |         // Animation wasn't running before
164 |         // Set the initial values and start the clock
165 |         set(this.toValue, toValue),
166 |         set(this.frameTime, 0),
167 |         set(this.transitionState.time, 0),
168 |         set(this.transitionState.finished, FALSE),
169 |         set(this.isVisible, isVisible),
170 |         startClock(this.clock),
171 |       ]),
172 |       cond(
173 |         eq(toValue, 0),
174 |         openingSpec.timing === 'spring'
175 |           ? spring(
176 |               this.clock,
177 |               { ...this.transitionState, velocity: this.velocity },
178 |               { ...openingSpec.config, toValue: this.toValue }
179 |             )
180 |           : timing(
181 |               this.clock,
182 |               { ...this.transitionState, frameTime: this.frameTime },
183 |               { ...openingSpec.config, toValue: this.toValue }
184 |             ),
185 |         closingSpec.timing === 'spring'
186 |           ? spring(
187 |               this.clock,
188 |               { ...this.transitionState, velocity: this.velocity },
189 |               { ...closingSpec.config, toValue: this.toValue }
190 |             )
191 |           : timing(
192 |               this.clock,
193 |               { ...this.transitionState, frameTime: this.frameTime },
194 |               { ...closingSpec.config, toValue: this.toValue }
195 |             )
196 |       ),
197 |       cond(this.transitionState.finished, [
198 |         // Reset values
199 |         set(this.isSwipeGesture, FALSE),
200 |         set(this.gesture, 0),
201 |         set(this.velocity, 0),
202 |         // When the animation finishes, stop the clock
203 |         stopClock(this.clock),
204 |         call([this.isVisible], ([value]: ReadonlyArray<Binary>) => {
205 |           const isOpen = Boolean(value);
206 |           const { onOpen, onClose } = this.props;
207 | 
208 |           if (isOpen) {
209 |             onOpen && onOpen();
210 |           } else {
211 |             onClose && onClose();
212 |           }
213 |         }),
214 |       ]),
215 |     ]);
216 |   };
217 | 
218 |   private translate = block([
219 |     onChange(
220 |       this.isClosing,
221 |       cond(
222 |         this.isClosing,
223 |         set(this.nextIsVisible, FALSE),
224 |         set(this.nextIsVisible, TRUE)
225 |       )
226 |     ),
227 |     onChange(
228 |       this.nextIsVisible,
229 |       cond(neq(this.nextIsVisible, UNSET), [
230 |         // Stop any running animations
231 |         cond(clockRunning(this.clock), stopClock(this.clock)),
232 |         set(this.gesture, 0),
233 |         // Update the index to trigger the transition
234 |         set(this.isVisible, this.nextIsVisible),
235 |         set(this.nextIsVisible, UNSET),
236 |       ])
237 |     ),
238 |     // Synchronize the translation with the animated value representing the progress
239 |     set(
240 |       this.props.current,
241 |       cond(
242 |         or(eq(this.layout.width, 0), eq(this.layout.height, 0)),
243 |         this.isVisible,
244 |         interpolate(this.position, {
245 |           inputRange: [0, this.distance],
246 |           outputRange: [1, 0],
247 |         })
248 |       )
249 |     ),
250 |     cond(
251 |       eq(this.gestureState, GestureState.ACTIVE),
252 |       [
253 |         cond(this.isSwiping, NOOP, [
254 |           // We weren't dragging before, set it to true
255 |           set(this.isSwiping, TRUE),
256 |           set(this.isSwipeGesture, TRUE),
257 |           // Also update the drag offset to the last position
258 |           set(this.offset, this.position),
259 |         ]),
260 |         // Update position with next offset + gesture distance
261 |         set(this.position, max(add(this.offset, this.gesture), 0)),
262 |         // Stop animations while we're dragging
263 |         stopClock(this.clock),
264 |       ],
265 |       [
266 |         set(this.isSwiping, FALSE),
267 |         this.runTransition(
268 |           cond(
269 |             or(
270 |               and(
271 |                 greaterThan(abs(this.gesture), SWIPE_DISTANCE_MINIMUM),
272 |                 greaterThan(
273 |                   abs(this.velocity),
274 |                   SWIPE_VELOCITY_THRESHOLD_DEFAULT
275 |                 )
276 |               ),
277 |               cond(
278 |                 greaterThan(
279 |                   abs(this.gesture),
280 |                   SWIPE_DISTANCE_THRESHOLD_DEFAULT
281 |                 ),
282 |                 TRUE,
283 |                 FALSE
284 |               )
285 |             ),
286 |             cond(
287 |               lessThan(
288 |                 cond(eq(this.velocity, 0), this.gesture, this.velocity),
289 |                 0
290 |               ),
291 |               TRUE,
292 |               FALSE
293 |             ),
294 |             this.isVisible
295 |           )
296 |         ),
297 |       ]
298 |     ),
299 |     this.position,
300 |   ]);
301 | 
302 |   private handleGestureEventHorizontal = Animated.event([
303 |     {
304 |       nativeEvent: {
305 |         translationX: this.gesture,
306 |         velocityX: this.velocity,
307 |         state: this.gestureState,
308 |       },
309 |     },
310 |   ]);
311 | 
312 |   private handleGestureEventVertical = Animated.event([
313 |     {
314 |       nativeEvent: {
315 |         translationY: this.gesture,
316 |         velocityY: this.velocity,
317 |         state: this.gestureState,
318 |       },
319 |     },
320 |   ]);
321 | 
322 |   // We need to ensure that this style doesn't change unless absolutely needs to
323 |   // Changing it too often will result in huge frame drops due to detaching and attaching
324 |   // Changing it during an animations can result in unexpected results
325 |   private getInterpolatedStyle = memoize(
326 |     (
327 |       styleInterpolator: CardStyleInterpolator,
328 |       current: Animated.Node<number>,
329 |       next: Animated.Node<number> | undefined
330 |     ) =>
331 |       styleInterpolator({
332 |         positions: {
333 |           current,
334 |           next,
335 |         },
336 |         closing: this.isClosing,
337 |         layout: this.layout,
338 |       })
339 |   );
340 | 
341 |   render() {
342 |     const {
343 |       layout,
344 |       current,
345 |       next,
346 |       direction,
347 |       gesturesEnabled,
348 |       children,
349 |       styleInterpolator,
350 |       ...rest
351 |     } = this.props;
352 | 
353 |     const {
354 |       containerStyle,
355 |       cardStyle,
356 |       overlayStyle,
357 |     } = this.getInterpolatedStyle(styleInterpolator, current, next);
358 | 
359 |     const handleGestureEvent =
360 |       direction === 'vertical'
361 |         ? this.handleGestureEventVertical
362 |         : this.handleGestureEventHorizontal;
363 | 
364 |     return (
365 |       <View pointerEvents="box-none" {...rest}>
366 |         <Animated.Code exec={this.translate} />
367 |         {overlayStyle ? (
368 |           <Animated.View
369 |             pointerEvents="none"
370 |             style={[styles.overlay, overlayStyle]}
371 |           />
372 |         ) : null}
373 |         <Animated.View
374 |           style={[styles.container, containerStyle]}
375 |           pointerEvents="box-none"
376 |         >
377 |           <PanGestureHandler
378 |             enabled={layout.width !== 0 && gesturesEnabled}
379 |             onGestureEvent={handleGestureEvent}
380 |             onHandlerStateChange={handleGestureEvent}
381 |           >
382 |             <Animated.View style={[styles.card, cardStyle]}>
383 |               {children}
384 |             </Animated.View>
385 |           </PanGestureHandler>
386 |         </Animated.View>
387 |       </View>
388 |     );
389 |   }
390 | }
391 | 
392 | const styles = StyleSheet.create({
393 |   container: {
394 |     flex: 1,
395 |     overflow: 'hidden',
396 |   },
397 |   card: {
398 |     ...StyleSheet.absoluteFillObject,
399 |     shadowOffset: { width: -1, height: 1 },
400 |     shadowRadius: 5,
401 |     shadowColor: '#000',
402 |     backgroundColor: 'white',
403 |     elevation: 2,
404 |   },
405 |   overlay: {
406 |     ...StyleSheet.absoluteFillObject,
407 |     backgroundColor: '#000',
408 |   },
409 | });
410 | 


--------------------------------------------------------------------------------
/src/components/Header/HeaderAnimated.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { StyleSheet, StyleProp, ViewStyle } from 'react-native';
 3 | import HeaderBar from './HeaderBar';
 4 | import HeaderSegment from './HeaderSegment';
 5 | import { Route, Scene, Layout, HeaderStyleInterpolator } from '../../types';
 6 | 
 7 | type Props<T extends Route> = {
 8 |   layout: Layout;
 9 |   onGoBack: (props: { route: T }) => void;
10 |   scenes: Scene<T>[];
11 |   styleInterpolator: HeaderStyleInterpolator;
12 |   style?: StyleProp<ViewStyle>;
13 | };
14 | 
15 | export default function HeaderAnimated<T extends Route>({
16 |   scenes,
17 |   layout,
18 |   onGoBack,
19 |   styleInterpolator,
20 | }: Props<T>) {
21 |   return (
22 |     <HeaderBar layout={layout}>
23 |       {scenes.map((scene, i, self) => {
24 |         const previous = self[i - 1];
25 |         const next = self[i + 1];
26 | 
27 |         return (
28 |           <HeaderSegment
29 |             key={scene.route.key}
30 |             layout={layout}
31 |             scene={scene}
32 |             previous={previous}
33 |             next={next}
34 |             onGoBack={
35 |               previous ? () => onGoBack({ route: scene.route }) : undefined
36 |             }
37 |             styleInterpolator={styleInterpolator}
38 |             style={StyleSheet.absoluteFill}
39 |           />
40 |         );
41 |       })}
42 |     </HeaderBar>
43 |   );
44 | }
45 | 


--------------------------------------------------------------------------------
/src/components/Header/HeaderBackButton.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import {
  3 |   I18nManager,
  4 |   Image,
  5 |   View,
  6 |   Platform,
  7 |   StyleSheet,
  8 |   LayoutChangeEvent,
  9 |   MaskedViewIOS,
 10 | } from 'react-native';
 11 | import Animated from 'react-native-reanimated';
 12 | import TouchableItem from '../TouchableItem';
 13 | import { Layout } from '../../types';
 14 | 
 15 | type Props = {
 16 |   disabled?: boolean;
 17 |   onPress: () => void;
 18 |   pressColorAndroid?: string;
 19 |   backImage?: (props: { tintColor: string; title?: string }) => React.ReactNode;
 20 |   tintColor: string;
 21 |   title?: string;
 22 |   fallbackTitle?: string;
 23 |   backTitleVisible?: boolean;
 24 |   allowFontScaling?: boolean;
 25 |   titleStyle?: React.ComponentProps<typeof Animated.Text>['style'];
 26 |   onTitleLayout?: (e: LayoutChangeEvent) => void;
 27 |   layout?: Layout;
 28 | };
 29 | 
 30 | type State = {
 31 |   initialTitleWidth?: number;
 32 | };
 33 | 
 34 | class HeaderBackButton extends React.Component<Props, State> {
 35 |   static defaultProps = {
 36 |     pressColorAndroid: 'rgba(0, 0, 0, .32)',
 37 |     tintColor: Platform.select({
 38 |       ios: '#037aff',
 39 |       web: '#5f6368',
 40 |     }),
 41 |     backTitleVisible: Platform.OS === 'ios',
 42 |     fallbackTitle: 'Back',
 43 |   };
 44 | 
 45 |   state: State = {};
 46 | 
 47 |   private handleTitleLayout = (e: LayoutChangeEvent) => {
 48 |     const { onTitleLayout } = this.props;
 49 | 
 50 |     onTitleLayout && onTitleLayout(e);
 51 | 
 52 |     if (this.state.initialTitleWidth) {
 53 |       return;
 54 |     }
 55 | 
 56 |     this.setState({
 57 |       initialTitleWidth: e.nativeEvent.layout.x + e.nativeEvent.layout.width,
 58 |     });
 59 |   };
 60 | 
 61 |   private renderBackImage() {
 62 |     const { backImage, backTitleVisible, tintColor } = this.props;
 63 | 
 64 |     let title = this.getTitleText();
 65 | 
 66 |     if (backImage) {
 67 |       return backImage({ tintColor, title });
 68 |     } else {
 69 |       return (
 70 |         <Image
 71 |           style={[
 72 |             styles.icon,
 73 |             !!backTitleVisible && styles.iconWithTitle,
 74 |             !!tintColor && { tintColor },
 75 |           ]}
 76 |           source={require('../../assets/back-icon.png')}
 77 |           fadeDuration={0}
 78 |         />
 79 |       );
 80 |     }
 81 |   }
 82 | 
 83 |   private getTitleText = () => {
 84 |     const { layout, title, fallbackTitle } = this.props;
 85 | 
 86 |     let { initialTitleWidth } = this.state;
 87 | 
 88 |     if (!title) {
 89 |       return fallbackTitle;
 90 |     } else if (
 91 |       initialTitleWidth &&
 92 |       layout &&
 93 |       initialTitleWidth > layout.width / 4
 94 |     ) {
 95 |       return fallbackTitle;
 96 |     } else {
 97 |       return title;
 98 |     }
 99 |   };
100 | 
101 |   private maybeRenderTitle() {
102 |     const {
103 |       allowFontScaling,
104 |       backTitleVisible,
105 |       backImage,
106 |       titleStyle,
107 |       tintColor,
108 |       layout,
109 |     } = this.props;
110 | 
111 |     let backTitleText = this.getTitleText();
112 | 
113 |     if (!backTitleVisible || backTitleText === undefined) {
114 |       return null;
115 |     }
116 | 
117 |     const title = (
118 |       <Animated.Text
119 |         accessible={false}
120 |         onLayout={this.handleTitleLayout}
121 |         style={[
122 |           styles.title,
123 |           layout ? { marginRight: layout.width / 2 } : null,
124 |           tintColor ? { color: tintColor } : null,
125 |           titleStyle,
126 |         ]}
127 |         numberOfLines={1}
128 |         allowFontScaling={!!allowFontScaling}
129 |       >
130 |         {this.getTitleText()}
131 |       </Animated.Text>
132 |     );
133 | 
134 |     if (backImage) {
135 |       return title;
136 |     }
137 | 
138 |     return (
139 |       <MaskedViewIOS
140 |         maskElement={
141 |           <View style={styles.iconMaskContainer}>
142 |             <Image
143 |               source={require('../../assets/back-icon-mask.png')}
144 |               style={styles.iconMask}
145 |             />
146 |             <View style={styles.iconMaskFillerRect} />
147 |           </View>
148 |         }
149 |       >
150 |         {title}
151 |       </MaskedViewIOS>
152 |     );
153 |   }
154 | 
155 |   render() {
156 |     const { onPress, pressColorAndroid, title, disabled } = this.props;
157 | 
158 |     return (
159 |       <TouchableItem
160 |         disabled={disabled}
161 |         accessible
162 |         accessibilityRole="button"
163 |         accessibilityComponentType="button"
164 |         accessibilityLabel={title ? `${title}, back` : 'Go back'}
165 |         accessibilityTraits="button"
166 |         testID="header-back"
167 |         delayPressIn={0}
168 |         onPress={disabled ? undefined : onPress}
169 |         pressColor={pressColorAndroid}
170 |         style={[styles.container, disabled && styles.disabled]}
171 |         hitSlop={Platform.select({
172 |           ios: undefined,
173 |           default: { top: 8, right: 8, bottom: 8, left: 8 },
174 |         })}
175 |         borderless
176 |       >
177 |         <React.Fragment>
178 |           {this.renderBackImage()}
179 |           {this.maybeRenderTitle()}
180 |         </React.Fragment>
181 |       </TouchableItem>
182 |     );
183 |   }
184 | }
185 | 
186 | const styles = StyleSheet.create({
187 |   container: {
188 |     alignItems: 'center',
189 |     flexDirection: 'row',
190 |     ...Platform.select({
191 |       ios: null,
192 |       default: {
193 |         marginVertical: 3,
194 |         marginHorizontal: 11,
195 |       },
196 |     }),
197 |   },
198 |   disabled: {
199 |     opacity: 0.5,
200 |   },
201 |   title: {
202 |     fontSize: 17,
203 |   },
204 |   icon: Platform.select({
205 |     ios: {
206 |       height: 21,
207 |       width: 13,
208 |       marginLeft: 8,
209 |       marginRight: 22,
210 |       marginVertical: 12,
211 |       resizeMode: 'contain',
212 |       transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
213 |     },
214 |     default: {
215 |       height: 24,
216 |       width: 24,
217 |       margin: 3,
218 |       resizeMode: 'contain',
219 |       transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
220 |     },
221 |   }),
222 |   iconWithTitle:
223 |     Platform.OS === 'ios'
224 |       ? {
225 |           marginRight: 6,
226 |         }
227 |       : {},
228 |   iconMaskContainer: {
229 |     flex: 1,
230 |     flexDirection: 'row',
231 |     justifyContent: 'center',
232 |   },
233 |   iconMaskFillerRect: {
234 |     flex: 1,
235 |     backgroundColor: '#000',
236 |   },
237 |   iconMask: {
238 |     height: 21,
239 |     width: 13,
240 |     marginLeft: -14.5,
241 |     marginVertical: 12,
242 |     alignSelf: 'center',
243 |     resizeMode: 'contain',
244 |     transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
245 |   },
246 | });
247 | 
248 | export default HeaderBackButton;
249 | 


--------------------------------------------------------------------------------
/src/components/Header/HeaderBar.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { View, StyleSheet, Platform, ViewProps, StatusBar } from 'react-native';
 3 | import { Layout } from '../../types';
 4 | 
 5 | type Props = ViewProps & {
 6 |   children: React.ReactNode;
 7 |   layout: Layout;
 8 | };
 9 | 
10 | const STATUSBAR_HEIGHT = Platform.select({
11 |   ios: 20,
12 |   default: StatusBar.currentHeight,
13 | });
14 | 
15 | const getHeaderHeight = (layout: Layout) => {
16 |   const isLandscape = layout.width > layout.height;
17 | 
18 |   if (Platform.OS === 'ios') {
19 |     // @ts-ignore
20 |     if (isLandscape && !Platform.isPad) {
21 |       return 32;
22 |     } else {
23 |       return 44;
24 |     }
25 |   } else if (Platform.OS === 'android') {
26 |     return 56;
27 |   } else {
28 |     return 64;
29 |   }
30 | };
31 | 
32 | export default function HeaderBar({ layout, style, children, ...rest }: Props) {
33 |   return (
34 |     <View {...rest} style={[styles.container, style]}>
35 |       <View
36 |         style={{ height: getHeaderHeight(layout), marginTop: STATUSBAR_HEIGHT }}
37 |       >
38 |         {children}
39 |       </View>
40 |     </View>
41 |   );
42 | }
43 | 
44 | const styles = StyleSheet.create({
45 |   container: {
46 |     backgroundColor: 'white',
47 |     ...Platform.select({
48 |       android: {
49 |         elevation: 4,
50 |       },
51 |       ios: {
52 |         borderBottomWidth: StyleSheet.hairlineWidth,
53 |         borderBottomColor: '#A7A7AA',
54 |       },
55 |       default: {
56 |         // https://github.com/necolas/react-native-web/issues/44
57 |         // Material Design
58 |         boxShadow: `0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12)`,
59 |       },
60 |     }),
61 |   },
62 | });
63 | 


--------------------------------------------------------------------------------
/src/components/Header/HeaderSegment.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import {
  3 |   View,
  4 |   StyleSheet,
  5 |   StyleProp,
  6 |   ViewStyle,
  7 |   LayoutChangeEvent,
  8 |   Platform,
  9 | } from 'react-native';
 10 | import Animated from 'react-native-reanimated';
 11 | import HeaderTitle from './HeaderTitle';
 12 | import HeaderBackButton from './HeaderBackButton';
 13 | import memoize from '../../utils/memoize';
 14 | import { Route, Scene, Layout, HeaderStyleInterpolator } from '../../types';
 15 | 
 16 | type Props<T extends Route> = {
 17 |   layout: Layout;
 18 |   onGoBack?: () => void;
 19 |   scene: Scene<T>;
 20 |   previous?: Scene<T>;
 21 |   next?: Scene<T>;
 22 |   styleInterpolator: HeaderStyleInterpolator;
 23 |   style?: StyleProp<ViewStyle>;
 24 | };
 25 | 
 26 | type State = {
 27 |   titleLayout?: Layout;
 28 |   backTitleLayout?: Layout;
 29 | };
 30 | 
 31 | export default class HeaderSegment<T extends Route> extends React.Component<
 32 |   Props<T>,
 33 |   State
 34 | > {
 35 |   state: State = {};
 36 | 
 37 |   private handleTitleLayout = (e: LayoutChangeEvent) => {
 38 |     const { height, width } = e.nativeEvent.layout;
 39 | 
 40 |     this.setState({ titleLayout: { height, width } });
 41 |   };
 42 | 
 43 |   private handleBackTitleLayout = (e: LayoutChangeEvent) => {
 44 |     const { height, width } = e.nativeEvent.layout;
 45 | 
 46 |     this.setState({ backTitleLayout: { height, width } });
 47 |   };
 48 | 
 49 |   private getInterpolatedStyle = memoize(
 50 |     (
 51 |       styleInterpolator: HeaderStyleInterpolator,
 52 |       layout: Layout,
 53 |       current: Animated.Node<number>,
 54 |       next: Animated.Node<number> | undefined,
 55 |       titleLayout: Layout | undefined,
 56 |       backTitleLayout: Layout | undefined
 57 |     ) =>
 58 |       styleInterpolator({
 59 |         positions: {
 60 |           current,
 61 |           next,
 62 |         },
 63 |         layouts: {
 64 |           screen: layout,
 65 |           title: titleLayout,
 66 |           backTitle: backTitleLayout,
 67 |         },
 68 |       })
 69 |   );
 70 | 
 71 |   render() {
 72 |     const {
 73 |       scene,
 74 |       previous,
 75 |       next,
 76 |       layout,
 77 |       onGoBack,
 78 |       styleInterpolator,
 79 |       style,
 80 |     } = this.props;
 81 | 
 82 |     const { backTitleLayout, titleLayout } = this.state;
 83 | 
 84 |     const {
 85 |       titleStyle,
 86 |       leftButtonStyle,
 87 |       backTitleStyle,
 88 |     } = this.getInterpolatedStyle(
 89 |       styleInterpolator,
 90 |       layout,
 91 |       scene.progress,
 92 |       next ? next.progress : undefined,
 93 |       titleLayout,
 94 |       previous && previous.title ? backTitleLayout : undefined
 95 |     );
 96 | 
 97 |     return (
 98 |       <View style={[styles.container, style]}>
 99 |         {onGoBack ? (
100 |           <Animated.View style={[styles.left, leftButtonStyle]}>
101 |             <HeaderBackButton
102 |               onPress={onGoBack}
103 |               title={previous ? previous.title : undefined}
104 |               titleStyle={backTitleStyle}
105 |               onTitleLayout={this.handleBackTitleLayout}
106 |               layout={layout}
107 |             />
108 |           </Animated.View>
109 |         ) : null}
110 |         {scene.title ? (
111 |           <HeaderTitle
112 |             onLayout={this.handleTitleLayout}
113 |             style={[
114 |               styles.title,
115 |               Platform.select({
116 |                 ios: null,
117 |                 default: { left: onGoBack ? 72 : 16 },
118 |               }),
119 |               titleStyle,
120 |             ]}
121 |           >
122 |             {scene.title}
123 |           </HeaderTitle>
124 |         ) : null}
125 |       </View>
126 |     );
127 |   }
128 | }
129 | 
130 | const styles = StyleSheet.create({
131 |   container: {
132 |     paddingHorizontal: 4,
133 |     flexDirection: 'row',
134 |     alignItems: 'center',
135 |     justifyContent: 'center',
136 |   },
137 |   left: {
138 |     position: 'absolute',
139 |     left: 0,
140 |     top: 0,
141 |     bottom: 0,
142 |     justifyContent: 'center',
143 |   },
144 |   title: Platform.select({
145 |     ios: {},
146 |     default: { position: 'absolute' },
147 |   }),
148 | });
149 | 


--------------------------------------------------------------------------------
/src/components/Header/HeaderSimple.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { StyleSheet, StyleProp, ViewStyle } from 'react-native';
 3 | import HeaderBar from './HeaderBar';
 4 | import { Route, Scene, HeaderStyleInterpolator, Layout } from '../../types';
 5 | import HeaderSegment from './HeaderSegment';
 6 | 
 7 | type Props<T extends Route> = {
 8 |   layout: Layout;
 9 |   onGoBack?: () => void;
10 |   scene: Scene<T>;
11 |   previous?: Scene<T>;
12 |   next?: Scene<T>;
13 |   styleInterpolator: HeaderStyleInterpolator;
14 |   style?: StyleProp<ViewStyle>;
15 | };
16 | 
17 | export default function HeaderSimple<T extends Route>({
18 |   layout,
19 |   style,
20 |   ...rest
21 | }: Props<T>) {
22 |   return (
23 |     <HeaderBar layout={layout} style={style}>
24 |       <HeaderSegment {...rest} layout={layout} style={styles.container} />
25 |     </HeaderBar>
26 |   );
27 | }
28 | 
29 | const styles = StyleSheet.create({
30 |   container: {
31 |     flex: 1,
32 |   },
33 | });
34 | 


--------------------------------------------------------------------------------
/src/components/Header/HeaderTitle.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { StyleSheet, Platform } from 'react-native';
 3 | import Animated from 'react-native-reanimated';
 4 | 
 5 | type Props = React.ComponentProps<typeof Animated.Text> & {
 6 |   children: string;
 7 | };
 8 | 
 9 | export default function HeaderTitle({ style, ...rest }: Props) {
10 |   return <Animated.Text {...rest} style={[styles.title, style]} />;
11 | }
12 | 
13 | const styles = StyleSheet.create({
14 |   title: Platform.select({
15 |     ios: {
16 |       fontSize: 17,
17 |       fontWeight: '600',
18 |       color: 'rgba(0, 0, 0, .9)',
19 |     },
20 |     android: {
21 |       fontSize: 20,
22 |       fontWeight: '500',
23 |       color: 'rgba(0, 0, 0, .9)',
24 |     },
25 |     default: {
26 |       fontSize: 18,
27 |       fontWeight: '400',
28 |       color: '#3c4043',
29 |     },
30 |   }),
31 | });
32 | 


--------------------------------------------------------------------------------
/src/components/Stack.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import { View, StyleSheet, LayoutChangeEvent } from 'react-native';
  3 | import Animated from 'react-native-reanimated';
  4 | import Card from './Card';
  5 | import HeaderAnimated from './Header/HeaderAnimated';
  6 | import {
  7 |   Route,
  8 |   Layout,
  9 |   TransitionSpec,
 10 |   CardStyleInterpolator,
 11 |   HeaderStyleInterpolator,
 12 | } from '../types';
 13 | import HeaderSimple from './Header/HeaderSimple';
 14 | 
 15 | export type SceneProps<T> = {
 16 |   route: T;
 17 |   index: number;
 18 | };
 19 | 
 20 | type ProgressValues = {
 21 |   [key: string]: Animated.Value<number>;
 22 | };
 23 | 
 24 | type Props<T extends Route> = {
 25 |   routes: T[];
 26 |   initialRoutes: string[];
 27 |   closingRoutes: string[];
 28 |   onGoBack: (props: { route: T }) => void;
 29 |   onCloseRoute: (props: { route: T }) => void;
 30 |   renderScene: (props: SceneProps<T>) => React.ReactNode;
 31 |   headerMode: 'screen' | 'float';
 32 |   direction: 'horizontal' | 'vertical';
 33 |   transitionSpec: {
 34 |     open: TransitionSpec;
 35 |     close: TransitionSpec;
 36 |   };
 37 |   cardStyleInterpolator: CardStyleInterpolator;
 38 |   headerStyleInterpolator: HeaderStyleInterpolator;
 39 | };
 40 | 
 41 | type State<T> = {
 42 |   routes: T[];
 43 |   progress: ProgressValues;
 44 |   layout: Layout;
 45 | };
 46 | 
 47 | export default class Stack<T extends Route> extends React.Component<
 48 |   Props<T>,
 49 |   State<T>
 50 | > {
 51 |   static getDerivedStateFromProps(props: Props<Route>, state: State<Route>) {
 52 |     if (props.routes === state.routes) {
 53 |       return null;
 54 |     }
 55 | 
 56 |     return {
 57 |       progress: props.routes.reduce(
 58 |         (acc, curr) => {
 59 |           acc[curr.key] = state.progress[curr.key] || new Animated.Value(0);
 60 | 
 61 |           return acc;
 62 |         },
 63 |         {} as ProgressValues
 64 |       ),
 65 |       routes: props.routes,
 66 |     };
 67 |   }
 68 | 
 69 |   state: State<T> = {
 70 |     routes: [],
 71 |     progress: {},
 72 |     layout: { width: 0, height: 0 },
 73 |   };
 74 | 
 75 |   private handleLayout = (e: LayoutChangeEvent) => {
 76 |     const { height, width } = e.nativeEvent.layout;
 77 | 
 78 |     this.setState({ layout: { width, height } });
 79 |   };
 80 | 
 81 |   render() {
 82 |     const {
 83 |       routes,
 84 |       initialRoutes,
 85 |       closingRoutes,
 86 |       onGoBack,
 87 |       onCloseRoute,
 88 |       renderScene,
 89 |       headerMode,
 90 |       direction,
 91 |       transitionSpec,
 92 |       cardStyleInterpolator,
 93 |       headerStyleInterpolator,
 94 |     } = this.props;
 95 |     const { layout, progress } = this.state;
 96 | 
 97 |     return (
 98 |       <React.Fragment>
 99 |         {headerMode === 'float' ? (
100 |           <HeaderAnimated
101 |             layout={layout}
102 |             scenes={routes.map((route, i) => ({
103 |               route,
104 |               progress: progress[route.key],
105 |               title: i % 2 ? `Screen ${i}` : `Foo ${i}`,
106 |             }))}
107 |             onGoBack={onGoBack}
108 |             styleInterpolator={headerStyleInterpolator}
109 |           />
110 |         ) : null}
111 |         <View
112 |           style={styles.container}
113 |           onLayout={this.handleLayout}
114 |           pointerEvents={layout.height && layout.width ? 'box-none' : 'none'}
115 |         >
116 |           {routes.map((route, index, self) => {
117 |             const focused = index === self.length - 1;
118 |             const current = progress[route.key];
119 |             const next = self[index + 1]
120 |               ? progress[self[index + 1].key]
121 |               : undefined;
122 | 
123 |             return (
124 |               <Card
125 |                 key={route.key}
126 |                 direction={direction}
127 |                 layout={layout}
128 |                 current={current}
129 |                 next={next}
130 |                 closing={closingRoutes.includes(route.key)}
131 |                 onClose={() => onCloseRoute({ route })}
132 |                 animateIn={!initialRoutes.includes(route.key)}
133 |                 gesturesEnabled={index !== 0}
134 |                 transitionSpec={transitionSpec}
135 |                 styleInterpolator={cardStyleInterpolator}
136 |                 accessibilityElementsHidden={!focused}
137 |                 importantForAccessibility={
138 |                   focused ? 'auto' : 'no-hide-descendants'
139 |                 }
140 |                 pointerEvents="box-none"
141 |                 style={StyleSheet.absoluteFill}
142 |               >
143 |                 {headerMode === 'screen' ? (
144 |                   <HeaderSimple
145 |                     scene={{
146 |                       route,
147 |                       title: index % 2 ? `Screen ${index}` : `Foo ${index}`,
148 |                       progress: current
149 |                     }}
150 |                     onGoBack={
151 |                       index !== 0 ? () => onGoBack({ route }) : undefined
152 |                     }
153 |                     layout={layout}
154 |                     styleInterpolator={headerStyleInterpolator}
155 |                   />
156 |                 ) : null}
157 |                 {renderScene({
158 |                   route,
159 |                   index,
160 |                 })}
161 |               </Card>
162 |             );
163 |           })}
164 |         </View>
165 |       </React.Fragment>
166 |     );
167 |   }
168 | }
169 | 
170 | const styles = StyleSheet.create({
171 |   container: {
172 |     flex: 1,
173 |     overflow: 'hidden',
174 |   },
175 | });
176 | 


--------------------------------------------------------------------------------
/src/components/TouchableItem.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * TouchableItem renders a touchable that looks native on both iOS and Android.
 3 |  *
 4 |  * It provides an abstraction on top of TouchableNativeFeedback and
 5 |  * TouchableOpacity.
 6 |  *
 7 |  * On iOS you can pass the props of TouchableOpacity, on Android pass the props
 8 |  * of TouchableNativeFeedback.
 9 |  */
10 | import * as React from 'react';
11 | import {
12 |   Platform,
13 |   TouchableNativeFeedback,
14 |   TouchableOpacity,
15 |   View,
16 |   ViewProps,
17 | } from 'react-native';
18 | 
19 | import BorderlessButton from './BorderlessButton';
20 | 
21 | type Props = ViewProps & {
22 |   pressColor: string;
23 |   disabled?: boolean;
24 |   borderless?: boolean;
25 |   delayPressIn?: number;
26 |   onPress?: () => void;
27 | };
28 | 
29 | const ANDROID_VERSION_LOLLIPOP = 21;
30 | 
31 | export default class TouchableItem extends React.Component<Props> {
32 |   static defaultProps = {
33 |     borderless: false,
34 |     pressColor: 'rgba(0, 0, 0, .32)',
35 |   };
36 | 
37 |   render() {
38 |     /*
39 |      * TouchableNativeFeedback.Ripple causes a crash on old Android versions,
40 |      * therefore only enable it on Android Lollipop and above.
41 |      *
42 |      * All touchables on Android should have the ripple effect according to
43 |      * platform design guidelines.
44 |      * We need to pass the background prop to specify a borderless ripple effect.
45 |      */
46 |     if (
47 |       Platform.OS === 'android' &&
48 |       Platform.Version >= ANDROID_VERSION_LOLLIPOP
49 |     ) {
50 |       const { style, ...rest } = this.props;
51 |       return (
52 |         <TouchableNativeFeedback
53 |           {...rest}
54 |           style={null}
55 |           background={TouchableNativeFeedback.Ripple(
56 |             this.props.pressColor,
57 |             this.props.borderless
58 |           )}
59 |         >
60 |           <View style={style}>{React.Children.only(this.props.children)}</View>
61 |         </TouchableNativeFeedback>
62 |       );
63 |     } else if (Platform.OS === 'ios') {
64 |       return (
65 |         <BorderlessButton
66 |           hitSlop={{ top: 10, bottom: 10, right: 10, left: 10 }}
67 |           disallowInterruption
68 |           enabled={!this.props.disabled}
69 |           {...this.props}
70 |         >
71 |           {this.props.children}
72 |         </BorderlessButton>
73 |       );
74 |     } else {
75 |       return (
76 |         <TouchableOpacity {...this.props}>
77 |           {this.props.children}
78 |         </TouchableOpacity>
79 |       );
80 |     }
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/src/types.tsx:
--------------------------------------------------------------------------------
 1 | import Animated from 'react-native-reanimated';
 2 | 
 3 | export type Route = { key: string };
 4 | 
 5 | export type Scene<T extends Route> = {
 6 |   title?: string;
 7 |   route: T;
 8 |   progress: Animated.Node<number>;
 9 | };
10 | 
11 | export type Layout = { width: number; height: number };
12 | 
13 | export type SpringConfig = {
14 |   damping: number;
15 |   mass: number;
16 |   stiffness: number;
17 |   restSpeedThreshold: number;
18 |   restDisplacementThreshold: number;
19 |   overshootClamping: boolean;
20 | };
21 | 
22 | export type TimingConfig = {
23 |   duration: number;
24 |   easing: Animated.EasingFunction;
25 | };
26 | 
27 | export type TransitionSpec =
28 |   | { timing: 'spring'; config: SpringConfig }
29 |   | { timing: 'timing'; config: TimingConfig };
30 | 
31 | export type CardInterpolationProps = {
32 |   positions: {
33 |     current: Animated.Node<number>;
34 |     next?: Animated.Node<number>;
35 |   };
36 |   closing: Animated.Node<0 | 1>;
37 |   layout: {
38 |     width: Animated.Node<number>;
39 |     height: Animated.Node<number>;
40 |   };
41 | };
42 | 
43 | export type CardInterpolatedStyle = {
44 |   containerStyle?: any;
45 |   cardStyle?: any;
46 |   overlayStyle?: any;
47 | };
48 | 
49 | export type CardStyleInterpolator = (
50 |   props: CardInterpolationProps
51 | ) => CardInterpolatedStyle;
52 | 
53 | export type HeaderInterpolationProps = {
54 |   positions: {
55 |     current: Animated.Node<number>;
56 |     next?: Animated.Node<number>;
57 |   };
58 |   layouts: {
59 |     screen: Layout;
60 |     title?: Layout;
61 |     backTitle?: Layout;
62 |   };
63 | };
64 | 
65 | export type HeaderInterpolatedStyle = {
66 |   backTitleStyle?: any;
67 |   leftButtonStyle?: any;
68 |   titleStyle?: any;
69 | };
70 | 
71 | export type HeaderStyleInterpolator = (
72 |   props: HeaderInterpolationProps
73 | ) => HeaderInterpolatedStyle;
74 | 
75 | export type TransitionPreset = {
76 |   direction: 'horizontal' | 'vertical';
77 |   headerMode: 'float' | 'screen';
78 |   transitionSpec: {
79 |     open: TransitionSpec;
80 |     close: TransitionSpec;
81 |   };
82 |   cardStyleInterpolator: CardStyleInterpolator;
83 |   headerStyleInterpolator: HeaderStyleInterpolator;
84 | };
85 | 


--------------------------------------------------------------------------------
/src/utils/memoize.tsx:
--------------------------------------------------------------------------------
 1 | export default function memoize<Result, Deps extends ReadonlyArray<any>>(
 2 |   callback: (...deps: Deps) => Result
 3 | ) {
 4 |   let previous: Deps | undefined;
 5 |   let result: Result | undefined;
 6 | 
 7 |   return (...dependencies: Deps): Result => {
 8 |     let hasChanged = false;
 9 | 
10 |     if (previous) {
11 |       if (previous.length !== dependencies.length) {
12 |         hasChanged = true;
13 |       } else {
14 |         for (let i = 0; i < previous.length; i++) {
15 |           if (previous[i] !== dependencies[i]) {
16 |             hasChanged = true;
17 |             break;
18 |           }
19 |         }
20 |       }
21 |     } else {
22 |       hasChanged = true;
23 |     }
24 | 
25 |     previous = dependencies;
26 | 
27 |     if (hasChanged || result === undefined) {
28 |       result = callback(...dependencies);
29 |     }
30 | 
31 |     return result;
32 |   };
33 | }
34 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowUnreachableCode": false,
 4 |     "allowUnusedLabels": false,
 5 |     "esModuleInterop": true,
 6 |     "forceConsistentCasingInFileNames": true,
 7 |     "jsx": "react",
 8 |     "lib": ["esnext"],
 9 |     "module": "esnext",
10 |     "moduleResolution": "node",
11 |     "noFallthroughCasesInSwitch": true,
12 |     "noImplicitReturns": true,
13 |     "noImplicitUseStrict": false,
14 |     "noStrictGenericChecks": false,
15 |     "noUnusedLocals": true,
16 |     "noUnusedParameters": true,
17 |     "resolveJsonModule": true,
18 |     "skipLibCheck": true,
19 |     "strict": true,
20 |     "target": "esnext"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------