chore: publish

- @react-navigation/bottom-tabs@5.5.1
 - @react-navigation/compat@5.1.25
 - @react-navigation/core@5.9.0
 - @react-navigation/drawer@5.8.1
 - @react-navigation/material-bottom-tabs@5.2.9
 - @react-navigation/material-top-tabs@5.2.9
 - @react-navigation/native@5.5.0
 - @react-navigation/stack@5.4.1

.circleci/config.yml

@@ -22,13 +22,14 @@ jobs:
       - attach_project
       - restore_cache:
           keys:
-            - v2-dependencies-{{ checksum "yarn.lock" }}
-            - v2-dependencies-
+            - yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
+            - yarn-packages-v1-{{ .Branch }}-
+            - yarn-packages-v1-
       - run:
           name: Install project dependencies
           command: yarn install --frozen-lockfile
       - save_cache:
-          key: v2-dependencies-{{ checksum "yarn.lock" }}
+          key: yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
           paths: ~/.cache/yarn
       - persist_to_workspace:
           root: .

.github/workflows/expo-preview.yml

@@ -23,20 +23,18 @@ jobs:
           expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
           expo-cache: true
 
-      - name: Get yarn cache
+      - name: Restore yarn cache
         id: yarn-cache
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - name: Check yarn cache
-        uses: actions/cache@v1
+        uses: actions/cache@master
         with:
