diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.tsx --- ../../node_modules/@react-navigation/stack/src/index.tsx 2020-05-11 17:55:45.000000000 +0200 +++ src/vendor/index.tsx 2020-05-11 18:29:57.000000000 +0200 @@ -3,11 +3,6 @@ import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs'; import * as TransitionPresets from './TransitionConfigs/TransitionPresets'; -/** - * Navigators - */ -export { default as createStackNavigator } from './navigators/createStackNavigator'; - export const Assets = [ // eslint-disable-next-line import/no-commonjs require('./views/assets/back-icon.png'), @@ -49,9 +44,10 @@ * Types */ export type { - StackNavigationOptions, - StackNavigationProp, - StackScreenProps, + NavigationStackState, + StackNavigationProp as NavigationStackProp, + StackNavigationOptions as NavigationStackOptions, + StackNavigationConfig as NavigationStackConfig, StackHeaderProps, 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-05-11 17:55:45.000000000 +0200 +++ src/vendor/navigators/createStackNavigator.tsx 1970-01-01 01:00:00.000000000 +0100 @@ -1,96 +0,0 @@ -import * as React from 'react'; -import { Platform } from 'react-native'; -import { - useNavigationBuilder, - createNavigatorFactory, - DefaultNavigatorOptions, - EventArg, - StackRouter, - StackRouterOptions, - StackNavigationState, - StackActions, -} from '@react-navigation/native'; -import StackView from '../views/Stack/StackView'; -import { - StackNavigationConfig, - StackNavigationOptions, - StackNavigationEventMap, -} from '../types'; - -type Props = DefaultNavigatorOptions & - StackRouterOptions & - StackNavigationConfig; - -function StackNavigator({ - initialRouteName, - children, - screenOptions, - ...rest -}: Props) { - const defaultOptions = { - gestureEnabled: Platform.OS === 'ios', - animationEnabled: Platform.OS !== 'web', - }; - - const { state, descriptors, navigation } = useNavigationBuilder< - StackNavigationState, - StackRouterOptions, - StackNavigationOptions, - StackNavigationEventMap - >(StackRouter, { - initialRouteName, - children, - screenOptions: - typeof screenOptions === 'function' - ? (...args) => ({ - ...defaultOptions, - ...screenOptions(...args), - }) - : { - ...defaultOptions, - ...screenOptions, - }, - }); - - React.useEffect( - () => - navigation.addListener && - navigation.addListener('tabPress', (e) => { - const isFocused = navigation.isFocused(); - - // Run the operation in the next frame so we're sure all listeners have been run - // This is necessary to know if preventDefault() has been called - requestAnimationFrame(() => { - if ( - state.index > 0 && - isFocused && - !(e as EventArg<'tabPress', true>).defaultPrevented - ) { - // When user taps on already focused tab and we're inside the tab, - // reset the stack to replicate native behaviour - navigation.dispatch({ - ...StackActions.popToTop(), - target: state.key, - }); - } - }); - }), - [navigation, state.index, state.key] - ); - - return ( - - ); -} - -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-05-11 17:55:45.000000000 +0200 +++ src/vendor/types.tsx 2020-05-11 18:29:52.000000000 +0200 @@ -8,15 +8,28 @@ } from 'react-native'; import { EdgeInsets } from 'react-native-safe-area-context'; import { + NavigationRoute, + NavigationState, + NavigationScreenProp, NavigationProp, - ParamListBase, - Descriptor, - Route, - NavigationHelpers, - StackNavigationState, - StackActionHelpers, - RouteProp, -} from '@react-navigation/native'; + NavigationParams, + NavigationNavigateAction, + NavigationAction, + NavigationEventCallback, + NavigationEventSubscription, + NavigationDescriptor, +} from 'react-navigation'; + +// @ts-ignore +export type Route = NavigationRoute; + +export type NavigationStackState = NavigationState; + +export type NavigationStackEventName = + | 'willFocus' + | 'didFocus' + | 'willBlur' + | 'didBlur'; export type StackNavigationEventMap = { /** @@ -29,29 +42,28 @@ transitionEnd: { data: { closing: boolean } }; }; -export type StackNavigationHelpers = NavigationHelpers< - ParamListBase, - StackNavigationEventMap ->; - +export type StackNavigationHelpers = NavigationProp; export type StackNavigationProp< - ParamList extends ParamListBase, - RouteName extends keyof ParamList = string -> = NavigationProp< - ParamList, - RouteName, - StackNavigationState, - StackNavigationOptions, - StackNavigationEventMap -> & - StackActionHelpers; - -export type StackScreenProps< - ParamList extends ParamListBase, - RouteName extends keyof ParamList = string -> = { - navigation: StackNavigationProp; - route: RouteProp; + State = NavigationRoute, + Params = NavigationParams +> = NavigationScreenProp & { + push: ( + routeName: string, + params?: NavigationParams, + action?: NavigationNavigateAction + ) => boolean; + replace: ( + routeName: string, + params?: NavigationParams, + action?: NavigationNavigateAction + ) => boolean; + reset: (actions: NavigationAction[], index: number) => boolean; + pop: (n?: number, params?: { immediate?: boolean }) => boolean; + popToTop: (params?: { immediate?: boolean }) => boolean; + addListener: ( + event: NavigationStackEventName, + callback: NavigationEventCallback + ) => NavigationEventSubscription; }; export type Layout = { width: number; height: number }; @@ -227,24 +239,27 @@ /** * Navigation prop for the header. */ - navigation: StackNavigationProp; + navigation: StackNavigationProp; /** * Interpolated styles for various elements in the header. */ styleInterpolator: StackHeaderStyleInterpolator; }; -export type StackDescriptor = Descriptor< - ParamListBase, - string, - StackNavigationState, - StackNavigationOptions +export type StackDescriptor = NavigationDescriptor< + NavigationParams, + StackNavigationOptions, + StackNavigationProp >; export type StackDescriptorMap = { [key: string]: StackDescriptor; }; +export type TransitionCallbackProps = { + closing: boolean; +}; + export type StackNavigationOptions = StackHeaderOptions & Partial & { /** @@ -329,6 +344,8 @@ bottom?: number; left?: number; }; + onTransitionStart?: (props: TransitionCallbackProps) => void; + onTransitionEnd?: (props: TransitionCallbackProps) => void; }; 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-05-11 17:55:45.000000000 +0200 +++ src/vendor/views/Header/Header.tsx 2020-05-11 18:16:24.000000000 +0200 @@ -1,12 +1,14 @@ import * as React from 'react'; -import { StackActions } from '@react-navigation/native'; +import { Dimensions } from 'react-native'; +import { StackActions } from 'react-navigation'; +import { getStatusBarHeight } from 'react-native-iphone-x-helper'; -import HeaderSegment from './HeaderSegment'; +import HeaderSegment, { getDefaultHeaderHeight } from './HeaderSegment'; import HeaderTitle from './HeaderTitle'; import debounce from '../../utils/debounce'; import { StackHeaderProps, StackHeaderTitleProps } from '../../types'; -export default React.memo(function Header(props: StackHeaderProps) { +const Header = React.memo(function Header(props: StackHeaderProps) { const { scene, previous, @@ -22,7 +24,7 @@ ? options.headerTitle : options.title !== undefined ? options.title - : scene.route.name; + : scene.route.routeName; let leftLabel; @@ -38,18 +40,13 @@ ? o.headerTitle : o.title !== undefined ? o.title - : previous.route.name; + : previous.route.routeName; } // eslint-disable-next-line react-hooks/exhaustive-deps const goBack = React.useCallback( debounce(() => { - if (navigation.isFocused() && navigation.canGoBack()) { - navigation.dispatch({ - ...StackActions.pop(), - source: scene.route.key, - }); - } + navigation.dispatch(StackActions.pop({ key: scene.route.key })); }, 50), [navigation, scene.route.key] ); @@ -64,7 +61,10 @@ leftLabel={leftLabel} headerTitle={ typeof options.headerTitle !== 'function' - ? (props: StackHeaderTitleProps) => + ? (props: StackHeaderTitleProps) => { + // @ts-ignore + return ; + } : options.headerTitle } onGoBack={previous ? goBack : undefined} @@ -72,3 +72,18 @@ /> ); }); + +Object.defineProperty(Header, 'HEIGHT', { + get() { + console.warn( + "Deprecation in 'createStackNavigator': 'Header.HEIGHT' will be removed in a future version. Use 'useHeaderHeight' or 'HeaderHeightContext' instead" + ); + + return getDefaultHeaderHeight( + Dimensions.get('window'), + getStatusBarHeight(true) + ); + }, +}); + +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-05-11 17:55:45.000000000 +0200 +++ src/vendor/views/Header/HeaderBackButton.tsx 2020-05-11 18:05:10.000000000 +0200 @@ -8,9 +8,9 @@ StyleSheet, LayoutChangeEvent, } from 'react-native'; -import { useTheme } from '@react-navigation/native'; import MaskedView from '../MaskedView'; import { TouchableItem } from '../TouchableItem'; +import useTheme from '../../../utils/useTheme'; import { StackHeaderLeftButtonProps } from '../../types'; 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-05-11 17:55:45.000000000 +0200 +++ src/vendor/views/Header/HeaderBackground.tsx 2020-05-11 18:05:10.000000000 +0200 @@ -1,6 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, Platform, ViewProps } from 'react-native'; -import { useTheme } from '@react-navigation/native'; +import useTheme from '../../../utils/useTheme'; 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-05-11 17:55:45.000000000 +0200 +++ src/vendor/views/Header/HeaderContainer.tsx 2020-05-11 18:05:10.000000000 +0200 @@ -1,11 +1,6 @@ import * as React from 'react'; import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; -import { - NavigationContext, - NavigationRouteContext, - Route, - ParamListBase, -} from '@react-navigation/native'; +import { NavigationContext } from 'react-navigation'; import { EdgeInsets } from 'react-native-safe-area-context'; import Header from './Header'; @@ -16,6 +11,7 @@ forSlideRight, } from '../../TransitionConfigs/HeaderStyleInterpolators'; import { + Route, Layout, Scene, StackHeaderStyleInterpolator, @@ -99,9 +95,7 @@ insets, scene, previous, - navigation: scene.descriptor.navigation as StackNavigationProp< - ParamListBase - >, + navigation: scene.descriptor.navigation as StackNavigationProp, styleInterpolator: mode === 'float' ? isHeaderStatic @@ -120,7 +114,7 @@ key={scene.route.key} value={scene.descriptor.navigation} > - + <> - + ); })} 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-05-11 17:55:45.000000000 +0200 +++ src/vendor/views/Header/HeaderSegment.tsx 2020-05-11 18:17:37.000000000 +0200 @@ -8,7 +8,7 @@ ViewStyle, } from 'react-native'; import { EdgeInsets } from 'react-native-safe-area-context'; -import { Route } from '@react-navigation/native'; +import { NavigationRoute } from 'react-navigation'; import HeaderBackButton from './HeaderBackButton'; import HeaderBackground from './HeaderBackground'; import memoize from '../../utils/memoize'; @@ -28,7 +28,7 @@ onGoBack?: () => void; title?: string; leftLabel?: string; - scene: Scene>; + scene: Scene; styleInterpolator: StackHeaderStyleInterpolator; }; 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-05-11 17:55:45.000000000 +0200 +++ src/vendor/views/Header/HeaderTitle.tsx 2020-05-11 18:17:37.000000000 +0200 @@ -1,6 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, Platform } from 'react-native'; -import { useTheme } from '@react-navigation/native'; +import useTheme from '../../../utils/useTheme'; type Props = Omit, 'key'> & { 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-05-11 17:55:45.000000000 +0200 +++ src/vendor/views/Stack/Card.tsx 2020-05-11 18:05:10.000000000 +0200 @@ -140,7 +140,7 @@ private interactionHandle: number | undefined; - private pendingGestureCallback: number | undefined; + private pendingGestureCallback: any; 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-05-11 17:55:45.000000000 +0200 +++ src/vendor/views/Stack/CardContainer.tsx 2020-05-11 18:33:41.000000000 +0200 @@ -1,10 +1,11 @@ import * as React from 'react'; import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; -import { Route, useTheme } from '@react-navigation/native'; import { Props as HeaderContainerProps } from '../Header/HeaderContainer'; import Card from './Card'; import HeaderHeightContext from '../../utils/HeaderHeightContext'; +import useTheme from '../../../utils/useTheme'; import { + Route, Scene, Layout, StackHeaderMode, @@ -192,7 +193,7 @@ ? { marginTop: headerHeight } : null } - contentStyle={[{ backgroundColor: colors.background }, cardStyle]} + contentStyle={[{ backgroundColor: colors.background }, cardStyle] as any} style={StyleSheet.absoluteFill} > 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-05-11 17:55:45.000000000 +0200 +++ src/vendor/views/Stack/CardStack.tsx 2020-05-11 18:05:10.000000000 +0200 @@ -7,7 +7,7 @@ Platform, } from 'react-native'; import { EdgeInsets } from 'react-native-safe-area-context'; -import { Route, StackNavigationState } from '@react-navigation/native'; +import { NavigationState as StackNavigationState } from 'react-navigation'; import { MaybeScreenContainer, MaybeScreen } from '../Screens'; import { getDefaultHeaderHeight } from '../Header/HeaderSegment'; @@ -21,6 +21,7 @@ import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators'; import getDistanceForDirection from '../../utils/getDistanceForDirection'; import { + Route, Layout, 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-05-11 17:55:45.000000000 +0200 +++ src/vendor/views/Stack/StackView.tsx 2020-05-11 18:30:19.000000000 +0200 @@ -2,11 +2,11 @@ import { View, Platform, StyleSheet } from 'react-native'; import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context'; import { - NavigationHelpersContext, StackActions, - StackNavigationState, - Route, -} from '@react-navigation/native'; + NavigationState as StackNavigationState, + NavigationActions, + SceneView, +} from 'react-navigation'; import { GestureHandlerRootView } from '../GestureHandler'; import CardStack from './CardStack'; @@ -16,6 +16,7 @@ } from '../Header/HeaderContainer'; import SafeAreaProviderCompat from '../SafeAreaProviderCompat'; import { + Route, StackNavigationHelpers, StackNavigationConfig, StackDescriptorMap, @@ -25,6 +26,7 @@ state: StackNavigationState; navigation: StackNavigationHelpers; descriptors: StackDescriptorMap; + screenProps: unknown; }; type State = { @@ -293,7 +295,9 @@ return false; } - return gestureEnabled !== false; + return gestureEnabled !== undefined + ? gestureEnabled + : Platform.OS !== 'android'; } return false; @@ -321,24 +325,47 @@ return null; } - return descriptor.render(); + const { navigation, getComponent } = descriptor; + const SceneComponent = getComponent(); + + return ( + + ); }; private renderHeader = (props: HeaderContainerProps) => { return ; }; + private handleTransitionComplete = () => { + const { state, navigation } = this.props; + + if (state.isTransitioning) { + navigation.dispatch( + StackActions.completeTransition({ + key: navigation.state.key, + toChildKey: state.routes[state.index].key, + }) + ); + } + }; + private handleOpenRoute = ({ route }: { route: Route }) => { const { state, navigation } = this.props; + this.handleTransitionComplete(); + if ( this.state.replacingRouteKeys.every((key) => key !== route.key) && - state.routeNames.includes(route.name) && !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 @@ -364,12 +391,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 - navigation.dispatch({ - ...StackActions.pop(), - source: route.key, - target: state.key, - }); + // @ts-ignore + navigation.dispatch(StackActions.pop({ key: route.key, prune: false })); } else { + this.handleTransitionComplete(); + // 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), @@ -386,26 +412,29 @@ private handleTransitionStart = ( { route }: { route: Route }, closing: boolean - ) => - this.props.navigation.emit({ - type: 'transitionStart', - data: { closing }, - target: route.key, - }); + ) => { + const { descriptors } = this.props; + const descriptor = + descriptors[route.key] || this.state.descriptors[route.key]; + + descriptor?.options.onTransitionStart?.({ closing }); + }; private handleTransitionEnd = ( { route }: { route: Route }, closing: boolean - ) => - this.props.navigation.emit({ - type: 'transitionEnd', - data: { closing }, - target: route.key, - }); + ) => { + const { descriptors } = this.props; + const descriptor = + descriptors[route.key] || this.state.descriptors[route.key]; + + descriptor?.options.onTransitionEnd?.({ closing }); + }; render() { const { state, + // eslint-disable-next-line @typescript-eslint/no-unused-vars navigation, keyboardHandlingEnabled, mode = 'card', @@ -423,7 +452,7 @@ mode === 'card' && Platform.OS === 'ios' ? 'float' : 'screen'; return ( - + <> @@ -456,7 +485,7 @@ - + ); } }