From 90eff6a5e29a43a30ad47e2d25c319febd754f59 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Wed, 22 Apr 2020 16:45:32 +0200 Subject: [PATCH] chore: sync latest stack --- packages/stack/package.json | 2 +- packages/stack/scripts/stack.patch | 93 +++++++++++-------- .../src/vendor/views/MaskedView.native.tsx | 15 ++- packages/stack/src/vendor/views/Screens.tsx | 71 ++++++++++++++ .../stack/src/vendor/views/Stack/Card.tsx | 2 +- .../src/vendor/views/Stack/CardStack.tsx | 65 +------------ .../src/vendor/views/Stack/StackView.tsx | 44 +++++---- yarn.lock | 8 +- 8 files changed, 170 insertions(+), 130 deletions(-) create mode 100644 packages/stack/src/vendor/views/Screens.tsx diff --git a/packages/stack/package.json b/packages/stack/package.json index 12d5b2d5..39b50e9a 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.11", + "@react-navigation/stack": "^5.2.12", "@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 30fefcef..e4772486 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-04-18 01:38:52.000000000 +0200 -+++ src/vendor/index.tsx 2020-04-18 01:41:48.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/index.tsx 2020-04-22 16:34:01.000000000 +0200 ++++ src/vendor/index.tsx 2020-04-22 16:34:39.000000000 +0200 @@ -3,11 +3,6 @@ import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs'; import * as TransitionPresets from './TransitionConfigs/TransitionPresets'; @@ -27,7 +27,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-04-18 01:38:52.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-04-22 16:34:01.000000000 +0200 +++ src/vendor/navigators/createStackNavigator.tsx 1970-01-01 01:00:00.000000000 +0100 @@ -1,96 +0,0 @@ -import * as React from 'react'; @@ -127,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-04-18 01:38:52.000000000 +0200 -+++ src/vendor/types.tsx 2020-04-18 01:39:36.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/types.tsx 2020-04-22 16:34:01.000000000 +0200 ++++ src/vendor/types.tsx 2020-04-22 16:34:39.000000000 +0200 @@ -8,14 +8,28 @@ } from 'react-native'; import { EdgeInsets } from 'react-native-safe-area-context'; @@ -254,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-04-18 01:38:52.000000000 +0200 -+++ src/vendor/views/Header/Header.tsx 2020-04-18 01:39:36.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-04-22 16:34:01.000000000 +0200 ++++ src/vendor/views/Header/Header.tsx 2020-04-22 16:34:39.000000000 +0200 @@ -1,12 +1,14 @@ import * as React from 'react'; -import { StackActions } from '@react-navigation/native'; @@ -335,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-04-18 01:38:52.000000000 +0200 -+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-04-18 01:39:36.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-04-22 16:34:01.000000000 +0200 ++++ src/vendor/views/Header/HeaderBackButton.tsx 2020-04-22 16:34:39.000000000 +0200 @@ -8,9 +8,9 @@ StyleSheet, LayoutChangeEvent, @@ -349,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-04-18 01:38:52.000000000 +0200 -+++ src/vendor/views/Header/HeaderBackground.tsx 2020-04-18 01:39:36.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-04-22 16:34:01.000000000 +0200 ++++ src/vendor/views/Header/HeaderBackground.tsx 2020-04-22 16:34:39.000000000 +0200 @@ -1,6 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, Platform, ViewProps } from 'react-native'; @@ -360,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-04-18 01:38:52.000000000 +0200 -+++ src/vendor/views/Header/HeaderContainer.tsx 2020-04-18 01:39:36.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-04-22 16:34:01.000000000 +0200 ++++ src/vendor/views/Header/HeaderContainer.tsx 2020-04-22 16:34:39.000000000 +0200 @@ -1,11 +1,6 @@ import * as React from 'react'; import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; @@ -413,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-04-18 01:38:52.000000000 +0200 -+++ src/vendor/views/Header/HeaderSegment.tsx 2020-04-18 01:39:36.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-04-22 16:34:01.000000000 +0200 ++++ src/vendor/views/Header/HeaderSegment.tsx 2020-04-22 16:34:39.000000000 +0200 @@ -8,7 +8,7 @@ ViewStyle, } from 'react-native'; @@ -434,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-04-18 01:38:52.000000000 +0200 -+++ src/vendor/views/Header/HeaderTitle.tsx 2020-04-18 01:39:36.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-04-22 16:34:01.000000000 +0200 ++++ src/vendor/views/Header/HeaderTitle.tsx 2020-04-22 16:34:39.000000000 +0200 @@ -1,6 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, Platform } from 'react-native'; @@ -445,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-04-18 01:38:52.000000000 +0200 -+++ src/vendor/views/Stack/Card.tsx 2020-04-18 01:39:36.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-04-22 16:34:01.000000000 +0200 ++++ src/vendor/views/Stack/Card.tsx 2020-04-22 16:34:39.000000000 +0200 @@ -138,7 +138,7 @@ private interactionHandle: number | undefined; @@ -457,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-04-18 01:38:52.000000000 +0200 -+++ src/vendor/views/Stack/CardContainer.tsx 2020-04-18 01:39:36.000000000 +0200 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-04-22 16:34:01.000000000 +0200 ++++ src/vendor/views/Stack/CardContainer.tsx 2020-04-22 16:34:39.000000000 +0200 @@ -1,10 +1,16 @@ import * as React from 'react'; import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; @@ -488,20 +488,18 @@ 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-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, +--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-04-22 16:34:01.000000000 +0200 ++++ src/vendor/views/Stack/CardStack.tsx 2020-04-22 16:35:12.000000000 +0200 +@@ -7,7 +7,7 @@ + Platform, } from 'react-native'; import { EdgeInsets } from 'react-native-safe-area-context'; --// eslint-disable-next-line import/no-unresolved - import { ScreenContainer, Screen, screensEnabled } from 'react-native-screens'; // Import with * as to prevent getters being called -import { Route, StackNavigationState } from '@react-navigation/native'; +import { NavigationState as StackNavigationState } from 'react-navigation'; + import { MaybeScreenContainer, MaybeScreen } from '../Screens'; import { getDefaultHeaderHeight } from '../Header/HeaderSegment'; - import { Props as HeaderContainerProps } from '../Header/HeaderContainer'; -@@ -24,6 +23,7 @@ +@@ -21,6 +21,7 @@ import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators'; import getDistanceForDirection from '../../utils/getDistanceForDirection'; import { @@ -510,9 +508,9 @@ 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-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 @@ +--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-04-22 16:34:01.000000000 +0200 ++++ src/vendor/views/Stack/StackView.tsx 2020-04-22 16:38:12.000000000 +0200 +@@ -4,9 +4,10 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { StackActions, @@ -520,12 +518,13 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView. - Route, -} from '@react-navigation/native'; + NavigationState as StackNavigationState, ++ NavigationActions, + SceneView, +} from 'react-navigation'; import CardStack from './CardStack'; import KeyboardManager from '../KeyboardManager'; -@@ -15,6 +15,7 @@ +@@ -15,6 +16,7 @@ } from '../Header/HeaderContainer'; import SafeAreaProviderCompat from '../SafeAreaProviderCompat'; import { @@ -533,7 +532,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView. StackNavigationHelpers, StackNavigationConfig, StackDescriptorMap, -@@ -24,6 +25,7 @@ +@@ -24,6 +26,7 @@ state: StackNavigationState; navigation: StackNavigationHelpers; descriptors: StackDescriptorMap; @@ -541,7 +540,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView. }; type State = { -@@ -292,7 +294,9 @@ +@@ -292,7 +295,9 @@ return false; } @@ -552,7 +551,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView. } return false; -@@ -320,14 +324,37 @@ +@@ -320,23 +325,44 @@ return null; } @@ -587,11 +586,23 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView. + }; + private handleOpenRoute = ({ route }: { route: Route }) => { + const { state, navigation } = this.props; + +- if ( +- state.routeNames.includes(route.name) && +- !state.routes.some((r) => r.key === route.key) +- ) { + this.handleTransitionComplete(); - this.setState((state) => ({ - routes: state.replacingRouteKeys.length - ? state.routes.filter((r) => !state.replacingRouteKeys.includes(r.key)) -@@ -349,12 +376,11 @@ ++ ++ if (!state.routes.some((r) => r.key === route.key)) { + // If route isn't present in current state, assume that a close animation was cancelled + // So we need to add this route back to the state +- navigation.navigate(route); ++ navigation.dispatch(NavigationActions.navigate(route)); + } else { + this.setState((state) => ({ + routes: state.replacingRouteKeys.length +@@ -362,12 +388,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 @@ -608,7 +619,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), -@@ -371,22 +397,24 @@ +@@ -384,22 +409,24 @@ private handleTransitionStart = ( { route }: { route: Route }, closing: boolean diff --git a/packages/stack/src/vendor/views/MaskedView.native.tsx b/packages/stack/src/vendor/views/MaskedView.native.tsx index d75e7b78..6a092da3 100644 --- a/packages/stack/src/vendor/views/MaskedView.native.tsx +++ b/packages/stack/src/vendor/views/MaskedView.native.tsx @@ -1,17 +1,26 @@ import * as React from 'react'; import { UIManager } from 'react-native'; -import RNCMaskedView from '@react-native-community/masked-view'; -type Props = React.ComponentProps & { +type MaskedViewType = typeof import('@react-native-community/masked-view').default; + +type Props = React.ComponentProps & { children: React.ReactElement; }; +let RNCMaskedView: MaskedViewType | undefined; + +try { + RNCMaskedView = require('@react-native-community/masked-view').default; +} catch (e) { + // Ignore +} + const isMaskedViewAvailable = // @ts-ignore UIManager.getViewManagerConfig('RNCMaskedView') != null; export default function MaskedView({ children, ...rest }: Props) { - if (isMaskedViewAvailable) { + if (isMaskedViewAvailable && RNCMaskedView) { return {children}; } diff --git a/packages/stack/src/vendor/views/Screens.tsx b/packages/stack/src/vendor/views/Screens.tsx new file mode 100644 index 00000000..a616fd1a --- /dev/null +++ b/packages/stack/src/vendor/views/Screens.tsx @@ -0,0 +1,71 @@ +import * as React from 'react'; +import { Animated, View, Platform, ViewProps } from 'react-native'; + +let Screens: typeof import('react-native-screens') | undefined; + +try { + Screens = require('react-native-screens'); +} catch (e) { + // Ignore +} + +// 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 ( +