-          path: ${{ steps.yarn-cache.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          path: |
+            node_modules
+            */*/node_modules
+          key: ${{ runner.os }}-yarn-v1-${{ hashFiles('**/yarn.lock') }}
 
       - name: Install dependencies
-        run: yarn
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
 
       - name: Publish Expo app
         working-directory: ./example

.github/workflows/expo.yml

@@ -25,19 +25,18 @@ jobs:
           expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
           expo-cache: true
 
-      - name: Get yarn cache
+      - name: Restore yarn cache
         id: yarn-cache
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v1
+        uses: actions/cache@master
         with:
-          path: ${{ steps.yarn-cache.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          path: |
+            node_modules
+            */*/node_modules
+          key: ${{ runner.os }}-yarn-v1-${{ hashFiles('**/yarn.lock') }}
 
       - name: Install dependencies
-        run: yarn
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
 
       - name: Publish Expo app
         working-directory: ./example

example/App.tsx

@@ -1,6 +1,10 @@
 import 'react-native-gesture-handler';
 import { registerRootComponent } from 'expo';
+import { Asset } from 'expo-asset';
+import { Assets as StackAssets } from '@react-navigation/stack';
 
 import App from './src/index';
 
+Asset.loadAsync(StackAssets);
+
 registerRootComponent(App);

example/app.json

@@ -7,12 +7,6 @@
     "slug": "react-navigation-example",
     "description": "Demo app to showcase various functionality of React Navigation",
     "privacy": "public",
-    "sdkVersion": "37.0.0",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
     "version": "1.0.0",
     "icon": "./assets/icon.png",
     "splash": {
@@ -20,15 +14,16 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "updates": {
-      "fallbackToCacheTimeout": 0
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "sdkVersion": "37.0.0",
+    "platforms": ["ios", "android", "web"],
     "ios": {
       "supportsTablet": true
     },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": ["**/*"],
+    "scheme": "rne",
     "entryPoint": "App.tsx"
   }
 }

example/e2e/__integration_tests__/server.test.tsx

@@ -0,0 +1,13 @@
+import fetch from 'node-fetch';
+import cheerio from 'cheerio';
+
+const server = 'http://localhost:3275';
+
+it('renders the home page', async () => {
+  const res = await fetch(server);
+  const html = await res.text();
+
+  const $ = cheerio.load(html);
+
+  expect($('title').text()).toBe('Examples');
+});

example/e2e/config/setup-server.tsx

@@ -1,8 +1,16 @@
 import { setup } from 'jest-dev-server';
 
 export default async function () {
-  await setup({
-    command: 'yarn serve -l 3579 web-build',
-    port: 3579,
-  });
+  await setup([
+    {
+      command: 'yarn serve -l 3579 web-build',
+      launchTimeout: 50000,
+      port: 3579,
+    },
+    {
+      command: 'yarn server',
+      launchTimeout: 50000,
+      port: 3275,
+    },
+  ]);
 }

example/ios/Podfile.lock

@@ -1,35 +1,38 @@
 PODS:
   - boost-for-react-native (1.63.0)
   - DoubleConversion (1.1.6)
-  - EXAppLoaderProvider (8.0.0)
-  - EXBlur (8.0.0):
+  - EXBlur (8.1.0):
     - UMCore
-  - EXConstants (8.0.0):
+  - EXConstants (9.0.0):
     - UMConstantsInterface
     - UMCore
-  - EXErrorRecovery (1.0.0):
+  - EXErrorRecovery (1.1.0):
     - UMCore
-  - EXFileSystem (8.0.0):
+  - EXFileSystem (8.1.0):
     - UMCore
     - UMFileSystemInterface
-  - EXFont (8.0.0):
+  - EXFont (8.1.0):
     - UMCore
     - UMFontInterface
-  - EXKeepAwake (8.0.0):
+  - EXImageLoader (1.0.1):
+    - React-Core
     - UMCore
-  - EXLinearGradient (8.0.0):
+    - UMImageLoaderInterface
+  - EXKeepAwake (8.1.0):
     - UMCore
-  - EXLocation (8.0.0):
+  - EXLinearGradient (8.1.0):
+    - UMCore
+  - EXLocation (8.1.0):
     - UMCore
     - UMPermissionsInterface
     - UMTaskManagerInterface
-  - EXPermissions (8.0.0):
+  - EXPermissions (8.1.0):
     - UMCore
     - UMPermissionsInterface
-  - EXSQLite (8.0.0):
+  - EXSQLite (8.1.0):
     - UMCore
     - UMFileSystemInterface
-  - EXWebBrowser (8.0.0):
+  - EXWebBrowser (8.2.1):
     - UMCore
   - FBLazyVector (0.61.5)
   - FBReactNativeSpec (0.61.5):
@@ -50,8 +53,6 @@ PODS:
     - glog
   - glog (0.3.5)
   - RCTRequired (0.61.5)
-  - RCTRestart (0.0.13):
-    - React
   - RCTTypeSafety (0.61.5):
     - FBLazyVector (= 0.61.5)
     - Folly (= 2018.10.22.00)
@@ -214,7 +215,9 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
   - React-jsinspector (0.61.5)
-  - react-native-safe-area-context (0.6.2):
+  - react-native-restart (0.0.15):
+    - React
+  - react-native-safe-area-context (1.0.0):
     - React
   - React-RCTActionSheet (0.61.5):
     - React-Core/RCTActionSheetHeaders (= 0.61.5)
@@ -251,39 +254,41 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
     - ReactCommon/jscallinvoker (= 0.61.5)
-  - RNCMaskedView (0.1.5):
+  - RNCMaskedView (0.1.10):
     - React
-  - RNGestureHandler (1.5.5):
+  - RNGestureHandler (1.6.1):
     - React
-  - RNReanimated (1.4.0):
+  - RNReanimated (1.8.0):
     - React
-  - RNScreens (2.0.0-alpha.33):
+  - RNScreens (2.7.0):
     - React
-  - UMBarCodeScannerInterface (5.0.0)
-  - UMCameraInterface (5.0.0)
-  - UMConstantsInterface (5.0.0)
-  - UMCore (5.0.0)
-  - UMFaceDetectorInterface (5.0.0)
-  - UMFileSystemInterface (5.0.0)
-  - UMFontInterface (5.0.0)
-  - UMImageLoaderInterface (5.0.0)
-  - UMPermissionsInterface (5.0.0)
-  - UMReactNativeAdapter (5.0.0):
+  - UMAppLoader (1.0.2)
+  - UMBarCodeScannerInterface (5.1.0)
+  - UMCameraInterface (5.1.0)
+  - UMConstantsInterface (5.1.0)
+  - UMCore (5.1.2)
+  - UMFaceDetectorInterface (5.1.0)
+  - UMFileSystemInterface (5.1.0)
+  - UMFontInterface (5.1.0)
+  - UMImageLoaderInterface (5.1.0)
+  - UMPermissionsInterface (5.1.0):
+    - UMCore
+  - UMReactNativeAdapter (5.2.0):
     - React-Core
     - UMCore
     - UMFontInterface
-  - UMSensorsInterface (5.0.0)
-  - UMTaskManagerInterface (5.0.0)
+  - UMSensorsInterface (5.1.0)
+  - UMTaskManagerInterface (5.1.0)
   - Yoga (1.14.0)
 
 DEPENDENCIES:
   - DoubleConversion (from `../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
-  - EXAppLoaderProvider (from `../../node_modules/expo-app-loader-provider/ios`)
   - EXBlur (from `../../node_modules/expo-blur/ios`)
   - EXConstants (from `../../node_modules/expo-constants/ios`)
   - EXErrorRecovery (from `../../node_modules/expo-error-recovery/ios`)
   - EXFileSystem (from `../../node_modules/expo-file-system/ios`)
   - EXFont (from `../../node_modules/expo-font/ios`)
+  - EXImageLoader (from `../../node_modules/expo-image-loader/ios`)
   - EXKeepAwake (from `../../node_modules/expo-keep-awake/ios`)
   - EXLinearGradient (from `../../node_modules/expo-linear-gradient/ios`)
   - EXLocation (from `../../node_modules/expo-location/ios`)
@@ -295,7 +300,6 @@ DEPENDENCIES:
   - Folly (from `../../node_modules/react-native/third-party-podspecs/Folly.podspec`)
   - glog (from `../../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - RCTRequired (from `../../node_modules/react-native/Libraries/RCTRequired`)
-  - RCTRestart (from `../../node_modules/react-native-restart/ios`)
   - RCTTypeSafety (from `../../node_modules/react-native/Libraries/TypeSafety`)
   - React (from `../../node_modules/react-native/`)
   - React-Core (from `../../node_modules/react-native/`)
@@ -306,6 +310,7 @@ DEPENDENCIES:
   - React-jsi (from `../../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../../node_modules/react-native/ReactCommon/jsinspector`)
+  - react-native-restart (from `../../node_modules/react-native-restart`)
   - react-native-safe-area-context (from `../../node_modules/react-native-safe-area-context`)
   - React-RCTActionSheet (from `../../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../../node_modules/react-native/Libraries/NativeAnimation`)
@@ -322,10 +327,11 @@ DEPENDENCIES:
   - RNGestureHandler (from `../../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../../node_modules/react-native-reanimated`)
   - RNScreens (from `../../node_modules/react-native-screens`)
+  - UMAppLoader (from `../../node_modules/unimodules-app-loader/ios`)
   - UMBarCodeScannerInterface (from `../../node_modules/unimodules-barcode-scanner-interface/ios`)
   - UMCameraInterface (from `../../node_modules/unimodules-camera-interface/ios`)
   - UMConstantsInterface (from `../../node_modules/unimodules-constants-interface/ios`)
-  - "UMCore (from `../../node_modules/@unimodules/core/ios`)"
+  - "UMCore (from `../../node_modules/react-native-unimodules/node_modules/@unimodules/core/ios`)"
   - UMFaceDetectorInterface (from `../../node_modules/unimodules-face-detector-interface/ios`)
   - UMFileSystemInterface (from `../../node_modules/unimodules-file-system-interface/ios`)
   - UMFontInterface (from `../../node_modules/unimodules-font-interface/ios`)
@@ -343,42 +349,30 @@ SPEC REPOS:
 EXTERNAL SOURCES:
   DoubleConversion:
     :podspec: "../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
-  EXAppLoaderProvider:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-app-loader-provider/ios"
   EXBlur:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-blur/ios"
+    :path: "../../node_modules/expo-blur/ios"
   EXConstants:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-constants/ios"
+    :path: "../../node_modules/expo-constants/ios"
   EXErrorRecovery:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-error-recovery/ios"
+    :path: "../../node_modules/expo-error-recovery/ios"
   EXFileSystem:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-file-system/ios"
+    :path: "../../node_modules/expo-file-system/ios"
   EXFont:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-font/ios"
+    :path: "../../node_modules/expo-font/ios"
+  EXImageLoader:
+    :path: "../../node_modules/expo-image-loader/ios"
   EXKeepAwake:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-keep-awake/ios"
+    :path: "../../node_modules/expo-keep-awake/ios"
   EXLinearGradient:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-linear-gradient/ios"
+    :path: "../../node_modules/expo-linear-gradient/ios"
   EXLocation:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-location/ios"
+    :path: "../../node_modules/expo-location/ios"
   EXPermissions:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-permissions/ios"
+    :path: "../../node_modules/expo-permissions/ios"
   EXSQLite:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-sqlite/ios"
+    :path: "../../node_modules/expo-sqlite/ios"
   EXWebBrowser:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-web-browser/ios"
+    :path: "../../node_modules/expo-web-browser/ios"
   FBLazyVector:
     :path: "../../node_modules/react-native/Libraries/FBLazyVector"
   FBReactNativeSpec:
@@ -389,8 +383,6 @@ EXTERNAL SOURCES:
     :podspec: "../../node_modules/react-native/third-party-podspecs/glog.podspec"
   RCTRequired:
     :path: "../../node_modules/react-native/Libraries/RCTRequired"
-  RCTRestart:
-    :path: "../../node_modules/react-native-restart/ios"
   RCTTypeSafety:
     :path: "../../node_modules/react-native/Libraries/TypeSafety"
   React:
@@ -407,6 +399,8 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-restart:
+    :path: "../../node_modules/react-native-restart"
   react-native-safe-area-context:
     :path: "../../node_modules/react-native-safe-area-context"
   React-RCTActionSheet:
@@ -437,66 +431,55 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../../node_modules/react-native-screens"
+  UMAppLoader:
+    :path: "../../node_modules/unimodules-app-loader/ios"
   UMBarCodeScannerInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-barcode-scanner-interface/ios"
+    :path: "../../node_modules/unimodules-barcode-scanner-interface/ios"
   UMCameraInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-camera-interface/ios"
+    :path: "../../node_modules/unimodules-camera-interface/ios"
   UMConstantsInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-constants-interface/ios"
+    :path: "../../node_modules/unimodules-constants-interface/ios"
   UMCore:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/@unimodules/core/ios"
+    :path: "../../node_modules/react-native-unimodules/node_modules/@unimodules/core/ios"
   UMFaceDetectorInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-face-detector-interface/ios"
+    :path: "../../node_modules/unimodules-face-detector-interface/ios"
   UMFileSystemInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-file-system-interface/ios"
+    :path: "../../node_modules/unimodules-file-system-interface/ios"
   UMFontInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-font-interface/ios"
+    :path: "../../node_modules/unimodules-font-interface/ios"
   UMImageLoaderInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-image-loader-interface/ios"
+    :path: "../../node_modules/unimodules-image-loader-interface/ios"
   UMPermissionsInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-permissions-interface/ios"
+    :path: "../../node_modules/unimodules-permissions-interface/ios"
   UMReactNativeAdapter:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/@unimodules/react-native-adapter/ios"
+    :path: "../../node_modules/@unimodules/react-native-adapter/ios"
   UMSensorsInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-sensors-interface/ios"
+    :path: "../../node_modules/unimodules-sensors-interface/ios"
   UMTaskManagerInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-task-manager-interface/ios"
+    :path: "../../node_modules/unimodules-task-manager-interface/ios"
   Yoga:
     :path: "../../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
-  EXAppLoaderProvider: ebdb6bc2632c1ccadbe49f5e4104d8d690969c49
-  EXBlur: d1604f66f89a9414f5ee65dfb23874437c1bb147
-  EXConstants: 4051b16c17ef3defa03c541d42811dc92b249146
-  EXErrorRecovery: d36db99ec6a3808f313f01b0890eb443796dd1c2
-  EXFileSystem: 6e0d9bb6cc4ea404dbb8f583c1a8a2dcdf4b83b6
-  EXFont: 6187b5ab46ee578d5f8e7f2ea092752e78772235
-  EXKeepAwake: 66e9f80b6d129633725a0e42f8d285c229876811
-  EXLinearGradient: 75f302f9d6484267a3f6d3252df2e7a5f00e716a
-  EXLocation: 3c75d012ca92eed94d4338778d79c49d1252393a
-  EXPermissions: 9bc08859a675d291e89be9a0870155c27c16ac35
-  EXSQLite: 220226a354912b100dfe913f5fe6f31762c8927e
-  EXWebBrowser: db32607359fb7b55b7b7b91df32dd3d8355bb3b7
+  EXBlur: aa14d84bff6e9c2232fbcaf54ad809eee1cc41dc
+  EXConstants: 5304709b1bea70a4828f48ba4c7fc3ec3b2d9b17
+  EXErrorRecovery: 8f4c21ab2f51bf75defe4536f841a37de59b0661
+  EXFileSystem: cf4232ba7c62dc49b78c2d36005f97b6fddf0b01
+  EXFont: 8326ecf966be559f7ced7c8e221a32fc4d9ed8b0
+  EXImageLoader: 5ad6896fa1ef2ee814b551873cbf7a7baccc694a
+  EXKeepAwake: d045bc2cf1ad5a04f0323cc7c894b95b414042e0
+  EXLinearGradient: 97d8095d1e4ad96f7893e010e564796ed8aeea42
+  EXLocation: bbd487fd96a18a3ad9725389bbb94c4a5f78edf3
+  EXPermissions: 24b97f734ce9172d245a5be38ad9ccfcb6135964
+  EXSQLite: 877ad6c8eb169353a2f94d5ad26510ffadd46a1f
+  EXWebBrowser: 5902f99ac5ac551e5c82ff46f13a337b323aa9ea
   FBLazyVector: aaeaf388755e4f29cd74acbc9e3b8da6d807c37f
   FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
   RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1
-  RCTRestart: dd19aab87fc1118e05b6b5b91b959105647f56b4
   RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320
   React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78
   React-Core: 688b451f7d616cc1134ac95295b593d1b5158a04
@@ -505,7 +488,8 @@ SPEC CHECKSUMS:
   React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
   React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
-  react-native-safe-area-context: 25260c5d0b9c53fd7aa88e569e2edae72af1f6a3
+  react-native-restart: fff228304625f55de2ebd4de43938110f4c888ed
+  react-native-safe-area-context: a346c75f2288147527365ce27b59ca6d38c27805
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
   React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72
@@ -516,24 +500,25 @@ SPEC CHECKSUMS:
   React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
-  RNCMaskedView: dd13f9f7b146a9ad82f9b7eb6c9b5548fcf6e990
-  RNGestureHandler: d2270608171c868581b840cfc692f2962c05cd17
-  RNReanimated: b2ab0b693dddd2339bd2f300e770f6302d2e960c
-  RNScreens: 1c7fd499b915c77c21e8e6c327890c5af9b4cf7e
-  UMBarCodeScannerInterface: 3802c8574ef119c150701d679ab386e2266d6a54
-  UMCameraInterface: 985d301f688ed392f815728f0dd906ca34b7ccb1
-  UMConstantsInterface: bda5f8bd3403ad99e663eb3c4da685d063c5653c
-  UMCore: 7ab08669a8bb2e61f557c1fe9784521cb5aa28e3
-  UMFaceDetectorInterface: ce14e8e597f6a52aa66e4ab956cb5bff4fa8acf8
-  UMFileSystemInterface: 2ed004c9620f43f0b36b33c42ce668500850d6a4
-  UMFontInterface: 24fbc0a02ade6c60ad3ee3e2b5d597c8dcfc3208
-  UMImageLoaderInterface: 3976a14c588341228881ff75970fbabf122efca4
-  UMPermissionsInterface: 2abf9f7f4aa7110e27beaf634a7deda2d50ff3d7
-  UMReactNativeAdapter: 230406e3335a8dbd4c9c0e654488a1cf3b44552f
-  UMSensorsInterface: d708a892ef1500bdd9fc3ff03f7836c66d1634d3
-  UMTaskManagerInterface: a98e37a576a5220bf43b8faf33cfdc129d2f441d
+  RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
+  RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
+  RNReanimated: 955cf4068714003d2f1a6e2bae3fb1118f359aff
+  RNScreens: cf198f915f8a2bf163de94ca9f5bfc8d326c3706
+  UMAppLoader: ee77a072f9e15128f777ccd6d2d00f52ab4387e6
+  UMBarCodeScannerInterface: 9dc692b87e5f20fe277fa57aa47f45d418c3cc6c
+  UMCameraInterface: 625878bbf2ba188a8548675e1d1d2e438a653e6d
+  UMConstantsInterface: 64060cf86587bcd90b1dbd804cceb6d377a308c1
+  UMCore: eb200e882eadafcd31ead290770835fd648c0945
+  UMFaceDetectorInterface: d6677d6ddc9ab95a0ca857aa7f8ba76656cc770f
+  UMFileSystemInterface: c70ea7147198b9807080f3597f26236be49b0165
+  UMFontInterface: d9d3b27af698c5389ae9e20b99ef56a083f491fb
+  UMImageLoaderInterface: 14dd2c46c67167491effc9e91250e9510f12709e
+  UMPermissionsInterface: 5e83a9167c177e4a0f0a3539345983cc749efb3e
+  UMReactNativeAdapter: 126da3486c1a1f11945b649d557d6c2ebb9407b2
+  UMSensorsInterface: 48941f70175e2975af1a9386c6d6cb16d8126805
+  UMTaskManagerInterface: cb890c79c63885504ddc0efd7a7d01481760aca2
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 
 PODFILE CHECKSUM: c48a21ff513d3eadafa50f8797207ef2be75e234
 
-COCOAPODS: 1.8.4
+COCOAPODS: 1.9.1

example/metro.config.js

@@ -8,26 +8,25 @@ const blacklist = require('metro-config/src/defaults/blacklist');
 const root = path.resolve(__dirname, '..');
 const packages = path.resolve(root, 'packages');
 
+const workspaces = fs
+  // List all packages under `packages/`
+  .readdirSync(packages)
+  // Ignore hidden files such as .DS_Store
+  .filter((p) => !p.startsWith('.'))
+  .map((p) => path.join(packages, p));
+
 // Get the list of dependencies for all packages in the monorepo
 const modules = ['@expo/vector-icons']
   .concat(
-    ...fs
-      // List all packages under `packages/`
-      .readdirSync(packages)
-      // Ignore hidden files such as .DS_Store
-      .filter((p) => !p.startsWith('.'))
-      .map((p) => {
-        const pak = JSON.parse(
-          fs.readFileSync(path.join(packages, p, 'package.json'), 'utf8')
-        );
+    ...workspaces.map((it) => {
+      const pak = JSON.parse(
+        fs.readFileSync(path.join(it, 'package.json'), 'utf8')
+      );
 
-        // We need to collect list of deps that this package imports
-        // Collecting both dependencies are peerDependencies should do it
-        return Object.keys({
-          ...pak.dependencies,
-          ...pak.peerDependencies,
-        });
-      })
+      // We need to make sure that only one version is loaded for peerDependencies
+      // So we blacklist them at the root, and alias them to the versions in example's node_modules
+      return pak.peerDependencies ? Object.keys(pak.peerDependencies) : [];
+    })
   )
   .sort()
   .filter(
@@ -45,15 +44,16 @@ module.exports = {
   watchFolders: [root],
 
   resolver: {
-    // We need to blacklist `node_modules` of all our packages
-    // This will avoid Metro throwing duplicate module errors
+    // We need to blacklist the peerDependencies we've collected in packages' node_modules
     blacklistRE: blacklist(
-      fs
-        .readdirSync(packages)
-        .map((p) => path.join(packages, p))
-        .map(
-          (it) => new RegExp(`^${escape(path.join(it, 'node_modules'))}\\/.*$`)
+      [].concat(
+        ...workspaces.map((it) =>
+          modules.map(
+            (m) =>
+              new RegExp(`^${escape(path.join(it, 'node_modules', m))}\\/.*$`)
+          )
         )
+      )
     ),
 
     // When we import a package from the monorepo, metro won't be able to find their deps

example/package.json

@@ -9,6 +9,7 @@
     "native": "react-native start",
     "android": "react-native run-android",
     "ios": "react-native run-ios",
+    "server": "nodemon -e '.js,.ts,.tsx' --exec \"babel-node -i '/node_modules[/\\](?react-native)/' -x '.web.tsx,.web.ts,.web.js,.tsx,.ts,.js' --config-file ./server/babel.config.js server\"",
     "test": "jest"
   },
   "dependencies": {
@@ -18,6 +19,7 @@
     "expo": "^37.0.8",
     "expo-asset": "~8.1.3",
     "expo-blur": "~8.1.0",
+    "koa": "^2.12.0",
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "react-native": "~0.61.5",
@@ -25,21 +27,32 @@
     "react-native-paper": "^3.10.1",
     "react-native-reanimated": "^1.8.0",
     "react-native-restart": "^0.0.15",
-    "react-native-safe-area-context": "^0.7.3",
+    "react-native-safe-area-context": "^1.0.0",
     "react-native-screens": "^2.7.0",
     "react-native-tab-view": "2.14.0",
     "react-native-unimodules": "~0.9.1",
+    "react-native-vector-icons": "^6.6.0",
     "react-native-web": "^0.11.7"
   },
   "devDependencies": {
+    "@babel/node": "^7.8.7",
     "@expo/webpack-config": "^0.11.19",
+    "@types/cheerio": "^0.22.18",
     "@types/jest-dev-server": "^4.2.0",
+    "@types/koa": "^2.11.3",
+    "@types/node-fetch": "^2.5.7",
     "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.8",
     "@types/react-native": "^0.62.7",
+    "babel-plugin-module-resolver": "^4.0.0",
     "babel-preset-expo": "^8.1.0",
+    "cheerio": "^1.0.0-rc.3",
     "expo-cli": "^3.20.1",
     "jest": "^26.0.1",
     "jest-dev-server": "^4.4.0",
+    "mock-require-assets": "^0.0.1",
+    "node-fetch": "^2.6.0",
+    "nodemon": "^2.0.4",
     "playwright": "^0.14.0",
     "serve": "^11.3.0",
     "typescript": "^3.8.3"

example/server/babel.config.js

@@ -0,0 +1,40 @@
+const path = require('path');
+const fs = require('fs');
+
+const packages = path.resolve(__dirname, '..', '..', 'packages');
+
+const alias = Object.fromEntries(
+  fs
+    .readdirSync(packages)
+    .filter((name) => !name.startsWith('.'))
+    .map((name) => [
+      `@react-navigation/${name}`,
+      path.resolve(
+        packages,
+        name,
+        require(`../../packages/${name}/package.json`).source
+      ),
+    ])
+);
+
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-flow',
+    '@babel/preset-typescript',
+    '@babel/preset-react',
+  ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    [
+      'module-resolver',
+      {
+        root: ['..'],
+        alias: {
+          'react-native': 'react-native-web',
+          ...alias,
+        },
+      },
+    ],
+  ],
+};

example/server/index.tsx

@@ -0,0 +1,54 @@
+import './resolve-hooks';
+
+import Koa from 'koa';
+import * as React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import { AppRegistry } from 'react-native-web';
+import { ServerContainer, ServerContainerRef } from '@react-navigation/native';
+import App from '../src/index';
+
+AppRegistry.registerComponent('App', () => App);
+
+const PORT = process.env.PORT || 3275;
+
+const app = new Koa();
+
+app.use(async (ctx) => {
+  const { element, getStyleElement } = AppRegistry.getApplication('App');
+
+  const ref = React.createRef<ServerContainerRef>();
+
+  const html = ReactDOMServer.renderToString(
+    <ServerContainer
+      ref={ref}
+      location={{ pathname: ctx.path, search: ctx.search }}
+    >
+      {element}
+    </ServerContainer>
+  );
+
+  const css = ReactDOMServer.renderToStaticMarkup(getStyleElement());
+
+  const document = `
+    <!DOCTYPE html>
+    <html style="height: 100%">
+    <meta charset="utf-8">
+    <meta httpEquiv="X-UA-Compatible" content="IE=edge">
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover"
+    >
+    ${css}
+    <title>${ref.current?.getCurrentOptions()?.title}</title>
+    <body style="height: 100%">
+    <div id="root" style="display: flex; height: 100%">
+    ${html}
+    </div>
+`;
+
+  ctx.body = document;
+});
+
+app.listen(PORT, () => {
+  console.log(`Running at http://localhost:${PORT}`);
+});

example/server/resolve-hooks.tsx

@@ -0,0 +1,12 @@
+import 'mock-require-assets';
+
+import Module from 'module';
+
+// We need to make sure that .web.xx extensions are resolved before .xx
+// @ts-ignore
+Module._extensions = Object.fromEntries(
+  // @ts-ignore
+  Object.entries(Module._extensions).sort((a, b) => {
+    return b[0].split('.').length - a[0].split('.').length;
+  })
+);

example/src/Restart.native.tsx

@@ -0,0 +1,11 @@
+import RNRestart from 'react-native-restart';
+import { Updates } from 'expo';
+
+export function restartApp() {
+  // @ts-ignore
+  if (global.Expo) {
+    Updates.reloadFromCache();
+  } else {
+    RNRestart.Restart();
+  }
+}

example/src/Restart.tsx

@@ -0,0 +1 @@
+export function restartApp() {}

example/src/Screens/BottomTabs.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react';
-import { Platform } from 'react-native';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { View, ScrollView, StyleSheet, Platform } from 'react-native';
+import { Button } from 'react-native-paper';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import {
+  createBottomTabNavigator,
+  BottomTabNavigationProp,
+} from '@react-navigation/bottom-tabs';
 import TouchableBounce from '../Shared/TouchableBounce';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
@@ -23,6 +27,36 @@ type BottomTabParams = {
   Chat: undefined;
 };
 
+const scrollEnabled = Platform.select({ web: true, default: false });
+
+const AlbumsScreen = ({
+  navigation,
+}: {
+  navigation: BottomTabNavigationProp<BottomTabParams>;
+}) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.setOptions({ tabBarVisible: false })}
+          style={styles.button}
+        >
+          Hide tab bar
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.setOptions({ tabBarVisible: true })}
+          style={styles.button}
+        >
+          Show tab bar
+        </Button>
+      </View>
+      <Albums scrollEnabled={scrollEnabled} />
+    </ScrollView>
+  );
+};
+
 const BottomTabs = createBottomTabNavigator<BottomTabParams>();
 
 export default function BottomTabsScreen() {
@@ -62,7 +96,7 @@ export default function BottomTabsScreen() {
       />
       <BottomTabs.Screen
         name="Albums"
-        component={Albums}
+        component={AlbumsScreen}
         options={{
           title: 'Albums',
           tabBarIcon: getTabBarIcon('image-album'),
@@ -71,3 +105,13 @@ export default function BottomTabsScreen() {
     </BottomTabs.Navigator>
   );
 }
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    padding: 8,
+  },
+  button: {
+    margin: 8,
+  },
+});

example/src/Screens/DynamicTabs.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Title, Button } from 'react-native-paper';
-import { Feather } from '@expo/vector-icons';
+import Feather from 'react-native-vector-icons/Feather';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 type BottomTabParams = {

example/src/Screens/StackHeaderCustomization.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { View, StyleSheet, ScrollView, Alert, Platform } from 'react-native';
 import { Button, Appbar } from 'react-native-paper';
-import { BlurView } from 'expo-blur';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
@@ -10,6 +9,7 @@ import {
   HeaderBackground,
   useHeaderHeight,
 } from '@react-navigation/stack';
+import BlurView from '../Shared/BlurView';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
 

example/src/Shared/BlurView.native.tsx

@@ -0,0 +1,3 @@
+import { BlurView } from 'expo-blur';
+
+export default BlurView;

example/src/Shared/BlurView.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { View, ViewProps } from 'react-native';
+
+type Props = ViewProps & {
+  tint: 'light' | 'dark';
+  intensity: number;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default function BlurView({ tint, intensity, ...rest }: Props) {
+  return <View {...rest} />;
+}

example/src/index.tsx

@@ -11,10 +11,7 @@ import {
 } from 'react-native';
 // eslint-disable-next-line import/no-unresolved
 import { enableScreens } from 'react-native-screens';
-import RNRestart from 'react-native-restart';
-import { Updates } from 'expo';
-import { Asset } from 'expo-asset';
-import { MaterialIcons } from '@expo/vector-icons';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import {
   Provider as PaperProvider,
   DefaultTheme as PaperLightTheme,
@@ -36,11 +33,11 @@ import {
 } from '@react-navigation/drawer';
 import {
   createStackNavigator,
-  Assets as StackAssets,
   StackNavigationProp,
   HeaderStyleInterpolators,
 } from '@react-navigation/stack';
 
+import { restartApp } from './Restart';
 import AsyncStorage from './AsyncStorage';
 import LinkingPrefixes from './LinkingPrefixes';
 import SettingsItem from './Shared/SettingsItem';
@@ -126,12 +123,10 @@ const Stack = createStackNavigator<RootStackParamList>();
 const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE';
 const THEME_PERSISTENCE_KEY = 'THEME_TYPE';
 
-Asset.loadAsync(StackAssets);
-
 export default function App() {
   const [theme, setTheme] = React.useState(DefaultTheme);
 
-  const [isReady, setIsReady] = React.useState(false);
+  const [isReady, setIsReady] = React.useState(Platform.OS === 'web');
   const [initialState, setInitialState] = React.useState<
     InitialState | undefined
   >();
@@ -307,12 +302,7 @@ export default function App() {
                         value={I18nManager.isRTL}
                         onValueChange={() => {
                           I18nManager.forceRTL(!I18nManager.isRTL);
-                          // @ts-ignore
-                          if (global.Expo) {
-                            Updates.reloadFromCache();
-                          } else {
-                            RNRestart.Restart();
-                          }
+                          restartApp();
                         }}
                       />
                       <Divider />

example/types/react-native-web.d.ts

@@ -0,0 +1,16 @@
+declare module 'react-native-web' {
+  export const AppRegistry: {
+    registerComponent(
+      name: string,
+      callback: () => React.ComponentType<any>
+    ): void;
+
+    getApplication(
+      name: string,
+      options?: { initialProps: object }
+    ): {
+      element: React.ReactElement;
+      getStyleElement(): React.ReactElement;
+    };
+  };
+}

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.5.1](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.5.0...@react-navigation/bottom-tabs@5.5.1) (2020-05-27)
+
+
+### Bug Fixes
+
+* fix type of style for various options ([9d822b9](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/9d822b95a6df797e2e63e481573e64ea7d0f9386))
+
+
+
+
+
+# [5.5.0](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.7...@react-navigation/bottom-tabs@5.5.0) (2020-05-23)
+
+
+### Features
+
+* animate changes to tabBarVisible in BottomTabBar ([#8286](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/8286)) ([c1e46f8](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/c1e46f8e331e0054995aa476455af204d02d4170))
+* update react-native-safe-area-context to 1.0.0 ([#8182](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/8182)) ([d62fbfe](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/d62fbfe255140f16b182e8b54b276a7c96f2aec6))
+
+
+
+
+
 ## [5.4.7](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.6...@react-navigation/bottom-tabs@5.4.7) (2020-05-20)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs

packages/bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "5.4.7",
+  "version": "5.5.1",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -20,7 +20,8 @@
   "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
-    "lib"
+    "lib",
+    "!**/__tests__"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -36,14 +37,14 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.14.3",
-    "@react-navigation/native": "^5.4.2",
+    "@react-navigation/native": "^5.5.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.34",
     "@types/react-native": "^0.62.7",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
-    "react-native-safe-area-context": "^0.7.3",
+    "react-native-safe-area-context": "^1.0.0",
     "react-native-screens": "^2.7.0",
     "typescript": "^3.8.3"
   },

packages/bottom-tabs/src/types.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Animated,
   TouchableWithoutFeedbackProps,
   StyleProp,
   TextStyle,
@@ -197,7 +198,7 @@ export type BottomTabBarOptions = {
   /**
    * Style object for the tab bar container.
    */
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
 
 export type BottomTabBarProps = BottomTabBarOptions & {

packages/bottom-tabs/src/views/BottomTabBar.tsx

@@ -53,52 +53,60 @@ export default function BottomTabBar({
   const { colors } = useTheme();
   const buildLink = useLinkBuilder();
 
-  const [dimensions, setDimensions] = React.useState(() => {
-    const { height = 0, width = 0 } = Dimensions.get('window');
+  const focusedRoute = state.routes[state.index];
+  const focusedDescriptor = descriptors[focusedRoute.key];
+  const focusedOptions = focusedDescriptor.options;
 
-    return { height, width };
-  });
+  const [isKeyboardShown, setIsKeyboardShown] = React.useState(false);
 
-  const [layout, setLayout] = React.useState({
-    height: 0,
-    width: dimensions.width,
-  });
-  const [keyboardShown, setKeyboardShown] = React.useState(false);
+  const shouldShowTabBar =
+    focusedOptions.tabBarVisible !== false &&
+    !(keyboardHidesTabBar && isKeyboardShown);
 
-  const [visible] = React.useState(() => new Animated.Value(1));
+  const [isTabBarHidden, setIsTabBarHidden] = React.useState(!shouldShowTabBar);
 
-  const { routes } = state;
+  const [visible] = React.useState(
+    () => new Animated.Value(shouldShowTabBar ? 1 : 0)
+  );
 
   React.useEffect(() => {
-    if (keyboardShown) {
-      Animated.timing(visible, {
-        toValue: 0,
-        duration: 200,
-        useNativeDriver,
-      }).start();
-    }
-  }, [keyboardShown, visible]);
-
-  React.useEffect(() => {
-    const handleOrientationChange = ({ window }: { window: ScaledSize }) => {
-      setDimensions(window);
-    };
-
-    const handleKeyboardShow = () => setKeyboardShown(true);
-
-    const handleKeyboardHide = () =>
+    if (shouldShowTabBar) {
       Animated.timing(visible, {
         toValue: 1,
         duration: 250,
         useNativeDriver,
       }).start(({ finished }) => {
         if (finished) {
-          setKeyboardShown(false);
+          setIsTabBarHidden(false);
         }
       });
+    } else {
+      setIsTabBarHidden(true);
+
+      Animated.timing(visible, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver,
+      }).start();
+    }
+  }, [shouldShowTabBar, visible]);
+
+  const [dimensions, setDimensions] = React.useState(() => {
+    const { height = 0, width = 0 } = Dimensions.get('window');
+
+    return { height, width };
+  });
+
+  React.useEffect(() => {
+    const handleOrientationChange = ({ window }: { window: ScaledSize }) => {
+      setDimensions(window);
+    };
 
     Dimensions.addEventListener('change', handleOrientationChange);
 
+    const handleKeyboardShow = () => setIsKeyboardShown(true);
+    const handleKeyboardHide = () => setIsKeyboardShown(false);
+
     if (Platform.OS === 'ios') {
       Keyboard.addListener('keyboardWillShow', handleKeyboardShow);
       Keyboard.addListener('keyboardWillHide', handleKeyboardHide);
@@ -118,7 +126,12 @@ export default function BottomTabBar({
         Keyboard.removeListener('keyboardDidHide', handleKeyboardHide);
       }
     };
-  }, [visible]);
+  }, []);
+
+  const [layout, setLayout] = React.useState({
+    height: 0,
+    width: dimensions.width,
+  });
 
   const handleLayout = (e: LayoutChangeEvent) => {
     const { height, width } = e.nativeEvent.layout;
@@ -135,6 +148,7 @@ export default function BottomTabBar({
     });
   };
 
+  const { routes } = state;
   const shouldUseHorizontalLabels = () => {
     if (labelPosition) {
       return labelPosition === 'beside-icon';
@@ -183,22 +197,19 @@ export default function BottomTabBar({
           backgroundColor: colors.card,
           borderTopColor: colors.border,
         },
-        keyboardHidesTabBar
-          ? {
-              // When the keyboard is shown, slide down the tab bar
-              transform: [
-                {
-                  translateY: visible.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [layout.height, 0],
-                  }),
-                },
-              ],
-              // Absolutely position the tab bar so that the content is below it
-              // This is needed to avoid gap at bottom when the tab bar is hidden
-              position: keyboardShown ? 'absolute' : null,
-            }
-          : null,
+        {
+          transform: [
+            {
+              translateY: visible.interpolate({
+                inputRange: [0, 1],
+                outputRange: [layout.height + insets.bottom, 0],
+              }),
+            },
+          ],
+          // Absolutely position the tab bar so that the content is below it
+          // This is needed to avoid gap at bottom when the tab bar is hidden
+          position: isTabBarHidden ? 'absolute' : null,
+        },
         {
           height: DEFAULT_TABBAR_HEIGHT + insets.bottom,
           paddingBottom: insets.bottom,
@@ -206,7 +217,7 @@ export default function BottomTabBar({
         },
         style,
       ]}
-      pointerEvents={keyboardHidesTabBar && keyboardShown ? 'none' : 'auto'}
+      pointerEvents={isTabBarHidden ? 'none' : 'auto'}
     >
       <View style={styles.content} onLayout={handleLayout}>
         {routes.map((route, index) => {

packages/bottom-tabs/src/views/BottomTabItem.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import {
   View,
+  Text,
   TouchableWithoutFeedback,
-  Animated,
   StyleSheet,
   Platform,
   StyleProp,
@@ -191,7 +191,7 @@ export default function BottomTabBarItem({
 
     if (typeof label === 'string') {
       return (
-        <Animated.Text
+        <Text
           numberOfLines={1}
           style={[
             styles.label,
@@ -202,14 +202,10 @@ export default function BottomTabBarItem({
           allowFontScaling={allowFontScaling}
         >
           {label}
-        </Animated.Text>
+        </Text>
       );
     }
 
-    if (typeof label === 'string') {
-      return label;
-    }
-
     return label({ focused, color });
   };
 

packages/bottom-tabs/src/views/BottomTabView.tsx

@@ -75,17 +75,8 @@ export default class BottomTabView extends React.Component<Props, State> {
       tabBarOptions,
       state,
       navigation,
+      descriptors,
     } = this.props;
-
-    const { descriptors } = this.props;
-    const route = state.routes[state.index];
-    const descriptor = descriptors[route.key];
-    const options = descriptor.options;
-
-    if (options.tabBarVisible === false) {
-      return null;
-    }
-
     return tabBar({
       ...tabBarOptions,
       state: state,

packages/compat/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.
 
+## [5.1.25](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.24...@react-navigation/compat@5.1.25) (2020-05-27)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.24](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.23...@react-navigation/compat@5.1.24) (2020-05-23)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 ## [5.1.23](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.22...@react-navigation/compat@5.1.23) (2020-05-20)
 
 **Note:** Version bump only for package @react-navigation/compat

packages/compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.1.23",
+  "version": "5.1.25",
   "license": "MIT",
   "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/compat",
   "bugs": {
@@ -15,7 +15,8 @@
   "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
-    "lib"
+    "lib",
+    "!**/__tests__"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -27,7 +28,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.14.3",
-    "@react-navigation/native": "^5.4.2",
+    "@react-navigation/native": "^5.5.0",
     "@types/react": "^16.9.34",
     "react": "~16.9.0",
     "typescript": "^3.8.3"

packages/core/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.
 
+# [5.9.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.8.2...@react-navigation/core@5.9.0) (2020-05-27)
+
+
+### Features
+
+* add ref to get current options in `ServerContainer` ([#8333](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/8333)) ([0b1a718](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/0b1a718756e208d84b20e45ca56004332308ad54))
+
+
+
+
+
+## [5.8.2](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.8.1...@react-navigation/core@5.8.2) (2020-05-23)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
 ## [5.8.1](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.8.0...@react-navigation/core@5.8.1) (2020-05-20)
 
 **Note:** Version bump only for package @react-navigation/core

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "5.8.1",
+  "version": "5.9.0",
   "keywords": [
     "react",
     "react-native",
@@ -20,7 +20,8 @@
   "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
-    "lib"
+    "lib",
+    "!**/__tests__"
   ],
   "publishConfig": {
     "access": "public"
@@ -30,7 +31,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.4.6",
+    "@react-navigation/routers": "^5.4.7",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.5",
     "query-string": "^6.12.1",

packages/core/src/BaseNavigationContainer.tsx

@@ -19,48 +19,16 @@ import useSyncState from './useSyncState';
 import isSerializable from './isSerializable';
 
 import { NavigationContainerRef, NavigationContainerProps } from './types';
+import NavigationStateContext from './NavigationStateContext';
 
 type State = NavigationState | PartialState<NavigationState> | undefined;
 
 const DEVTOOLS_CONFIG_KEY =
   'REACT_NAVIGATION_REDUX_DEVTOOLS_EXTENSION_INTEGRATION_ENABLED';
 
-const MISSING_CONTEXT_ERROR =
-  "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.";
-
 const NOT_INITIALIZED_ERROR =
   "The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization for more details.";
 
-export const NavigationStateContext = React.createContext<{
-  isDefault?: true;
-  state?: NavigationState | PartialState<NavigationState>;
-  getKey: () => string | undefined;
-  setKey: (key: string) => void;
-  getState: () => NavigationState | PartialState<NavigationState> | undefined;
-  setState: (
-    state: NavigationState | PartialState<NavigationState> | undefined
-  ) => void;
-  addOptionsGetter?: (
-    key: string,
-    getter: () => object | undefined | null
-  ) => void;
-}>({
-  isDefault: true,
-
-  get getKey(): any {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-  get setKey(): any {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-  get getState(): any {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-  get setState(): any {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-});
-
 let hasWarnedForSerialization = false;
 
 /**

packages/core/src/CurrentRenderContext.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+/**
+ * Context which holds the values for the current navigation tree.
+ * Intended for use in SSR. This is not safe to use on the client.
+ */
+const CurrentRenderContext = React.createContext<
+  { options?: object } | undefined
+>(undefined);
+
+export default CurrentRenderContext;

packages/core/src/NavigationStateContext.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { NavigationState, PartialState } from '@react-navigation/routers';
+
+const MISSING_CONTEXT_ERROR =
+  "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.";
+
+export default React.createContext<{
+  isDefault?: true;
+  state?: NavigationState | PartialState<NavigationState>;
+  getKey: () => string | undefined;
+  setKey: (key: string) => void;
+  getState: () => NavigationState | PartialState<NavigationState> | undefined;
+  setState: (
+    state: NavigationState | PartialState<NavigationState> | undefined
+  ) => void;
+  addOptionsGetter?: (
+    key: string,
+    getter: () => object | undefined | null
+  ) => void;
+}>({
+  isDefault: true,
+
+  get getKey(): any {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+  get setKey(): any {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+  get getState(): any {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+  get setState(): any {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+});

packages/core/src/SceneView.tsx

@@ -5,7 +5,7 @@ import {
   NavigationState,
   PartialState,
 } from '@react-navigation/routers';
-import { NavigationStateContext } from './BaseNavigationContainer';
+import NavigationStateContext from './NavigationStateContext';
 import NavigationContext from './NavigationContext';
 import NavigationRouteContext from './NavigationRouteContext';
 import StaticContainer from './StaticContainer';

packages/core/src/__tests__/BaseNavigationContainer.test.tsx

@@ -5,9 +5,8 @@ import {
   NavigationState,
   Router,
 } from '@react-navigation/routers';
-import BaseNavigationContainer, {
-  NavigationStateContext,
-} from '../BaseNavigationContainer';
+import BaseNavigationContainer from '../BaseNavigationContainer';
+import NavigationStateContext from '../NavigationStateContext';
 import MockRouter, { MockActions } from './__fixtures__/MockRouter';
 import useNavigationBuilder from '../useNavigationBuilder';
 import Screen from '../Screen';

packages/core/src/index.tsx

@@ -7,6 +7,8 @@ export { default as NavigationHelpersContext } from './NavigationHelpersContext'
 export { default as NavigationContext } from './NavigationContext';
 export { default as NavigationRouteContext } from './NavigationRouteContext';
 
+export { default as CurrentRenderContext } from './CurrentRenderContext';
+
 export { default as useNavigationBuilder } from './useNavigationBuilder';
 export { default as useNavigation } from './useNavigation';
 export { default as useRoute } from './useRoute';

packages/core/src/useCurrentRender.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { NavigationState, ParamListBase } from '@react-navigation/routers';
+import CurrentRenderContext from './CurrentRenderContext';
+import { Descriptor, NavigationHelpers } from './types';
+
+type Options = {
+  state: NavigationState;
+  navigation: NavigationHelpers<ParamListBase>;
+  descriptors: {
+    [key: string]: Descriptor<ParamListBase, string, NavigationState, object>;
+  };
+};
+
+/**
+ * Write the current options, so that server renderer can get current values
+ * Mutating values like this is not safe in async mode, but it doesn't apply to SSR
+ */
+export default function useCurrentRender({
+  state,
+  navigation,
+  descriptors,
+}: Options) {
+  const current = React.useContext(CurrentRenderContext);
+
+  if (current && navigation.isFocused()) {
+    current.options = descriptors[state.routes[state.index].key].options;
+  }
+}

packages/core/src/useIsFocused.tsx

@@ -12,14 +12,10 @@ export default function useIsFocused(): boolean {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const getCurrentValue = React.useCallback(navigation.isFocused, [navigation]);
   const subscribe = React.useCallback(
-    (callback: (value: boolean) => void) => {
-      const unsubscribeFocus = navigation.addListener('focus', () =>
-        callback(true)
-      );
+    (callback: () => void) => {
+      const unsubscribeFocus = navigation.addListener('focus', callback);
 
-      const unsubscribeBlur = navigation.addListener('blur', () =>
-        callback(false)
-      );
+      const unsubscribeBlur = navigation.addListener('blur', callback);
 
       return () => {
         unsubscribeFocus();

packages/core/src/useNavigationBuilder.tsx

@@ -11,7 +11,7 @@ import {
   NavigationAction,
   Route,
 } from '@react-navigation/routers';
-import { NavigationStateContext } from './BaseNavigationContainer';
+import NavigationStateContext from './NavigationStateContext';
 import NavigationRouteContext from './NavigationRouteContext';
 import Screen from './Screen';
 import useEventEmitter from './useEventEmitter';
@@ -33,6 +33,7 @@ import {
 import useStateGetters from './useStateGetters';
 import useOnGetState from './useOnGetState';
 import useScheduleUpdate from './useScheduleUpdate';
+import useCurrentRender from './useCurrentRender';
 
 // This is to make TypeScript compiler happy
 // eslint-disable-next-line babel/no-unused-expressions
@@ -264,41 +265,36 @@ export default function useNavigationBuilder<
     getKey,
   } = React.useContext(NavigationStateContext);
 
-  const previousStateRef = React.useRef<
-    NavigationState | PartialState<NavigationState> | undefined
-  >();
-  const initializedStateRef = React.useRef<State>();
-
-  let isFirstStateInitialization = false;
-
-  if (
-    initializedStateRef.current === undefined ||
-    currentState !== previousStateRef.current
-  ) {
+  const [initializedState, isFirstStateInitialization] = React.useMemo(() => {
     // If the current state isn't initialized on first render, we initialize it
     // We also need to re-initialize it if the state passed from parent was changed (maybe due to reset)
     // Otherwise assume that the state was provided as initial state
     // So we need to rehydrate it to make it usable
     if (currentState === undefined || !isStateValid(currentState)) {
-      isFirstStateInitialization = true;
-      initializedStateRef.current = router.getInitialState({
-        routeNames,
-        routeParamList,
-      });
-    } else {
-      initializedStateRef.current = router.getRehydratedState(
-        currentState as PartialState<State>,
-        {
+      return [
+        router.getInitialState({
           routeNames,
           routeParamList,
-        }
-      );
+        }),
+        true,
+      ];
+    } else {
+      return [
+        router.getRehydratedState(currentState as PartialState<State>, {
+          routeNames,
+          routeParamList,
+        }),
+        false,
+      ];
     }
-  }
-
-  React.useEffect(() => {
-    previousStateRef.current = currentState;
-  }, [currentState]);
+    // We explicitly don't include routeNames/routeParamList in the dep list
+    // below. We want to avoid forcing a new state to be calculated in cases
+    // where routeConfigs change without affecting routeNames/routeParamList.
+    // Instead, we handle changes to these in the nextState code below. Note
+    // that some changes to routeConfigs are explicitly ignored, such as changes
+    // to initialParams
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentState, router, isStateValid]);
 
   let state =
     // If the state isn't initialized, or stale, use the state we initialized instead
@@ -306,7 +302,7 @@ export default function useNavigationBuilder<
     // So it'll be `undefined` or stale untill the first navigation event happens
     isStateInitialized(currentState)
       ? (currentState as State)
-      : (initializedStateRef.current as State);
+      : (initializedState as State);
 
   let nextState: State = state;
 
@@ -374,6 +370,12 @@ export default function useNavigationBuilder<
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // We initialize this ref here to avoid a new getState getting initialized
+  // whenever initializedState changes. We want getState to have access to the
+  // latest initializedState, but don't need it to change when that happens
+  const initializedStateRef = React.useRef<State>();
+  initializedStateRef.current = initializedState;
+
   const getState = React.useCallback((): State => {
     const currentState = getCurrentState();
 
@@ -497,6 +499,12 @@ export default function useNavigationBuilder<
     emitter,
   });
 
+  useCurrentRender({
+    state,
+    navigation,
+    descriptors,
+  });
+
   return {
     state,
     navigation,

packages/core/src/useOptionsGetters.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { NavigationStateContext } from './BaseNavigationContainer';
+import NavigationStateContext from './NavigationStateContext';
 import { NavigationState } from '@react-navigation/routers';
 
 export default function useOptionsGetters({

packages/drawer/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.
 
+## [5.8.1](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.8.0...@react-navigation/drawer@5.8.1) (2020-05-27)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.8.0](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.7.7...@react-navigation/drawer@5.8.0) (2020-05-23)
+
+
+### Features
+
+* update react-native-safe-area-context to 1.0.0 ([#8182](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/issues/8182)) ([d62fbfe](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/d62fbfe255140f16b182e8b54b276a7c96f2aec6))
+
+
+
+
+
 ## [5.7.7](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.7.6...@react-navigation/drawer@5.7.7) (2020-05-20)
 
 **Note:** Version bump only for package @react-navigation/drawer

packages/drawer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "5.7.7",
+  "version": "5.8.1",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -25,7 +25,8 @@
   "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
-    "lib"
+    "lib",
+    "!**/__tests__"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -41,7 +42,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.14.3",
-    "@react-navigation/native": "^5.4.2",
+    "@react-navigation/native": "^5.5.0",
     "@types/react": "^16.9.34",
     "@types/react-native": "^0.62.7",
     "del-cli": "^3.0.0",
@@ -49,7 +50,7 @@
     "react-native": "~0.61.5",
     "react-native-gesture-handler": "^1.6.0",
     "react-native-reanimated": "^1.8.0",
-    "react-native-safe-area-context": "^0.7.3",
+    "react-native-safe-area-context": "^1.0.0",
     "react-native-screens": "^2.7.0",
     "typescript": "^3.8.3"
   },

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.
 
+## [5.2.9](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.2.8...@react-navigation/material-bottom-tabs@5.2.9) (2020-05-27)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.2.8](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.2.7...@react-navigation/material-bottom-tabs@5.2.8) (2020-05-23)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 ## [5.2.7](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.2.6...@react-navigation/material-bottom-tabs@5.2.7) (2020-05-20)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

packages/material-bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-bottom-tabs",
   "description": "Integration for bottom navigation component from react-native-paper",
-  "version": "5.2.7",
+  "version": "5.2.9",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -25,7 +25,8 @@
   "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
-    "lib"
+    "lib",
+    "!**/__tests__"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -37,7 +38,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.14.3",
-    "@react-navigation/native": "^5.4.2",
+    "@react-navigation/native": "^5.5.0",
     "@types/react": "^16.9.34",
     "@types/react-native": "^0.62.7",
     "@types/react-native-vector-icons": "^6.4.5",

packages/material-top-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.
 
+## [5.2.9](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.2.8...@react-navigation/material-top-tabs@5.2.9) (2020-05-27)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.2.8](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.2.7...@react-navigation/material-top-tabs@5.2.8) (2020-05-23)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 ## [5.2.7](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.2.6...@react-navigation/material-top-tabs@5.2.7) (2020-05-20)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

packages/material-top-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-top-tabs",
   "description": "Integration for the animated tab view component from react-native-tab-view",
-  "version": "5.2.7",
+  "version": "5.2.9",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -25,7 +25,8 @@
   "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
-    "lib"
+    "lib",
+    "!**/__tests__"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -40,7 +41,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.14.3",
-    "@react-navigation/native": "^5.4.2",
+    "@react-navigation/native": "^5.5.0",
     "@types/react": "^16.9.34",
     "@types/react-native": "^0.62.7",
     "del-cli": "^3.0.0",

packages/native/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.5.0](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.4.3...@react-navigation/native@5.5.0) (2020-05-27)
+
+
+### Bug Fixes
+
+* export types from /native ([af1722d](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/af1722d1e915f3ec234df202f74c4b4c631472c7))
+
+
+### Features
+
+* add a `ServerContainer` component for SSR ([#8297](https://github.com/react-navigation/react-navigation/tree/master/packages/native/issues/8297)) ([68e750d](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/68e750d5a6d198a2f5bdb86ba631de0a27732943))
+* add ref to get current options in `ServerContainer` ([#8333](https://github.com/react-navigation/react-navigation/tree/master/packages/native/issues/8333)) ([0b1a718](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/0b1a718756e208d84b20e45ca56004332308ad54))
+
+
+
+
+
+## [5.4.3](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.4.2...@react-navigation/native@5.4.3) (2020-05-23)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 ## [5.4.2](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.4.1...@react-navigation/native@5.4.2) (2020-05-20)
 
 **Note:** Version bump only for package @react-navigation/native

packages/native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "5.4.2",
+  "version": "5.5.0",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -21,7 +21,8 @@
   "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
-    "lib"
+    "lib",
+    "!**/__tests__"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -32,14 +33,16 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.8.1"
+    "@react-navigation/core": "^5.9.0"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.14.3",
     "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.8",
     "@types/react-native": "^0.62.7",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
+    "react-dom": "^16.13.1",
     "react-native": "~0.61.5",
     "react-native-testing-library": "^1.13.2",
     "typescript": "^3.8.3"

packages/native/src/ServerContainer.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { CurrentRenderContext } from '@react-navigation/core';
+import ServerContext, { ServerContextType } from './ServerContext';
+import { ServerContainerRef } from './types';
+
+type Props = ServerContextType & {
+  children: React.ReactNode;
+};
+
+/**
+ * Container component for server rendering.
+ *
+ * @param props.location Location object to base the initial URL for SSR.
+ * @param props.children Child elements to render the content.
+ * @param props.ref Ref object which contains helper methods.
+ */
+export default React.forwardRef(function ServerContainer(
+  { children, location }: Props,
+  ref: React.Ref<ServerContainerRef>
+) {
+  React.useEffect(() => {
+    console.error(
+      "'ServerContainer' should only be used on the server with 'react-dom/server' for SSR."
+    );
+  }, []);
+
+  const current: { options?: object } = {};
+
+  if (ref) {
+    const value = {
+      getCurrentOptions() {
+        return current.options;
+      },
+    };
+
+    // We write to the `ref` during render instead of `React.useImperativeHandle`
+    // This is because `useImperativeHandle` will update the ref after 'commit',
+    // and there's no 'commit' phase during SSR.
+    // Mutating ref during render is unsafe in concurrent mode, but we don't care about it for SSR.
+    if (typeof ref === 'function') {
+      ref(value);
+    } else {
+      // @ts-ignore: the TS types are incorrect and say that ref.current is readonly
+      ref.current = value;
+    }
+  }
+
+  return (
+    <ServerContext.Provider value={{ location }}>
+      <CurrentRenderContext.Provider value={current}>
+        {children}
+      </CurrentRenderContext.Provider>
+    </ServerContext.Provider>
+  );
+});

packages/native/src/ServerContext.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export type ServerContextType = {
+  location?: {
+    pathname: string;
+    search: string;
+  };
+};
+
+const ServerContext = React.createContext<ServerContextType | undefined>(
+  undefined
+);
+
+export default ServerContext;

packages/native/src/__tests__/ServerContainer.test.tsx

@@ -0,0 +1,185 @@
+import * as React from 'react';
+import {
+  useNavigationBuilder,
+  createNavigatorFactory,
+  StackRouter,
+  TabRouter,
+  NavigationHelpersContext,
+} from '@react-navigation/core';
+import { renderToString } from 'react-dom/server';
+import NavigationContainer from '../NavigationContainer';
+import ServerContainer from '../ServerContainer';
+import { ServerContainerRef } from '../types';
+
+// @ts-ignore
+global.window = global;
+
+window.addEventListener = () => {};
+window.removeEventListener = () => {};
+
+// We want to use the web version of useLinking
+jest.mock('../useLinking', () => require('../useLinking.tsx').default);
+
+it('renders correct state with location', () => {
+  const createStackNavigator = createNavigatorFactory((props: any) => {
+    const { navigation, state, descriptors } = useNavigationBuilder(
+      StackRouter,
+      props
+    );
+
+    return (
+      <NavigationHelpersContext.Provider value={navigation}>
+        {state.routes.map((route) => (
+          <div key={route.key}>{descriptors[route.key].render()}</div>
+        ))}
+      </NavigationHelpersContext.Provider>
+    );
+  });
+
+  const Stack = createStackNavigator();
+
+  const TestScreen = ({ route }: any): any =>
+    `${route.name} ${JSON.stringify(route.params)}`;
+
+  const NestedStack = () => {
+    return (
+      <Stack.Navigator initialRouteName="Feed">
+        <Stack.Screen name="Profile" component={TestScreen} />
+        <Stack.Screen name="Settings" component={TestScreen} />
+        <Stack.Screen name="Feed" component={TestScreen} />
+        <Stack.Screen name="Updates" component={TestScreen} />
+      </Stack.Navigator>
+    );
+  };
+
+  const element = (
+    <NavigationContainer
+      linking={{
+        prefixes: [],
+        config: {
+          Home: {
+            initialRouteName: 'Profile',
+            screens: {
+              Settings: {
+                path: ':user/edit',
+              },
+              Updates: {
+                path: ':user/updates',
+              },
+            },
+          },
+        },
+      }}
+    >
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={NestedStack} />
+        <Stack.Screen name="Chat" component={TestScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+
+  // @ts-ignore
+  window.location = { pathname: '/jane/edit', search: '' };
+
+  const client = renderToString(element);
+
+  expect(client).toMatchInlineSnapshot(
+    `"<div><div>Profile undefined</div><div>Settings {&quot;user&quot;:&quot;jane&quot;}</div></div>"`
+  );
+
+  const server = renderToString(
+    <ServerContainer location={{ pathname: '/john/updates', search: '' }}>
+      {element}
+    </ServerContainer>
+  );
+
+  expect(server).toMatchInlineSnapshot(
+    `"<div><div>Profile undefined</div><div>Updates {&quot;user&quot;:&quot;john&quot;}</div></div>"`
+  );
+});
+
+it('gets the current options', () => {
+  const createTabNavigator = createNavigatorFactory((props: any) => {
+    const { navigation, state, descriptors } = useNavigationBuilder(
+      TabRouter,
+      props
+    );
+
+    return (
+      <NavigationHelpersContext.Provider value={navigation}>
+        {state.routes.map((route) => (
+          <div key={route.key}>{descriptors[route.key].render()}</div>
+        ))}
+      </NavigationHelpersContext.Provider>
+    );
+  });
+
+  const Tab = createTabNavigator();
+
+  const TestScreen = ({ route }: any): any =>
+    `${route.name} ${JSON.stringify(route.params)}`;
+
+  const NestedStack = () => {
+    return (
+      <Tab.Navigator initialRouteName="Feed">
+        <Tab.Screen
+          name="Profile"
+          component={TestScreen}
+          options={{ title: 'My profile' }}
+        />
+        <Tab.Screen
+          name="Settings"
+          component={TestScreen}
+          options={{ title: 'Configure' }}
+        />
+        <Tab.Screen
+          name="Feed"
+          component={TestScreen}
+          options={{ title: 'News feed' }}
+        />
+        <Tab.Screen
+          name="Updates"
+          component={TestScreen}
+          options={{ title: 'Updates from cloud', description: 'Woah' }}
+        />
+      </Tab.Navigator>
+    );
+  };
+
+  const ref = React.createRef<ServerContainerRef>();
+
+  renderToString(
+    <ServerContainer ref={ref}>
+      <NavigationContainer
+        initialState={{
+          routes: [
+            {
+              name: 'Others',
+              state: {
+                routes: [{ name: 'Updates' }],
+              },
+            },
+          ],
+        }}
+      >
+        <Tab.Navigator>
+          <Tab.Screen
+            name="Home"
+            component={TestScreen}
+            options={{ title: 'My app' }}
+          />
+          <Tab.Screen
+            name="Others"
+            component={NestedStack}
+            options={{ title: 'Other stuff' }}
+          />
+        </Tab.Navigator>
+      </NavigationContainer>
+    </ServerContainer>
+  );
+
+  expect(ref.current?.getCurrentOptions()).toEqual({
+    title: 'Updates from cloud',
+    description: 'Woah',
+  });
+});

packages/native/src/index.tsx

@@ -15,3 +15,7 @@ export { default as useLinking } from './useLinking';
 export { default as useLinkTo } from './useLinkTo';
 export { default as useLinkProps } from './useLinkProps';
 export { default as useLinkBuilder } from './useLinkBuilder';
+
+export { default as ServerContainer } from './ServerContainer';
+
+export * from './types';

packages/native/src/types.tsx

@@ -51,3 +51,7 @@ export type LinkingOptions = {
    */
   getPathFromState?: typeof getPathFromStateDefault;
 };
+
+export type ServerContainerRef = {
+  getCurrentOptions(): Record<string, any> | undefined;
+};

packages/native/src/useLinking.tsx

@@ -6,6 +6,7 @@ import {
   NavigationState,
   getActionFromState,
 } from '@react-navigation/core';
+import ServerContext from './ServerContext';
 import { LinkingOptions } from './types';
 
 type ResultState = ReturnType<typeof getStateFromPathDefault>;
@@ -84,11 +85,17 @@ export default function useLinking(
     getPathFromStateRef.current = getPathFromState;
   }, [config, enabled, getPathFromState, getStateFromPath]);
 
+  const server = React.useContext(ServerContext);
+
   const getInitialState = React.useCallback(() => {
     let value: ResultState | undefined;
 
     if (enabledRef.current) {
-      const path = location.pathname + location.search;
+      const location =
+        server?.location ??
+        (typeof window !== 'undefined' ? window.location : undefined);
+
+      const path = location ? location.pathname + location.search : undefined;
 
       if (path) {
         value = getStateFromPathRef.current(path, configRef.current);
@@ -106,6 +113,7 @@ export default function useLinking(
     };
 
     return thenable as PromiseLike<ResultState | undefined>;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const previousStateLengthRef = React.useRef<number | undefined>(undefined);

packages/routers/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.4.7](https://github.com/react-navigation/react-navigation/tree/master/packages/routers/compare/@react-navigation/routers@5.4.6...@react-navigation/routers@5.4.7) (2020-05-23)
+
+**Note:** Version bump only for package @react-navigation/routers
+
+
+
+
+
 ## [5.4.6](https://github.com/react-navigation/react-navigation/tree/master/packages/routers/compare/@react-navigation/routers@5.4.5...@react-navigation/routers@5.4.6) (2020-05-20)
 
 **Note:** Version bump only for package @react-navigation/routers

packages/routers/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/routers",
   "description": "Routers to help build custom navigators",
-  "version": "5.4.6",
+  "version": "5.4.7",
   "keywords": [
     "react",
     "react-native",
@@ -20,7 +20,8 @@
   "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
-    "lib"
+    "lib",
+    "!**/__tests__"
   ],
   "sideEffects": false,
   "publishConfig": {

packages/stack/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.4.1](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.4.0...@react-navigation/stack@5.4.1) (2020-05-27)
+
+
+### Bug Fixes
+
+* allow HeaderBackground's subViews to be touchable ([#8317](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/8317)) ([00c23f2](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/00c23f2c9ed22fa4d010ffb427f2b52e061d8df4))
+* fix type of style for various options ([9d822b9](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/9d822b95a6df797e2e63e481573e64ea7d0f9386))
+
+
+
+
+
+# [5.4.0](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.3.9...@react-navigation/stack@5.4.0) (2020-05-23)
+
+
+### Bug Fixes
+
+* allow HeaderBackground's subViews to be touchable ([#8314](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/8314)) ([021a911](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/021a9111d76b9b0d940c8829f7caebeb292fec2a))
+* don't ignore previous header heights on layout update ([6dd45fc](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/6dd45fcff98a0c222d120d6f76a37130de45b92f))
+
+
+### Features
+
+* update react-native-safe-area-context to 1.0.0 ([#8182](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/8182)) ([d62fbfe](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/d62fbfe255140f16b182e8b54b276a7c96f2aec6))
+
+
+
+
+
 ## [5.3.9](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.3.8...@react-navigation/stack@5.3.9) (2020-05-20)
 
 **Note:** Version bump only for package @react-navigation/stack

packages/stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "5.3.9",
+  "version": "5.4.1",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -24,7 +24,8 @@
   "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
-    "lib"
+    "lib",
+    "!**/__tests__"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -41,7 +42,7 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.14.3",
     "@react-native-community/masked-view": "^0.1.10",
-    "@react-navigation/native": "^5.4.2",
+    "@react-navigation/native": "^5.5.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.34",
     "@types/react-native": "^0.62.7",
@@ -49,7 +50,7 @@
     "react": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-gesture-handler": "^1.6.0",
-    "react-native-safe-area-context": "^0.7.3",
+    "react-native-safe-area-context": "^1.0.0",
     "react-native-screens": "^2.7.0",
     "typescript": "^3.8.3"
   },

packages/stack/src/types.tsx

@@ -119,7 +119,7 @@ export type StackHeaderOptions = {
    * This may lead to white space or overlap between `headerLeft` and `headerTitle` if a customized `headerLeft` is used.
    * It can be solved by adjusting `left` and `right` style in `headerTitleContainerStyle` and `marginHorizontal` in `headerTitleStyle`.
    */
-  headerTitleContainerStyle?: StyleProp<ViewStyle>;
+  headerTitleContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Tint color for the header.
    */
@@ -157,7 +157,7 @@ export type StackHeaderOptions = {
   /**
    * Style object for the container of the `headerLeft` component, for example to add padding.
    */
-  headerLeftContainerStyle?: StyleProp<ViewStyle>;
+  headerLeftContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Function which returns a React Element to display on the right side of the header.
    */
@@ -165,7 +165,7 @@ export type StackHeaderOptions = {
   /**
    * Style object for the container of the `headerRight` component, for example to add padding.
    */
-  headerRightContainerStyle?: StyleProp<ViewStyle>;
+  headerRightContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Function which returns a React Element to display custom image in header's back button.
    * It receives the `tintColor` in in the options object as an argument. object.
@@ -187,7 +187,7 @@ export type StackHeaderOptions = {
   /**
    * Style object for the header. You can specify a custom background color here, for example.
    */
-  headerStyle?: StyleProp<ViewStyle>;
+  headerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Defaults to `false`. If `true`, the header will not have a background unless you explicitly provide it with `headerBackground`.
    * The header will also float over the screen so that it overlaps the content underneath.
@@ -380,7 +380,7 @@ export type StackHeaderLeftButtonProps = {
   /**
    * Style object for the label.
    */
-  labelStyle?: React.ComponentProps<typeof Animated.Text>['style'];
+  labelStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
   /**
    * Whether label font should scale to respect Text Size accessibility settings.
    */

packages/stack/src/views/Header/HeaderBackground.tsx

@@ -1,8 +1,16 @@
 import * as React from 'react';
-import { Animated, StyleSheet, Platform, ViewProps } from 'react-native';
+import {
+  Animated,
+  StyleSheet,
+  Platform,
+  ViewProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 import { useTheme } from '@react-navigation/native';
 
 type Props = ViewProps & {
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   children?: React.ReactNode;
 };
 

packages/stack/src/views/Header/HeaderSegment.tsx

@@ -312,8 +312,8 @@ export default class HeaderSegment extends React.Component<Props, State> {
     return (
       <React.Fragment>
         <Animated.View
-          pointerEvents="none"
-          style={[StyleSheet.absoluteFill, backgroundStyle]}
+          pointerEvents="box-none"
+          style={[StyleSheet.absoluteFill, { zIndex: 0 }, backgroundStyle]}
         >
           {headerBackground ? (
             headerBackground({ style: safeStyles })

packages/stack/src/views/Stack/Card.tsx

@@ -46,7 +46,9 @@ type Props = ViewProps & {
   onGestureCanceled?: () => void;
   onGestureEnd?: () => void;
   children: React.ReactNode;
-  overlay: (props: { style: StyleProp<ViewStyle> }) => React.ReactNode;
+  overlay: (props: {
+    style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  }) => React.ReactNode;
   overlayEnabled: boolean;
   shadowEnabled: boolean;
   gestureEnabled: boolean;
@@ -83,7 +85,11 @@ export default class Card extends React.Component<Props> {
     shadowEnabled: true,
     gestureEnabled: true,
     gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
-    overlay: ({ style }: { style: StyleProp<ViewStyle> }) =>
+    overlay: ({
+      style,
+    }: {
+      style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    }) =>
       style ? (
         <Animated.View pointerEvents="none" style={[styles.overlay, style]} />
       ) : null,

packages/stack/src/views/Stack/CardStack.tsx

@@ -83,9 +83,10 @@ const getHeaderHeights = (
 ) => {
   return routes.reduce<Record<string, number>>((acc, curr) => {
     const { options = {} } = descriptors[curr.key] || {};
-    const { height = previous[curr.key] } = StyleSheet.flatten(
-      options.headerStyle || {}
-    );
+    const style: any = StyleSheet.flatten(options.headerStyle || {});
+
+    const height =
+      typeof style.height === 'number' ? style.height : previous[curr.key];
 
     const safeAreaInsets = {
       ...insets,
@@ -299,7 +300,7 @@ export default class CardStack extends React.Component<Props, State> {
           props.insets,
           state.descriptors,
           layout,
-          {}
+          state.headerHeights
         ),
       };
     });