kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-03-06 17:34:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: sync latest stack

Browse Source
This commit is contained in:
Satyajit Sahoo
2020-06-06 02:28:20 +02:00
parent 1ee8c76df3
commit 03f9f8cd8e
11 changed files with 498 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/stack/package.json
View File

@@ -45,7 +45,7 @@
"devDependencies": {
"@react-native-community/bob": "^0.10.0",
"@react-native-community/masked-view": "^0.1.7",
"@react-navigation/stack": "^5.3.6",
"@react-navigation/stack": "^5.4.2",
"@types/color": "^3.0.1",
"@types/react": "^16.9.23",
"@types/react-native": "^0.61.22",

70
packages/stack/scripts/stack.patch
View File

@@ -1,6 +1,6 @@
diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.tsx
--- ../../node_modules/@react-navigation/stack/src/index.tsx 2020-05-11 17:55:45.000000000 +0200
+++ src/vendor/index.tsx 2020-05-11 18:29:57.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/index.tsx 2020-06-06 02:18:25.000000000 +0200
+++ src/vendor/index.tsx 2020-06-06 02:22:30.000000000 +0200
@@ -3,11 +3,6 @@
import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs';
import * as TransitionPresets from './TransitionConfigs/TransitionPresets';
@@ -28,7 +28,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/i
StackHeaderLeftButtonProps,
StackHeaderTitleProps,
diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx src/vendor/navigators/createStackNavigator.tsx
--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-05-11 17:55:45.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-06-06 02:18:25.000000000 +0200
+++ src/vendor/navigators/createStackNavigator.tsx 1970-01-01 01:00:00.000000000 +0100
@@ -1,96 +0,0 @@
-import * as React from 'react';
@@ -128,8 +128,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStack
- typeof StackNavigator
->(StackNavigator);
diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.tsx
--- ../../node_modules/@react-navigation/stack/src/types.tsx 2020-05-11 17:55:45.000000000 +0200
+++ src/vendor/types.tsx 2020-05-11 18:29:52.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/types.tsx 2020-06-06 02:18:25.000000000 +0200
+++ src/vendor/types.tsx 2020-06-06 02:22:30.000000000 +0200
@@ -8,15 +8,28 @@
} from 'react-native';
import { EdgeInsets } from 'react-native-safe-area-context';
@@ -262,8 +262,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
export type StackNavigationConfig = {
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx src/vendor/views/Header/Header.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-05-11 17:55:45.000000000 +0200
+++ src/vendor/views/Header/Header.tsx 2020-05-11 18:16:24.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-06-06 02:18:25.000000000 +0200
+++ src/vendor/views/Header/Header.tsx 2020-06-06 02:22:30.000000000 +0200
@@ -1,12 +1,14 @@
import * as React from 'react';
-import { StackActions } from '@react-navigation/native';
@@ -344,8 +344,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
+
+export default Header;
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx src/vendor/views/Header/HeaderBackButton.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-05-11 17:55:45.000000000 +0200
+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-05-11 18:05:10.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-06-06 02:18:25.000000000 +0200
+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-06-06 02:22:30.000000000 +0200
@@ -8,9 +8,9 @@
StyleSheet,
LayoutChangeEvent,
@@ -358,19 +358,20 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBac
type Props = StackHeaderLeftButtonProps;
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx src/vendor/views/Header/HeaderBackground.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-05-11 17:55:45.000000000 +0200
+++ src/vendor/views/Header/HeaderBackground.tsx 2020-05-11 18:05:10.000000000 +0200
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Animated, StyleSheet, Platform, ViewProps } from 'react-native';
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-06-06 02:18:25.000000000 +0200
+++ src/vendor/views/Header/HeaderBackground.tsx 2020-06-06 02:23:41.000000000 +0200
@@ -7,7 +7,7 @@
StyleProp,
ViewStyle,
} from 'react-native';
-import { useTheme } from '@react-navigation/native';
+import useTheme from '../../../utils/useTheme';
type Props = ViewProps & {
children?: React.ReactNode;
style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx src/vendor/views/Header/HeaderContainer.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-05-11 17:55:45.000000000 +0200
+++ src/vendor/views/Header/HeaderContainer.tsx 2020-05-11 18:05:10.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-06-06 02:18:25.000000000 +0200
+++ src/vendor/views/Header/HeaderContainer.tsx 2020-06-06 02:22:30.000000000 +0200
@@ -1,11 +1,6 @@
import * as React from 'react';
import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
@@ -422,8 +423,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
);
})}
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx src/vendor/views/Header/HeaderSegment.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-05-11 17:55:45.000000000 +0200
+++ src/vendor/views/Header/HeaderSegment.tsx 2020-05-11 18:17:37.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-06-06 02:18:25.000000000 +0200
+++ src/vendor/views/Header/HeaderSegment.tsx 2020-06-06 02:22:30.000000000 +0200
@@ -8,7 +8,7 @@
ViewStyle,
} from 'react-native';
@@ -443,8 +444,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSeg
};
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx src/vendor/views/Header/HeaderTitle.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-05-11 17:55:45.000000000 +0200
+++ src/vendor/views/Header/HeaderTitle.tsx 2020-05-11 18:17:37.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-06-06 02:18:25.000000000 +0200
+++ src/vendor/views/Header/HeaderTitle.tsx 2020-06-06 02:22:30.000000000 +0200
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Animated, StyleSheet, Platform } from 'react-native';
@@ -454,9 +455,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTit
type Props = Omit<React.ComponentProps<typeof Animated.Text>, 'key'> & {
tintColor?: string;
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx src/vendor/views/Stack/Card.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-05-11 17:55:45.000000000 +0200
+++ src/vendor/views/Stack/Card.tsx 2020-05-11 18:05:10.000000000 +0200
@@ -140,7 +140,7 @@
--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-06-06 02:18:25.000000000 +0200
+++ src/vendor/views/Stack/Card.tsx 2020-06-06 02:22:30.000000000 +0200
@@ -146,7 +146,7 @@
private interactionHandle: number | undefined;
@@ -466,8 +467,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx s
private animate = ({
closing,
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx src/vendor/views/Stack/CardContainer.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-05-11 17:55:45.000000000 +0200
+++ src/vendor/views/Stack/CardContainer.tsx 2020-05-11 18:33:41.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-06-06 02:18:25.000000000 +0200
+++ src/vendor/views/Stack/CardContainer.tsx 2020-06-06 02:22:30.000000000 +0200
@@ -1,10 +1,11 @@
import * as React from 'react';
import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
@@ -481,18 +482,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContai
Scene,
Layout,
StackHeaderMode,
@@ -192,7 +193,7 @@
? { marginTop: headerHeight }
: null
}
- contentStyle={[{ backgroundColor: colors.background }, cardStyle]}
+ contentStyle={[{ backgroundColor: colors.background }, cardStyle] as any}
style={StyleSheet.absoluteFill}
>
<View style={styles.container}>
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx src/vendor/views/Stack/CardStack.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-05-11 17:55:45.000000000 +0200
+++ src/vendor/views/Stack/CardStack.tsx 2020-05-11 18:05:10.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-06-06 02:18:25.000000000 +0200
+++ src/vendor/views/Stack/CardStack.tsx 2020-06-06 02:22:30.000000000 +0200
@@ -7,7 +7,7 @@
Platform,
} from 'react-native';
@@ -511,8 +503,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.
StackHeaderMode,
StackCardMode,
diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx src/vendor/views/Stack/StackView.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-05-11 17:55:45.000000000 +0200
+++ src/vendor/views/Stack/StackView.tsx 2020-05-11 18:30:19.000000000 +0200
--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-06-06 02:18:25.000000000 +0200
+++ src/vendor/views/Stack/StackView.tsx 2020-06-06 02:22:30.000000000 +0200
@@ -2,11 +2,11 @@
import { View, Platform, StyleSheet } from 'react-native';
import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';

416
packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap
View File

@@ -8,6 +8,106 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
}
}
>
<View
pointerEvents="box-none"
>
<View
accessibilityElementsHidden={false}
importantForAccessibility="auto"
onLayout={[Function]}
pointerEvents="box-none"
style={null}
>
<View
pointerEvents="box-none"
style={
Object {
"bottom": 0,
"left": 0,
"opacity": 1,
"position": "absolute",
"right": 0,
"top": 0,
"zIndex": 0,
}
}
>
<View
style={
Object {
"backgroundColor": "#fff",
"borderBottomColor": "#a7a7aa",
"flex": 1,
"shadowColor": "#a7a7aa",
"shadowOffset": Object {
"height": 0.5,
"width": 0,
},
"shadowOpacity": 0.85,
"shadowRadius": 0,
}
}
/>
</View>
<View
pointerEvents="box-none"
style={
Object {
"height": 44,
"maxHeight": undefined,
"minHeight": undefined,
"opacity": undefined,
"transform": undefined,
}
}
>
<View
pointerEvents="none"
style={
Object {
"height": 0,
}
}
/>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
}
}
>
<View
pointerEvents="box-none"
style={
Object {
"marginHorizontal": 16,
"opacity": 1,
}
}
>
<Text
accessibilityRole="header"
numberOfLines={1}
onLayout={[Function]}
style={
Object {
"color": "rgba(0, 0, 0, 0.9)",
"fontSize": 17,
"fontWeight": "600",
}
}
>
Sub
</Text>
</View>
</View>
</View>
</View>
</View>
<View
onLayout={[Function]}
style={
@@ -80,7 +180,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
style={
Object {
"flex": 1,
"marginTop": 44,
}
}
>
@@ -168,6 +267,106 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
}
}
>
<View
pointerEvents="box-none"
>
<View
accessibilityElementsHidden={false}
importantForAccessibility="auto"
onLayout={[Function]}
pointerEvents="box-none"
style={null}
>
<View
pointerEvents="box-none"
style={
Object {
"bottom": 0,
"left": 0,
"opacity": 1,
"position": "absolute",
"right": 0,
"top": 0,
"zIndex": 0,
}
}
>
<View
style={
Object {
"backgroundColor": "#fff",
"borderBottomColor": "#a7a7aa",
"flex": 1,
"shadowColor": "#a7a7aa",
"shadowOffset": Object {
"height": 0.5,
"width": 0,
},
"shadowOpacity": 0.85,
"shadowRadius": 0,
}
}
/>
</View>
<View
pointerEvents="box-none"
style={
Object {
"height": 44,
"maxHeight": undefined,
"minHeight": undefined,
"opacity": undefined,
"transform": undefined,
}
}
>
<View
pointerEvents="none"
style={
Object {
"height": 0,
}
}
/>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
}
}
>
<View
pointerEvents="box-none"
style={
Object {
"marginHorizontal": 16,
"opacity": 1,
}
}
>
<Text
accessibilityRole="header"
numberOfLines={1}
onLayout={[Function]}
style={
Object {
"color": "rgba(0, 0, 0, 0.9)",
"fontSize": 17,
"fontWeight": "600",
}
}
>
Home
</Text>
</View>
</View>
</View>
</View>
</View>
<View
onLayout={[Function]}
style={
@@ -240,7 +439,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
style={
Object {
"flex": 1,
"marginTop": 44,
}
}
>
@@ -329,113 +527,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
</View>
</View>
</View>
<View
pointerEvents="box-none"
style={
Object {
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
accessibilityElementsHidden={false}
importantForAccessibility="auto"
onLayout={[Function]}
pointerEvents="box-none"
style={null}
>
<View
pointerEvents="none"
style={
Object {
"bottom": 0,
"left": 0,
"opacity": 1,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
style={
Object {
"backgroundColor": "#fff",
"borderBottomColor": "#a7a7aa",
"flex": 1,
"shadowColor": "#a7a7aa",
"shadowOffset": Object {
"height": 0.5,
"width": 0,
},
"shadowOpacity": 0.85,
"shadowRadius": 0,
}
}
/>
</View>
<View
pointerEvents="box-none"
style={
Object {
"height": 44,
"maxHeight": undefined,
"minHeight": undefined,
"opacity": undefined,
"transform": undefined,
}
}
>
<View
pointerEvents="none"
style={
Object {
"height": 0,
}
}
/>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
}
}
>
<View
pointerEvents="box-none"
style={
Object {
"marginHorizontal": 16,
"opacity": 1,
}
}
>
<Text
accessibilityRole="header"
numberOfLines={1}
onLayout={[Function]}
style={
Object {
"color": "rgba(0, 0, 0, 0.9)",
"fontSize": 17,
"fontWeight": "600",
}
}
>
Home
</Text>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
@@ -446,113 +537,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
</View>
</View>
</View>
<View
pointerEvents="box-none"
style={
Object {
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
accessibilityElementsHidden={false}
importantForAccessibility="auto"
onLayout={[Function]}
pointerEvents="box-none"
style={null}
>
<View
pointerEvents="none"
style={
Object {
"bottom": 0,
"left": 0,
"opacity": 1,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
style={
Object {
"backgroundColor": "#fff",
"borderBottomColor": "#a7a7aa",
"flex": 1,
"shadowColor": "#a7a7aa",
"shadowOffset": Object {
"height": 0.5,
"width": 0,
},
"shadowOpacity": 0.85,
"shadowRadius": 0,
}
}
/>
</View>
<View
pointerEvents="box-none"
style={
Object {
"height": 44,
"maxHeight": undefined,
"minHeight": undefined,
"opacity": undefined,
"transform": undefined,
}
}
>
<View
pointerEvents="none"
style={
Object {
"height": 0,
}
}
/>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
}
}
>
<View
pointerEvents="box-none"
style={
Object {
"marginHorizontal": 16,
"opacity": 1,
}
}
>
<Text
accessibilityRole="header"
numberOfLines={1}
onLayout={[Function]}
style={
Object {
"color": "rgba(0, 0, 0, 0.9)",
"fontSize": 17,
"fontWeight": "600",
}
}
>
Sub
</Text>
</View>
</View>
</View>
</View>
</View>
</View>
`;

366
packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap
View File

@@ -8,177 +8,8 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
}
}
>
<View
onLayout={[Function]}
style={
Object {
"flex": 1,
}
}
>
<View
pointerEvents="box-none"
style={
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
accessibilityElementsHidden={false}
closing={false}
gestureVelocityImpact={0.3}
importantForAccessibility="auto"
onClose={[Function]}
onGestureBegin={[Function]}
onGestureCanceled={[Function]}
onOpen={[Function]}
onTransitionStart={[Function]}
pointerEvents="box-none"
style={
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
transitionSpec={
Object {
"close": Object {
"animation": "spring",
"config": Object {
"damping": 500,
"mass": 3,
"overshootClamping": true,
"restDisplacementThreshold": 10,
"restSpeedThreshold": 10,
"stiffness": 1000,
},
},
"open": Object {
"animation": "spring",
"config": Object {
"damping": 500,
"mass": 3,
"overshootClamping": true,
"restDisplacementThreshold": 10,
"restSpeedThreshold": 10,
"stiffness": 1000,
},
},
}
}
>
<View
pointerEvents="box-none"
style={
Object {
"flex": 1,
"marginTop": 44,
}
}
>
<PanGestureHandler
enabled={false}
hitSlop={
Object {
"right": -700,
}
}
maxDeltaY={20}
minOffsetX={5}
onHandlerStateChange={[Function]}
>
<View
style={
Object {
"flex": 1,
"transform": Array [
Object {
"translateX": 0,
},
Object {
"translateX": 0,
},
],
}
}
>
<View
pointerEvents="none"
style={
Object {
"backgroundColor": "rgb(242, 242, 242)",
"bottom": 0,
"left": 0,
"position": "absolute",
"shadowColor": "#000",
"shadowOffset": Object {
"height": 1,
"width": -1,
},
"shadowOpacity": 0.3,
"shadowRadius": 5,
"top": 0,
"width": 3,
}
}
/>
<View
style={
Array [
Object {
"flex": 1,
"overflow": "hidden",
},
Array [
Object {
"backgroundColor": "rgb(242, 242, 242)",
},
undefined,
],
]
}
>
<View
style={
Object {
"flex": 1,
"flexDirection": "column-reverse",
}
}
>
<View
style={
Object {
"flex": 1,
}
}
/>
</View>
</View>
</View>
</PanGestureHandler>
</View>
</View>
</View>
</View>
<View
pointerEvents="box-none"
style={
Object {
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
accessibilityElementsHidden={false}
@@ -188,7 +19,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
style={null}
>
<View
pointerEvents="none"
pointerEvents="box-none"
style={
Object {
"bottom": 0,
@@ -197,6 +28,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
"position": "absolute",
"right": 0,
"top": 0,
"zIndex": 0,
}
}
>
@@ -293,17 +125,6 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
</View>
</View>
</View>
</View>
`;
exports[`StackNavigator renders successfully 1`] = `
<View
style={
Object {
"flex": 1,
}
}
>
<View
onLayout={[Function]}
style={
@@ -376,7 +197,6 @@ exports[`StackNavigator renders successfully 1`] = `
style={
Object {
"flex": 1,
"marginTop": 44,
}
}
>
@@ -465,16 +285,19 @@ exports[`StackNavigator renders successfully 1`] = `
</View>
</View>
</View>
</View>
`;
exports[`StackNavigator renders successfully 1`] = `
<View
style={
Object {
"flex": 1,
}
}
>
<View
pointerEvents="box-none"
style={
Object {
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
accessibilityElementsHidden={false}
@@ -484,7 +307,7 @@ exports[`StackNavigator renders successfully 1`] = `
style={null}
>
<View
pointerEvents="none"
pointerEvents="box-none"
style={
Object {
"bottom": 0,
@@ -493,6 +316,7 @@ exports[`StackNavigator renders successfully 1`] = `
"position": "absolute",
"right": 0,
"top": 0,
"zIndex": 0,
}
}
>
@@ -573,5 +397,165 @@ exports[`StackNavigator renders successfully 1`] = `
</View>
</View>
</View>
<View
onLayout={[Function]}
style={
Object {
"flex": 1,
}
}
>
<View
pointerEvents="box-none"
style={
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
accessibilityElementsHidden={false}
closing={false}
gestureVelocityImpact={0.3}
importantForAccessibility="auto"
onClose={[Function]}
onGestureBegin={[Function]}
onGestureCanceled={[Function]}
onOpen={[Function]}
onTransitionStart={[Function]}
pointerEvents="box-none"
style={
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
transitionSpec={
Object {
"close": Object {
"animation": "spring",
"config": Object {
"damping": 500,
"mass": 3,
"overshootClamping": true,
"restDisplacementThreshold": 10,
"restSpeedThreshold": 10,
"stiffness": 1000,
},
},
"open": Object {
"animation": "spring",
"config": Object {
"damping": 500,
"mass": 3,
"overshootClamping": true,
"restDisplacementThreshold": 10,
"restSpeedThreshold": 10,
"stiffness": 1000,
},
},
}
}
>
<View
pointerEvents="box-none"
style={
Object {
"flex": 1,
}
}
>
<PanGestureHandler
enabled={false}
hitSlop={
Object {
"right": -700,
}
}
maxDeltaY={20}
minOffsetX={5}
onHandlerStateChange={[Function]}
>
<View
style={
Object {
"flex": 1,
"transform": Array [
Object {
"translateX": 0,
},
Object {
"translateX": 0,
},
],
}
}
>
<View
pointerEvents="none"
style={
Object {
"backgroundColor": "rgb(242, 242, 242)",
"bottom": 0,
"left": 0,
"position": "absolute",
"shadowColor": "#000",
"shadowOffset": Object {
"height": 1,
"width": -1,
},
"shadowOpacity": 0.3,
"shadowRadius": 5,
"top": 0,
"width": 3,
}
}
/>
<View
style={
Array [
Object {
"flex": 1,
"overflow": "hidden",
},
Array [
Object {
"backgroundColor": "rgb(242, 242, 242)",
},
undefined,
],
]
}
>
<View
style={
Object {
"flex": 1,
"flexDirection": "column-reverse",
}
}
>
<View
style={
Object {
"flex": 1,
}
}
/>
</View>
</View>
</View>
</PanGestureHandler>
</View>
</View>
</View>
</View>
</View>
`;

10
packages/stack/src/vendor/types.tsx vendored
View File

@@ -131,7 +131,7 @@ export type StackHeaderOptions = {
* This may lead to white space or overlap between `headerLeft` and `headerTitle` if a customized `headerLeft` is used.
* It can be solved by adjusting `left` and `right` style in `headerTitleContainerStyle` and `marginHorizontal` in `headerTitleStyle`.
*/
headerTitleContainerStyle?: StyleProp<ViewStyle>;
headerTitleContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
/**
* Tint color for the header.
*/
@@ -169,7 +169,7 @@ export type StackHeaderOptions = {
/**
* Style object for the container of the `headerLeft` component, for example to add padding.
*/
headerLeftContainerStyle?: StyleProp<ViewStyle>;
headerLeftContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
/**
* Function which returns a React Element to display on the right side of the header.
*/
@@ -177,7 +177,7 @@ export type StackHeaderOptions = {
/**
* Style object for the container of the `headerRight` component, for example to add padding.
*/
headerRightContainerStyle?: StyleProp<ViewStyle>;
headerRightContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
/**
* Function which returns a React Element to display custom image in header's back button.
* It receives the `tintColor` in in the options object as an argument. object.
@@ -199,7 +199,7 @@ export type StackHeaderOptions = {
/**
* Style object for the header. You can specify a custom background color here, for example.
*/
headerStyle?: StyleProp<ViewStyle>;
headerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
/**
* Defaults to `false`. If `true`, the header will not have a background unless you explicitly provide it with `headerBackground`.
* The header will also float over the screen so that it overlaps the content underneath.
@@ -397,7 +397,7 @@ export type StackHeaderLeftButtonProps = {
/**
* Style object for the label.
*/
labelStyle?: React.ComponentProps<typeof Animated.Text>['style'];
labelStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
/**
* Whether label font should scale to respect Text Size accessibility settings.
*/

10
packages/stack/src/vendor/views/Header/HeaderBackground.tsx vendored
View File

@@ -1,8 +1,16 @@
import * as React from 'react';
import { Animated, StyleSheet, Platform, ViewProps } from 'react-native';
import {
Animated,
StyleSheet,
Platform,
ViewProps,
StyleProp,
ViewStyle,
} from 'react-native';
import useTheme from '../../../utils/useTheme';
type Props = ViewProps & {
style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
children?: React.ReactNode;
};

4
packages/stack/src/vendor/views/Header/HeaderSegment.tsx vendored
View File

@@ -312,8 +312,8 @@ export default class HeaderSegment extends React.Component<Props, State> {
return (
<React.Fragment>
<Animated.View
pointerEvents="none"
style={[StyleSheet.absoluteFill, backgroundStyle]}
pointerEvents="box-none"
style={[StyleSheet.absoluteFill, { zIndex: 0 }, backgroundStyle]}
>
{headerBackground ? (
headerBackground({ style: safeStyles })

10
packages/stack/src/vendor/views/Stack/Card.tsx vendored
View File

@@ -46,7 +46,9 @@ type Props = ViewProps & {
onGestureCanceled?: () => void;
onGestureEnd?: () => void;
children: React.ReactNode;
overlay: (props: { style: StyleProp<ViewStyle> }) => React.ReactNode;
overlay: (props: {
style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
}) => React.ReactNode;
overlayEnabled: boolean;
shadowEnabled: boolean;
gestureEnabled: boolean;
@@ -83,7 +85,11 @@ export default class Card extends React.Component<Props> {
shadowEnabled: true,
gestureEnabled: true,
gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
overlay: ({ style }: { style: StyleProp<ViewStyle> }) =>
overlay: ({
style,
}: {
style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
}) =>
style ? (
<Animated.View pointerEvents="none" style={[styles.overlay, style]} />
) : null,

14
packages/stack/src/vendor/views/Stack/CardContainer.tsx vendored
View File

@@ -54,8 +54,7 @@ type Props = TransitionPreset & {
gestureVelocityImpact?: number;
mode: StackCardMode;
headerMode: StackHeaderMode;
headerShown?: boolean;
headerTransparent?: boolean;
hasAbsoluteHeader: boolean;
headerHeight: number;
onHeaderHeightChange: (props: {
route: Route<string>;
@@ -83,9 +82,8 @@ function CardContainer({
getFocusedRoute,
mode,
headerMode,
headerShown,
headerStyleInterpolator,
headerTransparent,
hasAbsoluteHeader,
headerHeight,
onHeaderHeightChange,
index,
@@ -188,12 +186,8 @@ function CardContainer({
importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
pointerEvents={active ? 'box-none' : pointerEvents}
pageOverflowEnabled={headerMode === 'screen' && mode === 'card'}
containerStyle={
headerMode === 'float' && !headerTransparent && headerShown !== false
? { marginTop: headerHeight }
: null
}
contentStyle={[{ backgroundColor: colors.background }, cardStyle] as any}
containerStyle={hasAbsoluteHeader ? { marginTop: headerHeight } : null}
contentStyle={[{ backgroundColor: colors.background }, cardStyle]}
style={StyleSheet.absoluteFill}
>
<View style={styles.container}>

85
packages/stack/src/vendor/views/Stack/CardStack.tsx vendored
View File

@@ -84,9 +84,10 @@ const getHeaderHeights = (
) => {
return routes.reduce<Record<string, number>>((acc, curr) => {
const { options = {} } = descriptors[curr.key] || {};
const { height = previous[curr.key] } = StyleSheet.flatten(
options.headerStyle || {}
);
const style: any = StyleSheet.flatten(options.headerStyle || {});
const height =
typeof style.height === 'number' ? style.height : previous[curr.key];
const safeAreaInsets = {
...insets,
@@ -300,7 +301,7 @@ export default class CardStack extends React.Component<Props, State> {
props.insets,
state.descriptors,
layout,
{}
state.headerHeights
),
};
});
@@ -335,6 +336,24 @@ export default class CardStack extends React.Component<Props, State> {
return state.routes[state.index];
};
private doesFloatHeaderNeedAbsolutePositioning = () => {
if (this.props.headerMode !== 'float') {
return false;
}
return this.state.scenes.slice(-2).some((scene) => {
const { descriptor } = scene;
const options = descriptor ? descriptor.options : {};
const { headerTransparent, headerShown } = options;
if (headerTransparent || headerShown === false) {
return true;
}
return false;
});
};
render() {
const {
mode,
@@ -363,6 +382,8 @@ export default class CardStack extends React.Component<Props, State> {
const focusedDescriptor = descriptors[focusedRoute.key];
const focusedOptions = focusedDescriptor ? focusedDescriptor.options : {};
const isFloatHeaderAbsolute = this.doesFloatHeaderNeedAbsolutePositioning();
let defaultTransitionPreset =
mode === 'modal' ? ModalTransition : DefaultTransition;
@@ -384,8 +405,36 @@ export default class CardStack extends React.Component<Props, State> {
// For modals, usually we want the screen underneath to be visible, so also disable it there
const isScreensEnabled = Platform.OS !== 'ios' && mode !== 'modal';
let floatingHeader;
if (headerMode === 'float') {
floatingHeader = (
<React.Fragment key="header">
{renderHeader({
mode: 'float',
layout,
insets: { top, right, bottom, left },
scenes,
getPreviousRoute,
getFocusedRoute: this.getFocusedRoute,
onContentHeightChange: this.handleHeaderLayout,
gestureDirection:
focusedOptions.gestureDirection !== undefined
? focusedOptions.gestureDirection
: defaultTransitionPreset.gestureDirection,
styleInterpolator:
focusedOptions.headerStyleInterpolator !== undefined
? focusedOptions.headerStyleInterpolator
: defaultTransitionPreset.headerStyleInterpolator,
style: isFloatHeaderAbsolute ? styles.floating : undefined,
})}
</React.Fragment>
);
}
return (
<React.Fragment>
{isFloatHeaderAbsolute ? null : floatingHeader}
<MaybeScreenContainer
enabled={isScreensEnabled}
style={styles.container}
@@ -522,8 +571,11 @@ export default class CardStack extends React.Component<Props, State> {
getFocusedRoute={this.getFocusedRoute}
mode={mode}
headerMode={headerMode}
headerShown={headerShown}
headerTransparent={headerTransparent}
hasAbsoluteHeader={
isFloatHeaderAbsolute &&
headerShown !== false &&
!headerTransparent
}
renderHeader={renderHeader}
renderScene={renderScene}
onOpenRoute={onOpenRoute}
@@ -538,26 +590,7 @@ export default class CardStack extends React.Component<Props, State> {
);
})}
</MaybeScreenContainer>
{headerMode === 'float'
? renderHeader({
mode: 'float',
layout,
insets: { top, right, bottom, left },
scenes,
getPreviousRoute,
getFocusedRoute: this.getFocusedRoute,
onContentHeightChange: this.handleHeaderLayout,
gestureDirection:
focusedOptions.gestureDirection !== undefined
? focusedOptions.gestureDirection
: defaultTransitionPreset.gestureDirection,
styleInterpolator:
focusedOptions.headerStyleInterpolator !== undefined
? focusedOptions.headerStyleInterpolator
: defaultTransitionPreset.headerStyleInterpolator,
style: styles.floating,
})
: null}
{isFloatHeaderAbsolute ? floatingHeader : null}
</React.Fragment>
);
}

8
yarn.lock
View File

@@ -3202,10 +3202,10 @@
resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.7.tgz#a65ce0702f55cb67fd777995de6fc7b3e5781903"
integrity sha512-9KbP7LTLFz9dx1heURJbO6nuVMdSjDez8znlrUzaB1nUwKVsTTwlKRuHxGUYIIkReLWrJQeCv9tidy+84z2eCw==
"@react-navigation/stack@^5.3.6":
version "5.3.6"
resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.3.6.tgz#7a1bf2f6b77dd92a0aa7befb4f3263215bed58f5"
integrity sha512-6uE9pWMa9tdvDSbMV9o6/1cFrT60c2S3CTKIR5mZWJbyanIGFdu/ScbjIvplnG5kLG24rIpc3rtC0FgqTsBVXQ==
"@react-navigation/stack@^5.4.2":
version "5.4.2"
resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.4.2.tgz#ca4e77e8ab55b446e44f656068702825ec3b29d3"
integrity sha512-EG8DqHsfg257XeNaO6MIeAnPClekmr8po3PYikezyXon02rJUmHU4px25/PWOvh1hTFiH40W4WYBKzrzMBFaOQ==
dependencies:
color "^3.1.2"
react-native-iphone-x-helper "^1.2.1"