diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.tsx
--- ../../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';
 
-/**
- * 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 {
-  StackNavigationOptions,
-  StackNavigationProp,
-  StackHeaderProps,
+  NavigationStackState,
+  StackNavigationProp as NavigationStackProp,
+  StackNavigationOptions as NavigationStackOptions,
+  StackNavigationConfig as NavigationStackConfig,
   StackHeaderLeftButtonProps,
   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-03-03 23:57:02.000000000 +0100
+++ src/vendor/navigators/createStackNavigator.tsx	1970-01-01 01:00:00.000000000 +0100
@@ -1,81 +0,0 @@
-import * as React from 'react';
-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<StackNavigationOptions> &
-  StackRouterOptions &
-  StackNavigationConfig;
-
-function StackNavigator({
-  initialRouteName,
-  children,
-  screenOptions,
-  ...rest
-}: Props) {
-  const { state, descriptors, navigation } = useNavigationBuilder<
-    StackNavigationState,
-    StackRouterOptions,
-    StackNavigationOptions,
-    StackNavigationEventMap
-  >(StackRouter, {
-    initialRouteName,
-    children,
-    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 (
-    <StackView
-      {...rest}
-      state={state}
-      descriptors={descriptors}
-      navigation={navigation}
-    />
-  );
-}
-
-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-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';
 import {
+  NavigationRoute,
+  NavigationState,
+  NavigationScreenProp,
   NavigationProp,
-  ParamListBase,
-  Descriptor,
-  Route,
-  NavigationHelpers,
-  StackNavigationState,
-} from '@react-navigation/native';
+  NavigationParams,
+  NavigationNavigateAction,
+  NavigationAction,
+  NavigationEventCallback,
+  NavigationEventSubscription,
+  NavigationDescriptor,
+} from 'react-navigation';
+
+// @ts-ignore
+export type Route<T extends string> = NavigationRoute;
+
+export type NavigationStackState = NavigationState;
+
+export type NavigationStackEventName =
+  | 'willFocus'
+  | 'didFocus'
+  | 'willBlur'
+  | 'didBlur';
 
 export type StackNavigationEventMap = {
   /**
@@ -26,42 +41,29 @@
   transitionEnd: { data: { closing: boolean } };
 };
 
-export type StackNavigationHelpers = NavigationHelpers<
-  ParamListBase,
-  StackNavigationEventMap
->;
+export type StackNavigationHelpers = NavigationProp<NavigationStackState>;
 
 export type StackNavigationProp<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
-> = NavigationProp<
-  ParamList,
-  RouteName,
-  StackNavigationState,
-  StackNavigationOptions,
-  StackNavigationEventMap
-> & {
-  /**
-   * Push a new screen onto the stack.
-   *
-   * @param name Name of the route for the tab.
-   * @param [params] Params object for the route.
-   */
-  push<RouteName extends keyof ParamList>(
-    ...args: ParamList[RouteName] extends undefined | any
-      ? [RouteName] | [RouteName, ParamList[RouteName]]
-      : [RouteName, ParamList[RouteName]]
-  ): void;
-
-  /**
-   * Pop a screen from the stack.
-   */
-  pop(count?: number): void;
-
-  /**
-   * Pop to the first route in the stack, dismissing all other screens.
-   */
-  popToTop(): void;
+  State = NavigationRoute,
+  Params = NavigationParams
+> = NavigationScreenProp<State, Params> & {
+  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 };
@@ -237,24 +239,27 @@
   /**
    * Navigation prop for the header.
    */
