From 9ac1904862045804746e50ea12f4687747aeee19 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Wed, 1 Jan 2020 17:37:34 +0100 Subject: [PATCH] refactor: migrate to animated --- packages/stack/.circleci/config.yml | 2 +- packages/stack/example/.eslintrc | 1 - packages/stack/example/package.json | 2 +- .../stack/example/src/DragLimitedToModal.tsx | 5 +- packages/stack/example/src/ModalStack.tsx | 5 +- .../src/StackAnimationConsumerStack.tsx | 21 +- .../stack/example/src/TransparentStack.tsx | 3 +- packages/stack/example/yarn.lock | 2 +- packages/stack/jest-setup.js | 4 - packages/stack/package.json | 6 +- packages/stack/scripts/stack.patch | 167 ++++---- .../NestedNavigator.test.tsx.snap | 334 +++++++--------- .../StackNavigator.test.tsx.snap | 368 +++++++----------- packages/stack/yarn.lock | 33 +- 14 files changed, 390 insertions(+), 563 deletions(-) diff --git a/packages/stack/.circleci/config.yml b/packages/stack/.circleci/config.yml index 581a3633..74e3a289 100644 --- a/packages/stack/.circleci/config.yml +++ b/packages/stack/.circleci/config.yml @@ -22,7 +22,7 @@ jobs: - v1-dependencies-example- - run: | yarn install --frozen-lockfile --cwd example - yarn install --frozen-lockfile + yarn install --frozen-lockfile --ignore-scripts yarn sync - save_cache: key: v1-dependencies-{{ checksum "yarn.lock" }} diff --git a/packages/stack/example/.eslintrc b/packages/stack/example/.eslintrc index aad8193e..3930ddaf 100644 --- a/packages/stack/example/.eslintrc +++ b/packages/stack/example/.eslintrc @@ -8,7 +8,6 @@ 'expo-asset', 'react-navigation-stack', 'react-native-gesture-handler', - 'react-native-reanimated', 'react-native-vector-icons', ], }, diff --git a/packages/stack/example/package.json b/packages/stack/example/package.json index 77b47269..d1f0352c 100644 --- a/packages/stack/example/package.json +++ b/packages/stack/example/package.json @@ -20,7 +20,7 @@ "react-native-gesture-handler": "~1.5.0", "react-native-maps": "0.26.1", "react-native-paper": "^2.15.2", - "react-native-reanimated": "~1.4.0", + "react-native-reanimated": "^1.4.0", "react-native-safe-area-context": "0.6.0", "react-native-unimodules": "^0.7.0-rc.1", "react-native-web": "^0.11.4", diff --git a/packages/stack/example/src/DragLimitedToModal.tsx b/packages/stack/example/src/DragLimitedToModal.tsx index 7e63b400..9db181c5 100644 --- a/packages/stack/example/src/DragLimitedToModal.tsx +++ b/packages/stack/example/src/DragLimitedToModal.tsx @@ -1,12 +1,9 @@ import React from 'react'; import { View, Text, StyleSheet, Dimensions } from 'react-native'; -import Animated from 'react-native-reanimated'; import { NavigationStackScreenComponent } from 'react-navigation-stack'; const HEIGHT = Dimensions.get('screen').height; -const { interpolate } = Animated; - const DragLimitedToModal: NavigationStackScreenComponent = () => ( Adjusts to the size of text @@ -18,7 +15,7 @@ DragLimitedToModal.navigationOptions = { gestureDirection: 'vertical', gestureResponseDistance: { vertical: HEIGHT }, cardStyleInterpolator: ({ current }) => { - const translateY = interpolate(current.progress, { + const translateY = current.progress.interpolate({ inputRange: [0, 1], outputRange: [HEIGHT, 0], }); diff --git a/packages/stack/example/src/ModalStack.tsx b/packages/stack/example/src/ModalStack.tsx index ddee09c6..1bb74d79 100644 --- a/packages/stack/example/src/ModalStack.tsx +++ b/packages/stack/example/src/ModalStack.tsx @@ -13,9 +13,6 @@ import { NavigationStackScreenProps, StackCardStyleInterpolator, } from 'react-navigation-stack'; -import Animated from 'react-native-reanimated'; - -const { interpolate } = Animated; const gestureResponseDistance = { vertical: Dimensions.get('window').height, @@ -25,7 +22,7 @@ const forVerticalInvertedIOS: StackCardStyleInterpolator = ({ current: { progress }, layouts: { screen }, }) => { - const translateY = interpolate(progress, { + const translateY = progress.interpolate({ inputRange: [0, 1], outputRange: [-screen.height, 0], }); diff --git a/packages/stack/example/src/StackAnimationConsumerStack.tsx b/packages/stack/example/src/StackAnimationConsumerStack.tsx index 6aba3ce5..0f0d85b0 100644 --- a/packages/stack/example/src/StackAnimationConsumerStack.tsx +++ b/packages/stack/example/src/StackAnimationConsumerStack.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { Button, View } from 'react-native'; -import Animated from 'react-native-reanimated'; +import { Animated, Button, View } from 'react-native'; import { createStackNavigator, NavigationStackScreenProps, @@ -27,12 +26,12 @@ const ListScreen = (props: NavigationStackScreenProps) => ( const AnotherScreen = () => ( {value => { - const fontSize = value - ? Animated.interpolate(value.current.progress, { + const scale = value + ? value.current.progress.interpolate({ inputRange: [0, 1], - outputRange: [8, 32], + outputRange: [0.25, 1], }) - : 32; + : 1; return ( ( }} > Animates on progress @@ -69,7 +72,7 @@ const YetAnotherScreen = () => ( style={{ fontSize: 24, opacity: value - ? Animated.interpolate(value.swiping, { + ? value.swiping.interpolate({ inputRange: [0, 1], outputRange: [1, 0], }) @@ -86,7 +89,7 @@ const YetAnotherScreen = () => ( style={{ fontSize: 24, opacity: value - ? Animated.interpolate(value.closing, { + ? value.closing.interpolate({ inputRange: [0, 1], outputRange: [1, 0], }) diff --git a/packages/stack/example/src/TransparentStack.tsx b/packages/stack/example/src/TransparentStack.tsx index 4b9e5a4e..1eaa98a0 100644 --- a/packages/stack/example/src/TransparentStack.tsx +++ b/packages/stack/example/src/TransparentStack.tsx @@ -4,7 +4,6 @@ import { createStackNavigator, NavigationStackScreenComponent, } from 'react-navigation-stack'; -import Animated from 'react-native-reanimated'; const ListScreen: NavigationStackScreenComponent = function(props) { return ( @@ -75,7 +74,7 @@ export default createStackNavigator( cardStyle: { backgroundColor: 'transparent' }, gestureEnabled: false, cardStyleInterpolator: ({ current: { progress } }) => { - const opacity = Animated.interpolate(progress, { + const opacity = progress.interpolate({ inputRange: [0, 0.5, 0.9, 1], outputRange: [0, 0.25, 0.7, 1], }); diff --git a/packages/stack/example/yarn.lock b/packages/stack/example/yarn.lock index 4e342760..2f319f7d 100644 --- a/packages/stack/example/yarn.lock +++ b/packages/stack/example/yarn.lock @@ -9985,7 +9985,7 @@ react-native-paper@^2.15.2: react-lifecycles-compat "^3.0.4" react-native-safe-area-view "^0.12.0" -react-native-reanimated@~1.4.0: +react-native-reanimated@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.4.0.tgz#7f1acbf9be08492d834f512700570978052be2f9" integrity sha512-tO7nSNNP+iRLVbkcSS5GXyDBb7tSI02+XuRL3/S39EAr35rnvUy2JfeLUQG+fWSObJjnMVhasUDEUwlENk8IXw== diff --git a/packages/stack/jest-setup.js b/packages/stack/jest-setup.js index 3c63b2f5..15b940f1 100644 --- a/packages/stack/jest-setup.js +++ b/packages/stack/jest-setup.js @@ -33,7 +33,3 @@ jest.mock('react-native-gesture-handler', () => ({ END: 5, }, })); - -jest.mock('react-native-reanimated', () => - require('react-native-reanimated/mock') -); diff --git a/packages/stack/package.json b/packages/stack/package.json index c1e1f03c..cf15889c 100644 --- a/packages/stack/package.json +++ b/packages/stack/package.json @@ -19,7 +19,7 @@ "prerelease": "yarn sync", "release": "release-it", "example": "yarn --cwd example", - "bootstrap": "yarn example && yarn && yarn sync", + "bootstrap": "yarn example && yarn --ignore-scripts && yarn sync", "sync": "bash scripts/sync-stack.sh", "patch": "diff -ruN node_modules/@react-navigation/stack/src src/vendor > scripts/stack.patch; printf ''" }, @@ -50,7 +50,7 @@ "@expo/vector-icons": "^10.0.6", "@react-native-community/bob": "^0.7.0", "@react-native-community/masked-view": "^0.1.5", - "@react-navigation/stack": "^5.0.0-alpha.45", + "@react-navigation/stack": "^5.0.0-alpha.48", "@release-it/conventional-changelog": "^1.1.0", "@types/color": "^3.0.0", "@types/jest": "^24.0.23", @@ -68,7 +68,6 @@ "react-dom": "~16.9.0", "react-native": "~0.61.4", "react-native-gesture-handler": "^1.5.2", - "react-native-reanimated": "^1.4.0", "react-native-safe-area-context": "^0.6.1", "react-native-screens": "^1.0.0-alpha.23", "react-navigation": "^4.0.10", @@ -82,7 +81,6 @@ "react": "*", "react-native": "*", "react-native-gesture-handler": "^1.0.0", - "react-native-reanimated": "^1.3.0-alpha", "react-native-safe-area-context": "^0.3.3", "react-native-screens": "^1.0.0 || ^1.0.0-alpha || ^2.0.0-alpha", "react-navigation": "^4.0.7" diff --git a/packages/stack/scripts/stack.patch b/packages/stack/scripts/stack.patch index 183334ad..c3d0f23f 100644 --- a/packages/stack/scripts/stack.patch +++ b/packages/stack/scripts/stack.patch @@ -1,7 +1,7 @@ diff -ruN node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.tsx ---- node_modules/@react-navigation/stack/src/index.tsx 2019-12-16 16:13:08.000000000 +0100 +--- node_modules/@react-navigation/stack/src/index.tsx 2020-01-01 17:08:32.000000000 +0100 +++ src/vendor/index.tsx 1970-01-01 01:00:00.000000000 +0100 -@@ -1,55 +0,0 @@ +@@ -1,57 +0,0 @@ -import * as CardStyleInterpolators from './TransitionConfigs/CardStyleInterpolators'; -import * as HeaderStyleInterpolators from './TransitionConfigs/HeaderStyleInterpolators'; -import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs'; @@ -13,7 +13,9 @@ diff -ruN node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.ts -export { default as createStackNavigator } from './navigators/createStackNavigator'; - -export const Assets = [ +- // eslint-disable-next-line import/no-commonjs - require('./views/assets/back-icon.png'), +- // eslint-disable-next-line import/no-commonjs - require('./views/assets/back-icon-mask.png'), -]; - @@ -58,7 +60,7 @@ diff -ruN node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.ts - StackHeaderStyleInterpolator, -} from './types'; diff -ruN node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx src/vendor/navigators/createStackNavigator.tsx ---- node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2019-12-16 16:13:08.000000000 +0100 +--- node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-01-01 17:08:32.000000000 +0100 +++ src/vendor/navigators/createStackNavigator.tsx 1970-01-01 01:00:00.000000000 +0100 @@ -1,77 +0,0 @@ -import * as React from 'react'; @@ -139,10 +141,10 @@ diff -ruN node_modules/@react-navigation/stack/src/navigators/createStackNavigat - typeof StackNavigator ->(StackNavigator); diff -ruN node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.tsx ---- node_modules/@react-navigation/stack/src/types.tsx 2019-12-16 16:13:08.000000000 +0100 -+++ src/vendor/types.tsx 2019-12-16 16:13:14.000000000 +0100 -@@ -7,13 +7,28 @@ - import Animated from 'react-native-reanimated'; +--- node_modules/@react-navigation/stack/src/types.tsx 2020-01-01 17:08:32.000000000 +0100 ++++ src/vendor/types.tsx 2020-01-01 17:26:26.000000000 +0100 +@@ -8,13 +8,28 @@ + } from 'react-native'; import { EdgeInsets } from 'react-native-safe-area-context'; import { + NavigationRoute, @@ -176,7 +178,7 @@ diff -ruN node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.ts export type StackNavigationEventMap = { /** -@@ -26,42 +41,29 @@ +@@ -27,42 +42,29 @@ transitionEnd: { closing: boolean }; }; @@ -240,7 +242,7 @@ diff -ruN node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.ts }; export type Layout = { width: number; height: number }; -@@ -229,24 +231,27 @@ +@@ -232,24 +234,27 @@ /** * Navigation prop for the header. */ @@ -275,7 +277,7 @@ diff -ruN node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.ts export type StackNavigationOptions = StackHeaderOptions & Partial & { /** -@@ -319,6 +324,8 @@ +@@ -322,6 +327,8 @@ bottom?: number; left?: number; }; @@ -285,8 +287,8 @@ diff -ruN node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.ts export type StackNavigationConfig = { diff -ruN 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 2019-12-16 16:13:08.000000000 +0100 -+++ src/vendor/views/Header/Header.tsx 2019-12-16 16:13:14.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-01-01 17:08:32.000000000 +0100 ++++ src/vendor/views/Header/Header.tsx 2020-01-01 17:26:26.000000000 +0100 @@ -1,5 +1,5 @@ import * as React from 'react'; -import { StackActions } from '@react-navigation/routers'; @@ -327,35 +329,33 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/Header.tsx src/v } styleInterpolator={styleInterpolator} diff -ruN 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 2019-12-16 16:13:08.000000000 +0100 -+++ src/vendor/views/Header/HeaderBackButton.tsx 2019-12-16 16:13:14.000000000 +0100 -@@ -8,10 +8,10 @@ +--- node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-01-01 17:08:32.000000000 +0100 ++++ src/vendor/views/Header/HeaderBackButton.tsx 2020-01-01 17:26:57.000000000 +0100 +@@ -8,9 +8,9 @@ + StyleSheet, LayoutChangeEvent, } from 'react-native'; - import Animated from 'react-native-reanimated'; -import { useTheme } from '@react-navigation/native'; import MaskedView from '../MaskedView'; import TouchableItem from '../TouchableItem'; - import { StackHeaderLeftButtonProps } from '../../types'; +import useTheme from '../../../utils/useTheme'; + import { StackHeaderLeftButtonProps } from '../../types'; type Props = StackHeaderLeftButtonProps; - diff -ruN 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 2019-12-16 16:13:08.000000000 +0100 -+++ src/vendor/views/Header/HeaderBackground.tsx 2019-12-16 16:13:14.000000000 +0100 -@@ -1,7 +1,7 @@ +--- node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-01-01 17:08:32.000000000 +0100 ++++ src/vendor/views/Header/HeaderBackground.tsx 2020-01-01 17:27:08.000000000 +0100 +@@ -1,6 +1,6 @@ import * as React from 'react'; - import { StyleSheet, Platform, ViewProps } from 'react-native'; - import Animated from 'react-native-reanimated'; + import { Animated, StyleSheet, Platform, ViewProps } from 'react-native'; -import { useTheme } from '@react-navigation/native'; +import useTheme from '../../../utils/useTheme'; export default function HeaderBackground({ style, ...rest }: ViewProps) { const { colors } = useTheme(); diff -ruN 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 2019-12-16 16:13:08.000000000 +0100 -+++ src/vendor/views/Header/HeaderContainer.tsx 2019-12-16 16:13:14.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-01-01 17:08:32.000000000 +0100 ++++ src/vendor/views/Header/HeaderContainer.tsx 2020-01-01 17:26:26.000000000 +0100 @@ -1,16 +1,13 @@ import * as React from 'react'; import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; @@ -388,11 +388,11 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/HeaderContainer. }; diff -ruN 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 2019-12-16 16:13:08.000000000 +0100 -+++ src/vendor/views/Header/HeaderSegment.tsx 2019-12-16 16:13:14.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-01-01 17:08:32.000000000 +0100 ++++ src/vendor/views/Header/HeaderSegment.tsx 2020-01-01 17:26:26.000000000 +0100 @@ -8,7 +8,7 @@ + ViewStyle, } from 'react-native'; - import Animated from 'react-native-reanimated'; import { EdgeInsets } from 'react-native-safe-area-context'; -import { Route } from '@react-navigation/native'; +import { NavigationRoute } from 'react-navigation'; @@ -409,24 +409,22 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.ts }; diff -ruN 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 2019-12-16 16:13:08.000000000 +0100 -+++ src/vendor/views/Header/HeaderTitle.tsx 2019-12-16 16:13:14.000000000 +0100 -@@ -1,7 +1,7 @@ +--- node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-01-01 17:08:32.000000000 +0100 ++++ src/vendor/views/Header/HeaderTitle.tsx 2020-01-01 17:27:39.000000000 +0100 +@@ -1,6 +1,6 @@ import * as React from 'react'; - import { StyleSheet, Platform, TextProps } from 'react-native'; - import Animated from 'react-native-reanimated'; + import { Animated, StyleSheet, Platform, TextProps } from 'react-native'; -import { useTheme } from '@react-navigation/native'; +import useTheme from '../../../utils/useTheme'; type Props = TextProps & { tintColor?: string; diff -ruN 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 2019-12-16 16:13:08.000000000 +0100 -+++ src/vendor/views/Stack/CardContainer.tsx 2019-12-16 16:13:14.000000000 +0100 -@@ -1,11 +1,17 @@ +--- node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-01-01 17:08:32.000000000 +0100 ++++ src/vendor/views/Stack/CardContainer.tsx 2020-01-01 17:28:53.000000000 +0100 +@@ -1,10 +1,16 @@ import * as React from 'react'; - import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; - import Animated from 'react-native-reanimated'; + import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; -import { StackNavigationState } from '@react-navigation/routers'; -import { Route, useTheme } from '@react-navigation/native'; +import { NavigationState as StackNavigationState } from 'react-navigation'; @@ -445,40 +443,44 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx type Props = TransitionPreset & { index: number; diff -ruN 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 2019-12-16 16:13:08.000000000 +0100 -+++ src/vendor/views/Stack/CardStack.tsx 2019-12-16 16:14:31.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-01-01 17:08:32.000000000 +0100 ++++ src/vendor/views/Stack/CardStack.tsx 2020-01-01 17:28:15.000000000 +0100 @@ -11,8 +11,7 @@ import { EdgeInsets } from 'react-native-safe-area-context'; // eslint-disable-next-line import/no-unresolved - import * as Screens from 'react-native-screens'; // Import with * as to prevent getters being called + import { ScreenContainer, Screen, screensEnabled } from 'react-native-screens'; // Import with * as to prevent getters being called -import { Route } from '@react-navigation/native'; -import { StackNavigationState } from '@react-navigation/routers'; +import { NavigationState as StackNavigationState } from 'react-navigation'; import { getDefaultHeaderHeight } from '../Header/HeaderSegment'; import { Props as HeaderContainerProps } from '../Header/HeaderContainer'; -@@ -24,6 +23,7 @@ - import { forNoAnimation as forNoAnimationHeader } from '../../TransitionConfigs/HeaderStyleInterpolators'; +@@ -25,6 +24,7 @@ import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators'; + import getDistanceForDirection from '../../utils/getDistanceForDirection'; import { + Route, Layout, StackHeaderMode, - Scene, + StackCardMode, diff -ruN 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 2019-12-16 16:13:08.000000000 +0100 -+++ src/vendor/views/Stack/StackView.tsx 2019-12-16 16:13:14.000000000 +0100 -@@ -1,8 +1,7 @@ +--- node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-01-01 17:08:32.000000000 +0100 ++++ src/vendor/views/Stack/StackView.tsx 2020-01-01 17:31:34.000000000 +0100 +@@ -1,8 +1,11 @@ import * as React from 'react'; import { Platform } from 'react-native'; import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context'; -import { Route } from '@react-navigation/native'; -import { StackActions, StackNavigationState } from '@react-navigation/routers'; -+import { StackActions, NavigationState as StackNavigationState, SceneView } from 'react-navigation'; ++import { ++ StackActions, ++ NavigationState as StackNavigationState, ++ SceneView, ++} from 'react-navigation'; import CardStack from './CardStack'; import KeyboardManager from '../KeyboardManager'; -@@ -11,6 +10,7 @@ +@@ -11,6 +14,7 @@ } from '../Header/HeaderContainer'; import SafeAreaProviderCompat from '../SafeAreaProviderCompat'; import { @@ -486,7 +488,7 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx src StackNavigationHelpers, StackNavigationConfig, StackDescriptorMap, -@@ -20,6 +20,7 @@ +@@ -20,6 +24,7 @@ state: StackNavigationState; navigation: StackNavigationHelpers; descriptors: StackDescriptorMap; @@ -494,7 +496,7 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx src }; type State = { -@@ -259,26 +260,42 @@ +@@ -259,14 +264,31 @@ return null; } @@ -515,51 +517,44 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx src return ; }; -- private handleGoBack = ({ route }: { route: Route }) => { -- const { state, navigation } = this.props; -+ private handleTransitionComplete = ({ -+ route, -+ }: { -+ route: Route; -+ }) => { ++ private handleTransitionComplete = ({ route }: { route: Route }) => { + // TODO: remove when the new event system lands + this.props.navigation.dispatch( + StackActions.completeTransition({ toChildKey: route.key }) + ); + }; - -+ private handleGoBack = ({ route }: { route: Route }) => { - // This event will trigger when a gesture ends - // We need to perform the transition before removing the route completely -- navigation.dispatch({ -- ...StackActions.pop(), -- source: route.key, -- target: state.key, -- }); -+ // @ts-ignore -+ this.props.navigation.dispatch(StackActions.pop({ key: route.key })); - }; - ++ private handleOpenRoute = ({ route }: { route: Route }) => { + this.handleTransitionComplete({ route }); this.setState(state => ({ routes: state.replacingRouteKeys.length ? state.routes.filter(r => !state.replacingRouteKeys.includes(r.key)) -@@ -290,6 +307,13 @@ - }; +@@ -285,15 +307,19 @@ + // This will happen in when the route was closed from the card component + // e.g. When the close animation triggered from a gesture ends + // For the cleanup, the card needs to call this function again from its componentDidUpdate +- navigation.dispatch({ +- ...StackActions.pop(), +- source: route.key, +- target: state.key, +- }); ++ // @ts-ignore ++ navigation.dispatch(StackActions.pop({ key: route.key })); + } else { + // Otherwise, the animation was triggered due to a route removal + // In this case, we need to clean up any state tracking the route and pop it immediately - private handleCloseRoute = ({ route }: { route: Route }) => { -+ const index = this.state.routes.findIndex(r => r.key === route.key); -+ // While closing route we need to point to the previous one assuming that -+ // this previous one in routes array -+ this.handleTransitionComplete({ -+ route: this.state.routes[Math.max(index - 1, 0)], -+ }); ++ // While closing route we need to point to the previous one assuming that ++ // this previous one in routes array ++ const index = this.state.routes.findIndex(r => r.key === route.key); ++ this.handleTransitionComplete({ ++ route: this.state.routes[Math.max(index - 1, 0)], ++ }); + - // This event will trigger when the animation for closing the route ends - // In this case, we need to clean up any state tracking the route and pop it immediately - -@@ -304,22 +328,26 @@ + // @ts-ignore + this.setState(state => ({ + routes: state.routes.filter(r => r.key !== route.key), +@@ -310,22 +336,26 @@ private handleTransitionStart = ( { route }: { route: Route }, closing: boolean @@ -576,7 +571,7 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx src + descriptor && + descriptor.options.onTransitionStart && + descriptor.options.onTransitionStart({ closing }); -+ } ++ }; private handleTransitionEnd = ( { route }: { route: Route }, @@ -594,7 +589,7 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx src + descriptor && + descriptor.options.onTransitionStart && + descriptor.options.onTransitionStart({ closing }); -+ } ++ }; render() { const { 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 743650b8..ca5870e1 100644 --- a/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap +++ b/packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap @@ -73,15 +73,10 @@ Array [ Home @@ -519,54 +470,43 @@ Array [ Sub 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 c063d89a..705e2d6f 100644 --- a/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap +++ b/packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap @@ -73,15 +73,10 @@ Array [ Welcome anonymous @@ -315,23 +278,15 @@ Array [ @@ -416,15 +371,10 @@ Array [ Welcome anonymous diff --git a/packages/stack/yarn.lock b/packages/stack/yarn.lock index c78bb2ed..6be10b3a 100644 --- a/packages/stack/yarn.lock +++ b/packages/stack/yarn.lock @@ -1352,10 +1352,10 @@ query-string "^6.4.2" react-is "^16.8.6" -"@react-navigation/core@^5.0.0-alpha.28": - version "5.0.0-alpha.28" - resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.0.0-alpha.28.tgz#284d07114e6dd93a2b0bc06d2a23e72f27ea3bf2" - integrity sha512-GkRGb2F3lxj+F2B/N1Fih1KFFX0B5fnMlsHvuY14uU/7aEOdS0pUeOMMLBzrpQx3FhJDMGm9mIh68j28NEU2eg== +"@react-navigation/core@^5.0.0-alpha.30": + version "5.0.0-alpha.30" + resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.0.0-alpha.30.tgz#cde10907b051148e714f6eb92811a9151791e0c7" + integrity sha512-3FnTvyYqNl7uobdyvJhQ15JXhVcT4oKzJqS9em7miXUZQe0s+xIFhUhmNbptNrbOgCc8Ya3B2UMK+gsbe4OX+g== dependencies: escape-string-regexp "^2.0.0" query-string "^6.9.0" @@ -1371,20 +1371,20 @@ react-native-safe-area-view "^0.14.1" react-native-screens "^1.0.0 || ^1.0.0-alpha" -"@react-navigation/routers@^5.0.0-alpha.17": - version "5.0.0-alpha.17" - resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-5.0.0-alpha.17.tgz#821bd3e5dbd289fe0d8edea6a12c80b6378d1673" - integrity sha512-ERfl+Al1QOiI+iM6m055nSpga1PHb3aW3QqUNNWu3x56hWjsb+NidoYFjUHdGfiFBTBgPHp1jjxcfLrxfIhSgg== +"@react-navigation/routers@^5.0.0-alpha.19": + version "5.0.0-alpha.19" + resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-5.0.0-alpha.19.tgz#2038fd99c0e40e73e528aa54fbc23b1e166e9fbf" + integrity sha512-lUaXF97TRS738CssjBthnX95qriFi2zJUldGyZ6WD/isKX55/SKdRotsRH4Q4AIsFTrWrAv3MpU5d+naeLD9KQ== dependencies: - "@react-navigation/core" "^5.0.0-alpha.28" + "@react-navigation/core" "^5.0.0-alpha.30" shortid "^2.2.15" -"@react-navigation/stack@^5.0.0-alpha.45": - version "5.0.0-alpha.45" - resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.0.0-alpha.45.tgz#62b33fd38f5ed96be6c957b69e4c57c49a741071" - integrity sha512-FSun8t5Ohl14iy/FZHYNmnThcynk9dVyY5ZKYiQYKILrEWAn8sQiu1zTD2kf9cNd71PkSka3ur3uqLiCsqKIAQ== +"@react-navigation/stack@^5.0.0-alpha.48": + version "5.0.0-alpha.48" + resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.0.0-alpha.48.tgz#7e421f7aa7957d87f3143389f1e223294aac0f40" + integrity sha512-sHaccTWYVZdIfa+Y8W/AGDnY+f11YLkizlq0cOHdA3I58vm15NAdIS5T7dizn7HB8FU1+5e13tuB1XPgxDeW5g== dependencies: - "@react-navigation/routers" "^5.0.0-alpha.17" + "@react-navigation/routers" "^5.0.0-alpha.19" color "^3.1.2" "@release-it/conventional-changelog@^1.1.0": @@ -7543,11 +7543,6 @@ react-native-gesture-handler@^1.5.2: invariant "^2.2.4" prop-types "^15.7.2" -react-native-reanimated@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.4.0.tgz#7f1acbf9be08492d834f512700570978052be2f9" - integrity sha512-tO7nSNNP+iRLVbkcSS5GXyDBb7tSI02+XuRL3/S39EAr35rnvUy2JfeLUQG+fWSObJjnMVhasUDEUwlENk8IXw== - react-native-safe-area-context@^0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-0.6.1.tgz#6886ec1769625ae1d8a0ba8921d99166a0e2e955"