chore: publish

- react-navigation-stack@2.3.2
chore: sync latest stack
2026-01-13 09:30:30 +08:00 · 2020-03-19 20:12:07 +01:00 · 2020-03-19 20:11:34 +01:00 · 2020-03-19 16:44:44 +01:00 · 2020-03-19 16:43:28 +01:00 · 2020-03-16 19:22:04 +01:00
34 changed files with 1318 additions and 652 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@
 .idea
 .expo
 .gradle
+.history

 local.properties

--- a/example/package.json
+++ b/example/package.json
@@ -8,9 +8,9 @@
    "ios": "expo start --ios"
  },
  "dependencies": {
-    "@babel/runtime": "^7.8.4",
+    "@babel/runtime": "^7.8.7",
    "@expo/vector-icons": "^10.0.6",
-    "@react-native-community/masked-view": "0.1.6",
+    "@react-native-community/masked-view": "0.1.7",
    "expo": "^36.0.0",
    "expo-asset": "~8.0.0",
    "expo-barcode-scanner": "^8.0.0",
@@ -21,16 +21,16 @@
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-iphone-x-helper": "^1.2.1",
-    "react-native-maps": "0.26.1",
+    "react-native-maps": "0.27.0",
    "react-native-paper": "^3.4.0",
    "react-native-reanimated": "~1.7.0",
    "react-native-safe-area-context": "0.7.3",
-    "react-native-screens": "2.0.0-beta.10",
+    "react-native-screens": "2.3.0",
    "react-native-webview": "8.1.2",
    "react-navigation-header-buttons": "^3.0.5"
  },
  "devDependencies": {
    "babel-plugin-module-resolver": "^4.0.0",
-    "expo-cli": "^3.13.1"
+    "expo-cli": "^3.13.8"
  }
 }
--- a/package.json
+++ b/package.json
@@ -27,12 +27,12 @@
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "@babel/preset-typescript": "^7.8.3",
-    "@babel/runtime": "^7.8.4",
+    "@babel/runtime": "^7.8.7",
    "@commitlint/config-conventional": "^8.3.4",
-    "@types/jest": "^25.1.2",
+    "@types/jest": "^25.1.4",
    "commitlint": "^8.3.5",
    "core-js": "^3.6.4",
    "eslint": "^6.8.0",