-  navigation: StackNavigationProp<ParamListBase>;
+  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<TransitionPreset> & {
     /**
@@ -332,6 +337,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/BorderlessButton.tsx src/vendor/views/BorderlessButton.tsx
--- ../../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;
 
     return (
+      // @ts-ignore
       <AnimatedBaseButton
         {...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-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';
+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,17 +40,12 @@
         ? o.headerTitle
         : o.title !== undefined
         ? o.title
-        : previous.route.name;
+        : previous.route.routeName;
   }
 
   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]
   );
@@ -63,7 +60,10 @@
       leftLabel={leftLabel}
       headerTitle={
         typeof options.headerTitle !== 'function'
-          ? (props: StackHeaderTitleProps) => <HeaderTitle {...props} />
+          ? (props: StackHeaderTitleProps) => {
+              // @ts-ignore
+              return <HeaderTitle {...props} />;
+            }
           : options.headerTitle
       }
       onGoBack={previous ? goBack : undefined}
@@ -71,3 +71,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-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,
 } 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-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';
-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-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';
-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}
           >
-            <NavigationRouteContext.Provider value={scene.route}>
+            <>
               <View
                 onLayout={
                   onContentHeightChange
@@ -152,7 +146,7 @@
                   )
                 ) : null}
               </View>
-            </NavigationRouteContext.Provider>
+            </>
           </NavigationContext.Provider>
         );
       })}
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-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';
 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<Route<string>>;
+  scene: Scene<NavigationRoute>;
   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-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';
-import { useTheme } from '@react-navigation/native';
+import { Animated, StyleSheet, Platform } from 'react-native';
+import useTheme from '../../../utils/useTheme';
 
-type Props = TextProps & {
+type Props = React.ComponentProps<typeof Animated.Text> & {
   tintColor?: string;
   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-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;
 
-  private pendingGestureCallback: number | undefined;
+  private pendingGestureCallback: any;
 
   private animate = ({
     closing,
@@ -507,7 +507,7 @@
               ) : null}
               <View
                 ref={this.contentRef}
-                style={[styles.content, contentStyle]}
+                style={[styles.content, contentStyle] as any}
               >
                 <StackGestureRefContext.Provider value={this.gestureRef}>
                   <CardAnimationContext.Provider value={animationContext}>
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-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';
-import { Route, useTheme } from '@react-navigation/native';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import Card from './Card';
 import HeaderHeightContext from '../../utils/HeaderHeightContext';
-import { Scene, Layout, StackHeaderMode, TransitionPreset } from '../../types';
+import useTheme from '../../../utils/useTheme';
+import {
+  Route,
+  Scene,
+  Layout,
+  StackHeaderMode,
+  TransitionPreset,
+} from '../../types';
 
 type Props = TransitionPreset & {
   index: number;
@@ -35,6 +41,7 @@
     closing: boolean
   ) => void;
   onTransitionEnd?: (props: { route: Route<string> }, closing: boolean) => void;
+  onTransitionComplete: (props: { route: Route<string> }) => 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 (
     <Card
       index={index}
@@ -180,7 +191,7 @@
           ? { marginTop: headerHeight }
           : null
       }
-      contentStyle={[{ backgroundColor: colors.background }, cardStyle]}
+      contentStyle={[{ backgroundColor: colors.background }, cardStyle] as any}
       style={StyleSheet.absoluteFill}
     >
       <View style={styles.container}>
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-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';
 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 { getDefaultHeaderHeight } from '../Header/HeaderSegment';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
@@ -24,6 +23,7 @@
 import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
 import getDistanceForDirection from '../../utils/getDistanceForDirection';
 import {
+  Route,
   Layout,
   StackHeaderMode,
   StackCardMode,
@@ -54,6 +54,7 @@
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
   renderScene: (props: { route: Route<string> }) => React.ReactNode;
   headerMode: StackHeaderMode;
+  onTransitionComplete: (props: { route: Route<string> }) => void;
   onTransitionStart: (
     props: { route: Route<string> },
     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-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 {
   StackActions,
-  StackNavigationState,
-  Route,
-} from '@react-navigation/native';
+  NavigationState as StackNavigationState,
+  SceneView,
+} from 'react-navigation';
 
 import CardStack from './CardStack';
 import KeyboardManager from '../KeyboardManager';
@@ -15,6 +15,7 @@
 } from '../Header/HeaderContainer';
 import SafeAreaProviderCompat from '../SafeAreaProviderCompat';
 import {
+  Route,
   StackNavigationHelpers,
   StackNavigationConfig,
   StackDescriptorMap,
@@ -24,6 +25,7 @@
   state: StackNavigationState;
   navigation: StackNavigationHelpers;
   descriptors: StackDescriptorMap;
+  screenProps: unknown;
 };
 
 type State = {
@@ -290,14 +292,37 @@
       return null;
     }
 
-    return descriptor.render();
+    const { navigation, getComponent } = descriptor;
+    const SceneComponent = getComponent();
+
+    return (
+      <SceneView
+        screenProps={this.props.screenProps}
+        navigation={navigation}
+        component={SceneComponent}
+      />
+    );
   };
 
   private renderHeader = (props: HeaderContainerProps) => {
     return <HeaderContainer {...props} />;
   };
 
+  private handleTransitionComplete = ({ route }: { route: Route<string> }) => {
+    const { state, navigation } = this.props;
+
+    if (state.isTransitioning) {
+      navigation.dispatch(
+        StackActions.completeTransition({
+          key: navigation.state.key,
+          toChildKey: route.key,
+        })
+      );
+    }
+  };
+
   private handleOpenRoute = ({ route }: { route: Route<string> }) => {
+    this.handleTransitionComplete({ route });
     this.setState(state => ({
       routes: state.replacingRouteKeys.length
         ? state.routes.filter(r => !state.replacingRouteKeys.includes(r.key))
@@ -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
-      navigation.dispatch({
-        ...StackActions.pop(),
-        source: route.key,
-        target: state.key,
-      });
+      // @ts-ignore
+      navigation.dispatch(StackActions.pop({ key: route.key }));
     } else {
+      // 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)],
+      });
+
       // 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 +367,24 @@
   private handleTransitionStart = (
     { route }: { route: Route<string> },
     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<string> },
     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 {
@@ -391,6 +423,7 @@
                     closingRouteKeys={closingRouteKeys}
                     onOpenRoute={this.handleOpenRoute}
                     onCloseRoute={this.handleCloseRoute}
+                    onTransitionComplete={this.handleTransitionComplete}
                     onTransitionStart={this.handleTransitionStart}
                     onTransitionEnd={this.handleTransitionEnd}
                     renderHeader={this.renderHeader}