diff --git a/packages/stack/package.json b/packages/stack/package.json index 6ffd3a04..4bbb3e17 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.0", + "@react-navigation/stack": "^5.2.2", "@types/color": "^3.0.1", "@types/react": "^16.9.23", "@types/react-native": "^0.61.22", diff --git a/packages/stack/scripts/stack.patch b/packages/stack/scripts/stack.patch index ca761bde..4e7692f5 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-16 14:39:49.000000000 +0100 -+++ src/vendor/index.tsx 2020-03-16 14:41:12.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/index.tsx 2020-03-19 20:09:01.000000000 +0100 ++++ src/vendor/index.tsx 2020-03-19 20:09:16.000000000 +0100 @@ -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 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-16 14:39:49.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-03-19 20:09:01.000000000 +0100 +++ src/vendor/navigators/createStackNavigator.tsx 1970-01-01 01:00:00.000000000 +0100 @@ -1,81 +0,0 @@ -import * as React from 'react'; @@ -113,8 +113,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-16 14:39:49.000000000 +0100 -+++ src/vendor/types.tsx 2020-03-16 14:47:01.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/types.tsx 2020-03-19 20:09:01.000000000 +0100 ++++ src/vendor/types.tsx 2020-03-19 20:09:16.000000000 +0100 @@ -8,14 +8,28 @@ } from 'react-native'; import { EdgeInsets } from 'react-native-safe-area-context'; @@ -240,8 +240,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-16 14:39:49.000000000 +0100 -+++ src/vendor/views/Header/Header.tsx 2020-03-16 14:41:16.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-03-19 20:09:01.000000000 +0100 ++++ src/vendor/views/Header/Header.tsx 2020-03-19 20:09:16.000000000 +0100 @@ -1,12 +1,14 @@ import * as React from 'react'; -import { StackActions } from '@react-navigation/native'; @@ -321,8 +321,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-16 14:39:49.000000000 +0100 -+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-03-16 14:41:16.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-03-19 20:09:01.000000000 +0100 ++++ src/vendor/views/Header/HeaderBackButton.tsx 2020-03-19 20:09:16.000000000 +0100 @@ -8,9 +8,9 @@ StyleSheet, LayoutChangeEvent, @@ -335,8 +335,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-16 14:39:49.000000000 +0100 -+++ src/vendor/views/Header/HeaderBackground.tsx 2020-03-16 14:41:16.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-03-19 20:09:01.000000000 +0100 ++++ src/vendor/views/Header/HeaderBackground.tsx 2020-03-19 20:09:16.000000000 +0100 @@ -1,6 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, Platform, ViewProps } from 'react-native'; @@ -346,8 +346,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-16 14:39:49.000000000 +0100 -+++ src/vendor/views/Header/HeaderContainer.tsx 2020-03-16 14:41:16.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-03-19 20:09:01.000000000 +0100 ++++ src/vendor/views/Header/HeaderContainer.tsx 2020-03-19 20:09:16.000000000 +0100 @@ -1,11 +1,6 @@ import * as React from 'react'; import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; @@ -399,8 +399,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-16 14:39:49.000000000 +0100 -+++ src/vendor/views/Header/HeaderSegment.tsx 2020-03-16 14:41:16.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-03-19 20:09:01.000000000 +0100 ++++ src/vendor/views/Header/HeaderSegment.tsx 2020-03-19 20:09:16.000000000 +0100 @@ -8,7 +8,7 @@ ViewStyle, } from 'react-native'; @@ -420,8 +420,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-16 14:39:49.000000000 +0100 -+++ src/vendor/views/Header/HeaderTitle.tsx 2020-03-16 14:43:23.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-03-19 20:09:01.000000000 +0100 ++++ src/vendor/views/Header/HeaderTitle.tsx 2020-03-19 20:09:16.000000000 +0100 @@ -1,6 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, Platform } from 'react-native'; @@ -431,8 +431,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-16 14:39:49.000000000 +0100 -+++ src/vendor/views/Stack/Card.tsx 2020-03-16 14:41:16.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-03-19 20:09:01.000000000 +0100 ++++ src/vendor/views/Stack/Card.tsx 2020-03-19 20:09:16.000000000 +0100 @@ -138,7 +138,7 @@ private interactionHandle: number | undefined; @@ -443,8 +443,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-16 14:39:49.000000000 +0100 -+++ src/vendor/views/Stack/CardContainer.tsx 2020-03-16 14:41:16.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-03-19 20:09:01.000000000 +0100 ++++ src/vendor/views/Stack/CardContainer.tsx 2020-03-19 20:09:16.000000000 +0100 @@ -1,10 +1,16 @@ import * as React from 'react'; import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; @@ -500,8 +500,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-16 14:39:49.000000000 +0100 -+++ src/vendor/views/Stack/CardStack.tsx 2020-03-16 14:41:16.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-03-19 20:09:01.000000000 +0100 ++++ src/vendor/views/Stack/CardStack.tsx 2020-03-19 20:09:16.000000000 +0100 @@ -9,9 +9,8 @@ ViewProps, } from 'react-native'; @@ -529,7 +529,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack. onTransitionStart: ( props: { route: Route }, closing: boolean -@@ -371,6 +372,7 @@ +@@ -383,6 +384,7 @@ renderHeader, renderScene, headerMode, @@ -537,7 +537,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack. onTransitionStart, onTransitionEnd, onPageChangeStart, -@@ -548,6 +550,7 @@ +@@ -560,6 +562,7 @@ renderScene={renderScene} onOpenRoute={onOpenRoute} onCloseRoute={onCloseRoute} @@ -546,8 +546,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack. onTransitionEnd={onTransitionEnd} gestureEnabled={index !== 0 && getGesturesEnabled({ route })} 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-16 14:39:49.000000000 +0100 -+++ src/vendor/views/Stack/StackView.tsx 2020-03-16 15:41:41.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-03-19 20:09:01.000000000 +0100 ++++ src/vendor/views/Stack/StackView.tsx 2020-03-19 20:09:16.000000000 +0100 @@ -4,9 +4,9 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { diff --git a/packages/stack/src/vendor/views/KeyboardManager.tsx b/packages/stack/src/vendor/views/KeyboardManager.tsx index 68d212e8..b7d134cd 100644 --- a/packages/stack/src/vendor/views/KeyboardManager.tsx +++ b/packages/stack/src/vendor/views/KeyboardManager.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { TextInput, Keyboard } from 'react-native'; +import { TextInput } from 'react-native'; type Props = { enabled: boolean; @@ -54,7 +54,11 @@ export default class KeyboardManager extends React.Component { this.clearKeyboardTimeout(); - Keyboard.dismiss(); + const input = this.previouslyFocusedTextInput; + + if (input) { + TextInput.State.blurTextInput(input); + } // Cleanup the ID on successful page change this.previouslyFocusedTextInput = null; diff --git a/packages/stack/src/vendor/views/Stack/Card.tsx b/packages/stack/src/vendor/views/Stack/Card.tsx index d7dc7634..1fe49f02 100755 --- a/packages/stack/src/vendor/views/Stack/Card.tsx +++ b/packages/stack/src/vendor/views/Stack/Card.tsx @@ -271,6 +271,14 @@ export default class Card extends React.Component { velocity = nativeEvent.velocityX; } + if ( + gestureDirection === 'horizontal-inverted' || + gestureDirection === 'vertical-inverted' + ) { + translation *= -1; + velocity *= -1; + } + const closing = translation + velocity * gestureVelocityImpact > distance / 2 ? velocity !== 0 || translation !== 0 diff --git a/packages/stack/src/vendor/views/Stack/CardStack.tsx b/packages/stack/src/vendor/views/Stack/CardStack.tsx index 628ffdec..95444bb9 100755 --- a/packages/stack/src/vendor/views/Stack/CardStack.tsx +++ b/packages/stack/src/vendor/views/Stack/CardStack.tsx @@ -76,9 +76,6 @@ type State = { const EPSILON = 0.01; -const dimensions = Dimensions.get('window'); -const layout = { width: dimensions.width, height: dimensions.height }; - const MaybeScreenContainer = ({ enabled, ...rest @@ -161,7 +158,16 @@ const getProgressFromGesture = ( layout: Layout, descriptor?: StackDescriptor ) => { - const distance = getDistanceFromOptions(mode, layout, descriptor); + const distance = getDistanceFromOptions( + mode, + { + // Make sure that we have a non-zero distance, otherwise there will be incorrect progress + // This causes blank screen on web if it was previously inside container with display: none + width: Math.max(1, layout.width), + height: Math.max(1, layout.height), + }, + descriptor + ); if (distance > 0) { return gesture.interpolate({ @@ -291,19 +297,25 @@ export default class CardStack extends React.Component { }; } - state: State = { - routes: [], - scenes: [], - gestures: {}, - layout, - descriptors: this.props.descriptors, - // Used when card's header is null and mode is float to make transition - // between screens with headers and those without headers smooth. - // This is not a great heuristic here. We don't know synchronously - // on mount what the header height is so we have just used the most - // common cases here. - headerHeights: {}, - }; + constructor(props: Props) { + super(props); + + const { height = 0, width = 0 } = Dimensions.get('window'); + + this.state = { + routes: [], + scenes: [], + gestures: {}, + layout: { height, width }, + descriptors: this.props.descriptors, + // Used when card's header is null and mode is float to make transition + // between screens with headers and those without headers smooth. + // This is not a great heuristic here. We don't know synchronously + // on mount what the header height is so we have just used the most + // common cases here. + headerHeights: {}, + }; + } private handleLayout = (e: LayoutChangeEvent) => { const { height, width } = e.nativeEvent.layout; @@ -403,9 +415,9 @@ export default class CardStack extends React.Component { left = insets.left, } = focusedOptions.safeAreaInsets || {}; - // Screens is buggy on iOS, so we don't enable it there + // Screens is buggy on iOS and web, so we only enable it on Android // For modals, usually we want the screen underneath to be visible, so also disable it there - const isScreensEnabled = Platform.OS !== 'ios' && mode !== 'modal'; + const isScreensEnabled = Platform.OS === 'android' && mode !== 'modal'; return ( diff --git a/yarn.lock b/yarn.lock index 8f3e0642..ce62056b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3268,10 +3268,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.2.0": - version "5.2.0" - resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.2.0.tgz#e16138cd23b457594e790999552ab3d72e8e2707" - integrity sha512-lFTVV1S9YEPsIxzLUPY95Y2lqmday79uOadOopQkjq3JWmZTXBJDMW9jgV8B+F5EfUh0VabQ2zX06OfjxrvtUw== +"@react-navigation/stack@^5.2.2": + version "5.2.2" + resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.2.2.tgz#2ad170250c9e4eb9715d3fa05d780f47d9c2644d" + integrity sha512-9xBIIDuGFtPTKfESQ0xPxCRACngcLSMJYWql583v8HRZidT4fdOlIKbmhNZ+iPhwvRbjDm/mxMat7R9CBakoDg== dependencies: color "^3.1.2" react-native-iphone-x-helper "^1.2.1"