diff --git a/packages/stack/package.json b/packages/stack/package.json index b82d28ec..0aab838b 100644 --- a/packages/stack/package.json +++ b/packages/stack/package.json @@ -45,7 +45,7 @@ "devDependencies": { "@react-native-community/bob": "^0.9.7", "@react-native-community/masked-view": "^0.1.6", - "@react-navigation/stack": "^5.0.9", + "@react-navigation/stack": "^5.1.1", "@types/color": "^3.0.1", "@types/react": "^16.9.22", "@types/react-native": "^0.61.17", diff --git a/packages/stack/scripts/stack.patch b/packages/stack/scripts/stack.patch index c1aa3b5b..87b4b183 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-02-24 11:53:26.000000000 +0100 -+++ src/vendor/index.tsx 2020-02-24 11:58:26.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/index.tsx 2020-03-03 23:57:02.000000000 +0100 ++++ src/vendor/index.tsx 2020-03-04 00:03:45.000000000 +0100 @@ -3,11 +3,6 @@ import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs'; import * as TransitionPresets from './TransitionConfigs/TransitionPresets'; @@ -28,9 +28,9 @@ 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-02-24 11:53:26.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-03-03 23:57:02.000000000 +0100 +++ src/vendor/navigators/createStackNavigator.tsx 1970-01-01 01:00:00.000000000 +0100 -@@ -1,79 +0,0 @@ +@@ -1,81 +0,0 @@ -import * as React from 'react'; -import { - useNavigationBuilder, @@ -107,12 +107,14 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStack -} - -export default createNavigatorFactory< +- StackNavigationState, - StackNavigationOptions, +- StackNavigationEventMap, - 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-02-24 11:53:26.000000000 +0100 -+++ src/vendor/types.tsx 2020-02-24 12:05:09.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/types.tsx 2020-03-03 23:57:02.000000000 +0100 ++++ src/vendor/types.tsx 2020-03-04 00:03:48.000000000 +0100 @@ -7,13 +7,28 @@ } from 'react-native'; import { EdgeInsets } from 'react-native-safe-area-context'; @@ -256,8 +258,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/BorderlessButton.tsx src/vendor/views/BorderlessButton.tsx ---- ../../node_modules/@react-navigation/stack/src/views/BorderlessButton.tsx 2020-02-24 11:53:26.000000000 +0100 -+++ src/vendor/views/BorderlessButton.tsx 2020-02-24 12:50:48.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/BorderlessButton.tsx 2020-03-03 23:57:02.000000000 +0100 ++++ src/vendor/views/BorderlessButton.tsx 2020-03-04 00:03:48.000000000 +0100 @@ -39,6 +39,7 @@ const { children, style, enabled, ...rest } = this.props; @@ -267,8 +269,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/BorderlessButton {...rest} onActiveStateChange={this.handleActiveStateChange} 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-02-24 11:53:26.000000000 +0100 -+++ src/vendor/views/Header/Header.tsx 2020-02-24 12:48:47.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-03-03 23:57:02.000000000 +0100 ++++ src/vendor/views/Header/Header.tsx 2020-03-04 00:04:05.000000000 +0100 @@ -1,12 +1,14 @@ import * as React from 'react'; -import { StackActions } from '@react-navigation/native'; @@ -306,7 +308,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts const goBack = React.useCallback( debounce(() => { -- if (navigation.canGoBack()) { +- if (navigation.isFocused() && navigation.canGoBack()) { - navigation.dispatch({ - ...StackActions.pop(), - source: scene.route.key, @@ -348,8 +350,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-02-24 11:53:26.000000000 +0100 -+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-02-24 11:58:32.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-03-03 23:57:02.000000000 +0100 ++++ src/vendor/views/Header/HeaderBackButton.tsx 2020-03-04 00:03:48.000000000 +0100 @@ -8,9 +8,9 @@ StyleSheet, LayoutChangeEvent, @@ -362,8 +364,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-02-24 11:53:26.000000000 +0100 -+++ src/vendor/views/Header/HeaderBackground.tsx 2020-02-24 11:58:32.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-03-03 23:57:02.000000000 +0100 ++++ src/vendor/views/Header/HeaderBackground.tsx 2020-03-04 00:03:48.000000000 +0100 @@ -1,6 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, Platform, ViewProps } from 'react-native'; @@ -373,8 +375,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-02-24 11:53:26.000000000 +0100 -+++ src/vendor/views/Header/HeaderContainer.tsx 2020-02-24 12:08:14.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-03-03 23:57:02.000000000 +0100 ++++ src/vendor/views/Header/HeaderContainer.tsx 2020-03-04 00:03:48.000000000 +0100 @@ -1,11 +1,6 @@ import * as React from 'react'; import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; @@ -426,8 +428,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-02-24 11:53:26.000000000 +0100 -+++ src/vendor/views/Header/HeaderSegment.tsx 2020-02-24 11:58:32.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-03-03 23:57:02.000000000 +0100 ++++ src/vendor/views/Header/HeaderSegment.tsx 2020-03-04 00:03:48.000000000 +0100 @@ -8,7 +8,7 @@ ViewStyle, } from 'react-native'; @@ -447,8 +449,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-02-24 11:53:26.000000000 +0100 -+++ src/vendor/views/Header/HeaderTitle.tsx 2020-02-24 12:47:49.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-03-03 23:57:02.000000000 +0100 ++++ src/vendor/views/Header/HeaderTitle.tsx 2020-03-04 00:03:48.000000000 +0100 @@ -1,8 +1,8 @@ import * as React from 'react'; -import { Animated, StyleSheet, Platform, TextProps } from 'react-native'; @@ -462,8 +464,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTit children?: 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-02-24 11:53:26.000000000 +0100 -+++ src/vendor/views/Stack/Card.tsx 2020-02-24 11:58:32.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-03-03 23:57:02.000000000 +0100 ++++ src/vendor/views/Stack/Card.tsx 2020-03-04 00:03:48.000000000 +0100 @@ -133,7 +133,7 @@ private interactionHandle: number | undefined; @@ -483,8 +485,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx s 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-02-24 11:53:26.000000000 +0100 -+++ src/vendor/views/Stack/CardContainer.tsx 2020-02-24 11:58:32.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-03-03 23:57:02.000000000 +0100 ++++ src/vendor/views/Stack/CardContainer.tsx 2020-03-04 13:24:38.000000000 +0100 @@ -1,10 +1,16 @@ import * as React from 'react'; import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; @@ -504,7 +506,33 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContai type Props = TransitionPreset & { index: number; -@@ -180,7 +186,7 @@ +@@ -35,6 +41,7 @@ + closing: boolean + ) => void; + onTransitionEnd?: (props: { route: Route }, closing: boolean) => void; ++ onTransitionComplete: (props: { route: Route }) => void; + onPageChangeStart?: () => void; + onPageChangeConfirm?: () => void; + onPageChangeCancel?: () => void; +@@ -81,6 +88,7 @@ + layout, + onCloseRoute, + onOpenRoute, ++ onTransitionComplete, + onPageChangeCancel, + onPageChangeConfirm, + onPageChangeStart, +@@ -150,6 +158,9 @@ + }; + }, [pointerEvents, scene.progress.next]); + ++ // eslint-disable-next-line react-hooks/exhaustive-deps ++ React.useEffect(() => onTransitionComplete({ route: scene.route }), []); ++ + return ( + 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-02-24 11:53:26.000000000 +0100 -+++ src/vendor/views/Stack/CardStack.tsx 2020-02-24 12:09:38.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-03-03 23:57:02.000000000 +0100 ++++ src/vendor/views/Stack/CardStack.tsx 2020-03-04 13:31:28.000000000 +0100 @@ -9,9 +9,8 @@ ViewProps, } from 'react-native'; @@ -535,18 +563,33 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack. Layout, StackHeaderMode, StackCardMode, -@@ -103,7 +103,7 @@ - - ); +@@ -54,6 +54,7 @@ + renderHeader: (props: HeaderContainerProps) => React.ReactNode; + renderScene: (props: { route: Route }) => React.ReactNode; + headerMode: StackHeaderMode; ++ onTransitionComplete: (props: { route: Route }) => void; + onTransitionStart: ( + props: { route: Route }, + closing: boolean +@@ -371,6 +372,7 @@ + renderHeader, + renderScene, + headerMode, ++ onTransitionComplete, + onTransitionStart, + onTransitionEnd, + onPageChangeStart, +@@ -546,6 +548,7 @@ + renderScene={renderScene} + onOpenRoute={onOpenRoute} + onCloseRoute={onCloseRoute} ++ onTransitionComplete={onTransitionComplete} + onTransitionStart={onTransitionStart} + 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-02-24 11:53:26.000000000 +0100 -+++ src/vendor/views/Stack/StackView.tsx 2020-02-24 12:09:08.000000000 +0100 +--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-03-03 23:57:02.000000000 +0100 ++++ src/vendor/views/Stack/StackView.tsx 2020-03-04 13:24:28.000000000 +0100 @@ -4,9 +4,9 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { @@ -576,7 +619,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView. }; type State = { -@@ -290,14 +292,31 @@ +@@ -290,14 +292,37 @@ return null; } @@ -598,10 +641,16 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView. }; + private handleTransitionComplete = ({ route }: { route: Route }) => { -+ // TODO: remove when the new event system lands -+ this.props.navigation.dispatch( -+ StackActions.completeTransition({ toChildKey: route.key }) -+ ); ++ const { state, navigation } = this.props; ++ ++ if (state.isTransitioning) { ++ navigation.dispatch( ++ StackActions.completeTransition({ ++ key: navigation.state.key, ++ toChildKey: route.key, ++ }) ++ ); ++ } + }; + private handleOpenRoute = ({ route }: { route: Route }) => { @@ -609,7 +658,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)) -@@ -315,12 +334,17 @@ +@@ -315,12 +340,17 @@ // 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 @@ -632,7 +681,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), -@@ -337,22 +361,24 @@ +@@ -337,22 +367,24 @@ private handleTransitionStart = ( { route }: { route: Route }, closing: boolean @@ -669,3 +718,11 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView. render() { const { +@@ -391,6 +423,7 @@ + closingRouteKeys={closingRouteKeys} + onOpenRoute={this.handleOpenRoute} + onCloseRoute={this.handleCloseRoute} ++ onTransitionComplete={this.handleTransitionComplete} + onTransitionStart={this.handleTransitionStart} + onTransitionEnd={this.handleTransitionEnd} + renderHeader={this.renderHeader} diff --git a/packages/stack/src/vendor/views/Stack/CardContainer.tsx b/packages/stack/src/vendor/views/Stack/CardContainer.tsx index 24e4d311..e1a135c3 100644 --- a/packages/stack/src/vendor/views/Stack/CardContainer.tsx +++ b/packages/stack/src/vendor/views/Stack/CardContainer.tsx @@ -41,6 +41,7 @@ type Props = TransitionPreset & { closing: boolean ) => void; onTransitionEnd?: (props: { route: Route }, closing: boolean) => void; + onTransitionComplete: (props: { route: Route }) => void; onPageChangeStart?: () => void; onPageChangeConfirm?: () => void; onPageChangeCancel?: () => void; @@ -87,6 +88,7 @@ function CardContainer({ layout, onCloseRoute, onOpenRoute, + onTransitionComplete, onPageChangeCancel, onPageChangeConfirm, onPageChangeStart, @@ -156,6 +158,9 @@ function CardContainer({ }; }, [pointerEvents, scene.progress.next]); + // eslint-disable-next-line react-hooks/exhaustive-deps + React.useEffect(() => onTransitionComplete({ route: scene.route }), []); + return ( React.ReactNode; renderScene: (props: { route: Route }) => React.ReactNode; headerMode: StackHeaderMode; + onTransitionComplete: (props: { route: Route }) => void; onTransitionStart: ( props: { route: Route }, closing: boolean @@ -371,6 +372,7 @@ export default class CardStack extends React.Component { renderHeader, renderScene, headerMode, + onTransitionComplete, onTransitionStart, onTransitionEnd, onPageChangeStart, @@ -546,6 +548,7 @@ export default class CardStack extends React.Component { renderScene={renderScene} onOpenRoute={onOpenRoute} onCloseRoute={onCloseRoute} + onTransitionComplete={onTransitionComplete} onTransitionStart={onTransitionStart} onTransitionEnd={onTransitionEnd} gestureEnabled={index !== 0 && getGesturesEnabled({ route })} diff --git a/packages/stack/src/vendor/views/Stack/StackView.tsx b/packages/stack/src/vendor/views/Stack/StackView.tsx index d06dd8f6..8ed40e95 100644 --- a/packages/stack/src/vendor/views/Stack/StackView.tsx +++ b/packages/stack/src/vendor/views/Stack/StackView.tsx @@ -309,10 +309,16 @@ export default class StackView extends React.Component { }; private handleTransitionComplete = ({ route }: { route: Route }) => { - // TODO: remove when the new event system lands - this.props.navigation.dispatch( - StackActions.completeTransition({ toChildKey: route.key }) - ); + const { state, navigation } = this.props; + + if (state.isTransitioning) { + navigation.dispatch( + StackActions.completeTransition({ + key: navigation.state.key, + toChildKey: route.key, + }) + ); + } }; private handleOpenRoute = ({ route }: { route: Route }) => { @@ -417,6 +423,7 @@ export default class StackView extends React.Component { closingRouteKeys={closingRouteKeys} onOpenRoute={this.handleOpenRoute} onCloseRoute={this.handleCloseRoute} + onTransitionComplete={this.handleTransitionComplete} onTransitionStart={this.handleTransitionStart} onTransitionEnd={this.handleTransitionEnd} renderHeader={this.renderHeader} diff --git a/yarn.lock b/yarn.lock index b7cb7dc3..2252d4fa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3036,10 +3036,10 @@ resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.6.tgz#c7f2ac187c1f25aa8c30d11baa8f4398eca3bb84" integrity sha512-PpMoeXwPUoldCRKDuSi+zK5rT+sJTW6ri6RdGPkSKRzU77Q1d9IaR0O5IKvBj0XSdL3p+dcOa05gk35aGDffBQ== -"@react-navigation/stack@^5.0.9": - version "5.0.9" - resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.0.9.tgz#f6b0a17bf3658d406c4f8b594924c2b79b8b930d" - integrity sha512-6cgOCvvX4N35d2y+NX36qN25w8bjsJXVoo213cXB23X6SVRSRqbAPOWE98rsHyX6REYPyJx200k7U09xiwCImg== +"@react-navigation/stack@^5.1.1": + version "5.1.1" + resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.1.1.tgz#4fff1dc3fec66d7b71cfc31691d6e83d8777d5f8" + integrity sha512-tQV4SNESAeqViItGFT8bLrCGWxYfSjw4uXGrCokzSBOMtrdUwINwXDqo40LZt/KZOT0kVN6MdzHq57ILB1LsGA== dependencies: color "^3.1.2" react-native-iphone-x-helper "^1.2.1"