diff --git a/packages/stack/package.json b/packages/stack/package.json index 9adb3db1..24a6db8a 100644 --- a/packages/stack/package.json +++ b/packages/stack/package.json @@ -45,7 +45,7 @@ "devDependencies": { "@react-native-community/bob": "^0.10.0", "@react-native-community/masked-view": "^0.1.7", - "@react-navigation/stack": "^5.2.9", + "@react-navigation/stack": "^5.2.11", "@types/color": "^3.0.1", "@types/react": "^16.9.23", "@types/react-native": "^0.61.22", @@ -64,8 +64,8 @@ "@react-native-community/masked-view": ">=0.1.0", "react": "*", "react-native": "*", - "react-native-gesture-handler": "^1.5.0", - "react-native-safe-area-context": ">=0.6.0", + "react-native-gesture-handler": ">= 1.5.0", + "react-native-safe-area-context": ">= 0.6.0", "react-native-screens": ">=1.0.0 || >= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0", "react-navigation": "^4.1.1" }, diff --git a/packages/stack/scripts/stack.patch b/packages/stack/scripts/stack.patch index 358eb4d9..30fefcef 100644 --- a/packages/stack/scripts/stack.patch +++ b/packages/stack/scripts/stack.patch @@ -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-03-31 17:47:04.000000000 +0200 -+++ src/vendor/index.tsx 2020-03-31 18:06:18.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/index.tsx 2020-04-18 01:38:52.000000000 +0200 ++++ src/vendor/index.tsx 2020-04-18 01:41:48.000000000 +0200 @@ -3,11 +3,6 @@ import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs'; import * as TransitionPresets from './TransitionConfigs/TransitionPresets'; @@ -13,25 +13,25 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/i export const Assets = [ // eslint-disable-next-line import/no-commonjs require('./views/assets/back-icon.png'), -@@ -49,9 +44,10 @@ +@@ -49,8 +44,10 @@ * Types */ - export { + export type { - StackNavigationOptions, - StackNavigationProp, -- StackHeaderProps, + NavigationStackState, + StackNavigationProp as NavigationStackProp, + StackNavigationOptions as NavigationStackOptions, + StackNavigationConfig as NavigationStackConfig, + StackHeaderProps, StackHeaderLeftButtonProps, StackHeaderTitleProps, - StackCardInterpolatedStyle, 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-03-31 17:47:04.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-04-18 01:38:52.000000000 +0200 +++ src/vendor/navigators/createStackNavigator.tsx 1970-01-01 01:00:00.000000000 +0100 -@@ -1,81 +0,0 @@ +@@ -1,96 +0,0 @@ -import * as React from 'react'; +-import { Platform } from 'react-native'; -import { - useNavigationBuilder, - createNavigatorFactory, @@ -59,6 +59,11 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStack - screenOptions, - ...rest -}: Props) { +- const defaultOptions = { +- gestureEnabled: Platform.OS === 'ios', +- animationEnabled: Platform.OS !== 'web', +- }; +- - const { state, descriptors, navigation } = useNavigationBuilder< - StackNavigationState, - StackRouterOptions, @@ -67,7 +72,16 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStack - >(StackRouter, { - initialRouteName, - children, -- screenOptions, +- screenOptions: +- typeof screenOptions === 'function' +- ? (...args) => ({ +- ...defaultOptions, +- ...screenOptions(...args), +- }) +- : { +- ...defaultOptions, +- ...screenOptions, +- }, - }); - - React.useEffect( @@ -113,8 +127,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-03-31 17:47:04.000000000 +0200 -+++ src/vendor/types.tsx 2020-03-31 18:06:18.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/types.tsx 2020-04-18 01:38:52.000000000 +0200 ++++ src/vendor/types.tsx 2020-04-18 01:39:36.000000000 +0200 @@ -8,14 +8,28 @@ } from 'react-native'; import { EdgeInsets } from 'react-native-safe-area-context'; @@ -240,8 +254,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-03-31 17:47:04.000000000 +0200 -+++ src/vendor/views/Header/Header.tsx 2020-03-31 18:06:18.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-04-18 01:38:52.000000000 +0200 ++++ src/vendor/views/Header/Header.tsx 2020-04-18 01:39:36.000000000 +0200 @@ -1,12 +1,14 @@ import * as React from 'react'; -import { StackActions } from '@react-navigation/native'; @@ -321,8 +335,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-03-31 17:47:04.000000000 +0200 -+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-03-31 18:06:18.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-04-18 01:38:52.000000000 +0200 ++++ src/vendor/views/Header/HeaderBackButton.tsx 2020-04-18 01:39:36.000000000 +0200 @@ -8,9 +8,9 @@ StyleSheet, LayoutChangeEvent, @@ -335,8 +349,8 @@ 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-03-31 17:47:04.000000000 +0200 -+++ src/vendor/views/Header/HeaderBackground.tsx 2020-03-31 18:06:18.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-04-18 01:38:52.000000000 +0200 ++++ src/vendor/views/Header/HeaderBackground.tsx 2020-04-18 01:39:36.000000000 +0200 @@ -1,6 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, Platform, ViewProps } from 'react-native'; @@ -346,8 +360,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBac type Props = ViewProps & { children?: React.ReactNode; 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-03-31 17:47:04.000000000 +0200 -+++ src/vendor/views/Header/HeaderContainer.tsx 2020-03-31 18:06:18.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-04-18 01:38:52.000000000 +0200 ++++ src/vendor/views/Header/HeaderContainer.tsx 2020-04-18 01:39:36.000000000 +0200 @@ -1,11 +1,6 @@ import * as React from 'react'; import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; @@ -399,8 +413,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-03-31 17:47:04.000000000 +0200 -+++ src/vendor/views/Header/HeaderSegment.tsx 2020-03-31 18:06:18.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-04-18 01:38:52.000000000 +0200 ++++ src/vendor/views/Header/HeaderSegment.tsx 2020-04-18 01:39:36.000000000 +0200 @@ -8,7 +8,7 @@ ViewStyle, } from 'react-native'; @@ -420,8 +434,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-03-31 17:47:04.000000000 +0200 -+++ src/vendor/views/Header/HeaderTitle.tsx 2020-03-31 18:06:18.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-04-18 01:38:52.000000000 +0200 ++++ src/vendor/views/Header/HeaderTitle.tsx 2020-04-18 01:39:36.000000000 +0200 @@ -1,6 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, Platform } from 'react-native'; @@ -431,8 +445,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTit type Props = React.ComponentProps & { 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-03-31 17:47:04.000000000 +0200 -+++ src/vendor/views/Stack/Card.tsx 2020-03-31 18:06:18.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-04-18 01:38:52.000000000 +0200 ++++ src/vendor/views/Stack/Card.tsx 2020-04-18 01:39:36.000000000 +0200 @@ -138,7 +138,7 @@ private interactionHandle: number | undefined; @@ -443,8 +457,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-03-31 17:47:04.000000000 +0200 -+++ src/vendor/views/Stack/CardContainer.tsx 2020-03-31 18:06:18.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-04-18 01:38:52.000000000 +0200 ++++ src/vendor/views/Stack/CardContainer.tsx 2020-04-18 01:39:36.000000000 +0200 @@ -1,10 +1,16 @@ import * as React from 'react'; import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; @@ -474,8 +488,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContai > 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-03-31 17:47:04.000000000 +0200 -+++ src/vendor/views/Stack/CardStack.tsx 2020-03-31 18:06:18.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-04-18 01:38:52.000000000 +0200 ++++ src/vendor/views/Stack/CardStack.tsx 2020-04-18 01:39:36.000000000 +0200 @@ -9,9 +9,8 @@ ViewProps, } from 'react-native'; @@ -496,8 +510,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-03-31 17:47:04.000000000 +0200 -+++ src/vendor/views/Stack/StackView.tsx 2020-03-31 18:06:18.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-04-18 01:38:52.000000000 +0200 ++++ src/vendor/views/Stack/StackView.tsx 2020-04-18 01:44:22.000000000 +0200 @@ -4,9 +4,9 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { @@ -527,7 +541,18 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView. }; type State = { -@@ -322,14 +324,37 @@ +@@ -292,7 +294,9 @@ + return false; + } + +- return gestureEnabled !== false; ++ return gestureEnabled !== undefined ++ ? gestureEnabled ++ : Platform.OS !== 'android'; + } + + return false; +@@ -320,14 +324,37 @@ return null; } @@ -566,7 +591,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView. this.setState((state) => ({ routes: state.replacingRouteKeys.length ? state.routes.filter((r) => !state.replacingRouteKeys.includes(r.key)) -@@ -351,12 +376,11 @@ +@@ -349,12 +376,11 @@ // If a route exists in state, trigger a pop // This will happen in when the route was closed from the card component // e.g. When the close animation triggered from a gesture ends @@ -583,7 +608,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView. // We need to clean up any state tracking the route and pop it immediately this.setState((state) => ({ routes: state.routes.filter((r) => r.key !== route.key), -@@ -373,22 +397,24 @@ +@@ -371,22 +397,24 @@ private handleTransitionStart = ( { route }: { route: Route }, closing: boolean diff --git a/packages/stack/src/index.tsx b/packages/stack/src/index.tsx index 2e38dd62..e2d0ab0b 100644 --- a/packages/stack/src/index.tsx +++ b/packages/stack/src/index.tsx @@ -8,7 +8,7 @@ export { default as createStackNavigator } from './navigators/createStackNavigat /** * Types */ -export { +export type { NavigationStackScreenComponent, NavigationStackScreenProps, } from './types'; diff --git a/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap b/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap index 6978dd1e..389badfa 100644 --- a/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap +++ b/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap @@ -115,7 +115,7 @@ exports[`Nested navigators renders succesfully as direct child 1`] = ` pointerEvents="none" style={ Object { - "backgroundColor": "#fff", + "backgroundColor": "rgb(242, 242, 242)", "bottom": 0, "left": 0, "position": "absolute", @@ -276,7 +276,7 @@ exports[`Nested navigators renders succesfully as direct child 1`] = ` pointerEvents="none" style={ Object { - "backgroundColor": "#fff", + "backgroundColor": "rgb(242, 242, 242)", "bottom": 0, "left": 0, "position": "absolute", diff --git a/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap b/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap index a7655141..d327a0e5 100644 --- a/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap +++ b/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap @@ -115,7 +115,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] = pointerEvents="none" style={ Object { - "backgroundColor": "#fff", + "backgroundColor": "rgb(242, 242, 242)", "bottom": 0, "left": 0, "position": "absolute", @@ -412,7 +412,7 @@ exports[`StackNavigator renders successfully 1`] = ` pointerEvents="none" style={ Object { - "backgroundColor": "#fff", + "backgroundColor": "rgb(242, 242, 242)", "bottom": 0, "left": 0, "position": "absolute", diff --git a/packages/stack/src/vendor/TransitionConfigs/CardStyleInterpolators.tsx b/packages/stack/src/vendor/TransitionConfigs/CardStyleInterpolators.tsx index 9aa987da..cd4cb56f 100644 --- a/packages/stack/src/vendor/TransitionConfigs/CardStyleInterpolators.tsx +++ b/packages/stack/src/vendor/TransitionConfigs/CardStyleInterpolators.tsx @@ -164,6 +164,7 @@ export function forModalPresentationIOS({ borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius, marginTop: index === 0 ? 0 : statusBarHeight, + marginBottom: index === 0 ? 0 : topOffset, transform: [{ translateY }, { scale }], }, overlayStyle: { opacity: overlayOpacity }, diff --git a/packages/stack/src/vendor/index.tsx b/packages/stack/src/vendor/index.tsx index 0276745a..61cea891 100644 --- a/packages/stack/src/vendor/index.tsx +++ b/packages/stack/src/vendor/index.tsx @@ -43,11 +43,12 @@ export { default as useGestureHandlerRef } from './utils/useGestureHandlerRef'; /** * Types */ -export { +export type { NavigationStackState, StackNavigationProp as NavigationStackProp, StackNavigationOptions as NavigationStackOptions, StackNavigationConfig as NavigationStackConfig, + StackHeaderProps, StackHeaderLeftButtonProps, StackHeaderTitleProps, StackCardInterpolatedStyle, diff --git a/packages/stack/src/vendor/views/Stack/Card.tsx b/packages/stack/src/vendor/views/Stack/Card.tsx index dc40ac32..d76673f8 100755 --- a/packages/stack/src/vendor/views/Stack/Card.tsx +++ b/packages/stack/src/vendor/views/Stack/Card.tsx @@ -517,6 +517,7 @@ export default class Card extends React.Component { : gestureDirection === 'vertical' ? [styles.shadowVertical, styles.shadowTop] : [styles.shadowVertical, styles.shadowBottom], + { backgroundColor }, shadowStyle, ]} pointerEvents="none" @@ -553,7 +554,6 @@ const styles = StyleSheet.create({ }, shadow: { position: 'absolute', - backgroundColor: '#fff', shadowRadius: 5, shadowColor: '#000', shadowOpacity: 0.3, diff --git a/packages/stack/src/vendor/views/Stack/CardStack.tsx b/packages/stack/src/vendor/views/Stack/CardStack.tsx index b3734f53..98f39ee5 100755 --- a/packages/stack/src/vendor/views/Stack/CardStack.tsx +++ b/packages/stack/src/vendor/views/Stack/CardStack.tsx @@ -75,6 +75,31 @@ type State = { const EPSILON = 0.01; +// The web implementation in react-native-screens seems buggy. +// The view doesn't become visible after coming back in some cases. +// So we use our custom implementation. +class WebScreen extends React.Component< + ViewProps & { + active: number; + children: React.ReactNode; + } +> { + render() { + const { active, style, ...rest } = this.props; + + return ( +