From 60c8b13fffa0d3dfbca9c6c4b2094e04f564aae6 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Sun, 5 Jan 2020 13:03:24 +0100 Subject: [PATCH] fix: fix incorrect reference to react-navigation. fixes #334 --- packages/stack/example/package.json | 2 +- packages/stack/example/yarn.lock | 8 +- packages/stack/scripts/stack.patch | 439 ++-------------------------- packages/stack/tsconfig.json | 1 + 4 files changed, 32 insertions(+), 418 deletions(-) diff --git a/packages/stack/example/package.json b/packages/stack/example/package.json index 4ae53f25..bbe65ed7 100644 --- a/packages/stack/example/package.json +++ b/packages/stack/example/package.json @@ -26,7 +26,7 @@ "react-native-unimodules": "^0.7.0-rc.1", "react-native-web": "^0.11.4", "react-native-webview": "7.4.3", - "react-navigation": "^4.0.7", + "react-navigation": "^4.0.10", "react-navigation-drawer": "^2.2.2", "react-navigation-tabs": "^2.5.5" }, diff --git a/packages/stack/example/yarn.lock b/packages/stack/example/yarn.lock index 358d3ecb..1cf51c63 100644 --- a/packages/stack/example/yarn.lock +++ b/packages/stack/example/yarn.lock @@ -10129,10 +10129,10 @@ react-navigation-tabs@^2.5.5: react-native-safe-area-view "^0.14.6" react-native-tab-view "^2.9.0" -react-navigation@^4.0.7: - version "4.0.7" - resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.7.tgz#cc7ce334fef009242494d623e50e9cf79eb63ddd" - integrity sha512-0tTWanq870Hyr1VGHuj98+myRHNQnKgpRgjgzhAwVuLShyPIB9OnoLGIwIcqEdxgxGo+JMFmIGg8KCr7xapfgg== +react-navigation@^4.0.10: + version "4.0.10" + resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.10.tgz#ddf41134600689d6ba99e35dd22ba1f664f91e5c" + integrity sha512-7PqvmsdQ7HIyxPUMYbd9Uq//VoMdniEOLAOSvIhb/ExtbAt/1INSjUF+RiMWOMCWLTCNvNPRvTz7xy7qwWureg== dependencies: "@react-navigation/core" "^3.5.1" "@react-navigation/native" "^3.6.2" diff --git a/packages/stack/scripts/stack.patch b/packages/stack/scripts/stack.patch index 15c7cd37..a4861289 100644 --- a/packages/stack/scripts/stack.patch +++ b/packages/stack/scripts/stack.patch @@ -1,5 +1,5 @@ diff -ruN node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.tsx ---- node_modules/@react-navigation/stack/src/index.tsx 2020-01-03 21:46:12.000000000 +0100 +--- node_modules/@react-navigation/stack/src/index.tsx 2020-01-05 02:33:14.000000000 +0100 +++ src/vendor/index.tsx 1970-01-01 01:00:00.000000000 +0100 @@ -1,57 +0,0 @@ -import * as CardStyleInterpolators from './TransitionConfigs/CardStyleInterpolators'; @@ -60,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 2020-01-03 21:46:12.000000000 +0100 +--- node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx 2020-01-05 02:33:14.000000000 +0100 +++ src/vendor/navigators/createStackNavigator.tsx 1970-01-01 01:00:00.000000000 +0100 @@ -1,77 +0,0 @@ -import * as React from 'react'; @@ -141,8 +141,8 @@ 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 2020-01-03 21:46:12.000000000 +0100 -+++ src/vendor/types.tsx 2020-01-03 21:46:29.000000000 +0100 +--- node_modules/@react-navigation/stack/src/types.tsx 2020-01-05 02:33:14.000000000 +0100 ++++ src/vendor/types.tsx 2020-01-05 12:57:08.000000000 +0100 @@ -8,13 +8,28 @@ } from 'react-native'; import { EdgeInsets } from 'react-native-safe-area-context'; @@ -242,7 +242,7 @@ diff -ruN node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.ts }; export type Layout = { width: number; height: number }; -@@ -232,24 +234,27 @@ +@@ -238,24 +240,27 @@ /** * Navigation prop for the header. */ @@ -277,7 +277,7 @@ diff -ruN node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.ts export type StackNavigationOptions = StackHeaderOptions & Partial & { /** -@@ -322,6 +327,8 @@ +@@ -328,6 +333,8 @@ bottom?: number; left?: number; }; @@ -287,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 2020-01-03 21:46:12.000000000 +0100 -+++ src/vendor/views/Header/Header.tsx 2020-01-03 21:46:29.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Header/Header.tsx 2020-01-05 02:33:14.000000000 +0100 ++++ src/vendor/views/Header/Header.tsx 2020-01-05 12:57:08.000000000 +0100 @@ -1,5 +1,5 @@ import * as React from 'react'; -import { StackActions } from '@react-navigation/routers'; @@ -329,8 +329,8 @@ 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 2020-01-03 21:46:12.000000000 +0100 -+++ src/vendor/views/Header/HeaderBackButton.tsx 2020-01-03 21:46:29.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx 2020-01-05 02:33:14.000000000 +0100 ++++ src/vendor/views/Header/HeaderBackButton.tsx 2020-01-05 12:57:08.000000000 +0100 @@ -8,9 +8,9 @@ StyleSheet, LayoutChangeEvent, @@ -343,8 +343,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton 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 2020-01-03 21:46:12.000000000 +0100 -+++ src/vendor/views/Header/HeaderBackground.tsx 2020-01-03 21:46:29.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx 2020-01-05 02:33:14.000000000 +0100 ++++ src/vendor/views/Header/HeaderBackground.tsx 2020-01-05 12:57:08.000000000 +0100 @@ -1,6 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, Platform, ViewProps } from 'react-native'; @@ -354,8 +354,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/HeaderBackground 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 2020-01-03 21:46:12.000000000 +0100 -+++ src/vendor/views/Header/HeaderContainer.tsx 2020-01-03 21:46:29.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx 2020-01-05 02:33:14.000000000 +0100 ++++ src/vendor/views/Header/HeaderContainer.tsx 2020-01-05 12:57:08.000000000 +0100 @@ -1,16 +1,13 @@ import * as React from 'react'; import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; @@ -388,8 +388,8 @@ 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 2020-01-03 21:46:12.000000000 +0100 -+++ src/vendor/views/Header/HeaderSegment.tsx 2020-01-03 21:46:29.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx 2020-01-05 02:33:14.000000000 +0100 ++++ src/vendor/views/Header/HeaderSegment.tsx 2020-01-05 12:57:08.000000000 +0100 @@ -8,7 +8,7 @@ ViewStyle, } from 'react-native'; @@ -409,8 +409,8 @@ 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 2020-01-03 21:46:12.000000000 +0100 -+++ src/vendor/views/Header/HeaderTitle.tsx 2020-01-03 21:46:29.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx 2020-01-05 02:33:14.000000000 +0100 ++++ src/vendor/views/Header/HeaderTitle.tsx 2020-01-05 12:57:08.000000000 +0100 @@ -1,6 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, Platform, TextProps } from 'react-native'; @@ -420,8 +420,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx type Props = TextProps & { tintColor?: string; diff -ruN 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-01-03 21:46:12.000000000 +0100 -+++ src/vendor/views/Stack/Card.tsx 2020-01-03 21:48:42.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Stack/Card.tsx 2020-01-05 02:33:14.000000000 +0100 ++++ src/vendor/views/Stack/Card.tsx 2020-01-05 12:57:08.000000000 +0100 @@ -453,7 +453,7 @@ pointerEvents="none" /> @@ -432,8 +432,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/Card.tsx src/vend {children} 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 2020-01-03 21:46:12.000000000 +0100 -+++ src/vendor/views/Stack/CardContainer.tsx 2020-01-03 21:49:43.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx 2020-01-05 02:33:14.000000000 +0100 ++++ src/vendor/views/Stack/CardContainer.tsx 2020-01-05 12:57:08.000000000 +0100 @@ -1,10 +1,16 @@ import * as React from 'react'; import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; @@ -464,8 +464,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx > 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 2020-01-03 21:46:12.000000000 +0100 -+++ src/vendor/views/Stack/CardStack.tsx 2020-01-03 21:46:29.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx 2020-01-05 02:33:14.000000000 +0100 ++++ src/vendor/views/Stack/CardStack.tsx 2020-01-05 12:59:50.000000000 +0100 @@ -11,8 +11,7 @@ import { EdgeInsets } from 'react-native-safe-area-context'; // eslint-disable-next-line import/no-unresolved @@ -485,8 +485,8 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx src StackHeaderMode, 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 2020-01-03 21:46:12.000000000 +0100 -+++ src/vendor/views/Stack/StackView.tsx 2020-01-03 21:46:29.000000000 +0100 +--- node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx 2020-01-05 02:33:14.000000000 +0100 ++++ src/vendor/views/Stack/StackView.tsx 2020-01-05 12:57:08.000000000 +0100 @@ -1,8 +1,11 @@ import * as React from 'react'; import { Platform } from 'react-native'; @@ -614,390 +614,3 @@ diff -ruN node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx src render() { const { -diff -ruN node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx.orig src/vendor/views/Stack/StackView.tsx.orig ---- node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx.orig 1970-01-01 01:00:00.000000000 +0100 -+++ src/vendor/views/Stack/StackView.tsx.orig 2020-01-03 21:46:29.000000000 +0100 -@@ -0,0 +1,383 @@ -+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 CardStack from './CardStack'; -+import KeyboardManager from '../KeyboardManager'; -+import HeaderContainer, { -+ Props as HeaderContainerProps, -+} from '../Header/HeaderContainer'; -+import SafeAreaProviderCompat from '../SafeAreaProviderCompat'; -+import { -+ StackNavigationHelpers, -+ StackNavigationConfig, -+ StackDescriptorMap, -+} from '../../types'; -+ -+type Props = StackNavigationConfig & { -+ state: StackNavigationState; -+ navigation: StackNavigationHelpers; -+ descriptors: StackDescriptorMap; -+}; -+ -+type State = { -+ // Local copy of the routes which are actually rendered -+ routes: Route[]; -+ // Previous routes, to compare whether routes have changed or not -+ previousRoutes: Route[]; -+ // Previous descriptors, to compare whether descriptors have changed or not -+ previousDescriptors: StackDescriptorMap; -+ // List of routes being opened, we need to animate pushing of these new routes -+ openingRouteKeys: string[]; -+ // List of routes being closed, we need to animate popping of these routes -+ closingRouteKeys: string[]; -+ // List of routes being replaced, we need to keep a copy until the new route animates in -+ replacingRouteKeys: string[]; -+ // Since the local routes can vary from the routes from props, we need to keep the descriptors for old routes -+ // Otherwise we won't be able to access the options for routes that were removed -+ descriptors: StackDescriptorMap; -+}; -+ -+class StackView extends React.Component { -+ static getDerivedStateFromProps( -+ props: Readonly, -+ state: Readonly -+ ) { -+ // If there was no change in routes, we don't need to compute anything -+ if (props.state.routes === state.previousRoutes && state.routes.length) { -+ if (props.descriptors !== state.previousDescriptors) { -+ const descriptors = state.routes.reduce( -+ (acc, route) => { -+ acc[route.key] = -+ props.descriptors[route.key] || state.descriptors[route.key]; -+ -+ return acc; -+ }, -+ {} -+ ); -+ -+ return { -+ previousDescriptors: props.descriptors, -+ descriptors, -+ }; -+ } -+ -+ return null; -+ } -+ -+ // Here we determine which routes were added or removed to animate them -+ // We keep a copy of the route being removed in local state to be able to animate it -+ -+ let routes = -+ props.state.index < props.state.routes.length - 1 -+ ? // Remove any extra routes from the state -+ // The last visible route should be the focused route, i.e. at current index -+ props.state.routes.slice(0, props.state.index + 1) -+ : props.state.routes; -+ -+ // Now we need to determine which routes were added and removed -+ let { -+ openingRouteKeys, -+ closingRouteKeys, -+ replacingRouteKeys, -+ previousRoutes, -+ } = state; -+ -+ const previousFocusedRoute = previousRoutes[previousRoutes.length - 1] as -+ | Route -+ | undefined; -+ const nextFocusedRoute = routes[routes.length - 1]; -+ -+ const isAnimationEnabled = (key: string) => { -+ const descriptor = props.descriptors[key] || state.descriptors[key]; -+ -+ return descriptor ? descriptor.options.animationEnabled !== false : true; -+ }; -+ -+ if ( -+ previousFocusedRoute && -+ previousFocusedRoute.key !== nextFocusedRoute.key -+ ) { -+ // We only need to animate routes if the focused route changed -+ // Animating previous routes won't be visible coz the focused route is on top of everything -+ -+ if (!previousRoutes.find(r => r.key === nextFocusedRoute.key)) { -+ // A new route has come to the focus, we treat this as a push -+ // A replace can also trigger this, the animation should look like push -+ -+ if ( -+ isAnimationEnabled(nextFocusedRoute.key) && -+ !openingRouteKeys.includes(nextFocusedRoute.key) -+ ) { -+ // In this case, we need to animate pushing the focused route -+ // We don't care about animating any other added routes because they won't be visible -+ openingRouteKeys = [...openingRouteKeys, nextFocusedRoute.key]; -+ -+ closingRouteKeys = closingRouteKeys.filter( -+ key => key !== nextFocusedRoute.key -+ ); -+ replacingRouteKeys = replacingRouteKeys.filter( -+ key => key !== nextFocusedRoute.key -+ ); -+ -+ if (!routes.find(r => r.key === previousFocusedRoute.key)) { -+ // The previous focused route isn't present in state, we treat this as a replace -+ -+ replacingRouteKeys = [ -+ ...replacingRouteKeys, -+ previousFocusedRoute.key, -+ ]; -+ -+ openingRouteKeys = openingRouteKeys.filter( -+ key => key !== previousFocusedRoute.key -+ ); -+ closingRouteKeys = closingRouteKeys.filter( -+ key => key !== previousFocusedRoute.key -+ ); -+ -+ // Keep the old route in state because it's visible under the new route, and removing it will feel abrupt -+ // We need to insert it just before the focused one (the route being pushed) -+ // After the push animation is completed, routes being replaced will be removed completely -+ routes = routes.slice(); -+ routes.splice(routes.length - 1, 0, previousFocusedRoute); -+ } -+ } -+ } else if (!routes.find(r => r.key === previousFocusedRoute.key)) { -+ // The previously focused route was removed, we treat this as a pop -+ -+ if ( -+ isAnimationEnabled(previousFocusedRoute.key) && -+ !closingRouteKeys.includes(previousFocusedRoute.key) -+ ) { -+ // Sometimes a route can be closed before the opening animation finishes -+ // So we also need to remove it from the opening list -+ closingRouteKeys = [...closingRouteKeys, previousFocusedRoute.key]; -+ -+ openingRouteKeys = openingRouteKeys.filter( -+ key => key !== previousFocusedRoute.key -+ ); -+ replacingRouteKeys = replacingRouteKeys.filter( -+ key => key !== previousFocusedRoute.key -+ ); -+ -+ // Keep a copy of route being removed in the state to be able to animate it -+ routes = [...routes, previousFocusedRoute]; -+ } -+ } else { -+ // Looks like some routes were re-arranged and no focused routes were added/removed -+ // i.e. the currently focused route already existed and the previously focused route still exists -+ // We don't know how to animate this -+ } -+ } else if (replacingRouteKeys.length || closingRouteKeys.length) { -+ // Keep the routes we are closing or replacing if animation is enabled for them -+ routes = routes.slice(); -+ routes.splice( -+ routes.length - 1, -+ 0, -+ ...state.routes.filter(({ key }) => -+ isAnimationEnabled(key) -+ ? replacingRouteKeys.includes(key) || closingRouteKeys.includes(key) -+ : false -+ ) -+ ); -+ } -+ -+ if (!routes.length) { -+ throw new Error(`There should always be at least one route.`); -+ } -+ -+ const descriptors = routes.reduce((acc, route) => { -+ acc[route.key] = -+ props.descriptors[route.key] || state.descriptors[route.key]; -+ -+ return acc; -+ }, {}); -+ -+ return { -+ routes, -+ previousRoutes: props.state.routes, -+ previousDescriptors: props.descriptors, -+ openingRouteKeys, -+ closingRouteKeys, -+ replacingRouteKeys, -+ descriptors, -+ }; -+ } -+ -+ state: State = { -+ routes: [], -+ previousRoutes: [], -+ previousDescriptors: {}, -+ openingRouteKeys: [], -+ closingRouteKeys: [], -+ replacingRouteKeys: [], -+ descriptors: {}, -+ }; -+ -+ private getGesturesEnabled = ({ route }: { route: Route }) => { -+ const descriptor = this.state.descriptors[route.key]; -+ -+ if (descriptor) { -+ const { gestureEnabled, animationEnabled } = descriptor.options; -+ -+ if (animationEnabled === false) { -+ // When animation is disabled, also disable gestures -+ // The gesture to dismiss a route will look weird when not animated -+ return false; -+ } -+ -+ return gestureEnabled !== undefined -+ ? gestureEnabled -+ : Platform.OS !== 'android'; -+ } -+ -+ return false; -+ }; -+ -+ private getPreviousRoute = ({ route }: { route: Route }) => { -+ const { closingRouteKeys, replacingRouteKeys } = this.state; -+ const routes = this.state.routes.filter( -+ r => -+ r.key === route.key || -+ (!closingRouteKeys.includes(r.key) && -+ !replacingRouteKeys.includes(r.key)) -+ ); -+ const index = routes.findIndex(r => r.key === route.key); -+ -+ return routes[index - 1]; -+ }; -+ -+ private renderScene = ({ route }: { route: Route }) => { -+ const descriptor = -+ this.state.descriptors[route.key] || this.props.descriptors[route.key]; -+ -+ if (!descriptor) { -+ return null; -+ } -+ -+ return descriptor.render(); -+ }; -+ -+ private renderHeader = (props: HeaderContainerProps) => { -+ return ; -+ }; -+ -+ private handleOpenRoute = ({ route }: { route: Route }) => { -+ this.setState(state => ({ -+ routes: state.replacingRouteKeys.length -+ ? state.routes.filter(r => !state.replacingRouteKeys.includes(r.key)) -+ : state.routes, -+ openingRouteKeys: state.openingRouteKeys.filter(key => key !== route.key), -+ closingRouteKeys: state.closingRouteKeys.filter(key => key !== route.key), -+ replacingRouteKeys: [], -+ })); -+ }; -+ -+ private handleCloseRoute = ({ route }: { route: Route }) => { -+ const { state, navigation } = this.props; -+ -+ if (state.routes.find(r => r.key === route.key)) { -+ // 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 -+ // For the cleanup, the card needs to call this function again from its componentDidUpdate -+ navigation.dispatch({ -+ ...StackActions.pop(), -+ source: route.key, -+ target: state.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 -+ -+ // @ts-ignore -+ this.setState(state => ({ -+ routes: state.routes.filter(r => r.key !== route.key), -+ openingRouteKeys: state.openingRouteKeys.filter( -+ key => key !== route.key -+ ), -+ closingRouteKeys: state.closingRouteKeys.filter( -+ key => key !== route.key -+ ), -+ })); -+ } -+ }; -+ -+ private handleTransitionStart = ( -+ { route }: { route: Route }, -+ closing: boolean -+ ) => -+ this.props.navigation.emit({ -+ type: 'transitionStart', -+ data: { closing }, -+ target: route.key, -+ }); -+ -+ private handleTransitionEnd = ( -+ { route }: { route: Route }, -+ closing: boolean -+ ) => -+ this.props.navigation.emit({ -+ type: 'transitionEnd', -+ data: { closing }, -+ target: route.key, -+ }); -+ -+ render() { -+ const { -+ state, -+ // eslint-disable-next-line @typescript-eslint/no-unused-vars -+ navigation, -+ keyboardHandlingEnabled, -+ mode = 'card', -+ ...rest -+ } = this.props; -+ -+ const { -+ routes, -+ descriptors, -+ openingRouteKeys, -+ closingRouteKeys, -+ } = this.state; -+ -+ const headerMode = -+ mode !== 'modal' && Platform.OS === 'ios' ? 'float' : 'screen'; -+ -+ return ( -+ -+ -+ {insets => ( -+ -+ {props => ( -+ -+ )} -+ -+ )} -+ -+ -+ ); -+ } -+} -+ -+export default StackView; diff --git a/packages/stack/tsconfig.json b/packages/stack/tsconfig.json index f268d46b..57a9eae6 100644 --- a/packages/stack/tsconfig.json +++ b/packages/stack/tsconfig.json @@ -2,6 +2,7 @@ "compilerOptions": { "baseUrl": ".", "paths": { + "react-navigation": ["react-navigation"], "react-navigation-stack": ["./src/index"] }, "allowUnreachableCode": false,