kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-02-12 22:30:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: fix snapshots

Browse Source
This commit is contained in:
satyajit.happy
2019-06-06 12:42:52 +02:00
parent fd5d4d05dd
commit 3be00f5c2a
7 changed files with 1057 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/stack/example/App.js
View File

@@ -24,7 +24,6 @@ import StackWithDrawer from './src/StackWithDrawer';
import HeaderPreset from './src/HeaderPreset';
import {
HeaderBackgroundDefault,
HeaderBackgroundTranslate,
HeaderBackgroundFade,
} from './src/HeaderBackgrounds';

1
packages/stack/example/src/HeaderBackgrounds.js
View File

@@ -1,6 +1,5 @@
import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import Animated from 'react-native-reanimated';
import {
createStackNavigator,
TransitionPresets,

16
packages/stack/example/src/TransparentStack.js
View File

@@ -3,8 +3,6 @@ import { Button, View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import Animated from 'react-native-reanimated';
const { interpolate, multiply, cond } = Animated;
class ListScreen extends React.Component {
render() {
return (
@@ -81,15 +79,11 @@ export default createStackNavigator(
navigationOptions: {
gesturesEnabled: false,
},
cardStyleInterpolator: ({ progress: { current }, closing }) => {
const opacity = cond(
closing,
current,
interpolate(current, {
inputRange: [0, 0.5, 0.9, 1],
outputRange: [0, 0.25, 0.7, 1],
})
);
cardStyleInterpolator: ({ progress: { current } }) => {
const opacity = Animated.interpolate(current, {
inputRange: [0, 0.5, 0.9, 1],
outputRange: [0, 0.25, 0.7, 1],
});
return {
cardStyle: {

113
packages/stack/jest-setup.js
View File

@@ -3,4 +3,117 @@
jest.mock('react-native-gesture-handler', () => ({
PanGestureHandler: 'PanGestureHandler',
BaseButton: 'BaseButton',
State: {
UNDETERMINED: 0,
FAILED: 1,
BEGAN: 2,
CANCELLED: 3,
ACTIVE: 4,
END: 5,
},
}));
jest.mock('react-native-reanimated', () => {
const { View, Text, Image, ScrollView } = require('react-native');
const NOOP = () => undefined;
return {
__esModule: true,
default: {
SpringUtils: {
makeDefaultConfig: NOOP,
makeConfigFromBouncinessAndSpeed: NOOP,
makeConfigFromOrigamiTensionAndFriction: NOOP,
},
View,
Text,
Image,
ScrollView,
Code: () => null,
Clock: NOOP,
Node: NOOP,
Value: NOOP,
Extrapolate: {
EXTEND: 'extend',
CLAMP: 'clamp',
IDENTITY: 'identity',
},
add: NOOP,
sub: NOOP,
multiply: NOOP,
divide: NOOP,
pow: NOOP,
modulo: NOOP,
sqrt: NOOP,
sin: NOOP,
cos: NOOP,
tan: NOOP,
acos: NOOP,
asin: NOOP,
atan: NOOP,
exp: NOOP,
round: NOOP,
floor: NOOP,
ceil: NOOP,
lessThan: NOOP,
eq: NOOP,
greaterThan: NOOP,
lessOrEq: NOOP,
greaterOrEq: NOOP,
neq: NOOP,
and: NOOP,
or: NOOP,
defined: NOOP,
not: NOOP,
set: NOOP,
concat: NOOP,
cond: NOOP,
block: NOOP,
call: NOOP,
debug: NOOP,
onChange: NOOP,
startClock: NOOP,
stopClock: NOOP,
clockRunning: NOOP,
event: NOOP,
abs: NOOP,
acc: NOOP,
color: NOOP,
diff: NOOP,
diffClamp: NOOP,
interpolate: NOOP,
max: NOOP,
min: NOOP,
decay: NOOP,
timing: NOOP,
spring: NOOP,
useCode: NOOP,
},
Easing: {
linear: NOOP,
ease: NOOP,
quad: NOOP,
cubic: NOOP,
poly: () => NOOP,
sin: NOOP,
circle: NOOP,
exp: NOOP,
elastic: () => NOOP,
back: () => NOOP,
bounce: () => NOOP,
bezier: () => NOOP,
in: () => NOOP,
out: () => NOOP,
inOut: () => NOOP,
},
};
});

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

@@ -1,347 +1,471 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Nested navigators renders succesfully as direct child 1`] = `
<View
onLayout={[Function]}
style={
Object {
"flex": 1,
}
}
>
<PanGestureHandler
enabled={false}
hitSlop={
Array [
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Object {
"right": 50,
"flex": 1,
"overflow": "hidden",
}
}
maxDeltaY={20}
minOffsetX={5}
onGestureEvent={[Function]}
onHandlerStateChange={[Function]}
>
<View
accessibilityElementsHidden={false}
closing={false}
importantForAccessibility="auto"
onClose={[Function]}
onGestureBegin={[Function]}
onGestureCanceled={[Function]}
onGestureEnd={[Function]}
onOpen={[Function]}
onTransitionStart={[Function]}
pointerEvents="box-none"
style={
Object {
"backgroundColor": "#eee",
"flex": 1,
"flexDirection": "column-reverse",
"overflow": "hidden",
}
}
>
<View
style={
Object {
"flex": 1,
}
}
>
<View
pointerEvents="auto"
style={
Object {
"bottom": 0,
"left": 0,
"opacity": 1,
"paddingTop": 64,
"position": "absolute",
"right": 0,
"top": 0,
"transform": Array [
Object {
"translateX": 0,
},
Object {
"translateY": 0,
},
],
}
}
>
<View
accessibilityElementsHidden={false}
style={
Object {
"backgroundColor": "#fff",
"flex": 1,
}
}
>
<View
onLayout={[Function]}
style={
Object {
"flex": 1,
}
}
>
<PanGestureHandler
enabled={false}
hitSlop={
Object {
"right": 50,
}
}
maxDeltaY={20}
minOffsetX={5}
onGestureEvent={[Function]}
onHandlerStateChange={[Function]}
>
<View
style={
Object {
"backgroundColor": "#eee",
"flex": 1,
"flexDirection": "column-reverse",
"overflow": "hidden",
}
}
>
<View
style={
Object {
"flex": 1,
}
}
>
<View
pointerEvents="auto"
style={
Object {
"bottom": 0,
"left": 0,
"opacity": 1,
"paddingTop": 64,
"position": "absolute",
"right": 0,
"top": 0,
"transform": Array [
Object {
"translateX": 0,
},
Object {
"translateY": 0,
},
],
}
}
>
<View
accessibilityElementsHidden={false}
style={
Object {
"backgroundColor": "#fff",
"flex": 1,
}
}
/>
</View>
</View>
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Object {
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
style={
Object {
"backgroundColor": "#FFF",
"transform": Array [
Object {
"translateX": 0,
},
],
}
}
>
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Object {
"backgroundColor": "#FFF",
"borderBottomColor": "#A7A7AA",
"borderBottomWidth": 0.5,
"height": 64,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 20,
}
}
>
<View
style={
Object {
"flex": 1,
}
}
>
<View
style={
Object {
"bottom": 0,
"flexDirection": "row",
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"backgroundColor": "transparent",
"bottom": 0,
"flexDirection": "row",
"justifyContent": "center",
"left": 0,
"opacity": 1,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<Text
accessibilityTraits="header"
allowFontScaling={false}
numberOfLines={1}
onLayout={[Function]}
style={
Object {
"color": "rgba(0, 0, 0, .9)",
"fontSize": 17,
"fontWeight": "600",
"marginHorizontal": 16,
"textAlign": "center",
}
}
/>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</PanGestureHandler>
</View>
</View>
</View>
</View>
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
},
Object {
"marginTop": 64,
},
]
}
transitionSpec={
Object {
"close": Object {
"config": Object {
"damping": 500,
"mass": 3,
"overshootClamping": true,
"restDisplacementThreshold": 0.01,
"restSpeedThreshold": 0.01,
"stiffness": 1000,
},
"timing": "spring",
},
"open": Object {
"config": Object {
"damping": 500,
"mass": 3,
"overshootClamping": true,
"restDisplacementThreshold": 0.01,
"restSpeedThreshold": 0.01,
"stiffness": 1000,
},
"timing": "spring",
},
}
}
>
<View
pointerEvents="none"
style={
Array [
Object {
"backgroundColor": "#000",
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"opacity": undefined,
},
]
}
/>
<View
pointerEvents="box-none"
style={
Array [
Object {
"flex": 1,
"overflow": "hidden",
},
undefined,
]
}
>
<View
style={
<PanGestureHandler
enabled={false}
hitSlop={
Object {
"backgroundColor": "#FFF",
"transform": Array [
Object {
"translateX": 0,
},
],
"right": -700,
}
}
maxDeltaY={20}
minOffsetX={5}
>
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Object {
"backgroundColor": "#FFF",
"borderBottomColor": "#A7A7AA",
"borderBottomWidth": 0.5,
"height": 64,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 20,
}
Array [
Object {
"backgroundColor": "white",
"bottom": 0,
"elevation": 2,
"left": 0,
"position": "absolute",
"right": 0,
"shadowColor": "#000",
"shadowOffset": Object {
"height": 1,
"width": -1,
},
"shadowRadius": 5,
"top": 0,
},
Object {
"backgroundColor": "#eee",
"shadowOpacity": undefined,
"transform": Array [
Object {
"translateX": undefined,
},
Object {
"translateX": 0,
},
],
},
null,
]
}
>
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Object {
"flex": 1,
"overflow": "hidden",
}
}
>
<View
accessibilityElementsHidden={false}
closing={false}
importantForAccessibility="auto"
onClose={[Function]}
onGestureBegin={[Function]}
onGestureCanceled={[Function]}
onGestureEnd={[Function]}
onOpen={[Function]}
onTransitionStart={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"marginTop": 64,
},
]
}
transitionSpec={
Object {
"bottom": 0,
"flexDirection": "row",
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
"close": Object {
"config": Object {
"damping": 500,
"mass": 3,
"overshootClamping": true,
"restDisplacementThreshold": 0.01,
"restSpeedThreshold": 0.01,
"stiffness": 1000,
},
"timing": "spring",
},
"open": Object {
"config": Object {
"damping": 500,
"mass": 3,
"overshootClamping": true,
"restDisplacementThreshold": 0.01,
"restSpeedThreshold": 0.01,
"stiffness": 1000,
},
"timing": "spring",
},
}
}
>
<View
pointerEvents="none"
style={
Array [
Object {
"backgroundColor": "#000",
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"opacity": undefined,
},
]
}
/>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"backgroundColor": "transparent",
"bottom": 0,
"flexDirection": "row",
"justifyContent": "center",
"left": 0,
"opacity": 1,
"position": "absolute",
"right": 0,
"top": 0,
}
Array [
Object {
"flex": 1,
"overflow": "hidden",
},
undefined,
]
}
>
<Text
accessibilityTraits="header"
allowFontScaling={false}
numberOfLines={1}
onLayout={[Function]}
style={
<PanGestureHandler
enabled={false}
hitSlop={
Object {
"color": "rgba(0, 0, 0, .9)",
"fontSize": 17,
"fontWeight": "600",
"marginHorizontal": 16,
"textAlign": "center",
"right": -700,
}
}
/>
maxDeltaY={20}
minOffsetX={5}
>
<View
style={
Array [
Object {
"backgroundColor": "white",
"bottom": 0,
"elevation": 2,
"left": 0,
"position": "absolute",
"right": 0,
"shadowColor": "#000",
"shadowOffset": Object {
"height": 1,
"width": -1,
},
"shadowRadius": 5,
"top": 0,
},
Object {
"backgroundColor": "#eee",
"shadowOpacity": undefined,
"transform": Array [
Object {
"translateX": undefined,
},
Object {
"translateX": 0,
},
],
},
null,
]
}
/>
</PanGestureHandler>
</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={
Array [
Object {
"height": 64,
},
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
undefined,
]
}
>
<View
pointerEvents="none"
style={
Array [
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"transform": Array [
Object {
"translateX": undefined,
},
],
},
]
}
>
<View
style={
Array [
Object {
"backgroundColor": "white",
"borderBottomColor": "#A7A7AA",
"borderBottomWidth": 0.5,
"flex": 1,
},
undefined,
]
}
/>
</View>
<View
pointerEvents="none"
style={
Object {
"height": 20,
}
}
/>
<View
pointerEvents="box-none"
style={
Array [
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
"paddingHorizontal": 4,
},
]
}
/>
</View>
</View>
</View>
</View>
</PanGestureHandler>
</View>
</View>
</PanGestureHandler>
</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={
Array [
Object {
"height": 64,
},
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
undefined,
]
}
>
<View
pointerEvents="none"
style={
Array [
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"transform": Array [
Object {
"translateX": undefined,
},
],
},
]
}
>
<View
style={
Array [
Object {
"backgroundColor": "white",
"borderBottomColor": "#A7A7AA",
"borderBottomWidth": 0.5,
"flex": 1,
},
undefined,
]
}
/>
</View>
<View
pointerEvents="none"
style={
Object {
"height": 20,
}
}
/>
<View
pointerEvents="box-none"
style={
Array [
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
"paddingHorizontal": 4,
},
]
}
/>
</View>
</View>,
]
`;
exports[`Nested navigators throw when trying to pass navigation prop 1`] = `"No \\"routes\\" found in navigation state. Did you try to pass the navigation prop of a React component to a Navigator child? See https://reactnavigation.org/docs/en/custom-navigators.html#navigator-navigation-prop"`;

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

@@ -1,370 +1,575 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StackNavigator applies correct values when headerRight is present 1`] = `
<View
onLayout={[Function]}
style={
Object {
"flex": 1,
}
}
>
<PanGestureHandler
enabled={false}
hitSlop={
Array [
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Object {
"right": 50,
"flex": 1,
"overflow": "hidden",
}
}
maxDeltaY={20}
minOffsetX={5}
onGestureEvent={[Function]}
onHandlerStateChange={[Function]}
>
<View
accessibilityElementsHidden={false}
closing={false}
importantForAccessibility="auto"
onClose={[Function]}
onGestureBegin={[Function]}
onGestureCanceled={[Function]}
onGestureEnd={[Function]}
onOpen={[Function]}
onTransitionStart={[Function]}
pointerEvents="box-none"
style={
Object {
"backgroundColor": "#eee",
"flex": 1,
"flexDirection": "column-reverse",
"overflow": "hidden",
}
}
>
<View
style={
Object {
"flex": 1,
}
}
>
<View
pointerEvents="auto"
style={
Object {
"bottom": 0,
"left": 0,
"opacity": 1,
"paddingTop": 64,
"position": "absolute",
"right": 0,
"top": 0,
"transform": Array [
Object {
"translateX": 0,
},
Object {
"translateY": 0,
},
],
}
}
>
<View
accessibilityElementsHidden={false}
style={
Object {
"backgroundColor": "#fff",
"flex": 1,
}
}
/>
</View>
</View>
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"marginTop": 64,
},
]
}
transitionSpec={
Object {
"close": Object {
"config": Object {
"damping": 500,
"mass": 3,
"overshootClamping": true,
"restDisplacementThreshold": 0.01,
"restSpeedThreshold": 0.01,
"stiffness": 1000,
},
"timing": "spring",
},
"open": Object {
"config": Object {
"damping": 500,
"mass": 3,
"overshootClamping": true,
"restDisplacementThreshold": 0.01,
"restSpeedThreshold": 0.01,
"stiffness": 1000,
},
"timing": "spring",
},
}
}
>
<View
pointerEvents="none"
style={
Array [
Object {
"backgroundColor": "#000",
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"opacity": undefined,
},
]
}
/>
<View
pointerEvents="box-none"
style={
Array [
Object {
"flex": 1,
"overflow": "hidden",
},
undefined,
]
}
>
<PanGestureHandler
enabled={false}
hitSlop={
Object {
"right": -700,
}
}
maxDeltaY={20}
minOffsetX={5}
>
<View
style={
Array [
Object {
"backgroundColor": "white",
"bottom": 0,
"elevation": 2,
"left": 0,
"position": "absolute",
"right": 0,
"shadowColor": "#000",
"shadowOffset": Object {
"height": 1,
"width": -1,
},
"shadowRadius": 5,
"top": 0,
},
Object {
"backgroundColor": "#eee",
"shadowOpacity": undefined,
"transform": Array [
Object {
"translateX": undefined,
},
Object {
"translateX": 0,
},
],
},
null,
]
}
/>
</PanGestureHandler>
</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={
Array [
Object {
"height": 64,
},
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Array [
Object {
"backgroundColor": "red",
},
Object {
"opacity": 0.5,
},
],
]
}
>
<View
pointerEvents="none"
style={
Array [
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"transform": Array [
Object {
"translateX": undefined,
},
],
},
]
}
>
<View
style={
Object {
"backgroundColor": "red",
"transform": Array [
Object {
"translateX": 0,
},
],
}
}
>
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"backgroundColor": "red",
"backgroundColor": "white",
"borderBottomColor": "#A7A7AA",
"borderBottomWidth": 0.5,
"height": 64,
"opacity": 0.5,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 20,
}
"flex": 1,
},
undefined,
]
}
/>
</View>
<View
pointerEvents="none"
style={
Object {
"height": 20,
}
}
/>
<View
pointerEvents="box-none"
style={
Array [
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
"paddingHorizontal": 4,
},
]
}
>
<View
style={
Array [
null,
Object {},
Object {
"opacity": undefined,
"transform": Array [
Object {
"translateX": undefined,
},
],
},
undefined,
]
}
>
<Text
onLayout={[Function]}
style={
Array [
Object {
"color": "rgba(0, 0, 0, .9)",
"fontSize": 17,
"fontWeight": "600",
},
undefined,
]
}
>
<View
style={
Object {
"flex": 1,
}
}
>
<View
style={
Object {
"bottom": 0,
"flexDirection": "row",
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"backgroundColor": "transparent",
"bottom": 0,
"flexDirection": "row",
"justifyContent": "center",
"left": 70,
"opacity": 1,
"position": "absolute",
"right": 70,
"top": 0,
}
}
>
<Text
accessibilityTraits="header"
allowFontScaling={false}
numberOfLines={1}
onLayout={[Function]}
style={
Object {
"color": "rgba(0, 0, 0, .9)",
"fontSize": 17,
"fontWeight": "600",
"marginHorizontal": 16,
"textAlign": "center",
}
}
>
Welcome anonymous
</Text>
</View>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"backgroundColor": "transparent",
"bottom": 0,
"flexDirection": "row",
"opacity": 1,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View />
</View>
</View>
</View>
</View>
Welcome anonymous
</Text>
</View>
<View
style={
Array [
Object {
"alignItems": "flex-end",
"bottom": 0,
"justifyContent": "center",
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"opacity": undefined,
},
undefined,
]
}
>
<View />
</View>
</View>
</View>
</PanGestureHandler>
</View>
</View>,
]
`;
exports[`StackNavigator renders successfully 1`] = `
<View
onLayout={[Function]}
style={
Object {
"flex": 1,
}
}
>
<PanGestureHandler
enabled={false}
hitSlop={
Array [
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Object {
"right": 50,
"flex": 1,
"overflow": "hidden",
}
}
maxDeltaY={20}
minOffsetX={5}
onGestureEvent={[Function]}
onHandlerStateChange={[Function]}
>
<View
accessibilityElementsHidden={false}
closing={false}
importantForAccessibility="auto"
onClose={[Function]}
onGestureBegin={[Function]}
onGestureCanceled={[Function]}
onGestureEnd={[Function]}
onOpen={[Function]}
onTransitionStart={[Function]}
pointerEvents="box-none"
style={
Object {
"backgroundColor": "#eee",
"flex": 1,
"flexDirection": "column-reverse",
"overflow": "hidden",
}
}
>
<View
style={
Object {
"flex": 1,
}
}
>
<View
pointerEvents="auto"
style={
Object {
"bottom": 0,
"left": 0,
"opacity": 1,
"paddingTop": 64,
"position": "absolute",
"right": 0,
"top": 0,
"transform": Array [
Object {
"translateX": 0,
},
Object {
"translateY": 0,
},
],
}
}
>
<View
accessibilityElementsHidden={false}
style={
Object {
"backgroundColor": "#fff",
"flex": 1,
}
}
/>
</View>
</View>
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"marginTop": 64,
},
]
}
transitionSpec={
Object {
"close": Object {
"config": Object {
"damping": 500,
"mass": 3,
"overshootClamping": true,
"restDisplacementThreshold": 0.01,
"restSpeedThreshold": 0.01,
"stiffness": 1000,
},
"timing": "spring",
},
"open": Object {
"config": Object {
"damping": 500,
"mass": 3,
"overshootClamping": true,
"restDisplacementThreshold": 0.01,
"restSpeedThreshold": 0.01,
"stiffness": 1000,
},
"timing": "spring",
},
}
}
>
<View
pointerEvents="none"
style={
Array [
Object {
"backgroundColor": "#000",
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"opacity": undefined,
},
]
}
/>
<View
pointerEvents="box-none"
style={
Array [
Object {
"flex": 1,
"overflow": "hidden",
},
undefined,
]
}
>
<PanGestureHandler
enabled={false}
hitSlop={
Object {
"right": -700,
}
}
maxDeltaY={20}
minOffsetX={5}
>
<View
style={
Array [
Object {
"backgroundColor": "white",
"bottom": 0,
"elevation": 2,
"left": 0,
"position": "absolute",
"right": 0,
"shadowColor": "#000",
"shadowOffset": Object {
"height": 1,
"width": -1,
},
"shadowRadius": 5,
"top": 0,
},
Object {
"backgroundColor": "#eee",
"shadowOpacity": undefined,
"transform": Array [
Object {
"translateX": undefined,
},
Object {
"translateX": 0,
},
],
},
null,
]
}
/>
</PanGestureHandler>
</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={
Array [
Object {
"height": 64,
},
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Array [
Object {
"backgroundColor": "red",
},
Object {
"opacity": 0.5,
},
],
]
}
>
<View
pointerEvents="none"
style={
Array [
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"transform": Array [
Object {
"translateX": undefined,
},
],
},
]
}
>
<View
style={
Object {
"backgroundColor": "red",
"transform": Array [
Object {
"translateX": 0,
},
],
}
}
>
<View
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"backgroundColor": "red",
"backgroundColor": "white",
"borderBottomColor": "#A7A7AA",
"borderBottomWidth": 0.5,
"height": 64,
"opacity": 0.5,
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 20,
}
"flex": 1,
},
undefined,
]
}
/>
</View>
<View
pointerEvents="none"
style={
Object {
"height": 20,
}
}
/>
<View
pointerEvents="box-none"
style={
Array [
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
"paddingHorizontal": 4,
},
]
}
>
<View
style={
Array [
null,
Object {},
Object {
"opacity": undefined,
"transform": Array [
Object {
"translateX": undefined,
},
],
},
undefined,
]
}
>
<Text
onLayout={[Function]}
style={
Array [
Object {
"color": "rgba(0, 0, 0, .9)",
"fontSize": 17,
"fontWeight": "600",
},
undefined,
]
}
>
<View
style={
Object {
"flex": 1,
}
}
>
<View
style={
Object {
"bottom": 0,
"flexDirection": "row",
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"backgroundColor": "transparent",
"bottom": 0,
"flexDirection": "row",
"justifyContent": "center",
"left": 0,
"opacity": 1,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<Text
accessibilityTraits="header"
allowFontScaling={false}
numberOfLines={1}
onLayout={[Function]}
style={
Object {
"color": "rgba(0, 0, 0, .9)",
"fontSize": 17,
"fontWeight": "600",
"marginHorizontal": 16,
"textAlign": "center",
}
}
>
Welcome anonymous
</Text>
</View>
</View>
</View>
</View>
Welcome anonymous
</Text>
</View>
</View>
</View>
</PanGestureHandler>
</View>
</View>,
]
`;

4
packages/stack/src/types.tsx
View File

@@ -63,13 +63,13 @@ export type HeaderScene<T> = {
export type HeaderOptions = {
headerTitle?: string;
headerTitleStyle?: StyleProp<TextStyle>;
headerTitleContainerStyle?: StyleProp<ViewStyle>;
headerTintColor?: string;
headerTitleAllowFontScaling?: boolean;
headerBackAllowFontScaling?: boolean;
headerBackTitle?: string;
headerBackTitleStyle?: StyleProp<TextStyle>;
headerTruncatedBackTitle?: string;
headerTitleContainerStyle?: StyleProp<ViewStyle>;
headerLeft?: (props: HeaderBackButtonProps) => React.ReactNode;
headerLeftContainerStyle?: StyleProp<ViewStyle>;
headerRight?: () => React.ReactNode;
@@ -117,7 +117,7 @@ export type SceneDescriptor = {
export type HeaderBackButtonProps = {
disabled?: boolean;
onPress?: () => void;
onPress: () => void;
pressColorAndroid?: string;
backImage?: (props: { tintColor: string }) => React.ReactNode;
tintColor?: string;