--- a/packages/animated-switch/CHANGELOG.md
+++ b/packages/animated-switch/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.5.4](https://github.com/react-navigation/react-navigation/compare/react-navigation-animated-switch@0.5.3...react-navigation-animated-switch@0.5.4) (2020-03-16)
+
+**Note:** Version bump only for package react-navigation-animated-switch
+
+
+
+
+
+## [0.5.3](https://github.com/react-navigation/react-navigation/compare/react-navigation-animated-switch@0.5.2...react-navigation-animated-switch@0.5.3) (2020-03-16)
+
+**Note:** Version bump only for package react-navigation-animated-switch
+
+
+
+
+
 ## [0.5.2](https://github.com/react-navigation/react-navigation/compare/react-navigation-animated-switch@0.5.1...react-navigation-animated-switch@0.5.2) (2020-02-26)

 **Note:** Version bump only for package react-navigation-animated-switch
--- a/packages/animated-switch/package.json
+++ b/packages/animated-switch/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-navigation-animated-switch",
-  "version": "0.5.2",
+  "version": "0.5.4",
  "description": "Animated switch for React Navigation",
  "main": "lib/commonjs/index.js",
  "react-native": "lib/module/index.js",
@@ -21,14 +21,14 @@
    "access": "public"
  },
  "devDependencies": {
-    "@react-native-community/bob": "0.9.7",
-    "@types/react": "16.9.22",
-    "@types/react-native": "0.61.17",
+    "@react-native-community/bob": "0.10.0",
+    "@types/react": "16.9.23",
+    "@types/react-native": "0.61.22",
    "del-cli": "^3.0.0",
    "react": "~16.9.0",
    "react-native": "~0.61.5",
    "react-native-reanimated": "~1.7.0",
-    "react-navigation": "^4.2.2",
+    "react-navigation": "^4.3.1",
    "typescript": "~3.7.5"
  },
  "peerDependencies": {
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.7.0](https://github.com/react-navigation/react-navigation-core/compare/@react-navigation/core@3.6.1...@react-navigation/core@3.7.0) (2020-03-16)
+
+
+### Features
+
+* add prune option to pop action to match v5 behaviour ([5927f42](https://github.com/react-navigation/react-navigation-core/commit/5927f4287f5e1ab106537865523daa1c03b14b47))
+
+
+
+
+
 ## [3.6.1](https://github.com/react-navigation/react-navigation-core/compare/@react-navigation/core@3.6.0...@react-navigation/core@3.6.1) (2020-02-24)


--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@react-navigation/core",
-  "version": "3.6.1",
+  "version": "3.7.0",
  "description": "Core utilities for the react-navigation framework",
  "main": "lib/commonjs/index.js",
  "react-native": "lib/module/index.js",
@@ -36,11 +36,11 @@
  "dependencies": {
    "hoist-non-react-statics": "^3.3.2",
    "path-to-regexp": "^1.8.0",
-    "query-string": "^6.11.0",
-    "react-is": "^16.8.6"
+    "query-string": "^6.11.1",
+    "react-is": "^16.13.0"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.9.7",
+    "@react-native-community/bob": "^0.10.0",
    "del-cli": "^3.0.0",
    "react": "~16.9.0",
    "react-native": "~0.61.5",
--- a/packages/core/src/routers/StackRouter.js
+++ b/packages/core/src/routers/StackRouter.js
@@ -532,24 +532,43 @@ export default (routeConfigs, stackConfig = {}) => {
        action.type === NavigationActions.BACK ||
        action.type === StackActions.POP
      ) {
-        const { key, n, immediate } = action;
-        let backRouteIndex = state.index;
-        if (action.type === StackActions.POP && n != null) {
-          // determine the index to go back *from*. In this case, n=1 means to go
-          // back from state.index, as if it were a normal "BACK" action
-          backRouteIndex = Math.max(1, state.index - n + 1);
-        } else if (key) {
-          const backRoute = state.routes.find(route => route.key === key);
-          backRouteIndex = state.routes.indexOf(backRoute);
-        }
+        const { key, n, immediate, prune } = action;

-        if (backRouteIndex > 0) {
-          return {
-            ...state,
-            routes: state.routes.slice(0, backRouteIndex),
-            index: backRouteIndex - 1,
-            isTransitioning: immediate !== true,
-          };
+        if (action.type === StackActions.POP && prune === false && key) {
+          const index = state.routes.findIndex(r => r.key === key);
+          const count = Math.max(index - (n == null ? 1 : n) + 1, 1);
+          const routes = state.routes
+            .slice(0, count)
+            .concat(state.routes.slice(index + 1));
+
+          if (routes.length) {
+            return {
+              ...state,
+              routes,
+              index: routes.length - 1,
+              isTransitioning: immediate !== true,
+            };
+          }
+        } else {
+          let backRouteIndex = state.index;
+
+          if (action.type === StackActions.POP && n != null) {
+            // determine the index to go back *from*. In this case, n=1 means to go
+            // back from state.index, as if it were a normal "BACK" action
+            backRouteIndex = Math.max(1, state.index - n + 1);
+          } else if (key) {
+            const backRoute = state.routes.find(route => route.key === key);
+            backRouteIndex = state.routes.indexOf(backRoute);
+          }
+
+          if (backRouteIndex > 0) {
+            return {
+              ...state,
+              routes: state.routes.slice(0, backRouteIndex),
+              index: backRouteIndex - 1,
+              isTransitioning: immediate !== true,
+            };
+          }
        }
      }

--- a/packages/core/src/routers/tests/StackRouter.test.js
+++ b/packages/core/src/routers/tests/StackRouter.test.js
@@ -562,6 +562,31 @@ describe('StackRouter', () => {
    expect(poppedState3.routes.length).toBe(1);
    expect(poppedState3.index).toBe(0);
    expect(poppedState3.isTransitioning).toBe(true);
+
+    const poppedState4 = TestRouter.getStateForAction(
+      StackActions.pop({ key: 'C', prune: false, immediate: true }),
+      state
+    );
+    expect(poppedState4.routes.length).toBe(3);
+    expect(poppedState4.index).toBe(2);
+    expect(poppedState4.isTransitioning).toBe(false);
+    expect(poppedState4.routes).toEqual([
+      { key: 'A', routeName: 'foo' },
+      { key: 'B', routeName: 'bar', params: { bazId: '321' } },
+      { key: 'D', routeName: 'bar' },
+    ]);
+
+    const poppedState5 = TestRouter.getStateForAction(
+      StackActions.pop({ n: 2, key: 'C', prune: false }),
+      state
+    );
+    expect(poppedState5.routes.length).toBe(2);
+    expect(poppedState5.index).toBe(1);
+    expect(poppedState5.isTransitioning).toBe(true);
+    expect(poppedState5.routes).toEqual([
+      { key: 'A', routeName: 'foo' },
+      { key: 'D', routeName: 'bar' },
+    ]);
  });

  it('popToTop works as expected', () => {
--- a/packages/drawer/CHANGELOG.md
+++ b/packages/drawer/CHANGELOG.md
@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [2.4.5](https://github.com/react-navigation/drawer/compare/react-navigation-drawer@2.4.4...react-navigation-drawer@2.4.5) (2020-03-19)
+
+
+### Bug Fixes
+
+* don't use react-native-screens on web ([44c3900](https://github.com/react-navigation/drawer/commit/44c390075f7b76664e09fd9a1a7926645133ebec)), closes [#7485](https://github.com/react-navigation/drawer/issues/7485)
+
+
+
+
+
+## [2.4.4](https://github.com/react-navigation/drawer/compare/react-navigation-drawer@2.4.3...react-navigation-drawer@2.4.4) (2020-03-16)
+
+**Note:** Version bump only for package react-navigation-drawer
+
+
+
+
+
+## [2.4.3](https://github.com/react-navigation/drawer/compare/react-navigation-drawer@2.4.2...react-navigation-drawer@2.4.3) (2020-03-16)
+
+**Note:** Version bump only for package react-navigation-drawer
+
+
+
+
+
 ## [2.4.2](https://github.com/react-navigation/drawer/compare/react-navigation-drawer@2.4.1...react-navigation-drawer@2.4.2) (2020-02-26)

 **Note:** Version bump only for package react-navigation-drawer
--- a/packages/drawer/package.json
+++ b/packages/drawer/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-navigation-drawer",
-  "version": "2.4.2",
+  "version": "2.4.5",
  "description": "Drawer navigator component for React Navigation",
  "main": "lib/commonjs/index.js",
  "react-native": "lib/module/index.js",
@@ -38,18 +38,18 @@
  },
  "homepage": "https://github.com/react-navigation/drawer#readme",
  "devDependencies": {
-    "@react-native-community/bob": "^0.9.7",
-    "@types/react": "^16.9.22",
-    "@types/react-native": "^0.61.17",
+    "@react-native-community/bob": "^0.10.0",
+    "@types/react": "^16.9.23",
+    "@types/react-native": "^0.61.22",
    "del-cli": "^3.0.0",
    "react": "~16.9.0",
    "react-lifecycles-compat": "^3.0.4",
    "react-native": "~0.61.5",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-reanimated": "^1.2.0",
-    "react-native-screens": "^2.0.0-beta.10",
+    "react-native-screens": "^2.3.0",
    "react-native-testing-library": "^1.12.0",
-    "react-navigation": "^4.2.2",
+    "react-navigation": "^4.3.1",
    "typescript": "~3.7.5"
  },
  "peerDependencies": {
@@ -57,7 +57,7 @@
    "react-native": "*",
    "react-native-gesture-handler": "^1.0.12",
    "react-native-reanimated": "^1.0.0",
-    "react-native-screens": "^1.0.0 || ^1.0.0-alpha",
+    "react-native-screens": ">=1.0.0 || >= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0",
    "react-navigation": "^4.1.1"
  },
  "@react-native-community/bob": {
--- a/packages/drawer/src/views/ResourceSavingScene.tsx
+++ b/packages/drawer/src/views/ResourceSavingScene.tsx
@@ -1,5 +1,3 @@
-/* @flow */
-
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import { Screen, screensEnabled } from 'react-native-screens';
@@ -10,21 +8,29 @@ type Props = {
  style?: any;
 };

-const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view out of its container
+const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container

 export default class ResourceSavingScene extends React.Component<Props> {
  render() {
-    if (screensEnabled?.()) {
+    // react-native-screens is buggy on web
+    if (screensEnabled?.() && Platform.OS !== 'web') {
      const { isVisible, ...rest } = this.props;

      // @ts-ignore
      return <Screen active={isVisible ? 1 : 0} {...rest} />;
    }
+
    const { isVisible, children, style, ...rest } = this.props;

    return (
      <View
-        style={[styles.container, style]}
+        style={[
+          styles.container,
+          Platform.OS === 'web'
+            ? { display: isVisible ? 'flex' : 'none' }
+            : null,
+          style,
+        ]}
        collapsable={false}
        removeClippedSubviews={
          // On iOS, set removeClippedSubviews to true only when not focused
--- a/packages/material-bottom-tabs/CHANGELOG.md
+++ b/packages/material-bottom-tabs/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [2.2.4](https://github.com/react-navigation/react-navigation-material-bottom-tabs/compare/react-navigation-material-bottom-tabs@2.2.3...react-navigation-material-bottom-tabs@2.2.4) (2020-03-16)
+
+**Note:** Version bump only for package react-navigation-material-bottom-tabs
+
+
+
+
+
+## [2.2.3](https://github.com/react-navigation/react-navigation-material-bottom-tabs/compare/react-navigation-material-bottom-tabs@2.2.2...react-navigation-material-bottom-tabs@2.2.3) (2020-03-16)
+
+**Note:** Version bump only for package react-navigation-material-bottom-tabs
+
+
+
+
+
 ## [2.2.2](https://github.com/react-navigation/react-navigation-material-bottom-tabs/compare/react-navigation-material-bottom-tabs@2.2.1...react-navigation-material-bottom-tabs@2.2.2) (2020-02-26)

 **Note:** Version bump only for package react-navigation-material-bottom-tabs
--- a/packages/material-bottom-tabs/package.json
+++ b/packages/material-bottom-tabs/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-navigation-material-bottom-tabs",
-  "version": "2.2.2",
+  "version": "2.2.4",
  "description": "Material Bottom Tab Navigation component for React Navigation",
  "main": "lib/commonjs/index.js",
  "module": "lib/module/index.js",
@@ -38,17 +38,17 @@
  },
  "homepage": "https://github.com/react-navigation/react-navigation-material-bottom-tabs#readme",
  "devDependencies": {
-    "@react-native-community/bob": "^0.9.7",
+    "@react-native-community/bob": "^0.10.0",
    "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/react": "^16.9.22",
-    "@types/react-native": "^0.61.17",
+    "@types/react": "^16.9.23",
+    "@types/react-native": "^0.61.22",
    "del-cli": "^3.0.0",
    "react": "~16.9.0",
    "react-native": "~0.61.5",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-paper": "^3.1.1",
    "react-native-reanimated": "^1.2.0",
-    "react-navigation": "^4.2.2",
+    "react-navigation": "^4.3.1",
    "typescript": "~3.7.5"
  },
  "peerDependencies": {
--- a/packages/native/CHANGELOG.md
+++ b/packages/native/CHANGELOG.md
@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [3.7.5](https://github.com/react-navigation/react-navigation-native/compare/@react-navigation/native@3.7.4...@react-navigation/native@3.7.5) (2020-03-16)
+
+
+### Bug Fixes
+
+* downgrade react-native-safe-area-view ([cfc1bac](https://github.com/react-navigation/react-navigation-native/commit/cfc1bac4e153db4a4ba3f2a9033f77b53367fcbc)), closes [#7813](https://github.com/react-navigation/react-navigation-native/issues/7813)
+
+
+
+
+
+## [3.7.4](https://github.com/react-navigation/react-navigation-native/compare/@react-navigation/native@3.7.3...@react-navigation/native@3.7.4) (2020-03-16)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 ## [3.7.3](https://github.com/react-navigation/react-navigation-native/compare/@react-navigation/native@3.7.0...@react-navigation/native@3.7.3) (2020-02-24)

 **Note:** Version bump only for package @react-navigation/native
--- a/packages/native/package.json
+++ b/packages/native/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@react-navigation/native",
-  "version": "3.7.3",
+  "version": "3.7.5",
  "description": "React Native support for React Navigation",
  "main": "lib/commonjs/index.js",
  "react-native": "lib/module/index.js",
@@ -38,14 +38,13 @@
    "react-native-safe-area-view": "^0.14.8"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.9.7",
-    "@react-navigation/core": "^3.6.1",
+    "@react-native-community/bob": "^0.10.0",
+    "@react-navigation/core": "^3.7.0",
    "@types/react-test-renderer": "^16.9.2",
    "del-cli": "^3.0.0",
    "react": "~16.9.0",
    "react-native": "~0.61.5",
    "react-native-gesture-handler": "^1.6.0",
-    "react-native-screens": "^2.0.0-beta.10",
    "react-test-renderer": "^16.9.2"
  },
  "@react-native-community/bob": {
--- a/packages/react-navigation/CHANGELOG.md
+++ b/packages/react-navigation/CHANGELOG.md
@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [4.3.1](https://github.com/react-navigation/react-navigation/compare/react-navigation@4.3.0...react-navigation@4.3.1) (2020-03-16)
+
+**Note:** Version bump only for package react-navigation
+
+
+
+
+
+# [4.3.0](https://github.com/react-navigation/react-navigation/compare/react-navigation@4.2.2...react-navigation@4.3.0) (2020-03-16)
+
+
+### Features
+
+* add prune option to pop action to match v5 behaviour ([5927f42](https://github.com/react-navigation/react-navigation/commit/5927f4287f5e1ab106537865523daa1c03b14b47))
+
+
+
+
+
 ## [4.2.2](https://github.com/react-navigation/react-navigation/compare/react-navigation@4.2.1...react-navigation@4.2.2) (2020-02-26)


--- a/packages/react-navigation/package.json
+++ b/packages/react-navigation/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-navigation",
-  "version": "4.2.2",
+  "version": "4.3.1",
  "description": "Routing and navigation for your React Native apps",
  "main": "src/index.js",
  "types": "typescript/react-navigation.d.ts",
@@ -24,12 +24,12 @@
    "react-native": "*"
  },
  "dependencies": {
-    "@react-navigation/core": "^3.6.1",
-    "@react-navigation/native": "^3.7.3"
+    "@react-navigation/core": "^3.7.0",
+    "@react-navigation/native": "^3.7.5"
  },
  "devDependencies": {
-    "@types/react": "^16.9.22",
-    "@types/react-native": "^0.61.17",
+    "@types/react": "^16.9.23",
+    "@types/react-native": "^0.61.22",
    "@types/react-test-renderer": "^16.9.2",
    "react": "~16.9.0",
    "react-native": "~0.61.5",
--- a/packages/react-navigation/typescript/react-navigation.d.ts
+++ b/packages/react-navigation/typescript/react-navigation.d.ts
@@ -328,6 +328,7 @@ export interface NavigationPopActionPayload {
  // n: the number of routes to pop of the stack
  n?: number;
  immediate?: boolean;
+  prune?: boolean;
  key?: string;
 }

--- a/packages/stack/CHANGELOG.md
+++ b/packages/stack/CHANGELOG.md
@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [2.3.2](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.3.1...react-navigation-stack@2.3.2) (2020-03-19)
+
+**Note:** Version bump only for package react-navigation-stack
+
+
+
+
+
+## [2.3.1](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.3.0...react-navigation-stack@2.3.1) (2020-03-16)
+
+**Note:** Version bump only for package react-navigation-stack
+
+
+
+
+
+# [2.3.0](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.2.3...react-navigation-stack@2.3.0) (2020-03-16)
+
+
+### Features
+
+* add prune option to pop action to match v5 behaviour ([5927f42](https://github.com/react-navigation/react-navigation-stack/commit/5927f4287f5e1ab106537865523daa1c03b14b47))
+
+
+
+
+
+## [2.2.3](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.2.2...react-navigation-stack@2.2.3) (2020-03-04)
+
+
+### Bug Fixes
+
+* dispatch completeTransition on mount so focus event is emitted ([f5a3880](https://github.com/react-navigation/react-navigation-stack/commit/f5a3880969afad2df409b0606e249b3971361dca))
+
+
+
+
+
 ## [2.2.2](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.2.1...react-navigation-stack@2.2.2) (2020-02-26)


--- a/packages/stack/package.json
+++ b/packages/stack/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-navigation-stack",
-  "version": "2.2.2",
+  "version": "2.3.2",
  "description": "Stack navigator component for React Navigation",
  "main": "lib/commonjs/index.js",
  "module": "lib/module/index.js",
@@ -43,20 +43,20 @@
    "react-native-iphone-x-helper": "^1.2.1"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.9.7",
-    "@react-native-community/masked-view": "^0.1.6",
-    "@react-navigation/stack": "^5.0.9",
+    "@react-native-community/bob": "^0.10.0",
+    "@react-native-community/masked-view": "^0.1.7",
+    "@react-navigation/stack": "^5.2.2",
    "@types/color": "^3.0.1",
-    "@types/react": "^16.9.22",
-    "@types/react-native": "^0.61.17",
+    "@types/react": "^16.9.23",
+    "@types/react-native": "^0.61.22",
    "@types/react-test-renderer": "^16.9.2",
    "del-cli": "^3.0.0",
    "react": "~16.9.0",
    "react-native": "~0.61.4",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-safe-area-context": "^0.7.3",
-    "react-native-screens": "^2.0.0-beta.10",
-    "react-navigation": "^4.2.2",
+    "react-native-screens": "^2.3.0",
+    "react-navigation": "^4.3.1",
    "react-test-renderer": "~16.9.0",
    "typescript": "~3.7.5"
  },
@@ -66,7 +66,7 @@
    "react-native": "*",
    "react-native-gesture-handler": "^1.5.0",
    "react-native-safe-area-context": "^0.6.0",
-    "react-native-screens": "^1.0.0 || ^1.0.0-alpha.0 || ^2.0.0-alpha.20",
+    "react-native-screens": ">=1.0.0 || >= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0",
    "react-navigation": "^4.1.1"
  },
  "@react-native-community/bob": {
--- a/packages/stack/scripts/stack.patch
+++ b/packages/stack/scripts/stack.patch
@@ -1,6 +1,6 @@
 diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.tsx
--- ../../node_modules/@react-navigation/stack/src/index.tsx	2020-02-24 11:53:26.000000000 +0100
-+++ src/vendor/index.tsx	2020-02-24 11:58:26.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/index.tsx	2020-03-19 20:09:01.000000000 +0100
+++ src/vendor/index.tsx	2020-03-19 20:09:16.000000000 +0100
@@ -3,11 +3,6 @@
 import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs';
 import * as TransitionPresets from './TransitionConfigs/TransitionPresets';
@@ -28,9 +28,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/i
   StackHeaderTitleProps,
   StackCardInterpolatedStyle,
 diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx src/vendor/navigators/createStackNavigator.tsx
--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx	2020-02-24 11:53:26.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx	2020-03-19 20:09:01.000000000 +0100
 +++ src/vendor/navigators/createStackNavigator.tsx	1970-01-01 01:00:00.000000000 +0100
-@@ -1,79 +0,0 @@
+@@ -1,81 +0,0 @@
 -import * as React from 'react';
 -import {
 -  useNavigationBuilder,
@@ -107,13 +107,15 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStack
 -}
 -
 -export default createNavigatorFactory<
+-  StackNavigationState,
 -  StackNavigationOptions,
+-  StackNavigationEventMap,
 -  typeof StackNavigator
 ->(StackNavigator);
 diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.tsx
--- ../../node_modules/@react-navigation/stack/src/types.tsx	2020-02-24 11:53:26.000000000 +0100
-+++ src/vendor/types.tsx	2020-02-24 12:05:09.000000000 +0100
-@@ -7,13 +7,28 @@
+--- ../../node_modules/@react-navigation/stack/src/types.tsx	2020-03-19 20:09:01.000000000 +0100
+++ src/vendor/types.tsx	2020-03-19 20:09:16.000000000 +0100
+@@ -8,14 +8,28 @@
 } from 'react-native';
 import { EdgeInsets } from 'react-native-safe-area-context';
 import {
@@ -126,6 +128,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
 -  Route,
 -  NavigationHelpers,
 -  StackNavigationState,
+-  StackActionHelpers,
 -} from '@react-navigation/native';
 +  NavigationParams,
 +  NavigationNavigateAction,
@@ -148,7 +151,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
 
 export type StackNavigationEventMap = {
   /**
-@@ -26,42 +41,29 @@
+@@ -28,22 +42,29 @@
   transitionEnd: { data: { closing: boolean } };
 };
 
@@ -156,8 +159,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
 -  ParamListBase,
 -  StackNavigationEventMap
 ->;
+-
 +export type StackNavigationHelpers = NavigationProp<NavigationStackState>;
- 
 export type StackNavigationProp<
 -  ParamList extends ParamListBase,
 -  RouteName extends keyof ParamList = string
@@ -167,28 +170,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
 -  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;
+-> &
+-  StackActionHelpers<ParamList>;
 +  State = NavigationRoute,
 +  Params = NavigationParams
 +> = NavigationScreenProp<State, Params> & {
@@ -209,10 +192,11 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
 +    event: NavigationStackEventName,
 +    callback: NavigationEventCallback
 +  ) => NavigationEventSubscription;
- };
+};
 
 export type Layout = { width: number; height: number };
-@@ -237,24 +239,27 @@
+ 
+@@ -218,24 +239,27 @@
   /**
    * Navigation prop for the header.
    */
@@ -246,7 +230,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
 export type StackNavigationOptions = StackHeaderOptions &
   Partial<TransitionPreset> & {
     /**
-@@ -332,6 +337,8 @@
+@@ -317,6 +341,8 @@
       bottom?: number;
       left?: number;
     };
@@ -255,20 +239,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
   };
 
 export type StackNavigationConfig = {
-diff -Naur ../../node_modules/@react-navigation/stack/src/views/BorderlessButton.tsx src/vendor/views/BorderlessButton.tsx
--- ../../node_modules/@react-navigation/stack/src/views/BorderlessButton.tsx	2020-02-24 11:53:26.000000000 +0100
-+++ src/vendor/views/BorderlessButton.tsx	2020-02-24 12:50:48.000000000 +0100
-@@ -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-02-24 11:53:26.000000000 +0100
-+++ src/vendor/views/Header/Header.tsx	2020-02-24 12:48:47.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx	2020-03-19 20:09:01.000000000 +0100
+++ src/vendor/views/Header/Header.tsx	2020-03-19 20:09:16.000000000 +0100
@@ -1,12 +1,14 @@
 import * as React from 'react';
 -import { StackActions } from '@react-navigation/native';
@@ -306,7 +279,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
 
   const goBack = React.useCallback(
     debounce(() => {
-      if (navigation.canGoBack()) {
+-      if (navigation.isFocused() && navigation.canGoBack()) {
 -        navigation.dispatch({
 -          ...StackActions.pop(),
 -          source: scene.route.key,
@@ -348,8 +321,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
 +
 +export default Header;
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx src/vendor/views/Header/HeaderBackButton.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx	2020-02-24 11:53:26.000000000 +0100
-+++ src/vendor/views/Header/HeaderBackButton.tsx	2020-02-24 11:58:32.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx	2020-03-19 20:09:01.000000000 +0100
+++ src/vendor/views/Header/HeaderBackButton.tsx	2020-03-19 20:09:16.000000000 +0100
@@ -8,9 +8,9 @@
   StyleSheet,
   LayoutChangeEvent,
@@ -362,8 +335,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBac
 
 type Props = StackHeaderLeftButtonProps;
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx src/vendor/views/Header/HeaderBackground.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx	2020-02-24 11:53:26.000000000 +0100
-+++ src/vendor/views/Header/HeaderBackground.tsx	2020-02-24 11:58:32.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx	2020-03-19 20:09:01.000000000 +0100
+++ src/vendor/views/Header/HeaderBackground.tsx	2020-03-19 20:09:16.000000000 +0100
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Animated, StyleSheet, Platform, ViewProps } from 'react-native';
@@ -373,8 +346,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBac
 type Props = ViewProps & {
   children?: React.ReactNode;
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx src/vendor/views/Header/HeaderContainer.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx	2020-02-24 11:53:26.000000000 +0100
-+++ src/vendor/views/Header/HeaderContainer.tsx	2020-02-24 12:08:14.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx	2020-03-19 20:09:01.000000000 +0100
+++ src/vendor/views/Header/HeaderContainer.tsx	2020-03-19 20:09:16.000000000 +0100
@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
@@ -426,8 +399,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
         );
       })}
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx src/vendor/views/Header/HeaderSegment.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx	2020-02-24 11:53:26.000000000 +0100
-+++ src/vendor/views/Header/HeaderSegment.tsx	2020-02-24 11:58:32.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx	2020-03-19 20:09:01.000000000 +0100
+++ src/vendor/views/Header/HeaderSegment.tsx	2020-03-19 20:09:16.000000000 +0100
@@ -8,7 +8,7 @@
   ViewStyle,
 } from 'react-native';
@@ -447,24 +420,20 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSeg
 };
 
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx src/vendor/views/Header/HeaderTitle.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx	2020-02-24 11:53:26.000000000 +0100
-+++ src/vendor/views/Header/HeaderTitle.tsx	2020-02-24 12:47:49.000000000 +0100
-@@ -1,8 +1,8 @@
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx	2020-03-19 20:09:01.000000000 +0100
+++ src/vendor/views/Header/HeaderTitle.tsx	2020-03-19 20:09:16.000000000 +0100
+@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Animated, StyleSheet, Platform, TextProps } from 'react-native';
+ import { Animated, StyleSheet, Platform } 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> & {
+ 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-02-24 11:53:26.000000000 +0100
-+++ src/vendor/views/Stack/Card.tsx	2020-02-24 11:58:32.000000000 +0100
-@@ -133,7 +133,7 @@
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx	2020-03-19 20:09:01.000000000 +0100
+++ src/vendor/views/Stack/Card.tsx	2020-03-19 20:09:16.000000000 +0100
+@@ -138,7 +138,7 @@
 
   private interactionHandle: number | undefined;
 
@@ -473,18 +442,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx s
 
   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-02-24 11:53:26.000000000 +0100
-+++ src/vendor/views/Stack/CardContainer.tsx	2020-02-24 11:58:32.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx	2020-03-19 20:09:01.000000000 +0100
+++ src/vendor/views/Stack/CardContainer.tsx	2020-03-19 20:09:16.000000000 +0100
@@ -1,10 +1,16 @@
 import * as React from 'react';
 import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
@@ -504,7 +464,33 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContai
 
 type Props = TransitionPreset & {
   index: number;
-@@ -180,7 +186,7 @@
+@@ -36,6 +42,7 @@
+     closing: boolean
+   ) => void;
+   onTransitionEnd?: (props: { route: Route<string> }, closing: boolean) => void;
+  onTransitionComplete: (props: { route: Route<string> }) => void;
+   onPageChangeStart?: () => void;
+   onPageChangeConfirm?: () => void;
+   onPageChangeCancel?: () => void;
+@@ -83,6 +90,7 @@
+   layout,
+   onCloseRoute,
+   onOpenRoute,
+  onTransitionComplete,
+   onPageChangeCancel,
+   onPageChangeConfirm,
+   onPageChangeStart,
+@@ -152,6 +160,9 @@
+     };
+   }, [pointerEvents, scene.progress.next]);
+ 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  React.useEffect(() => onTransitionComplete({ route: scene.route }), []);
+
+   return (
+     <Card
+       index={index}
+@@ -183,7 +194,7 @@
           ? { marginTop: headerHeight }
           : null
       }
@@ -514,8 +500,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContai
     >
       <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-02-24 11:53:26.000000000 +0100
-+++ src/vendor/views/Stack/CardStack.tsx	2020-02-24 12:09:38.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx	2020-03-19 20:09:01.000000000 +0100
+++ src/vendor/views/Stack/CardStack.tsx	2020-03-19 20:09:16.000000000 +0100
@@ -9,9 +9,8 @@
   ViewProps,
 } from 'react-native';
@@ -535,18 +521,33 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.
   Layout,
   StackHeaderMode,
   StackCardMode,
-@@ -103,7 +103,7 @@
-     <View
-       collapsable={!enabled}
-       removeClippedSubviews={Platform.OS !== 'ios' && enabled}
-      style={[style, { overflow: 'hidden' }]}
-+      style={[style, { overflow: 'hidden' }] as any}
-       {...rest}
-     />
-   );
+@@ -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
+@@ -383,6 +384,7 @@
+       renderHeader,
+       renderScene,
+       headerMode,
+      onTransitionComplete,
+       onTransitionStart,
+       onTransitionEnd,
+       onPageChangeStart,
+@@ -560,6 +562,7 @@
+                   renderScene={renderScene}
+                   onOpenRoute={onOpenRoute}
+                   onCloseRoute={onCloseRoute}
+                  onTransitionComplete={onTransitionComplete}
+                   onTransitionStart={onTransitionStart}
+                   onTransitionEnd={onTransitionEnd}
+                   gestureEnabled={index !== 0 && getGesturesEnabled({ route })}
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx src/vendor/views/Stack/StackView.tsx
--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx	2020-02-24 11:53:26.000000000 +0100
-+++ src/vendor/views/Stack/StackView.tsx	2020-02-24 12:09:08.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx	2020-03-19 20:09:01.000000000 +0100
+++ src/vendor/views/Stack/StackView.tsx	2020-03-19 20:09:16.000000000 +0100
@@ -4,9 +4,9 @@
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import {
@@ -576,7 +577,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
 };
 
 type State = {
-@@ -290,14 +292,31 @@
+@@ -290,14 +292,37 @@
       return null;
     }
 
@@ -598,10 +599,16 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
   };
 
 +  private handleTransitionComplete = ({ route }: { route: Route<string> }) => {
-+    // TODO: remove when the new event system lands
-+    this.props.navigation.dispatch(
-+      StackActions.completeTransition({ toChildKey: route.key })
-+    );
+    const { state, navigation } = this.props;
+
+    if (state.isTransitioning) {
+      navigation.dispatch(
+        StackActions.completeTransition({
+          key: navigation.state.key,
+          toChildKey: route.key,
+        })
+      );
+    }
 +  };
 +
   private handleOpenRoute = ({ route }: { route: Route<string> }) => {
@@ -609,7 +616,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
     this.setState(state => ({
       routes: state.replacingRouteKeys.length
         ? state.routes.filter(r => !state.replacingRouteKeys.includes(r.key))
-@@ -315,12 +334,17 @@
+@@ -315,12 +340,17 @@
       // If a route exists in state, trigger a pop
       // This will happen in when the route was closed from the card component
       // e.g. When the close animation triggered from a gesture ends
@@ -619,7 +626,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
 -        target: state.key,
 -      });
 +      // @ts-ignore
-+      navigation.dispatch(StackActions.pop({ key: route.key }));
+      navigation.dispatch(StackActions.pop({ key: route.key, prune: false }));
     } else {
 +      // While closing route we need to point to the previous one assuming that
 +      // this previous one in routes array
@@ -632,7 +639,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
       // We need to clean up any state tracking the route and pop it immediately
       this.setState(state => ({
         routes: state.routes.filter(r => r.key !== route.key),
-@@ -337,22 +361,24 @@
+@@ -337,22 +367,24 @@
   private handleTransitionStart = (
     { route }: { route: Route<string> },
     closing: boolean
@@ -669,3 +676,11 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
 
   render() {
     const {
+@@ -391,6 +423,7 @@
+                     closingRouteKeys={closingRouteKeys}
+                     onOpenRoute={this.handleOpenRoute}
+                     onCloseRoute={this.handleCloseRoute}
+                    onTransitionComplete={this.handleTransitionComplete}
+                     onTransitionStart={this.handleTransitionStart}
+                     onTransitionEnd={this.handleTransitionEnd}
+                     renderHeader={this.renderHeader}
--- a/packages/stack/src/vendor/types.tsx
+++ b/packages/stack/src/vendor/types.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
  Animated,
  StyleProp,
@@ -42,7 +43,6 @@ export type StackNavigationEventMap = {
 };

 export type StackNavigationHelpers = NavigationProp<NavigationStackState>;
-
 export type StackNavigationProp<
  State = NavigationRoute,
  Params = NavigationParams
@@ -124,7 +124,7 @@ export type StackHeaderOptions = {
  /**
   * Style object for the title component.
   */
-  headerTitleStyle?: StyleProp<TextStyle>;
+  headerTitleStyle?: React.ComponentProps<typeof Animated.Text>['style'];
  /**
   * Style object for the container of the `headerTitle` component, for example to add padding.
   * By default, `headerTitleContainerStyle` is with an absolute position style and offsets both `left` and `right`.
@@ -284,6 +284,10 @@ export type StackNavigationOptions = StackHeaderOptions &
     * Defaults to `true` on Android and `false` on iOS.
     */
    cardOverlayEnabled?: boolean;
+    /**
+     * Function that returns a React Element to display as a overlay for the card.
+     */
+    cardOverlay?: (props: { style: StyleProp<ViewStyle> }) => React.ReactNode;
    /**
     * Style object for the card in stack.
     * You can provide a custom background color to use instead of the default background here.
@@ -437,7 +441,7 @@ export type StackHeaderTitleProps = {
  /**
   * Style object for the title element.
   */
-  style?: StyleProp<TextStyle>;
+  style?: React.ComponentProps<typeof Animated.Text>['style'];
 };

 export type TransitionSpec =
--- a/packages/stack/src/vendor/views/BorderlessButton.tsx
+++ b/packages/stack/src/vendor/views/BorderlessButton.tsx
@@ -32,7 +32,7 @@ export default class BorderlessButton extends React.Component<Props> {
      }).start();
    }

-    this.props.onActiveStateChange && this.props.onActiveStateChange(active);
+    this.props.onActiveStateChange?.(active);
  };

  render() {
--- a/packages/stack/src/vendor/views/Header/HeaderTitle.tsx
+++ b/packages/stack/src/vendor/views/Header/HeaderTitle.tsx
@@ -32,7 +32,8 @@ const styles = StyleSheet.create({
    },
    android: {
      fontSize: 20,
-      fontWeight: '500',
+      fontFamily: 'sans-serif-medium',
+      fontWeight: 'normal',
    },
    default: {
      fontSize: 18,
--- a/packages/stack/src/vendor/views/KeyboardManager.tsx
+++ b/packages/stack/src/vendor/views/KeyboardManager.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextInput, Keyboard } from 'react-native';
+import { TextInput } from 'react-native';

 type Props = {
  enabled: boolean;
@@ -54,7 +54,11 @@ export default class KeyboardManager extends React.Component<Props> {

    this.clearKeyboardTimeout();

-    Keyboard.dismiss();
+    const input = this.previouslyFocusedTextInput;
+
+    if (input) {
+      TextInput.State.blurTextInput(input);
+    }

    // Cleanup the ID on successful page change
    this.previouslyFocusedTextInput = null;
--- a/packages/stack/src/vendor/views/Stack/Card.tsx
+++ b/packages/stack/src/vendor/views/Stack/Card.tsx
@@ -44,6 +44,7 @@ type Props = ViewProps & {
  onGestureCanceled?: () => void;
  onGestureEnd?: () => void;
  children: React.ReactNode;
+  overlay: (props: { style: StyleProp<ViewStyle> }) => React.ReactNode;
  overlayEnabled: boolean;
  shadowEnabled: boolean;
  gestureEnabled: boolean;
@@ -80,6 +81,10 @@ export default class Card extends React.Component<Props> {
    shadowEnabled: true,
    gestureEnabled: true,
    gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
+    overlay: ({ style }: { style: StyleProp<ViewStyle> }) =>
+      style ? (
+        <Animated.View pointerEvents="none" style={[styles.overlay, style]} />
+      ) : null,
  };

  componentDidMount() {
@@ -266,9 +271,16 @@ export default class Card extends React.Component<Props> {
          velocity = nativeEvent.velocityX;
        }

+        if (
+          gestureDirection === 'horizontal-inverted' ||
+          gestureDirection === 'vertical-inverted'
+        ) {
+          translation *= -1;
+          velocity *= -1;
+        }
+
        const closing =
-          Math.abs(translation + velocity * gestureVelocityImpact) >
-          distance / 2
+          translation + velocity * gestureVelocityImpact > distance / 2
            ? velocity !== 0 || translation !== 0
            : false;

@@ -409,6 +421,7 @@ export default class Card extends React.Component<Props> {
      next,
      layout,
      insets,
+      overlay,
      overlayEnabled,
      shadowEnabled,
      gestureEnabled,
@@ -470,55 +483,54 @@ export default class Card extends React.Component<Props> {
      : false;

    return (
-      <View pointerEvents="box-none" {...rest}>
-        {overlayEnabled && overlayStyle ? (
+      <CardAnimationContext.Provider value={animationContext}>
+        <View pointerEvents="box-none" {...rest}>
+          {overlayEnabled ? (
+            <View style={StyleSheet.absoluteFill}>
+              {overlay({ style: overlayStyle })}
+            </View>
+          ) : null}
          <Animated.View
-            pointerEvents="none"
-            style={[styles.overlay, overlayStyle]}
-          />
-        ) : null}
-        <Animated.View
-          style={[styles.container, containerStyle, customContainerStyle]}
-          pointerEvents="box-none"
-        >
-          <PanGestureHandler
-            ref={this.gestureRef}
-            enabled={layout.width !== 0 && gestureEnabled}
-            onGestureEvent={handleGestureEvent}
-            onHandlerStateChange={this.handleGestureStateChange}
-            {...this.gestureActivationCriteria()}
+            style={[styles.container, containerStyle, customContainerStyle]}
+            pointerEvents="box-none"
          >
-            <Animated.View style={[styles.container, cardStyle]}>
-              {shadowEnabled && shadowStyle && !isTransparent ? (
-                <Animated.View
-                  style={[
-                    styles.shadow,
-                    gestureDirection === 'horizontal'
-                      ? [styles.shadowHorizontal, styles.shadowLeft]
-                      : gestureDirection === 'horizontal-inverted'
-                      ? [styles.shadowHorizontal, styles.shadowRight]
-                      : gestureDirection === 'vertical'
-                      ? [styles.shadowVertical, styles.shadowTop]
-                      : [styles.shadowVertical, styles.shadowBottom],
-                    shadowStyle,
-                  ]}
-                  pointerEvents="none"
-                />
-              ) : null}
-              <View
-                ref={this.contentRef}
-                style={[styles.content, contentStyle] as any}
-              >
-                <StackGestureRefContext.Provider value={this.gestureRef}>
-                  <CardAnimationContext.Provider value={animationContext}>
+            <PanGestureHandler
+              ref={this.gestureRef}
+              enabled={layout.width !== 0 && gestureEnabled}
+              onGestureEvent={handleGestureEvent}
+              onHandlerStateChange={this.handleGestureStateChange}
+              {...this.gestureActivationCriteria()}
+            >
+              <Animated.View style={[styles.container, cardStyle]}>
+                {shadowEnabled && shadowStyle && !isTransparent ? (
+                  <Animated.View
+                    style={[
+                      styles.shadow,
+                      gestureDirection === 'horizontal'
+                        ? [styles.shadowHorizontal, styles.shadowLeft]
+                        : gestureDirection === 'horizontal-inverted'
+                        ? [styles.shadowHorizontal, styles.shadowRight]
+                        : gestureDirection === 'vertical'
+                        ? [styles.shadowVertical, styles.shadowTop]
+                        : [styles.shadowVertical, styles.shadowBottom],
+                      shadowStyle,
+                    ]}
+                    pointerEvents="none"
+                  />
+                ) : null}
+                <View
+                  ref={this.contentRef}
+                  style={[styles.content, contentStyle]}
+                >
+                  <StackGestureRefContext.Provider value={this.gestureRef}>
                    {children}
-                  </CardAnimationContext.Provider>
-                </StackGestureRefContext.Provider>
-              </View>
-            </Animated.View>
-          </PanGestureHandler>
-        </Animated.View>
-      </View>
+                  </StackGestureRefContext.Provider>
+                </View>
+              </Animated.View>
+            </PanGestureHandler>
+          </Animated.View>
+        </View>
+      </CardAnimationContext.Provider>
    );
  }
 }
@@ -532,7 +544,7 @@ const styles = StyleSheet.create({
    overflow: 'hidden',
  },
  overlay: {
-    ...StyleSheet.absoluteFillObject,
+    flex: 1,
    backgroundColor: '#000',
  },
  shadow: {
--- a/packages/stack/src/vendor/views/Stack/CardContainer.tsx
+++ b/packages/stack/src/vendor/views/Stack/CardContainer.tsx
@@ -25,6 +25,7 @@ type Props = TransitionPreset & {
  safeAreaInsetRight: number;
  safeAreaInsetBottom: number;
  safeAreaInsetLeft: number;
+  cardOverlay?: (props: { style: StyleProp<ViewStyle> }) => React.ReactNode;
  cardOverlayEnabled?: boolean;
  cardShadowEnabled?: boolean;
  cardStyle?: StyleProp<ViewStyle>;
@@ -41,6 +42,7 @@ type Props = TransitionPreset & {
    closing: boolean
  ) => void;
  onTransitionEnd?: (props: { route: Route<string> }, closing: boolean) => void;
+  onTransitionComplete: (props: { route: Route<string> }) => void;
  onPageChangeStart?: () => void;
  onPageChangeConfirm?: () => void;
  onPageChangeCancel?: () => void;
@@ -64,6 +66,7 @@ const EPSILON = 0.1;

 function CardContainer({
  active,
+  cardOverlay,
  cardOverlayEnabled,
  cardShadowEnabled,
  cardStyle,
@@ -87,6 +90,7 @@ function CardContainer({
  layout,
  onCloseRoute,
  onOpenRoute,
+  onTransitionComplete,
  onPageChangeCancel,
  onPageChangeConfirm,
  onPageChangeStart,
@@ -156,6 +160,9 @@ function CardContainer({
    };
  }, [pointerEvents, scene.progress.next]);

+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  React.useEffect(() => onTransitionComplete({ route: scene.route }), []);
+
  return (
    <Card
      index={index}
@@ -168,6 +175,7 @@ function CardContainer({
      closing={closing}
      onOpen={handleOpen}
      onClose={handleClose}
+      overlay={cardOverlay}
      overlayEnabled={cardOverlayEnabled}
      shadowEnabled={cardShadowEnabled}
      onTransitionStart={handleTransitionStart}
--- a/packages/stack/src/vendor/views/Stack/CardStack.tsx
+++ b/packages/stack/src/vendor/views/Stack/CardStack.tsx
@@ -54,6 +54,7 @@ type Props = {
  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
@@ -75,9 +76,6 @@ type State = {

 const EPSILON = 0.01;

-const dimensions = Dimensions.get('window');
-const layout = { width: dimensions.width, height: dimensions.height };
-
 const MaybeScreenContainer = ({
  enabled,
  ...rest
@@ -160,7 +158,16 @@ const getProgressFromGesture = (
  layout: Layout,
  descriptor?: StackDescriptor
 ) => {
-  const distance = getDistanceFromOptions(mode, layout, descriptor);
+  const distance = getDistanceFromOptions(
+    mode,
+    {
+      // Make sure that we have a non-zero distance, otherwise there will be incorrect progress
+      // This causes blank screen on web if it was previously inside container with display: none
+      width: Math.max(1, layout.width),
+      height: Math.max(1, layout.height),
+    },
+    descriptor
+  );

  if (distance > 0) {
    return gesture.interpolate({
@@ -290,19 +297,25 @@ export default class CardStack extends React.Component<Props, State> {
    };
  }

-  state: State = {
-    routes: [],
-    scenes: [],
-    gestures: {},
-    layout,
-    descriptors: this.props.descriptors,
-    // Used when card's header is null and mode is float to make transition
-    // between screens with headers and those without headers smooth.
-    // This is not a great heuristic here. We don't know synchronously
-    // on mount what the header height is so we have just used the most
-    // common cases here.
-    headerHeights: {},
-  };
+  constructor(props: Props) {
+    super(props);
+
+    const { height = 0, width = 0 } = Dimensions.get('window');
+
+    this.state = {
+      routes: [],
+      scenes: [],
+      gestures: {},
+      layout: { height, width },
+      descriptors: this.props.descriptors,
+      // Used when card's header is null and mode is float to make transition
+      // between screens with headers and those without headers smooth.
+      // This is not a great heuristic here. We don't know synchronously
+      // on mount what the header height is so we have just used the most
+      // common cases here.
+      headerHeights: {},
+    };
+  }

  private handleLayout = (e: LayoutChangeEvent) => {
    const { height, width } = e.nativeEvent.layout;
@@ -371,6 +384,7 @@ export default class CardStack extends React.Component<Props, State> {
      renderHeader,
      renderScene,
      headerMode,
+      onTransitionComplete,
      onTransitionStart,
      onTransitionEnd,
      onPageChangeStart,
@@ -401,9 +415,9 @@ export default class CardStack extends React.Component<Props, State> {
      left = insets.left,
    } = focusedOptions.safeAreaInsets || {};

-    // Screens is buggy on iOS, so we don't enable it there
+    // Screens is buggy on iOS and web, so we only enable it on Android
    // For modals, usually we want the screen underneath to be visible, so also disable it there
-    const isScreensEnabled = Platform.OS !== 'ios' && mode !== 'modal';
+    const isScreensEnabled = Platform.OS === 'android' && mode !== 'modal';

    return (
      <React.Fragment>
@@ -431,6 +445,7 @@ export default class CardStack extends React.Component<Props, State> {
              headerTransparent,
              cardShadowEnabled,
              cardOverlayEnabled,
+              cardOverlay,
              cardStyle,
              animationEnabled,
              gestureResponseDistance,
@@ -528,6 +543,7 @@ export default class CardStack extends React.Component<Props, State> {
                  safeAreaInsetRight={safeAreaInsetRight}
                  safeAreaInsetBottom={safeAreaInsetBottom}
                  safeAreaInsetLeft={safeAreaInsetLeft}
+                  cardOverlay={cardOverlay}
                  cardOverlayEnabled={cardOverlayEnabled}
                  cardShadowEnabled={cardShadowEnabled}
                  cardStyle={cardStyle}
@@ -546,6 +562,7 @@ export default class CardStack extends React.Component<Props, State> {
                  renderScene={renderScene}
                  onOpenRoute={onOpenRoute}
                  onCloseRoute={onCloseRoute}
+                  onTransitionComplete={onTransitionComplete}
                  onTransitionStart={onTransitionStart}
                  onTransitionEnd={onTransitionEnd}
                  gestureEnabled={index !== 0 && getGesturesEnabled({ route })}
--- a/packages/stack/src/vendor/views/Stack/StackView.tsx
+++ b/packages/stack/src/vendor/views/Stack/StackView.tsx
@@ -309,10 +309,16 @@ export default class StackView extends React.Component<Props, State> {
  };

  private handleTransitionComplete = ({ route }: { route: Route<string> }) => {
-    // TODO: remove when the new event system lands
-    this.props.navigation.dispatch(
-      StackActions.completeTransition({ toChildKey: route.key })
-    );
+    const { state, navigation } = this.props;
+
+    if (state.isTransitioning) {
+      navigation.dispatch(
+        StackActions.completeTransition({
+          key: navigation.state.key,
+          toChildKey: route.key,
+        })
+      );
+    }
  };

  private handleOpenRoute = ({ route }: { route: Route<string> }) => {
@@ -335,7 +341,7 @@ export default class StackView extends React.Component<Props, State> {
      // This will happen in when the route was closed from the card component
      // e.g. When the close animation triggered from a gesture ends
      // @ts-ignore
-      navigation.dispatch(StackActions.pop({ key: route.key }));
+      navigation.dispatch(StackActions.pop({ key: route.key, prune: false }));
    } else {
      // While closing route we need to point to the previous one assuming that
      // this previous one in routes array
@@ -417,6 +423,7 @@ export default class StackView extends React.Component<Props, State> {
                    closingRouteKeys={closingRouteKeys}
                    onOpenRoute={this.handleOpenRoute}
                    onCloseRoute={this.handleCloseRoute}
+                    onTransitionComplete={this.handleTransitionComplete}
                    onTransitionStart={this.handleTransitionStart}
                    onTransitionEnd={this.handleTransitionEnd}
                    renderHeader={this.renderHeader}
--- a/packages/tabs/CHANGELOG.md
+++ b/packages/tabs/CHANGELOG.md
@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [2.8.5](https://github.com/react-navigation/tabs/compare/react-navigation-tabs@2.8.4...react-navigation-tabs@2.8.5) (2020-03-19)
+
+
+### Bug Fixes
+
+* don't use react-native-screens on web ([44c3900](https://github.com/react-navigation/tabs/commit/44c390075f7b76664e09fd9a1a7926645133ebec)), closes [#7485](https://github.com/react-navigation/tabs/issues/7485)
+
+
+
+
+
+## [2.8.4](https://github.com/react-navigation/tabs/compare/react-navigation-tabs@2.8.3...react-navigation-tabs@2.8.4) (2020-03-16)
+
+
+### Bug Fixes
+
+* downgrade react-native-safe-area-view ([cfc1bac](https://github.com/react-navigation/tabs/commit/cfc1bac4e153db4a4ba3f2a9033f77b53367fcbc)), closes [#7813](https://github.com/react-navigation/tabs/issues/7813)
+
+
+
+
+
+## [2.8.3](https://github.com/react-navigation/tabs/compare/react-navigation-tabs@2.8.2...react-navigation-tabs@2.8.3) (2020-03-16)
+
+**Note:** Version bump only for package react-navigation-tabs
+
+
+
+
+
 ## [2.8.2](https://github.com/react-navigation/tabs/compare/react-navigation-tabs@2.8.1...react-navigation-tabs@2.8.2) (2020-02-26)

 **Note:** Version bump only for package react-navigation-tabs
--- a/packages/tabs/package.json
+++ b/packages/tabs/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-navigation-tabs",
-  "version": "2.8.2",
+  "version": "2.8.5",
  "description": "Tab Navigation components for React Navigation",
  "main": "lib/commonjs/index.js",
  "module": "lib/module/index.js",
@@ -42,21 +42,21 @@
  "dependencies": {
    "hoist-non-react-statics": "^3.3.2",
    "react-lifecycles-compat": "^3.0.4",
-    "react-native-safe-area-view": "^0.14.6",
+    "react-native-safe-area-view": "^0.14.8",
    "react-native-tab-view": "^2.11.0"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.9.7",
+    "@react-native-community/bob": "^0.10.0",
    "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/react": "^16.9.22",
-    "@types/react-native": "^0.61.17",
+    "@types/react": "^16.9.23",
+    "@types/react-native": "^0.61.22",
    "del-cli": "^3.0.0",
    "react": "~16.9.0",
    "react-native": "~0.61.5",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-reanimated": "^1.2.0",
    "react-native-tab-view": "^2.13.0",
-    "react-navigation": "^4.2.2",
+    "react-navigation": "^4.3.1",
    "typescript": "~3.7.5"
  },
  "peerDependencies": {
@@ -64,7 +64,7 @@
    "react-native": "*",
    "react-native-gesture-handler": "^1.0.0",
    "react-native-reanimated": "^1.0.0-alpha",
-    "react-native-screens": "^1.0.0 || ^1.0.0-alpha",
+    "react-native-screens": ">=1.0.0 || >= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0",
    "react-navigation": "^4.1.1"
  },
  "@react-native-community/bob": {
--- a/packages/tabs/src/views/ResourceSavingScene.tsx
+++ b/packages/tabs/src/views/ResourceSavingScene.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
-
 import { Screen, screensEnabled } from 'react-native-screens';

 type Props = {
@@ -9,12 +8,14 @@ type Props = {
  style?: any;
 };

-const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view out of its container
+const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container

 export default class ResourceSavingScene extends React.Component<Props> {
  render() {
-    if (screensEnabled?.()) {
+    // react-native-screens is buggy on web
+    if (screensEnabled?.() && Platform.OS !== 'web') {
      const { isVisible, ...rest } = this.props;
+
      // @ts-ignore
      return <Screen active={isVisible ? 1 : 0} {...rest} />;
    }
@@ -23,7 +24,13 @@ export default class ResourceSavingScene extends React.Component<Props> {

    return (
      <View
-        style={[styles.container, style, { opacity: isVisible ? 1 : 0 }]}
+        style={[
+          styles.container,
+          Platform.OS === 'web'
+            ? { display: isVisible ? 'flex' : 'none' }
+            : null,
+          style,
+        ]}
        collapsable={false}
        removeClippedSubviews={
          // On iOS, set removeClippedSubviews to true only when not focused
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Satyajit Sahoo	915861e601	chore: publish - react-navigation-stack@2.3.2	2020-03-19 20:12:07 +01:00
Satyajit Sahoo	8152ae1212	chore: sync latest stack	2020-03-19 20:11:34 +01:00
Satyajit Sahoo	79125bfab9	chore: publish - react-navigation-drawer@2.4.5 - react-navigation-tabs@2.8.5	2020-03-19 16:44:44 +01:00
Satyajit Sahoo	44c390075f	fix: don't use react-native-screens on web seems `react-native-screens` doesn't handle active screens properly and shows a blank page instead on web when a number is specified in the `active` prop. closes #7485	2020-03-19 16:43:28 +01:00
Satyajit Sahoo	1c5e7a5ff2	chore: publish - react-navigation-animated-switch@0.5.4 - react-navigation-drawer@2.4.4 - react-navigation-material-bottom-tabs@2.2.4 - @react-navigation/native@3.7.5 - react-navigation@4.3.1 - react-navigation-stack@2.3.1 - react-navigation-tabs@2.8.4	2020-03-16 19:22:04 +01:00
Satyajit Sahoo	cfc1bac4e1	fix: downgrade react-native-safe-area-view closes #7813	2020-03-16 19:21:05 +01:00
Satyajit Sahoo	c0fb54b5a2	chore: publish - react-navigation-animated-switch@0.5.3 - @react-navigation/core@3.7.0 - react-navigation-drawer@2.4.3 - react-navigation-material-bottom-tabs@2.2.3 - @react-navigation/native@3.7.4 - react-navigation@4.3.0 - react-navigation-stack@2.3.0 - react-navigation-tabs@2.8.3	2020-03-16 17:14:15 +01:00
Satyajit Sahoo	5927f4287f	feat: add prune option to pop action to match v5 behaviour	2020-03-16 16:37:20 +01:00
Satyajit Sahoo	37a664b433	chore: upgrade depenendecies	2020-03-16 15:24:11 +01:00
Satyajit Sahoo	8d0b61f1b7	chore: sync latest stack	2020-03-16 14:55:51 +01:00
Satyajit Sahoo	d3f092cb84	chore: publish - react-navigation-stack@2.2.3	2020-03-04 13:37:40 +01:00
Satyajit Sahoo	f5a3880969	fix: dispatch completeTransition on mount so focus event is emitted	2020-03-04 13:36:34 +01:00