chore: merge current main

.circleci/config.yml

@@ -75,13 +75,9 @@ jobs:
       - run:
           name: Build example for web
           command: yarn example expo build:web --no-pwa
-      # Yarn does not execute the postinstall scripts if the package is in the cache
-      - run:
-          name: Install browsers
-          command: yarn playwright install
       - run:
           name: Run integration tests
-          command: yarn example test:e2e
+          command: yarn example test --maxWorkers=2
 
   build-packages:
     executor: default

.eslintrc.json

@@ -26,11 +26,5 @@
   "rules": {
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error"
-  },
-  "overrides": [{
-    "files":["example/e2e/tests/*.ts"],
-    "rules": {
-      "jest/*": 0
-    }
-  }]
+  }
 }

.github/workflows/closed-issue.yml

@@ -1,31 +0,0 @@
-name: Comment on closed issue
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  closed-issue:
-    runs-on: ubuntu-latest
-    if: ${{ github.event.issue.state == 'closed' }}
-    steps:
-      - uses: actions/github-script@v3
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-              const body = "Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.";
-              const comments = await github.issues.listComments({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-              });
-
-              if (comments.data.some(comment => comment.body === body)) {
-                return;
-              }
-
-              await github.issues.createComment({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                body,
-              });

.github/workflows/expo-preview.yml

@@ -16,9 +16,10 @@ jobs:
           node-version: 14.x
 
       - name: Setup Expo
-        uses: expo/expo-github-action@v6
+        uses: expo/expo-github-action@v5
         with:
-          token: ${{ secrets.EXPO_TOKEN }}
+          expo-token: ${{ secrets.EXPO_TOKEN }}
+          expo-cache: true
 
       - name: Restore yarn cache
         id: yarn-cache

.github/workflows/expo.yml

@@ -19,9 +19,10 @@ jobs:
           node-version: 14.x
 
       - name: Setup Expo
-        uses: expo/expo-github-action@v6
+        uses: expo/expo-github-action@v5
         with:
-          token: ${{ secrets.EXPO_TOKEN }}
+          expo-token: ${{ secrets.EXPO_TOKEN }}
+          expo-cache: true
 
       - name: Restore yarn cache
         id: yarn-cache

.nvmrc

@@ -1 +0,0 @@
-lts/*

.yarnrc

@@ -2,4 +2,4 @@
 # yarn lockfile v1
 
 
-yarn-path ".yarn/releases/yarn-1.22.10.cjs"
+yarn-path ".yarn/releases/yarn-1.18.0.js"

example/android/app/src/debug/java/com/reactnavigation/ReactNativeFlipper.java

@@ -4,7 +4,7 @@
  * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
  * directory of this source tree.
  */
-package org.reactnavigation.example;
+package com.reactnavigation;
 
 import android.content.Context;
 import com.facebook.flipper.android.AndroidFlipperClient;
@@ -66,4 +66,4 @@ public class ReactNativeFlipper {
       }
     }
   }
-}
+}

example/e2e/__integration_tests__/Link.test.tsx

@@ -0,0 +1,44 @@
+import { page } from '../config/setup-playwright';
+
+beforeEach(async () => {
+  await page.click('[data-testid=LinkComponent]');
+});
+
+const getPageInfo = async () => ({
+  url: await page.evaluate(() => location.pathname + location.search),
+  title: await page.evaluate(() => document.title),
+  heading: (await page.accessibility.snapshot())?.children?.find(
+    (it) => it.role === 'heading'
+  )?.name,
+});
+
+it('loads the article page', async () => {
+  const { url, title, heading } = await getPageInfo();
+
+  expect(url).toBe('/link-component/article/gandalf');
+  expect(title).toBe('Article by Gandalf - React Navigation Example');
+  expect(heading).toBe('Article by Gandalf');
+});
+
+it('goes to the album page and goes back', async () => {
+  await page.click('[href="/link-component/music"]');
+
+  {
+    const { url, title, heading } = await getPageInfo();
+
+    expect(url).toBe('/link-component/music');
+    expect(title).toBe('Albums - React Navigation Example');
+    expect(heading).toBe('Albums');
+  }
+
+  await page.click('[aria-label="Article by Gandalf, back"]');
+  await page.waitForNavigation();
+
+  {
+    const { url, title, heading } = await getPageInfo();
+
+    expect(url).toBe('/link-component/article/gandalf');
+    expect(title).toBe('Article by Gandalf - React Navigation Example');
+    expect(heading).toBe('Article by Gandalf');
+  }
+});

example/e2e/__integration_tests__/index.test.tsx

@@ -1,6 +1,6 @@
-import { expect, it } from './baseFixture';
+import { page } from '../config/setup-playwright';
 
-it('loads the example app', async ({ page }) => {
+it('loads the example app', async () => {
   const snapshot = await page.accessibility.snapshot();
 
   expect(

example/e2e/__integration_tests__/server.test.tsx

@@ -1,4 +1,3 @@
-import { expect, test as it } from '@playwright/test';
 import cheerio from 'cheerio';
 import fetch from 'node-fetch';
 

example/e2e/config/setup-playwright.tsx

@@ -0,0 +1,28 @@
+/* eslint-env jest */
+
+import { Browser, BrowserContext, chromium, Page } from 'playwright';
+
+let browser: Browser;
+let context: BrowserContext;
+let page: Page;
+
+beforeAll(async () => {
+  browser = await chromium.launch();
+});
+
+afterAll(async () => {
+  await browser.close();
+});
+
+beforeEach(async () => {
+  context = await browser.newContext();
+  page = await context.newPage();
+
+  await page.goto('http://localhost:3579');
+});
+
+afterEach(async () => {
+  await context.close();
+});
+
+export { browser, context, page };

example/e2e/playwright.config.ts

@@ -1,28 +0,0 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
-import path from 'path';
-
-const config: PlaywrightTestConfig = {
-  testDir: path.join(__dirname, 'tests'),
-  globalSetup: require.resolve('./config/setup-server.ts'),
-  globalTeardown: require.resolve('./config/teardown-server.ts'),
-  workers: 1,
-  reporter: 'list',
-  projects: [
-    {
-      name: 'Chromium',
-      use: { browserName: 'chromium' },
-    },
-
-    {
-      name: 'Firefox',
-      use: { browserName: 'firefox' },
-    },
-
-    {
-      name: 'WebKit',
-      use: { browserName: 'webkit' },
-    },
-  ],
-};
-
-export default config;

example/e2e/tests/Link.test.ts

@@ -1,43 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, it } from './baseFixture';
-
-it.beforeEach(async ({ page }) => {
-  await page.click('[data-testid=LinkComponent]');
-});
-
-const waitAndAssertPageHeading = async (
-  page: Page,
-  expectedHeading: string
-) => {
-  await page.waitForSelector(`text=${expectedHeading}`);
-  const heading = (await page.accessibility.snapshot())?.children?.find(
-    (it) => it.role === 'heading'
-  )?.name;
-  expect(heading).toBe(expectedHeading);
-};
-
-it('loads the article page', async ({ page }) => {
-  await page.waitForURL('**/link-component/article/gandalf');
-  expect(await page.title()).toBe(
-    'Article by Gandalf - React Navigation Example'
-  );
-  await waitAndAssertPageHeading(page, 'Article by Gandalf');
-});
-
-it('goes to the album page and goes back', async ({ page }) => {
-  await page.click('[href="/link-component/music"]');
-
-  await page.waitForURL('**/link-component/music');
-  expect(await page.title()).toBe('Albums - React Navigation Example');
-  await waitAndAssertPageHeading(page, 'Albums');
-
-  await page.click('[aria-label="Article by Gandalf, back"]');
-  await page.waitForNavigation();
-
-  await page.waitForURL('**/link-component/article/gandalf');
-  expect(await page.title()).toBe(
-    'Article by Gandalf - React Navigation Example'
-  );
-  await waitAndAssertPageHeading(page, 'Article by Gandalf');
-});

example/e2e/tests/baseFixture.ts

@@ -1,11 +0,0 @@
-import { test as baseTest } from '@playwright/test';
-
-const test = baseTest.extend({
-  page: async ({ page }, use) => {
-    await page.goto('http://localhost:3579');
-    await use(page);
-  },
-});
-
-export const it = test;
-export const expect = test.expect;

example/ios/Podfile.lock

@@ -23,15 +23,15 @@ PODS:
     - UMImageLoaderInterface
   - EXKeepAwake (9.1.2):
     - UMCore
-  - EXPermissions (12.0.1):
+  - EXPermissions (12.0.0):
     - UMCore
     - UMPermissionsInterface
-  - EXSplashScreen (0.10.2):
+  - EXSplashScreen (0.10.0):
     - React-Core
     - UMCore
   - EXStructuredHeaders (1.0.1):
     - UMCore
-  - EXUpdates (0.5.5):
+  - EXUpdates (0.5.4):
     - EXStructuredHeaders
     - React-Core
     - UMCore
@@ -271,10 +271,10 @@ PODS:
     - React
   - react-native-flipper (0.80.0):
     - React-Core
-  - react-native-pager-view (5.1.10):
-    - React-Core
   - react-native-safe-area-context (3.2.0):
     - React-Core
+  - react-native-viewpager (5.0.12):
+    - React-Core
   - React-RCTActionSheet (0.63.4):
     - React-Core/RCTActionSheetHeaders (= 0.63.4)
   - React-RCTAnimation (0.63.4):
@@ -335,13 +335,13 @@ PODS:
     - React-Core (= 0.63.4)
     - React-cxxreact (= 0.63.4)
     - React-jsi (= 0.63.4)
-  - RNCAsyncStorage (1.15.5):
+  - RNCAsyncStorage (1.15.1):
     - React-Core
   - RNCMaskedView (0.2.4):
     - React-Core
   - RNGestureHandler (1.10.3):
     - React-Core
-  - RNReanimated (2.2.0):
+  - RNReanimated (2.1.0):
     - DoubleConversion
     - FBLazyVector
     - FBReactNativeSpec
@@ -452,8 +452,8 @@ DEPENDENCIES:
   - React-jsinspector (from `../../node_modules/react-native/ReactCommon/jsinspector`)
   - react-native-appearance (from `../../node_modules/react-native-appearance`)
   - react-native-flipper (from `../../node_modules/react-native-flipper`)
-  - react-native-pager-view (from `../../node_modules/react-native-pager-view`)
   - react-native-safe-area-context (from `../../node_modules/react-native-safe-area-context`)
+  - react-native-viewpager (from `../node_modules/react-native-pager-view`)
   - React-RCTActionSheet (from `../../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../../node_modules/react-native/Libraries/NativeAnimation`)
   - React-RCTBlob (from `../../node_modules/react-native/Libraries/Blob`)
@@ -465,7 +465,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/turbomodule/core (from `../../node_modules/react-native/ReactCommon`)
   - "RNCAsyncStorage (from `../../node_modules/@react-native-async-storage/async-storage`)"
-  - "RNCMaskedView (from `../../node_modules/@react-native-masked-view/masked-view`)"
+  - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
   - RNGestureHandler (from `../../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../../node_modules/react-native-reanimated`)
   - RNScreens (from `../../node_modules/react-native-screens`)
@@ -559,10 +559,10 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/react-native-appearance"
   react-native-flipper:
     :path: "../../node_modules/react-native-flipper"
-  react-native-pager-view:
-    :path: "../../node_modules/react-native-pager-view"
   react-native-safe-area-context:
     :path: "../../node_modules/react-native-safe-area-context"
+  react-native-viewpager:
+    :path: "../node_modules/react-native-pager-view"
   React-RCTActionSheet:
     :path: "../../node_modules/react-native/Libraries/ActionSheetIOS"
   React-RCTAnimation:
@@ -586,7 +586,7 @@ EXTERNAL SOURCES:
   RNCAsyncStorage:
     :path: "../../node_modules/@react-native-async-storage/async-storage"
   RNCMaskedView:
-    :path: "../../node_modules/@react-native-masked-view/masked-view"
+    :path: "../node_modules/@react-native-masked-view/masked-view"
   RNGestureHandler:
     :path: "../../node_modules/react-native-gesture-handler"
   RNReanimated:
@@ -636,10 +636,10 @@ SPEC CHECKSUMS:
   EXFont: d6fb79f9863120f0d0b26b0c2d1453bc9511e9df
   EXImageLoader: da941c9399e01ec28f2d5b270bdd21f2c8ca596c
   EXKeepAwake: d4e4a3ed8c1c4fd940dd62fc5a8be2a190371fd4
-  EXPermissions: 8f8c1c05580c4e02d4ee2c8dd74bfe173ff6a723
-  EXSplashScreen: a9baaf4fa866003884c90ba049f18760d6a8ce39
+  EXPermissions: 67ff17d3c12ea06066492dde4242f8047658fd62
+  EXSplashScreen: 9d79ea338b7bb2ee94df51723870bac70b408d44
   EXStructuredHeaders: be834496a4d9fd0069cd12ec1cc57b31c6d3b256
-  EXUpdates: efe0e8c514dcff06a8fd0b63be6019a6365fb9c7
+  EXUpdates: e191b83e00d3e7ebfd7db3986806ceca09b7b322
   FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
   FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
   Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
@@ -665,8 +665,8 @@ SPEC CHECKSUMS:
   React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
   react-native-appearance: 0f0e5fc2fcef70e03d48c8fe6b00b9158c2ba8aa
   react-native-flipper: 5a9d5959364fca6a8a9658d941343774cb197857
-  react-native-pager-view: 967d50ce0f1b72e434a2d9f3b739ddbf7d5bbf83
   react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
+  react-native-viewpager: 98a850d1c7ac6263122d82618a77062a5f427073
   React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336
   React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b
   React-RCTBlob: a97d378b527740cc667e03ebfa183a75231ab0f0
@@ -677,10 +677,10 @@ SPEC CHECKSUMS:
   React-RCTText: 5c51df3f08cb9dedc6e790161195d12bac06101c
   React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d
   ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b
-  RNCAsyncStorage: 56a3355a10b5d660c48c6e37325ac85ebfd09885
+  RNCAsyncStorage: 08719e311ab90492c2dafd6d6fb7ffb396493638
   RNCMaskedView: fc29d354a40316a990e8fb46391f08aea829c3aa
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
-  RNReanimated: d9da990fc90123f4ffbfdda93d00fc15174863a8
+  RNReanimated: 70f662b5232dd5d19ccff581e919a54ea73df51c
   RNScreens: bf59f17fbf001f1025243eeed5f19419d3c11ef2
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   UMAppLoader: fe2708bb0ac5cd70052bc207d06aa3b7e72b9e97

example/ios/ReactNavigation/Info.plist

@@ -51,7 +51,7 @@
       <string>UIInterfaceOrientationLandscapeRight</string>
     </array>
     <key>UIViewControllerBasedStatusBarAppearance</key>
-    <false/>
+    <true/>
     <key>CFBundleURLTypes</key>
     <array>
       <dict>

example/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  testRegex: '/__integration_tests__/.*\\.(test|spec)\\.(js|tsx?)$',
+  globalSetup: './e2e/config/setup-server.tsx',
+  globalTeardown: './e2e/config/teardown-server.tsx',
+  setupFilesAfterEnv: ['./e2e/config/setup-playwright.tsx'],
+};

example/package.json

@@ -11,63 +11,65 @@
     "ios": "react-native run-ios",
     "preios": "pod-install",
     "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:e2e": "playwright test --config=e2e/playwright.config.ts"
+    "test": "jest"
   },
   "dependencies": {
-    "@expo/vector-icons": "^12.0.5",
-    "@react-native-async-storage/async-storage": "^1.15.5",
+    "@expo/vector-icons": "^12.0.0",
+    "@react-native-async-storage/async-storage": "^1.13.0",
     "@react-native-masked-view/masked-view": "~0.2.4",
     "color": "^3.1.3",
     "expo": "^41.0.1",
-    "expo-asset": "~8.3.2",
+    "expo-asset": "~8.3.1",
     "expo-blur": "~9.0.3",
     "expo-linking": "~2.2.3",
-    "expo-splash-screen": "~0.10.2",
+    "expo-splash-screen": "~0.10.0",
     "expo-status-bar": "~1.0.4",
-    "expo-updates": "~0.5.5",
+    "expo-updates": "~0.5.4",
     "koa": "^2.13.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "~0.63.4",
     "react-native-appearance": "~0.3.3",
     "react-native-gesture-handler": "~1.10.2",
-    "react-native-pager-view": "~5.1.10",
+    "react-native-pager-view": "~5.0.12",
     "react-native-paper": "^4.9.1",
-    "react-native-reanimated": "~2.2.0",
+    "react-native-reanimated": "~2.1.0",
     "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.3.0",
+    "react-native-screens": "^3.0.0",
     "react-native-tab-view": "^3.0.1",
-    "react-native-unimodules": "~0.13.3",
+    "react-native-unimodules": "~0.13.1",
     "react-native-vector-icons": "^8.1.0",
-    "react-native-web": "~0.16.3"
+    "react-native-web": "~0.15.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/node": "^7.14.2",
-    "@expo/webpack-config": "~0.12.76",
-    "@playwright/test": "^1.12.2",
-    "@types/cheerio": "^0.22.29",
+    "@babel/core": "^7.9.0",
+    "@babel/node": "^7.13.13",
+    "@expo/webpack-config": "~0.12.63",
+    "@types/cheerio": "^0.22.28",
     "@types/jest-dev-server": "^4.2.0",
-    "@types/koa": "^2.13.3",
+    "@types/koa": "^2.13.1",
     "@types/mock-require": "^2.0.0",
-    "@types/node-fetch": "^2.5.10",
-    "@types/react": "~17.0.9",
-    "@types/react-dom": "~17.0.6",
-    "@types/react-native": "~0.64.9",
+    "@types/node-fetch": "^2.5.9",
+    "@types/react": "~16.9.35",
+    "@types/react-dom": "~16.9.8",
+    "@types/react-native": "~0.63.2",
+    "babel-jest": "~25.2.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-preset-expo": "8.3.0",
-    "cheerio": "^1.0.0-rc.9",
-    "expo-cli": "^4.5.2",
-    "jest-dev-server": "^5.0.3",
+    "cheerio": "^1.0.0-rc.3",
+    "expo-cli": "^4.4.4",
+    "jest": "^26.6.3",
+    "jest-dev-server": "^4.4.0",
     "mock-require": "^3.0.3",
     "mock-require-assets": "^0.0.1",
     "node-fetch": "^2.6.1",
     "nodemon": "^2.0.6",
-    "pod-install": "^0.1.23",
+    "playwright": "^1.11.0",
+    "pod-install": "^0.1.19",
     "react-native-flipper": "~0.80.0",
     "react-test-renderer": "~16.13.1",
     "serve": "^11.3.0",
-    "typescript": "^4.3.2"
+    "typescript": "~4.2.3"
   }
 }

example/src/Screens/BottomTabs.tsx

@@ -19,10 +19,13 @@ import Chat from '../Shared/Chat';
 import Contacts from '../Shared/Contacts';
 import SimpleStackScreen, { SimpleStackParams } from './SimpleStack';
 
-const getTabBarIcon =
-  (name: string) =>
-  ({ color, size }: { color: string; size: number }) =>
-    <MaterialCommunityIcons name={name} color={color} size={size} />;
+const getTabBarIcon = (name: string) => ({
+  color,
+  size,
+}: {
+  color: string;
+  size: number;
+}) => <MaterialCommunityIcons name={name} color={color} size={size} />;
 
 type BottomTabParams = {
   TabStack: NavigatorScreenParams<SimpleStackParams>;

example/src/Screens/MaterialBottomTabs.tsx

@@ -15,8 +15,7 @@ type MaterialBottomTabParams = {
   TabChat: undefined;
 };
 
-const MaterialBottomTabs =
-  createMaterialBottomTabNavigator<MaterialBottomTabParams>();
+const MaterialBottomTabs = createMaterialBottomTabNavigator<MaterialBottomTabParams>();
 
 export default function MaterialBottomTabsScreen() {
   return (

example/src/index.tsx

@@ -32,7 +32,6 @@ import {
   Platform,
   ScaledSize,
   ScrollView,
-  StatusBar,
 } from 'react-native';
 import {
   DarkTheme as PaperDarkTheme,
@@ -155,8 +154,9 @@ export default function App() {
   const [theme, setTheme] = React.useState(DefaultTheme);
 
   const [isReady, setIsReady] = React.useState(Platform.OS === 'web');
-  const [initialState, setInitialState] =
-    React.useState<InitialState | undefined>();
+  const [initialState, setInitialState] = React.useState<
+    InitialState | undefined
+  >();
 
   React.useEffect(() => {
     const restoreState = async () => {
@@ -229,11 +229,6 @@ export default function App() {
 
   return (
     <PaperProvider theme={paperTheme}>
-      <StatusBar
-        translucent
-        barStyle={theme.dark ? 'light-content' : 'dark-content'}
-        backgroundColor="rgba(0, 0, 0, 0.24)"
-      />
       <NavigationContainer
         ref={navigationRef}
         initialState={initialState}
@@ -311,6 +306,9 @@ export default function App() {
         <Stack.Navigator
           screenOptions={{
             headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+            statusBarStyle: theme.dark ? 'light' : 'dark',
+            statusBarTranslucent: true,
+            statusBarColor: 'rgba(0, 0, 0, 0.24)',
           }}
         >
           <Stack.Screen

example/webpack.config.js

@@ -17,8 +17,12 @@ module.exports = async function (env, argv) {
 
   Object.assign(config.resolve.alias, {
     'react': path.resolve(node_modules, 'react'),
-    'react-native': path.resolve(node_modules, 'react-native-web'),
-    'react-native-web': path.resolve(node_modules, 'react-native-web'),
+    'react-native': path.resolve(__dirname, 'node_modules', 'react-native-web'),
+    'react-native-web': path.resolve(
+      __dirname,
+      'node_modules',
+      'react-native-web'
+    ),
     '@expo/vector-icons': path.resolve(node_modules, '@expo/vector-icons'),
   });
 

package.json

@@ -29,24 +29,21 @@
     "release": "lerna publish",
     "example": "yarn --cwd example"
   },
-  "dependencies": {
-    "react-native-web": "~0.16.3"
-  },
   "devDependencies": {
-    "@commitlint/config-conventional": "^12.1.4",
-    "@types/jest": "^26.0.23",
+    "@commitlint/config-conventional": "^12.1.1",
+    "@types/jest": "^26.0.22",
     "babel-jest": "^26.6.3",
-    "codecov": "^3.8.2",
-    "commitlint": "^12.1.4",
-    "eslint": "^7.27.0",
+    "codecov": "^3.8.1",
+    "commitlint": "^12.1.1",
+    "eslint": "^7.23.0",
     "eslint-config-satya164": "^3.1.10",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "husky": "^4.3.6",
     "jest": "^26.6.3",
     "lerna": "^4.0.0",
-    "metro-react-native-babel-preset": "^0.66.0",
-    "prettier": "^2.3.0",
-    "typescript": "^4.3.2"
+    "metro-react-native-babel-preset": "^0.65.2",
+    "prettier": "^2.2.1",
+    "typescript": "^4.2.3"
   },
   "resolutions": {
     "react": "~16.13.1",
@@ -70,7 +67,6 @@
     "preset": "react-native"
   },
   "prettier": {
-    "quoteProps": "consistent",
     "tabWidth": 2,
     "useTabs": false,
     "singleQuote": true,

packages/bottom-tabs/CHANGELOG.md

@@ -3,22 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [6.0.0-next.19](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.18...@react-navigation/bottom-tabs@6.0.0-next.19) (2021-06-10)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-# [6.0.0-next.18](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.17...@react-navigation/bottom-tabs@6.0.0-next.18) (2021-06-01)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
 # [6.0.0-next.17](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.16...@react-navigation/bottom-tabs@6.0.0-next.17) (2021-05-29)
 
 **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": "6.0.0-next.19",
+  "version": "6.0.0-next.17",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,23 +36,23 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.18",
+    "@react-navigation/elements": "^1.0.0-next.16",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.14",
+    "@react-navigation/native": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
     "@types/color": "^3.0.1",
-    "@types/react": "^17.0.9",
-    "@types/react-native": "~0.64.9",
+    "@types/react": "^16.9.53",
+    "@types/react-native": "~0.64.4",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.4",
     "react-native-builder-bob": "^0.18.1",
     "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.3.0",
-    "typescript": "^4.3.2"
+    "react-native-screens": "^3.0.0",
+    "typescript": "^4.2.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^6.0.0",

packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx

@@ -77,21 +77,25 @@ function BottomTabNavigator({
     );
   }
 
-  const { state, descriptors, navigation, NavigationContent } =
-    useNavigationBuilder<
-      TabNavigationState<ParamListBase>,
-      TabRouterOptions,
-      TabActionHelpers<ParamListBase>,
-      BottomTabNavigationOptions,
-      BottomTabNavigationEventMap
-    >(TabRouter, {
-      initialRouteName,
-      backBehavior,
-      children,
-      screenListeners,
-      screenOptions,
-      defaultScreenOptions,
-    });
+  const {
+    state,
+    descriptors,
+    navigation,
+    NavigationContent,
+  } = useNavigationBuilder<
+    TabNavigationState<ParamListBase>,
+    TabRouterOptions,
+    TabActionHelpers<ParamListBase>,
+    BottomTabNavigationOptions,
+    BottomTabNavigationEventMap
+  >(TabRouter, {
+    initialRouteName,
+    backBehavior,
+    children,
+    screenListeners,
+    screenOptions,
+    defaultScreenOptions,
+  });
 
   return (
     <NavigationContent>

packages/bottom-tabs/src/types.tsx

@@ -80,171 +80,228 @@ export type TabBarVisibilityAnimationConfig =
   | TimingKeyboardAnimationConfig
   | SpringKeyboardAnimationConfig;
 
-export type BottomTabNavigationOptions = HeaderOptions & {
+export type NativeScreenTraitsProps = {
   /**
-   * Title text for the screen.
+   * In which orientation should the screen appear. It requires having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
+   * The following values are currently supported:
+   * - "default" - resolves to "all" without "portrait_down" on iOS. On Android, this lets the system decide the best orientation.
+   * - "all" – all orientations are permitted
+   * - "portrait" – portrait orientations are permitted
+   * - "portrait_up" – right-side portrait orientation is permitted
+   * - "portrait_down" – upside-down portrait orientation is permitted
+   * - "landscape" – landscape orientations are permitted
+   * - "landscape_left" – landscape-left orientation is permitted
+   * - "landscape_right" – landscape-right orientation is permitted
    */
-  title?: string;
-
+  orientation?:
+    | 'default'
+    | 'all'
+    | 'portrait'
+    | 'portrait_up'
+    | 'portrait_down'
+    | 'landscape'
+    | 'landscape_left'
+    | 'landscape_right';
   /**
-   * Whether this screens should render the first time it's accessed. Defaults to `true`.
-   * Set it to `false` if you want to render the screen on initial render.
+   * Sets the status bar animation (similar to the `StatusBar` component). Requires enabling (or deleting)
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  lazy?: boolean;
-
+  statusBarAnimation?: 'none' | 'fade' | 'slide';
   /**
-   * Function that given returns a React Element to display as a header.
-   */
-  header?: (props: BottomTabHeaderProps) => React.ReactNode;
-
-  /**
-   * Whether to show the header. Setting this to `false` hides the header.
-   * Defaults to `true`.
-   */
-  headerShown?: boolean;
-
-  /**
-   * Title string of a tab displayed in the tab bar
-   * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
+   * Sets the status bar color (similar to the `StatusBar` component).
+   * Requires enabled `react-native-screens` version >=3.3.0.
    *
-   * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.
+   * @platform android
    */
-  tabBarLabel?:
-    | string
-    | ((props: {
-        focused: boolean;
-        color: string;
-        position: LabelPosition;
-      }) => React.ReactNode);
-
+  statusBarColor?: string;
   /**
-   * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
+   * Whether the status bar should be hidden on this screen. Requires enabling (or deleting)
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  tabBarIcon?: (props: {
-    focused: boolean;
-    color: string;
-    size: number;
-  }) => React.ReactNode;
-
+  statusBarHidden?: boolean;
   /**
-   * Text to show in a badge on the tab icon.
+   * Sets the status bar color (similar to the `StatusBar` component). Requires enabling (or deleting)
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  tabBarBadge?: number | string;
-
+  statusBarStyle?: 'inverted' | 'auto' | 'light' | 'dark';
   /**
-   * Custom style for the tab bar badge.
-   * You can specify a background color or text color here.
-   */
-  tabBarBadgeStyle?: StyleProp<TextStyle>;
-
-  /**
-   * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
-   * It's recommended to set this if you don't have a label for the tab.
-   */
-  tabBarAccessibilityLabel?: string;
-
-  /**
-   * ID to locate this tab button in tests.
-   */
-  tabBarTestID?: string;
-
-  /**
-   * Animation config for showing and hiding the tab bar.
-   */
-  tabBarVisibilityAnimationConfig?: {
-    show?: TabBarVisibilityAnimationConfig;
-    hide?: TabBarVisibilityAnimationConfig;
-  };
-
-  /**
-   * Function which returns a React element to render as the tab bar button.
-   * Renders `TouchableWithoutFeedback` by default.
-   */
-  tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
-
-  /**
-   * Color for the icon and label in the active tab.
-   */
-  tabBarActiveTintColor?: string;
-
-  /**
-   * Color for the icon and label in the inactive tabs.
-   */
-  tabBarInactiveTintColor?: string;
-
-  /**
-   * Background color for the active tab.
-   */
-  tabBarActiveBackgroundColor?: string;
-
-  /**
-   * background color for the inactive tabs.
-   */
-  tabBarInactiveBackgroundColor?: string;
-
-  /**
-   * Whether label font should scale to respect Text Size accessibility settings.
-   */
-  tabBarAllowFontScaling?: boolean;
-
-  /**
-   * Whether the tab label should be visible. Defaults to `true`.
-   */
-  tabBarShowLabel?: boolean;
-
-  /**
-   * Style object for the tab label.
-   */
-  tabBarLabelStyle?: StyleProp<TextStyle>;
-
-  /**
-   * Style object for the tab icon.
-   */
-  tabBarIconStyle?: StyleProp<TextStyle>;
-
-  /**
-   * Style object for the tab item container.
-   */
-  tabBarItemStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Whether the label is rendered below the icon or beside the icon.
-   * By default, the position is chosen automatically based on device width.
-   * In `below-icon` orientation (typical for iPhones), the label is rendered below and in `beside-icon` orientation, it's rendered beside (typical for iPad).
-   */
-  tabBarLabelPosition?: LabelPosition;
-
-  /**
-   * Whether the label position should adapt to the orientation.
-   */
-  tabBarAdaptive?: boolean;
-
-  /**
-   * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
-   */
-  tabBarHideOnKeyboard?: boolean;
-
-  /**
-   * Style object for the tab bar container.
-   */
-  tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-
-  /**
-   * Component to use as background for the tab bar.
-   * You could render an image, a gradient, blur view etc.
+   * Sets the translucency of the status bar. Defaults to true. Requires enabled `react-native-screens` version >=3.3.0.
    *
-   * When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
-   * You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
+   * @platform android
    */
-  tabBarBackground?: () => React.ReactNode;
-
-  /**
-   * Whether this screen should be unmounted when navigating away from it.
-   * Defaults to `false`.
-   */
-  unmountOnBlur?: boolean;
+  statusBarTranslucent?: boolean;
 };
 
+export type BottomTabNavigationOptions = HeaderOptions &
+  NativeScreenTraitsProps & {
+    /**
+     * Title text for the screen.
+     */
+    title?: string;
+
+    /**
+     * Whether this screens should render the first time it's accessed. Defaults to `true`.
+     * Set it to `false` if you want to render the screen on initial render.
+     */
+    lazy?: boolean;
+
+    /**
+     * Function that given returns a React Element to display as a header.
+     */
+    header?: (props: BottomTabHeaderProps) => React.ReactNode;
+
+    /**
+     * Whether to show the header. Setting this to `false` hides the header.
+     * Defaults to `true`.
+     */
+    headerShown?: boolean;
+
+    /**
+     * Title string of a tab displayed in the tab bar
+     * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
+     *
+     * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.
+     */
+    tabBarLabel?:
+      | string
+      | ((props: {
+          focused: boolean;
+          color: string;
+          position: LabelPosition;
+        }) => React.ReactNode);
+
+    /**
+     * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
+     */
+    tabBarIcon?: (props: {
+      focused: boolean;
+      color: string;
+      size: number;
+    }) => React.ReactNode;
+
+    /**
+     * Text to show in a badge on the tab icon.
+     */
+    tabBarBadge?: number | string;
+
+    /**
+     * Custom style for the tab bar badge.
+     * You can specify a background color or text color here.
+     */
+    tabBarBadgeStyle?: StyleProp<TextStyle>;
+
+    /**
+     * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
+     * It's recommended to set this if you don't have a label for the tab.
+     */
+    tabBarAccessibilityLabel?: string;
+
+    /**
+     * ID to locate this tab button in tests.
+     */
+    tabBarTestID?: string;
+
+    /**
+     * Animation config for showing and hiding the tab bar.
+     */
+    tabBarVisibilityAnimationConfig?: {
+      show?: TabBarVisibilityAnimationConfig;
+      hide?: TabBarVisibilityAnimationConfig;
+    };
+
+    /**
+     * Function which returns a React element to render as the tab bar button.
+     * Renders `TouchableWithoutFeedback` by default.
+     */
+    tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
+
+    /**
+     * Color for the icon and label in the active tab.
+     */
+    tabBarActiveTintColor?: string;
+
+    /**
+     * Color for the icon and label in the inactive tabs.
+     */
+    tabBarInactiveTintColor?: string;
+
+    /**
+     * Background color for the active tab.
+     */
+    tabBarActiveBackgroundColor?: string;
+
+    /**
+     * background color for the inactive tabs.
+     */
+    tabBarInactiveBackgroundColor?: string;
+
+    /**
+     * Whether label font should scale to respect Text Size accessibility settings.
+     */
+    tabBarAllowFontScaling?: boolean;
+
+    /**
+     * Whether the tab label should be visible. Defaults to `true`.
+     */
+    tabBarShowLabel?: boolean;
+
+    /**
+     * Style object for the tab label.
+     */
+    tabBarLabelStyle?: StyleProp<TextStyle>;
+
+    /**
+     * Style object for the tab icon.
+     */
+    tabBarIconStyle?: StyleProp<TextStyle>;
+
+    /**
+     * Style object for the tab item container.
+     */
+    tabBarItemStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Whether the label is rendered below the icon or beside the icon.
+     * By default, the position is chosen automatically based on device width.
+     * In `below-icon` orientation (typical for iPhones), the label is rendered below and in `beside-icon` orientation, it's rendered beside (typical for iPad).
+     */
+    tabBarLabelPosition?: LabelPosition;
+
+    /**
+     * Whether the label position should adapt to the orientation.
+     */
+    tabBarAdaptive?: boolean;
+
+    /**
+     * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
+     */
+    tabBarHideOnKeyboard?: boolean;
+
+    /**
+     * Style object for the tab bar container.
+     */
+    tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+
+    /**
+     * Component to use as background for the tab bar.
+     * You could render an image, a gradient, blur view etc.
+     *
+     * When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
+     * You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
+     */
+    tabBarBackground?: () => React.ReactNode;
+
+    /**
+     * Whether this screen should be unmounted when navigating away from it.
+     * Defaults to `false`.
+     */
+    unmountOnBlur?: boolean;
+  };
+
 export type BottomTabDescriptor = Descriptor<
   BottomTabNavigationOptions,
   BottomTabNavigationProp<ParamListBase>,

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

@@ -48,8 +48,9 @@ const shouldUseHorizontalLabels = ({
   layout,
   dimensions,
 }: Options) => {
-  const { tabBarLabelPosition, tabBarAdaptive = true } =
-    descriptors[state.routes[state.index].key].options;
+  const { tabBarLabelPosition, tabBarAdaptive = true } = descriptors[
+    state.routes[state.index].key
+  ].options;
 
   if (tabBarLabelPosition) {
     return tabBarLabelPosition === 'beside-icon';

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

@@ -96,7 +96,16 @@ export default function BottomTabView(props: Props) {
       >
         {routes.map((route, index) => {
           const descriptor = descriptors[route.key];
-          const { lazy = true, unmountOnBlur } = descriptor.options;
+          const {
+            lazy = true,
+            unmountOnBlur,
+            orientation,
+            statusBarAnimation,
+            statusBarColor,
+            statusBarHidden,
+            statusBarStyle,
+            statusBarTranslucent,
+          } = descriptor.options;
           const isFocused = state.index === index;
 
           if (unmountOnBlur && !isFocused) {
@@ -124,6 +133,12 @@ export default function BottomTabView(props: Props) {
               style={StyleSheet.absoluteFill}
               visible={isFocused}
               enabled={detachInactiveScreens}
+              orientation={orientation}
+              statusBarAnimation={statusBarAnimation}
+              statusBarColor={statusBarColor}
+              statusBarHidden={statusBarHidden}
+              statusBarStyle={statusBarStyle}
+              statusBarTranslucent={statusBarTranslucent}
             >
               <BottomTabBarHeightContext.Provider value={tabBarHeight}>
                 <Screen
@@ -137,8 +152,7 @@ export default function BottomTabView(props: Props) {
                   header={header({
                     layout: dimensions,
                     route: descriptor.route,
-                    navigation:
-                      descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
+                    navigation: descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
                     options: descriptor.options,
                   })}
                   style={sceneContainerStyle}

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

@@ -2,7 +2,9 @@ import { ResourceSavingView } from '@react-navigation/elements';
 import * as React from 'react';
 import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
 
-type Props = {
+import type { NativeScreenTraitsProps } from '../types';
+
+type Props = NativeScreenTraitsProps & {
   visible: boolean;
   children: React.ReactNode;
   enabled: boolean;

packages/core/CHANGELOG.md

@@ -3,17 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [6.0.0-next.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.13...@react-navigation/core@6.0.0-next.14) (2021-06-10)
-
-
-### Features
-
-* show stack trace in the flipper plugin ([97772af](https://github.com/react-navigation/react-navigation/commit/97772affa3c8f26489f0bdbfb6872ef4377b8ed1))
-
-
-
-
-
 # [6.0.0-next.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.12...@react-navigation/core@6.0.0-next.13) (2021-05-29)
 
 

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "6.0.0-next.14",
+  "version": "6.0.0-next.13",
   "keywords": [
     "react",
     "react-native",
@@ -35,22 +35,22 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^6.0.0-next.5",
+    "@react-navigation/routers": "^6.0.0-next.4",
     "escape-string-regexp": "^4.0.0",
-    "nanoid": "^3.1.23",
+    "nanoid": "^3.1.22",
     "query-string": "^7.0.0",
     "react-is": "^16.13.0"
   },
   "devDependencies": {
     "@testing-library/react-native": "^7.2.0",
-    "@types/react": "^17.0.9",
-    "@types/react-is": "^17.0.0",
+    "@types/react": "^16.9.53",
+    "@types/react-is": "^16.7.1",
     "del-cli": "^3.0.1",
-    "immer": "^9.0.2",
+    "immer": "^9.0.1",
     "react": "~16.13.1",
     "react-native-builder-bob": "^0.18.1",
     "react-test-renderer": "~16.13.1",
-    "typescript": "^4.3.2"
+    "typescript": "^4.2.3"
   },
   "peerDependencies": {
     "react": "*"

packages/core/src/BaseNavigationContainer.tsx

@@ -95,10 +95,15 @@ const BaseNavigationContainer = React.forwardRef(
       );
     }
 
-    const [state, getState, setState, scheduleUpdate, flushUpdates] =
-      useSyncState<State>(() =>
-        getPartialState(initialState == null ? undefined : initialState)
-      );
+    const [
+      state,
+      getState,
+      setState,
+      scheduleUpdate,
+      flushUpdates,
+    ] = useSyncState<State>(() =>
+      getPartialState(initialState == null ? undefined : initialState)
+    );
 
     const isFirstMountRef = React.useRef<boolean>(true);
 
@@ -218,10 +223,7 @@ const BaseNavigationContainer = React.forwardRef(
 
     const onDispatchAction = React.useCallback(
       (action: NavigationAction, noop: boolean) => {
-        emitter.emit({
-          type: '__unsafe_action__',
-          data: { action, noop, stack: stackRef.current },
-        });
+        emitter.emit({ type: '__unsafe_action__', data: { action, noop } });
       },
       [emitter]
     );
@@ -244,15 +246,12 @@ const BaseNavigationContainer = React.forwardRef(
       [emitter]
     );
 
-    const stackRef = React.useRef<string | undefined>();
-
     const builderContext = React.useMemo(
       () => ({
         addListener,
         addKeyedListener,
         onDispatchAction,
         onOptionsChange,
-        stackRef,
       }),
       [addListener, addKeyedListener, onDispatchAction, onOptionsChange]
     );
@@ -350,8 +349,9 @@ const BaseNavigationContainer = React.forwardRef(
             }
           }
 
-          const duplicateRouteNamesResult =
-            checkDuplicateRouteNames(hydratedState);
+          const duplicateRouteNamesResult = checkDuplicateRouteNames(
+            hydratedState
+          );
 
           if (duplicateRouteNamesResult.length) {
             const message = `Found screens with the same name nested inside one another. Check:\n${duplicateRouteNamesResult.map(

packages/core/src/CurrentRenderContext.tsx

@@ -4,7 +4,8 @@ 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);
+const CurrentRenderContext = React.createContext<
+  { options?: object } | undefined
+>(undefined);
 
 export default CurrentRenderContext;

packages/core/src/EnsureSingleNavigator.tsx

@@ -6,14 +6,13 @@ type Props = {
 
 const MULTIPLE_NAVIGATOR_ERROR = `Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting.`;
 
-export const SingleNavigatorContext =
-  React.createContext<
-    | {
-        register(key: string): void;
-        unregister(key: string): void;
-      }
-    | undefined
-  >(undefined);
+export const SingleNavigatorContext = React.createContext<
+  | {
+      register(key: string): void;
+      unregister(key: string): void;
+    }
+  | undefined
+>(undefined);
 
 /**
  * Component which ensures that there's only one navigator nested under it.

packages/core/src/NavigationBuilderContext.tsx

@@ -39,10 +39,7 @@ export type FocusedNavigationCallback<T> = (
 
 export type FocusedNavigationListener = <T>(
   callback: FocusedNavigationCallback<T>
-) => {
-  handled: boolean;
-  result: T;
-};
+) => { handled: boolean; result: T };
 
 export type GetStateListener = () => NavigationState;
 
@@ -61,7 +58,6 @@ const NavigationBuilderContext = React.createContext<{
   onRouteFocus?: (key: string) => void;
   onDispatchAction: (action: NavigationAction, noop: boolean) => void;
   onOptionsChange: (options: object) => void;
-  stackRef?: React.MutableRefObject<string | undefined>;
 }>({
   onDispatchAction: () => undefined,
   onOptionsChange: () => undefined,

packages/core/src/NavigationContainerRefContext.tsx

@@ -6,9 +6,8 @@ import type { NavigationContainerRef } from './types';
 /**
  * Context which holds the route prop for a screen.
  */
-const NavigationContainerRefContext =
-  React.createContext<NavigationContainerRef<ParamListBase> | undefined>(
-    undefined
-  );
+const NavigationContainerRefContext = React.createContext<
+  NavigationContainerRef<ParamListBase> | undefined
+>(undefined);
 
 export default NavigationContainerRefContext;

packages/core/src/NavigationContext.tsx

@@ -6,7 +6,8 @@ import type { NavigationProp } from './types';
 /**
  * Context which holds the navigation prop for a screen.
  */
-const NavigationContext =
-  React.createContext<NavigationProp<ParamListBase> | undefined>(undefined);
+const NavigationContext = React.createContext<
+  NavigationProp<ParamListBase> | undefined
+>(undefined);
 
 export default NavigationContext;

packages/core/src/NavigationHelpersContext.tsx

@@ -7,7 +7,8 @@ import type { NavigationHelpers } from './types';
  * Context which holds the navigation helpers of the parent navigator.
  * Navigators should use this context in their view component.
  */
-const NavigationHelpersContext =
-  React.createContext<NavigationHelpers<ParamListBase> | undefined>(undefined);
+const NavigationHelpersContext = React.createContext<
+  NavigationHelpers<ParamListBase> | undefined
+>(undefined);
 
 export default NavigationHelpersContext;

packages/core/src/NavigationRouteContext.tsx

@@ -4,7 +4,8 @@ import * as React from 'react';
 /**
  * Context which holds the route prop for a screen.
  */
-const NavigationRouteContext =
-  React.createContext<Route<string> | undefined>(undefined);
+const NavigationRouteContext = React.createContext<Route<string> | undefined>(
+  undefined
+);
 
 export default NavigationRouteContext;

packages/core/src/UnhandledActionContext.tsx

@@ -1,9 +1,8 @@
 import type { NavigationAction } from '@react-navigation/routers';
 import * as React from 'react';
 
-const UnhandledActionContext =
-  React.createContext<((action: NavigationAction) => void) | undefined>(
-    undefined
-  );
+const UnhandledActionContext = React.createContext<
+  ((action: NavigationAction) => void) | undefined
+>(undefined);
 
 export default UnhandledActionContext;

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

@@ -31,21 +31,19 @@ it('fires focus and blur events in root navigator', () => {
   const fourthFocusCallback = jest.fn();
   const fourthBlurCallback = jest.fn();
 
-  const createComponent =
-    (focusCallback: any, blurCallback: any) =>
-    ({ navigation }: any) => {
-      React.useEffect(
-        () => navigation.addListener('focus', focusCallback),
-        [navigation]
-      );
+  const createComponent = (focusCallback: any, blurCallback: any) => ({
+    navigation,
+  }: any) => {
+    React.useEffect(() => navigation.addListener('focus', focusCallback), [
+      navigation,
+    ]);
 
-      React.useEffect(
-        () => navigation.addListener('blur', blurCallback),
-        [navigation]
-      );
+    React.useEffect(() => navigation.addListener('blur', blurCallback), [
+      navigation,
+    ]);
 
-      return null;
-    };
+    return null;
+  };
 
   const navigation = React.createRef<any>();
 
@@ -187,21 +185,19 @@ it('fires focus and blur events in nested navigator', () => {
   const fourthFocusCallback = jest.fn();
   const fourthBlurCallback = jest.fn();
 
-  const createComponent =
-    (focusCallback: any, blurCallback: any) =>
-    ({ navigation }: any) => {
-      React.useEffect(
-        () => navigation.addListener('focus', focusCallback),
-        [navigation]
-      );
+  const createComponent = (focusCallback: any, blurCallback: any) => ({
+    navigation,
+  }: any) => {
+    React.useEffect(() => navigation.addListener('focus', focusCallback), [
+      navigation,
+    ]);
 
-      React.useEffect(
-        () => navigation.addListener('blur', blurCallback),
-        [navigation]
-      );
+    React.useEffect(() => navigation.addListener('blur', blurCallback), [
+      navigation,
+    ]);
 
-      return null;
-    };
+    return null;
+  };
 
   const parent = React.createRef<any>();
   const child = React.createRef<any>();
@@ -396,10 +392,9 @@ it('fires blur event when a route is removed with a delay', async () => {
   const First = () => null;
 
   const Second = ({ navigation }: any) => {
-    React.useEffect(
-      () => navigation.addListener('blur', blurCallback),
-      [navigation]
-    );
+    React.useEffect(() => navigation.addListener('blur', blurCallback), [
+      navigation,
+    ]);
 
     return null;
   };
@@ -452,16 +447,13 @@ it('fires custom events added with addListener', () => {
   const secondCallback = jest.fn();
   const thirdCallback = jest.fn();
 
-  const createComponent =
-    (callback: any) =>
-    ({ navigation }: any) => {
-      React.useEffect(
-        () => navigation.addListener(eventName, callback),
-        [navigation]
-      );
+  const createComponent = (callback: any) => ({ navigation }: any) => {
+    React.useEffect(() => navigation.addListener(eventName, callback), [
+      navigation,
+    ]);
 
-      return null;
-    };
+    return null;
+  };
 
   const ref = React.createRef<any>();
 
@@ -534,10 +526,9 @@ it("doesn't call same listener multiple times with addListener", () => {
   const callback = jest.fn();
 
   const Test = ({ navigation }: any) => {
-    React.useEffect(
-      () => navigation.addListener(eventName, callback),
-      [navigation]
-    );
+    React.useEffect(() => navigation.addListener(eventName, callback), [
+      navigation,
+    ]);
 
     return null;
   };
@@ -811,10 +802,9 @@ it('has option to prevent default', () => {
   };
 
   const Test = ({ navigation }: any) => {
-    React.useEffect(
-      () => navigation.addListener(eventName, callback),
-      [navigation]
-    );
+    React.useEffect(() => navigation.addListener(eventName, callback), [
+      navigation,
+    ]);
 
     return null;
   };

packages/core/src/types.tsx

@@ -524,46 +524,44 @@ export type NavigationContainerEventMap = {
        * Whether the action was a no-op, i.e. resulted any state changes.
        */
       noop: boolean;
-      /**
-       * Stack trace of the action, this will only be available during development.
-       */
-      stack: string | undefined;
     };
   };
 };
 
-export type NavigationContainerRef<ParamList extends {}> =
-  NavigationHelpers<ParamList> &
-    EventConsumer<NavigationContainerEventMap> & {
-      /**
-       * Reset the navigation state of the root navigator to the provided state.
-       *
-       * @param state Navigation state object.
-       */
-      resetRoot(state?: PartialState<NavigationState> | NavigationState): void;
-      /**
-       * Get the rehydrated navigation state of the navigation tree.
-       */
-      getRootState(): NavigationState;
-      /**
-       * Get the currently focused navigation route.
-       */
-      getCurrentRoute(): Route<string> | undefined;
-      /**
-       * Get the currently focused route's options.
-       */
-      getCurrentOptions(): object | undefined;
-      /**
-       * Whether the navigation container is ready to handle actions.
-       */
-      isReady(): boolean;
-    };
-
-export type NavigationContainerRefWithCurrent<ParamList extends {}> =
-  NavigationContainerRef<ParamList> & {
-    current: NavigationContainerRef<ParamList> | null;
+export type NavigationContainerRef<
+  ParamList extends {}
+> = NavigationHelpers<ParamList> &
+  EventConsumer<NavigationContainerEventMap> & {
+    /**
+     * Reset the navigation state of the root navigator to the provided state.
+     *
+     * @param state Navigation state object.
+     */
+    resetRoot(state?: PartialState<NavigationState> | NavigationState): void;
+    /**
+     * Get the rehydrated navigation state of the navigation tree.
+     */
+    getRootState(): NavigationState;
+    /**
+     * Get the currently focused navigation route.
+     */
+    getCurrentRoute(): Route<string> | undefined;
+    /**
+     * Get the currently focused route's options.
+     */
+    getCurrentOptions(): object | undefined;
+    /**
+     * Whether the navigation container is ready to handle actions.
+     */
+    isReady(): boolean;
   };
 
+export type NavigationContainerRefWithCurrent<
+  ParamList extends {}
+> = NavigationContainerRef<ParamList> & {
+  current: NavigationContainerRef<ParamList> | null;
+};
+
 export type TypedNavigator<
   ParamList extends ParamListBase,
   State extends NavigationState,

packages/core/src/useDescriptors.tsx

@@ -60,7 +60,10 @@ type Options<
         navigation: any;
         options: ScreenOptions;
       }) => ScreenOptions);
-  onAction: (action: NavigationAction) => boolean;
+  onAction: (
+    action: NavigationAction,
+    visitedNavigators?: Set<string>
+  ) => boolean;
   getState: () => State;
   setState: (state: State) => void;
   addListener: AddListener;
@@ -99,7 +102,7 @@ export default function useDescriptors<
   emitter,
 }: Options<State, ScreenOptions, EventMap>) {
   const [options, setOptions] = React.useState<Record<string, object>>({});
-  const { onDispatchAction, onOptionsChange, stackRef } = React.useContext(
+  const { onDispatchAction, onOptionsChange } = React.useContext(
     NavigationBuilderContext
   );
 
@@ -112,7 +115,6 @@ export default function useDescriptors<
       onRouteFocus,
       onDispatchAction,
       onOptionsChange,
-      stackRef,
     }),
     [
       navigation,
@@ -122,7 +124,6 @@ export default function useDescriptors<
       onRouteFocus,
       onDispatchAction,
       onOptionsChange,
-      stackRef,
     ]
   );
 

packages/core/src/useEventEmitter.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 
 import type { EventArg, EventConsumer, EventEmitter } from './types';
 
-export type NavigationEventEmitter<T extends Record<string, any>> =
-  EventEmitter<T> & {
-    create: (target: string) => EventConsumer<T>;
-  };
+export type NavigationEventEmitter<
+  T extends Record<string, any>
+> = EventEmitter<T> & {
+  create: (target: string) => EventConsumer<T>;
+};
 
 type Listeners = ((e: any) => void)[];
 

packages/core/src/useFocusedListenersChildrenAdapter.tsx

@@ -40,8 +40,8 @@ export default function useFocusedListenersChildrenAdapter({
     [focusedListeners, navigation]
   );
 
-  React.useEffect(
-    () => addListener?.('focus', listener),
-    [addListener, listener]
-  );
+  React.useEffect(() => addListener?.('focus', listener), [
+    addListener,
+    listener,
+  ]);
 }

packages/core/src/useKeyedChildListeners.tsx

@@ -5,6 +5,7 @@ import type { KeyedListenerMap } from './NavigationBuilderContext';
 /**
  * Hook which lets child navigators add getters to be called for obtaining rehydrated state.
  */
+
 export default function useKeyedChildListeners() {
   const { current: keyedListeners } = React.useRef<
     {
@@ -24,9 +25,11 @@ export default function useKeyedChildListeners() {
       key: string,
       listener: KeyedListenerMap[T]
     ) => {
+      // @ts-expect-error: listener should be correct type according to `type`
       keyedListeners[type][key] = listener;
 
       return () => {
+        // @ts-expect-error: listener should be correct type according to `type`
         keyedListeners[type][key] = undefined;
       };
     },

packages/core/src/useNavigation.tsx

@@ -22,5 +22,5 @@ export default function useNavigation<
   }
 
   // FIXME: Figure out a better way to do this
-  return (navigation ?? root) as unknown as T;
+  return ((navigation ?? root) as unknown) as T;
 }

packages/core/src/useNavigationBuilder.tsx

@@ -220,7 +220,7 @@ export default function useNavigationBuilder<
   const { children, screenListeners, ...rest } = options;
   const { current: router } = React.useRef<Router<State, any>>(
     createRouter({
-      ...(rest as unknown as RouterOptions),
+      ...((rest as unknown) as RouterOptions),
       ...(route?.params &&
       route.params.state == null &&
       route.params.initial !== false &&
@@ -230,8 +230,11 @@ export default function useNavigationBuilder<
     })
   );
 
-  const routeConfigs =
-    getRouteConfigsFromChildren<State, ScreenOptions, EventMap>(children);
+  const routeConfigs = getRouteConfigsFromChildren<
+    State,
+    ScreenOptions,
+    EventMap
+  >(children);
 
   const screens = routeConfigs.reduce<
     Record<string, ScreenConfigWithParent<State, ScreenOptions, EventMap>>

packages/core/src/useNavigationCache.tsx

@@ -7,7 +7,6 @@ import {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import NavigationBuilderContext from './NavigationBuilderContext';
 import type { NavigationHelpers, NavigationProp } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
 
@@ -52,8 +51,6 @@ export default function useNavigationCache<
   router,
   emitter,
 }: Options<State, EventMap>) {
-  const { stackRef } = React.useContext(NavigationBuilderContext);
-
   // Cache object which holds navigation objects for each screen
   // We use `React.useMemo` instead of `React.useRef` coz we want to invalidate it when deps change
   // In reality, these deps will rarely change, if ever
@@ -73,10 +70,6 @@ export default function useNavigationCache<
   >((acc, route) => {
     const previous = cache.current[route.key];
 
-    type Thunk =
-      | NavigationAction
-      | ((state: State) => NavigationAction | null | undefined);
-
     if (previous) {
       // If a cached navigation object already exists, reuse it
       acc[route.key] = previous;
@@ -84,7 +77,11 @@ export default function useNavigationCache<
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const { emit, ...rest } = navigation;
 
-      const dispatch = (thunk: Thunk) => {
+      const dispatch = (
+        thunk:
+          | NavigationAction
+          | ((state: State) => NavigationAction | null | undefined)
+      ) => {
         const action = typeof thunk === 'function' ? thunk(getState()) : thunk;
 
         if (action != null) {
@@ -92,36 +89,10 @@ export default function useNavigationCache<
         }
       };
 
-      const withStack = (callback: () => void) => {
-        let isStackSet = false;
-
-        try {
-          if (
-            process.env.NODE_ENV !== 'production' &&
-            stackRef &&
-            !stackRef.current
-          ) {
-            // Capture the stack trace for devtools
-            stackRef.current = new Error().stack;
-            isStackSet = true;
-          }
-
-          callback();
-        } finally {
-          if (isStackSet && stackRef) {
-            stackRef.current = undefined;
-          }
-        }
-      };
-
       const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
         (acc, name) => {
-          acc[name] = (...args: any) =>
-            withStack(() =>
-              // @ts-expect-error: name is a valid key, but TypeScript is dumb
-              dispatch(actions[name](...args))
-            );
-
+          // @ts-expect-error: name is a valid key, but TypeScript is dumb
+          acc[name] = (...args: any) => dispatch(actions[name](...args));
           return acc;
         },
         {}
@@ -132,7 +103,7 @@ export default function useNavigationCache<
         ...helpers,
         // FIXME: too much work to fix the types for now
         ...(emitter.create(route.key) as any),
-        dispatch: (thunk: Thunk) => withStack(() => dispatch(thunk)),
+        dispatch,
         setOptions: (options: object) =>
           setOptions((o) => ({
             ...o,

packages/core/src/useNavigationContainerRef.tsx

@@ -6,8 +6,9 @@ import type { NavigationContainerRefWithCurrent } from './types';
 export default function useNavigationContainerRef<
   ParamList extends {} = ReactNavigation.RootParamList
 >(): NavigationContainerRefWithCurrent<ParamList> {
-  const navigation =
-    React.useRef<NavigationContainerRefWithCurrent<ParamList> | null>(null);
+  const navigation = React.useRef<NavigationContainerRefWithCurrent<ParamList> | null>(
+    null
+  );
 
   if (navigation.current == null) {
     navigation.current = createNavigationContainerRef<ParamList>();

packages/core/src/useNavigationHelpers.tsx

@@ -17,7 +17,10 @@ import type { NavigationEventEmitter } from './useEventEmitter';
 PrivateValueStore;
 
 type Options<State extends NavigationState, Action extends NavigationAction> = {
-  onAction: (action: NavigationAction) => boolean;
+  onAction: (
+    action: NavigationAction,
+    visitedNavigators?: Set<string>
+  ) => boolean;
   getState: () => State;
   emitter: NavigationEventEmitter<any>;
   router: Router<State, Action>;

packages/core/src/useOnAction.tsx

@@ -52,8 +52,9 @@ export default function useOnAction({
     onDispatchAction,
   } = React.useContext(NavigationBuilderContext);
 
-  const routerConfigOptionsRef =
-    React.useRef<RouterConfigOptions>(routerConfigOptions);
+  const routerConfigOptionsRef = React.useRef<RouterConfigOptions>(
+    routerConfigOptions
+  );
 
   React.useEffect(() => {
     routerConfigOptionsRef.current = routerConfigOptions;
@@ -157,10 +158,10 @@ export default function useOnAction({
     beforeRemoveListeners,
   });
 
-  React.useEffect(
-    () => addListenerParent?.('action', onAction),
-    [addListenerParent, onAction]
-  );
+  React.useEffect(() => addListenerParent?.('action', onAction), [
+    addListenerParent,
+    onAction,
+  ]);
 
   return onAction;
 }

packages/devtools/CHANGELOG.md

@@ -3,17 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [6.0.0-next.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.14...@react-navigation/devtools@6.0.0-next.15) (2021-06-10)
-
-
-### Features
-
-* show stack trace in the flipper plugin ([97772af](https://github.com/react-navigation/react-navigation/commit/97772affa3c8f26489f0bdbfb6872ef4377b8ed1))
-
-
-
-
-
 # [6.0.0-next.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.13...@react-navigation/devtools@6.0.0-next.14) (2021-05-29)
 
 **Note:** Version bump only for package @react-navigation/devtools

packages/devtools/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/devtools",
   "description": "Developer tools for React Navigation",
-  "version": "6.0.0-next.15",
+  "version": "6.0.0-next.14",
   "keywords": [
     "react",
     "react-native",
@@ -37,18 +37,18 @@
   },
   "dependencies": {
     "deep-equal": "^2.0.5",
-    "nanoid": "^3.1.23"
+    "nanoid": "^3.1.22"
   },
   "devDependencies": {
-    "@react-navigation/core": "^6.0.0-next.14",
+    "@react-navigation/core": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
     "@types/deep-equal": "^1.0.1",
-    "@types/react": "^17.0.9",
+    "@types/react": "^16.9.53",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native-builder-bob": "^0.18.1",
     "react-native-flipper": "^0.80.0",
-    "typescript": "^4.3.2"
+    "typescript": "^4.2.3"
   },
   "peerDependencies": {
     "react": "*"

packages/devtools/src/useDevToolsBase.tsx

@@ -6,42 +6,20 @@ import type {
 import deepEqual from 'deep-equal';
 import * as React from 'react';
 
-type StackFrame = {
-  lineNumber: number | null;
-  column: number | null;
-  file: string | null;
-  methodName: string;
-};
-
-type StackFrameResult = StackFrame & {
-  collapse: boolean;
-};
-
-type StackResult = {
-  stack: StackFrameResult[];
-};
-
-type InitData = {
-  type: 'init';
-  state: NavigationState | undefined;
-};
-
-type ActionData = {
-  type: 'action';
-  action: NavigationAction;
-  state: NavigationState | undefined;
-  stack: string | undefined;
-};
-
 export default function useDevToolsBase(
   ref: React.RefObject<NavigationContainerRef<any>>,
-  callback: (result: InitData | ActionData) => void
+  callback: (
+    ...args:
+      | [type: 'init', state: NavigationState | undefined]
+      | [
+          type: 'action',
+          action: NavigationAction,
+          state: NavigationState | undefined
+        ]
+  ) => void
 ) {
   const lastStateRef = React.useRef<NavigationState | undefined>();
-  const lastActionRef =
-    React.useRef<
-      { action: NavigationAction; stack: string | undefined } | undefined
-    >();
+  const lastActionRef = React.useRef<NavigationAction | undefined>();
   const callbackRef = React.useRef(callback);
   const lastResetRef = React.useRef<NavigationState | undefined>(undefined);
 
@@ -49,73 +27,8 @@ export default function useDevToolsBase(
     callbackRef.current = callback;
   });
 
-  const symbolicate = async (stack: string | undefined) => {
-    if (stack == null) {
-      return undefined;
-    }
-
-    const frames = stack
-      .split('\n')
-      .slice(2)
-      .map((line): StackFrame | null => {
-        const partMatch = line.match(/^((.+)@)?(.+):(\d+):(\d+)$/);
-
-        if (!partMatch) {
-          return null;
-        }
-
-        const [, , methodName, file, lineNumber, column] = partMatch;
-
-        return {
-          methodName,
-          file,
-          lineNumber: Number(lineNumber),
-          column: Number(column),
-        };
-      })
-      .filter(Boolean) as StackFrame[];
-
-    const urlMatch = frames[0].file?.match(/^https?:\/\/.+(:\d+)?\//);
-
-    if (!urlMatch) {
-      return stack;
-    }
-
-    try {
-      const result: StackResult = await fetch(`${urlMatch[0]}symbolicate`, {
-        method: 'POST',
-        body: JSON.stringify({ stack: frames }),
-      }).then((res) => res.json());
-
-      return result.stack
-        .filter((it) => !it.collapse)
-        .map(
-          ({ methodName, file, lineNumber, column }) =>
-            `${methodName}@${file}:${lineNumber}:${column}`
-        )
-        .join('\n');
-    } catch (err) {
-      return stack;
-    }
-  };
-
-  const pendingPromiseRef = React.useRef<Promise<void>>(Promise.resolve());
-
-  const send = React.useCallback((data: ActionData) => {
-    // We need to make sure that our callbacks executed in the same order
-    pendingPromiseRef.current = pendingPromiseRef.current.then(async () => {
-      if (data.stack) {
-        const stack = await symbolicate(data.stack);
-
-        callbackRef.current({ ...data, stack });
-      } else {
-        callbackRef.current(data);
-      }
-    });
-  }, []);
-
   React.useEffect(() => {
-    let timer: any;
+    let timer: number;
     let unsubscribeAction: (() => void) | undefined;
     let unsubscribeState: (() => void) | undefined;
 
@@ -130,7 +43,7 @@ export default function useDevToolsBase(
               const state = ref.current.getRootState();
 
               lastStateRef.current = state;
-              callbackRef.current({ type: 'init', state });
+              callbackRef.current('init', state);
             }
           }, 100);
         });
@@ -143,14 +56,9 @@ export default function useDevToolsBase(
 
         if (e.data.noop) {
           // Even if the state didn't change, it's useful to show the action
-          send({
-            type: 'action',
-            action,
-            state: lastStateRef.current,
-            stack: e.data.stack,
-          });
+          callbackRef.current('action', action, lastStateRef.current);
         } else {
-          lastActionRef.current = e.data;
+          lastActionRef.current = action;
         }
       });
 
@@ -166,22 +74,17 @@ export default function useDevToolsBase(
 
         const state = navigation.getRootState();
         const lastState = lastStateRef.current;
-        const lastChange = lastActionRef.current;
+        const action = lastActionRef.current;
 
         lastActionRef.current = undefined;
         lastStateRef.current = state;
 
         // If we don't have an action and the state didn't change, then it's probably extraneous
-        if (lastChange === undefined && deepEqual(state, lastState)) {
+        if (action === undefined && deepEqual(state, lastState)) {
           return;
         }
 
-        send({
-          type: 'action',
-          action: lastChange ? lastChange.action : { type: '@@UNKNOWN' },
-          state,
-          stack: lastChange?.stack,
-        });
+        callbackRef.current('action', action ?? { type: '@@UNKNOWN' }, state);
       });
     };
 
@@ -192,7 +95,7 @@ export default function useDevToolsBase(
       unsubscribeState?.();
       clearTimeout(timer);
     };
-  }, [ref, send]);
+  }, [ref]);
 
   const resetRoot = React.useCallback(
     (state: NavigationState) => {

packages/devtools/src/useFlipper.tsx

@@ -26,26 +26,25 @@ export default function useFlipper(
 
   const connectionRef = React.useRef<Flipper.FlipperConnection>();
 
-  const { resetRoot } = useDevToolsBase(ref, (result) => {
+  const { resetRoot } = useDevToolsBase(ref, (...args) => {
     const connection = connectionRef.current;
 
     if (!connection) {
       return;
     }
 
-    switch (result.type) {
+    switch (args[0]) {
       case 'init':
         connection.send('init', {
           id: nanoid(),
-          state: result.state,
+          state: args[1],
         });
         break;
       case 'action':
         connection.send('action', {
           id: nanoid(),
-          action: result.action,
-          state: result.state,
-          stack: result.stack,
+          action: args[1],
+          state: args[2],
         });
         break;
     }

packages/devtools/src/useReduxDevToolsExtension.tsx

@@ -32,19 +32,19 @@ export default function useReduxDevToolsExtension(
     });
   }
 
-  const { resetRoot } = useDevToolsBase(ref, (result) => {
+  const { resetRoot } = useDevToolsBase(ref, (...args) => {
     const devTools = devToolsRef.current;
 
     if (!devTools) {
       return;
     }
 
-    switch (result.type) {
+    switch (args[0]) {
       case 'init':
-        devTools.init(result.state);
+        devTools.init(args[1]);
         break;
       case 'action':
-        devTools.send(result.action, result.state);
+        devTools.send(args[1], args[2]);
         break;
     }
   });

packages/drawer/CHANGELOG.md

@@ -3,22 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [6.0.0-next.18](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.17...@react-navigation/drawer@6.0.0-next.18) (2021-06-10)
-
-**Note:** Version bump only for package @react-navigation/drawer
-
-
-
-
-
-# [6.0.0-next.17](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.16...@react-navigation/drawer@6.0.0-next.17) (2021-06-01)
-
-**Note:** Version bump only for package @react-navigation/drawer
-
-
-
-
-
 # [6.0.0-next.16](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.15...@react-navigation/drawer@6.0.0-next.16) (2021-05-29)
 
 **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": "6.0.0-next.18",
+  "version": "6.0.0-next.16",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,24 +41,24 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.18",
+    "@react-navigation/elements": "^1.0.0-next.16",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.14",
+    "@react-navigation/native": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
-    "@types/react": "^17.0.9",
-    "@types/react-native": "~0.64.9",
+    "@types/react": "^16.9.53",
+    "@types/react-native": "~0.64.4",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.4",
     "react-native-builder-bob": "^0.18.1",
     "react-native-gesture-handler": "~1.10.2",
-    "react-native-reanimated": "~2.2.0",
+    "react-native-reanimated": "~2.1.0",
     "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.3.0",
-    "typescript": "^4.3.2"
+    "react-native-screens": "^3.0.0",
+    "typescript": "^4.2.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^6.0.0",

packages/drawer/src/navigators/createDrawerNavigator.tsx

@@ -74,22 +74,26 @@ function DrawerNavigator({
     );
   }
 
-  const { state, descriptors, navigation, NavigationContent } =
-    useNavigationBuilder<
-      DrawerNavigationState<ParamListBase>,
-      DrawerRouterOptions,
-      DrawerActionHelpers<ParamListBase>,
-      DrawerNavigationOptions,
-      DrawerNavigationEventMap
-    >(DrawerRouter, {
-      initialRouteName,
-      defaultStatus,
-      backBehavior,
-      children,
-      screenListeners,
-      screenOptions,
-      defaultScreenOptions,
-    });
+  const {
+    state,
+    descriptors,
+    navigation,
+    NavigationContent,
+  } = useNavigationBuilder<
+    DrawerNavigationState<ParamListBase>,
+    DrawerRouterOptions,
+    DrawerActionHelpers<ParamListBase>,
+    DrawerNavigationOptions,
+    DrawerNavigationEventMap
+  >(DrawerRouter, {
+    initialRouteName,
+    defaultStatus,
+    backBehavior,
+    children,
+    screenListeners,
+    screenOptions,
+    defaultScreenOptions,
+  });
 
   return (
     <NavigationContent>

packages/drawer/src/types.tsx

@@ -49,174 +49,231 @@ export type DrawerNavigationConfig = {
   useLegacyImplementation?: boolean;
 };
 
-export type DrawerNavigationOptions = HeaderOptions & {
+export type NativeScreenTraitsProps = {
   /**
-   * Title text for the screen.
+   * In which orientation should the screen appear. It requires having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
+   * The following values are currently supported:
+   * - "default" - resolves to "all" without "portrait_down" on iOS. On Android, this lets the system decide the best orientation.
+   * - "all" – all orientations are permitted
+   * - "portrait" – portrait orientations are permitted
+   * - "portrait_up" – right-side portrait orientation is permitted
+   * - "portrait_down" – upside-down portrait orientation is permitted
+   * - "landscape" – landscape orientations are permitted
+   * - "landscape_left" – landscape-left orientation is permitted
+   * - "landscape_right" – landscape-right orientation is permitted
    */
-  title?: string;
-
+  orientation?:
+    | 'default'
+    | 'all'
+    | 'portrait'
+    | 'portrait_up'
+    | 'portrait_down'
+    | 'landscape'
+    | 'landscape_left'
+    | 'landscape_right';
   /**
-   * Whether this screens should render the first time it's accessed. Defaults to `true`.
-   * Set it to `false` if you want to render the screen on initial render.
+   * Sets the status bar animation (similar to the `StatusBar` component). Requires enabling (or deleting)
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  lazy?: boolean;
-
+  statusBarAnimation?: 'none' | 'fade' | 'slide';
   /**
-   * Function that returns a React Element to display as a header.
+   * Sets the status bar color (similar to the `StatusBar` component).
+   * Requires enabled `react-native-screens` version >=3.3.0.
+   *
+   * @platform android
    */
-  header?: (props: DrawerHeaderProps) => React.ReactNode;
-
+  statusBarColor?: string;
   /**
-   * Whether to show the header. Setting this to `false` hides the header.
-   * Defaults to `true`.
+   * Whether the status bar should be hidden on this screen. Requires enabling (or deleting)
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  headerShown?: boolean;
-
+  statusBarHidden?: boolean;
   /**
-   * Title string of a screen displayed in the drawer
-   * or a function that given { focused: boolean, color: string } returns a React.Node
-   * When undefined, scene title is used.
+   * Sets the status bar color (similar to the `StatusBar` component). Requires enabling (or deleting)
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  drawerLabel?:
-    | string
-    | ((props: { color: string; focused: boolean }) => React.ReactNode);
-
+  statusBarStyle?: 'inverted' | 'auto' | 'light' | 'dark';
   /**
-   * A function that given { focused: boolean, color: string } returns a React.Node to display an icon the drawer.
+   * Sets the translucency of the status bar. Defaults to true. Requires enabled `react-native-screens` version >=3.3.0.
+   *
+   * @platform android
    */
-  drawerIcon?: (props: {
-    color: string;
-    size: number;
-    focused: boolean;
-  }) => React.ReactNode;
-
-  /**
-   * Color for the icon and label in the active item in the drawer.
-   */
-  drawerActiveTintColor?: string;
-
-  /**
-   * Background color for the active item in the drawer.
-   */
-  drawerActiveBackgroundColor?: string;
-
-  /**
-   * Color for the icon and label in the inactive items in the drawer.
-   */
-  drawerInactiveTintColor?: string;
-
-  /**
-   * Background color for the inactive items in the drawer.
-   */
-  drawerInactiveBackgroundColor?: string;
-
-  /**
-   * Style object for the single item, which can contain an icon and/or a label.
-   */
-  drawerItemStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Style object to apply to the `Text` inside content section which renders a label.
-   */
-  drawerLabelStyle?: StyleProp<TextStyle>;
-
-  /**
-   * Style object for the content section.
-   */
-  drawerContentContainerStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Style object for the wrapper view.
-   */
-  drawerContentStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Style object for the drawer component.
-   * You can pass a custom background color for a drawer or a custom width here.
-   */
-  drawerStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Position of the drawer on the screen. Defaults to `left`.
-   */
-  drawerPosition?: 'left' | 'right';
-
-  /**
-   * Type of the drawer. It determines how the drawer looks and animates.
-   * - `front`: Traditional drawer which covers the screen with a overlay behind it.
-   * - `back`: The drawer is revealed behind the screen on swipe.
-   * - `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
-   * - `permanent`: A permanent drawer is shown as a sidebar.
-   */
-  drawerType?: 'front' | 'back' | 'slide' | 'permanent';
-
-  /**
-   * Whether the statusbar should be hidden when the drawer is pulled or opens,
-   */
-  drawerHideStatusBarOnOpen?: boolean;
-
-  /**
-   * Animation of the statusbar when hiding it. use in combination with `drawerHideStatusBarOnOpen`.
-   */
-  drawerStatusBarAnimation?: 'slide' | 'none' | 'fade';
-
-  /**
-   * Color of the overlay to be displayed on top of the content view when drawer gets open.
-   * The opacity is animated from `0` to `1` when the drawer opens.
-   */
-  overlayColor?: string;
-
-  /**
-   * Style object for the component wrapping the screen content.
-   */
-  sceneContainerStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Whether you can use gestures to open or close the drawer.
-   * Setting this to `false` disables swipe gestures as well as tap on overlay to close.
-   * See `swipeEnabled` to disable only the swipe gesture.
-   * Defaults to `true`.
-   * Not supported on Web.
-   */
-  gestureEnabled?: boolean;
-
-  /**
-   * Props to pass to the underlying pan gesture handler.
-   * Not supported on Web.
-   */
-  gestureHandlerProps?: PanGestureHandlerProperties;
-
-  /**
-   * Whether you can use swipe gestures to open or close the drawer.
-   * Defaults to `true`.
-   * Not supported on Web.
-   */
-  swipeEnabled?: boolean;
-
-  /**
-   * How far from the edge of the screen the swipe gesture should activate.
-   * Not supported on Web.
-   */
-  swipeEdgeWidth?: number;
-
-  /**
-   * Minimum swipe distance threshold that should activate opening the drawer.
-   */
-  swipeMinDistance?: number;
-
-  /**
-   * Whether the keyboard should be dismissed when the swipe gesture begins.
-   * Defaults to `'on-drag'`. Set to `'none'` to disable keyboard handling.
-   */
-  keyboardDismissMode?: 'on-drag' | 'none';
-
-  /**
-   * Whether this screen should be unmounted when navigating away from it.
-   * Defaults to `false`.
-   */
-  unmountOnBlur?: boolean;
+  statusBarTranslucent?: boolean;
 };
 
+export type DrawerNavigationOptions = HeaderOptions &
+  NativeScreenTraitsProps & {
+    /**
+     * Title text for the screen.
+     */
+    title?: string;
+
+    /**
+     * Whether this screens should render the first time it's accessed. Defaults to `true`.
+     * Set it to `false` if you want to render the screen on initial render.
+     */
+    lazy?: boolean;
+
+    /**
+     * Function that returns a React Element to display as a header.
+     */
+    header?: (props: DrawerHeaderProps) => React.ReactNode;
+
+    /**
+     * Whether to show the header. Setting this to `false` hides the header.
+     * Defaults to `true`.
+     */
+    headerShown?: boolean;
+
+    /**
+     * Title string of a screen displayed in the drawer
+     * or a function that given { focused: boolean, color: string } returns a React.Node
+     * When undefined, scene title is used.
+     */
+    drawerLabel?:
+      | string
+      | ((props: { color: string; focused: boolean }) => React.ReactNode);
+
+    /**
+     * A function that given { focused: boolean, color: string } returns a React.Node to display an icon the drawer.
+     */
+    drawerIcon?: (props: {
+      color: string;
+      size: number;
+      focused: boolean;
+    }) => React.ReactNode;
+
+    /**
+     * Color for the icon and label in the active item in the drawer.
+     */
+    drawerActiveTintColor?: string;
+
+    /**
+     * Background color for the active item in the drawer.
+     */
+    drawerActiveBackgroundColor?: string;
+
+    /**
+     * Color for the icon and label in the inactive items in the drawer.
+     */
+    drawerInactiveTintColor?: string;
+
+    /**
+     * Background color for the inactive items in the drawer.
+     */
+    drawerInactiveBackgroundColor?: string;
+
+    /**
+     * Style object for the single item, which can contain an icon and/or a label.
+     */
+    drawerItemStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Style object to apply to the `Text` inside content section which renders a label.
+     */
+    drawerLabelStyle?: StyleProp<TextStyle>;
+
+    /**
+     * Style object for the content section.
+     */
+    drawerContentContainerStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Style object for the wrapper view.
+     */
+    drawerContentStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Style object for the drawer component.
+     * You can pass a custom background color for a drawer or a custom width here.
+     */
+    drawerStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Position of the drawer on the screen. Defaults to `left`.
+     */
+    drawerPosition?: 'left' | 'right';
+
+    /**
+     * Type of the drawer. It determines how the drawer looks and animates.
+     * - `front`: Traditional drawer which covers the screen with a overlay behind it.
+     * - `back`: The drawer is revealed behind the screen on swipe.
+     * - `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
+     * - `permanent`: A permanent drawer is shown as a sidebar.
+     */
+    drawerType?: 'front' | 'back' | 'slide' | 'permanent';
+
+    /**
+     * Whether the statusbar should be hidden when the drawer is pulled or opens,
+     */
+    drawerHideStatusBarOnOpen?: boolean;
+
+    /**
+     * Animation of the statusbar when hiding it. use in combination with `drawerHideStatusBarOnOpen`.
+     */
+    drawerStatusBarAnimation?: 'slide' | 'none' | 'fade';
+
+    /**
+     * Color of the overlay to be displayed on top of the content view when drawer gets open.
+     * The opacity is animated from `0` to `1` when the drawer opens.
+     */
+    overlayColor?: string;
+
+    /**
+     * Style object for the component wrapping the screen content.
+     */
+    sceneContainerStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Whether you can use gestures to open or close the drawer.
+     * Setting this to `false` disables swipe gestures as well as tap on overlay to close.
+     * See `swipeEnabled` to disable only the swipe gesture.
+     * Defaults to `true`.
+     * Not supported on Web.
+     */
+    gestureEnabled?: boolean;
+
+    /**
+     * Props to pass to the underlying pan gesture handler.
+     * Not supported on Web.
+     */
+    gestureHandlerProps?: PanGestureHandlerProperties;
+
+    /**
+     * Whether you can use swipe gestures to open or close the drawer.
+     * Defaults to `true`.
+     * Not supported on Web.
+     */
+    swipeEnabled?: boolean;
+
+    /**
+     * How far from the edge of the screen the swipe gesture should activate.
+     * Not supported on Web.
+     */
+    swipeEdgeWidth?: number;
+
+    /**
+     * Minimum swipe distance threshold that should activate opening the drawer.
+     */
+    swipeMinDistance?: number;
+
+    /**
+     * Whether the keyboard should be dismissed when the swipe gesture begins.
+     * Defaults to `'on-drag'`. Set to `'none'` to disable keyboard handling.
+     */
+    keyboardDismissMode?: 'on-drag' | 'none';
+
+    /**
+     * Whether this screen should be unmounted when navigating away from it.
+     * Defaults to `false`.
+     */
+    unmountOnBlur?: boolean;
+  };
+
 export type DrawerContentComponentProps = {
   state: DrawerNavigationState<ParamListBase>;
   navigation: DrawerNavigationHelpers;

packages/drawer/src/utils/DrawerStatusContext.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
-const DrawerStatusContext =
-  React.createContext<'open' | 'closed' | undefined>(undefined);
+const DrawerStatusContext = React.createContext<'open' | 'closed' | undefined>(
+  undefined
+);
 
 export default DrawerStatusContext;

packages/drawer/src/views/DrawerContent.tsx

@@ -9,8 +9,9 @@ export default function DrawerContent({
   state,
   ...rest
 }: DrawerContentComponentProps) {
-  const { drawerContentStyle, drawerContentContainerStyle } =
-    descriptors[state.routes[state.index].key].options;
+  const { drawerContentStyle, drawerContentContainerStyle } = descriptors[
+    state.routes[state.index].key
+  ].options;
 
   return (
     <DrawerContentScrollView

packages/drawer/src/views/DrawerItemList.tsx

@@ -26,7 +26,7 @@ export default function DrawerItemList({
 }: Props) {
   const buildLink = useLinkBuilder();
 
-  return state.routes.map((route, i) => {
+  return (state.routes.map((route, i) => {
     const focused = i === state.index;
     const {
       title,
@@ -69,5 +69,5 @@ export default function DrawerItemList({
         }}
       />
     );
-  }) as React.ReactNode as React.ReactElement;
+  }) as React.ReactNode) as React.ReactElement;
 }

packages/drawer/src/views/DrawerView.tsx

@@ -195,7 +195,16 @@ function DrawerViewBase({
       >
         {state.routes.map((route, index) => {
           const descriptor = descriptors[route.key];
-          const { lazy = true, unmountOnBlur } = descriptor.options;
+          const {
+            lazy = true,
+            unmountOnBlur,
+            orientation,
+            statusBarAnimation,
+            statusBarColor,
+            statusBarHidden,
+            statusBarStyle,
+            statusBarTranslucent,
+          } = descriptor.options;
           const isFocused = state.index === index;
 
           if (unmountOnBlur && !isFocused) {
@@ -228,6 +237,12 @@ function DrawerViewBase({
               style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]}
               visible={isFocused}
               enabled={detachInactiveScreens}
+              orientation={orientation}
+              statusBarAnimation={statusBarAnimation}
+              statusBarColor={statusBarColor}
+              statusBarHidden={statusBarHidden}
+              statusBarStyle={statusBarStyle}
+              statusBarTranslucent={statusBarTranslucent}
             >
               <Screen
                 focused={isFocused}
@@ -238,8 +253,7 @@ function DrawerViewBase({
                 header={header({
                   layout: dimensions,
                   route: descriptor.route,
-                  navigation:
-                    descriptor.navigation as DrawerNavigationProp<ParamListBase>,
+                  navigation: descriptor.navigation as DrawerNavigationProp<ParamListBase>,
                   options: descriptor.options,
                 })}
                 style={sceneContainerStyle}

packages/drawer/src/views/GestureHandler.tsx

@@ -9,11 +9,9 @@ const Dummy: any = ({ children }: { children: React.ReactNode }) => (
   <>{children}</>
 );
 
-export const PanGestureHandler =
-  Dummy as React.ComponentType<PanGestureHandlerProperties>;
+export const PanGestureHandler = Dummy as React.ComponentType<PanGestureHandlerProperties>;
 
-export const TapGestureHandler =
-  Dummy as React.ComponentType<TapGestureHandlerProperties>;
+export const TapGestureHandler = Dummy as React.ComponentType<TapGestureHandlerProperties>;
 
 export const GestureHandlerRootView = View;
 

packages/drawer/src/views/ScreenFallback.tsx

@@ -2,7 +2,9 @@ import { ResourceSavingView } from '@react-navigation/elements';
 import * as React from 'react';
 import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
 
-type Props = {
+import type { NativeScreenTraitsProps } from '../types';
+
+type Props = NativeScreenTraitsProps & {
   visible: boolean;
   children: React.ReactNode;
   enabled: boolean;

packages/drawer/src/views/legacy/Drawer.tsx

@@ -471,8 +471,10 @@ export default class DrawerView extends React.Component<DrawerProps> {
   };
 
   private toggleStatusBar = (hidden: boolean) => {
-    const { hideStatusBarOnOpen: hideStatusBar, statusBarAnimation } =
-      this.props;
+    const {
+      hideStatusBarOnOpen: hideStatusBar,
+      statusBarAnimation,
+    } = this.props;
 
     if (hideStatusBar && this.isStatusBarHidden !== hidden) {
       this.isStatusBarHidden = hidden;

packages/elements/CHANGELOG.md

@@ -3,25 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [1.0.0-next.18](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.17...@react-navigation/elements@1.0.0-next.18) (2021-06-10)
-
-**Note:** Version bump only for package @react-navigation/elements
-
-
-
-
-
-# [1.0.0-next.17](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.16...@react-navigation/elements@1.0.0-next.17) (2021-06-01)
-
-
-### Bug Fixes
-
-* tweak opacity animation for PlatformPressable ([b46c433](https://github.com/react-navigation/react-navigation/commit/b46c433f1e012fc3215ec32ac787c7c018963505))
-
-
-
-
-
 # [1.0.0-next.16](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.15...@react-navigation/elements@1.0.0-next.16) (2021-05-29)
 
 **Note:** Version bump only for package @react-navigation/elements

packages/elements/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "1.0.0-next.18",
+  "version": "1.0.0-next.16",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -37,16 +37,16 @@
     "clean": "del lib"
   },
   "devDependencies": {
-    "@react-native-masked-view/masked-view": "^0.2.4",
-    "@react-navigation/native": "^6.0.0-next.14",
+    "@react-native-masked-view/masked-view": "^0.2.3",
+    "@react-navigation/native": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
-    "@types/react": "^17.0.9",
-    "@types/react-native": "~0.64.9",
+    "@types/react": "^16.9.53",
+    "@types/react-native": "~0.64.4",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.4",
     "react-native-builder-bob": "^0.18.1",
-    "typescript": "^4.3.2"
+    "typescript": "^4.2.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^6.0.0",

packages/elements/src/Header/HeaderBackButton.tsx

@@ -35,8 +35,9 @@ export default function HeaderBackButton({
 }: HeaderBackButtonProps) {
   const { colors } = useTheme();
 
-  const [initialLabelWidth, setInitialLabelWidth] =
-    React.useState<undefined | number>(undefined);
+  const [initialLabelWidth, setInitialLabelWidth] = React.useState<
+    undefined | number
+  >(undefined);
 
   const tintColor =
     customTintColor !== undefined

packages/elements/src/MaskedViewNative.tsx

@@ -4,8 +4,7 @@
 import * as React from 'react';
 import { UIManager } from 'react-native';
 
-type MaskedViewType =
-  typeof import('@react-native-masked-view/masked-view').default;
+type MaskedViewType = typeof import('@react-native-masked-view/masked-view').default;
 
 type Props = React.ComponentProps<MaskedViewType> & {
   children: React.ReactElement;

packages/flipper-plugin-react-navigation/CHANGELOG.md

@@ -3,17 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [1.2.0](https://github.com/react-navigation/react-navigation/compare/flipper-plugin-react-navigation@1.1.4...flipper-plugin-react-navigation@1.2.0) (2021-06-10)
-
-
-### Features
-
-* show stack trace in the flipper plugin ([97772af](https://github.com/react-navigation/react-navigation/commit/97772affa3c8f26489f0bdbfb6872ef4377b8ed1))
-
-
-
-
-
 ## [1.1.4](https://github.com/react-navigation/react-navigation/compare/flipper-plugin-react-navigation@1.1.3...flipper-plugin-react-navigation@1.1.4) (2021-05-29)
 
 **Note:** Version bump only for package flipper-plugin-react-navigation

packages/flipper-plugin-react-navigation/package.json

@@ -2,7 +2,7 @@
   "$schema": "https://fbflipper.com/schemas/plugin-package/v2.json",
   "name": "flipper-plugin-react-navigation",
   "description": "Developer tools for React Navigation",
-  "version": "1.2.0",
+  "version": "1.1.4",
   "main": "dist/bundle.js",
   "license": "MIT",
   "keywords": [
@@ -34,13 +34,13 @@
     "@ant-design/icons": "^4.6.2",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@react-navigation/core": "^6.0.0-next.14",
-    "@types/react": "^17.0.9",
-    "@types/react-dom": "^17.0.6",
-    "antd": "^4.16.1",
-    "flipper": "^0.92.0",
-    "flipper-pkg": "^0.92.0",
-    "flipper-plugin": "^0.92.0",
+    "@react-navigation/core": "^6.0.0-next.13",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.2",
+    "antd": "^4.14.0",
+    "flipper": "^0.90.2",
+    "flipper-pkg": "^0.90.2",
+    "flipper-plugin": "^0.90.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }

packages/flipper-plugin-react-navigation/src/LinkingTester.tsx

@@ -19,11 +19,13 @@ export function LinkingTester({ linking, active }: Props) {
   const [rawConfig, setRawConfig] = React.useState('');
   const [path, setPath] = React.useState('');
 
-  const [state, setState] =
-    React.useState<ReturnType<typeof getStateFromPath> | undefined>();
+  const [state, setState] = React.useState<
+    ReturnType<typeof getStateFromPath> | undefined
+  >();
 
-  const [action, setAction] =
-    React.useState<ReturnType<typeof getActionFromState> | undefined>();
+  const [action, setAction] = React.useState<
+    ReturnType<typeof getActionFromState> | undefined
+  >();
 
   const [error, setError] = React.useState<string | undefined>();
 

packages/flipper-plugin-react-navigation/src/Logs.tsx

@@ -45,11 +45,7 @@ export function Logs({ active, logs, index, resetTo }: Props) {
       {active ? (
         <DetailSidebar>
           {selectedItem && (
-            <Sidebar
-              action={selectedItem.action}
-              state={selectedItem.state}
-              stack={selectedItem.stack}
-            />
+            <Sidebar action={selectedItem.action} state={selectedItem.state} />
           )}
         </DetailSidebar>
       ) : null}

packages/flipper-plugin-react-navigation/src/Sidebar.tsx

@@ -1,5 +1,4 @@
-import { Layout, ManagedDataInspector, styled } from 'flipper';
-import { theme } from 'flipper-plugin';
+import { Layout, ManagedDataInspector } from 'flipper';
 import * as React from 'react';
 
 import { Title4 } from './Typography';
@@ -7,65 +6,12 @@ import { Title4 } from './Typography';
 export function Sidebar({
   action,
   state,
-  stack,
 }: {
   action: object;
   state: object | undefined;
-  stack: string | undefined;
 }) {
   return (
     <Layout.Container gap pad>
-      {stack ? (
-        <>
-          <Title4>Stack</Title4>
-          <Code>
-            {stack.split('\n').map((line, index) => {
-              const match = line.match(/^(.+)@(.+):(\d+):(\d+)$/);
-
-              if (match) {
-                const [, methodName, file, lineNumber, column] = match;
-
-                if (file.includes('/node_modules/@react-navigation')) {
-                  return null;
-                }
-
-                return (
-                  // eslint-disable-next-line react/no-array-index-key
-                  <div key={index}>
-                    {methodName.split('.').map((part, i, self) => {
-                      if (i === self.length - 1 && i !== 0) {
-                        return <Method>{part}</Method>;
-                      }
-
-                      if (self.length !== 1) {
-                        return (
-                          <>
-                            {part}
-                            <Separator>.</Separator>
-                          </>
-                        );
-                      }
-
-                      return part;
-                    })}{' '}
-                    <Separator>(</Separator>
-                    <StringToken>{file.split('/').pop()}</StringToken>
-                    <Separator>:</Separator>
-                    <NumberToken>{lineNumber}</NumberToken>:
-                    <NumberToken>{column}</NumberToken>
-                    <Separator>)</Separator>
-                  </div>
-                );
-              }
-
-              return (
-                // eslint-disable-next-line react/no-array-index-key
-                <div key={index}>{line}</div>
-              );
-            })}
-          </Code>
-        </>
-      ) : null}
       <Title4>Action</Title4>
       <ManagedDataInspector data={action} expandRoot={false} />
       <Title4>State</Title4>
@@ -73,25 +19,3 @@ export function Sidebar({
     </Layout.Container>
   );
 }
-
-const Code = styled.div({
-  fontSize: 11,
-  fontFamily: theme.monospace.fontFamily,
-  margin: '7.5px 0px',
-});
-
-const StringToken = styled.span({
-  color: 'rgb(224, 76, 96)',
-});
-
-const NumberToken = styled.span({
-  color: 'rgb(77, 187, 166)',
-});
-
-const Method = styled.span({
-  color: 'rgb(123, 100, 192)',
-});
-
-const Separator = styled.span({
-  color: '#555',
-});

packages/flipper-plugin-react-navigation/src/Typography.tsx

@@ -1,9 +1,8 @@
 import { styled } from 'flipper';
-import { theme } from 'flipper-plugin';
 
 export const Title4 = styled.h4({
   fontWeight: 600,
-  fontSize: theme.fontSize.default,
+  fontSize: 14,
   lineHeight: 1.4,
   letterSpacing: -0.24,
   marginBottom: 0,

packages/flipper-plugin-react-navigation/src/types.tsx

@@ -30,7 +30,6 @@ export type Log = {
   id: string;
   action: NavigationAction;
   state: NavigationState | undefined;
-  stack: string | undefined;
 };
 
 export type StoreType = {

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,22 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [6.0.0-next.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.14...@react-navigation/material-bottom-tabs@6.0.0-next.15) (2021-06-10)
-
-**Note:** Version bump only for package @react-navigation/material-bottom-tabs
-
-
-
-
-
-# [6.0.0-next.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.13...@react-navigation/material-bottom-tabs@6.0.0-next.14) (2021-06-01)
-
-**Note:** Version bump only for package @react-navigation/material-bottom-tabs
-
-
-
-
-
 # [6.0.0-next.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.12...@react-navigation/material-bottom-tabs@6.0.0-next.13) (2021-05-29)
 
 **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": "6.0.0-next.15",
+  "version": "6.0.0-next.13",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,13 +41,13 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.18"
+    "@react-navigation/elements": "^1.0.0-next.16"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.14",
+    "@react-navigation/native": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
-    "@types/react": "^17.0.9",
-    "@types/react-native": "~0.64.9",
+    "@types/react": "^16.9.53",
+    "@types/react-native": "~0.64.4",
     "@types/react-native-vector-icons": "^6.4.6",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
@@ -56,7 +56,7 @@
     "react-native-paper": "^4.9.1",
     "react-native-safe-area-context": "~3.2.0",
     "react-native-vector-icons": "^8.1.0",
-    "typescript": "^4.3.2"
+    "typescript": "^4.2.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^6.0.0",

packages/material-bottom-tabs/src/navigators/createMaterialBottomTabNavigator.tsx

@@ -34,20 +34,24 @@ function MaterialBottomTabNavigator({
   screenOptions,
   ...rest
 }: Props) {
-  const { state, descriptors, navigation, NavigationContent } =
-    useNavigationBuilder<
-      TabNavigationState<ParamListBase>,
-      TabRouterOptions,
-      TabActionHelpers<ParamListBase>,
-      MaterialBottomTabNavigationOptions,
-      MaterialBottomTabNavigationEventMap
-    >(TabRouter, {
-      initialRouteName,
-      backBehavior,
-      children,
-      screenListeners,
-      screenOptions,
-    });
+  const {
+    state,
+    descriptors,
+    navigation,
+    NavigationContent,
+  } = useNavigationBuilder<
+    TabNavigationState<ParamListBase>,
+    TabRouterOptions,
+    TabActionHelpers<ParamListBase>,
+    MaterialBottomTabNavigationOptions,
+    MaterialBottomTabNavigationEventMap
+  >(TabRouter, {
+    initialRouteName,
+    backBehavior,
+    children,
+    screenListeners,
+    screenOptions,
+  });
 
   return (
     <NavigationContent>

packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx

@@ -37,8 +37,8 @@ let MaterialCommunityIcons: React.ComponentType<
 
 try {
   // Optionally require vector-icons
-  MaterialCommunityIcons =
-    require('react-native-vector-icons/MaterialCommunityIcons').default;
+  MaterialCommunityIcons = require('react-native-vector-icons/MaterialCommunityIcons')
+    .default;
 } catch (e) {
   let isErrorLogged = false;
 

packages/material-top-tabs/CHANGELOG.md

@@ -3,14 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [6.0.0-next.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.14...@react-navigation/material-top-tabs@6.0.0-next.15) (2021-06-10)
-
-**Note:** Version bump only for package @react-navigation/material-top-tabs
-
-
-
-
-
 # [6.0.0-next.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.13...@react-navigation/material-top-tabs@6.0.0-next.14) (2021-05-29)
 
 **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": "6.0.0-next.15",
+  "version": "6.0.0-next.14",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -45,17 +45,17 @@
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.14",
+    "@react-navigation/native": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
-    "@types/react": "^17.0.9",
-    "@types/react-native": "~0.64.9",
+    "@types/react": "^16.9.53",
+    "@types/react-native": "~0.64.4",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.4",
     "react-native-builder-bob": "^0.18.1",
-    "react-native-pager-view": "^5.1.10",
+    "react-native-pager-view": "^5.0.12",
     "react-native-tab-view": "^3.0.1",
-    "typescript": "^4.3.2"
+    "typescript": "^4.2.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^6.0.0",

packages/material-top-tabs/src/navigators/createMaterialTopTabNavigator.tsx

@@ -78,20 +78,24 @@ function MaterialTopTabNavigator({
     );
   }
 
-  const { state, descriptors, navigation, NavigationContent } =
-    useNavigationBuilder<
-      TabNavigationState<ParamListBase>,
-      TabRouterOptions,
-      TabActionHelpers<ParamListBase>,
-      MaterialTopTabNavigationOptions,
-      MaterialTopTabNavigationEventMap
-    >(TabRouter, {
-      initialRouteName,
-      backBehavior,
-      children,
-      screenListeners,
-      screenOptions,
-    });
+  const {
+    state,
+    descriptors,
+    navigation,
+    NavigationContent,
+  } = useNavigationBuilder<
+    TabNavigationState<ParamListBase>,
+    TabRouterOptions,
+    TabActionHelpers<ParamListBase>,
+    MaterialTopTabNavigationOptions,
+    MaterialTopTabNavigationEventMap
+  >(TabRouter, {
+    initialRouteName,
+    backBehavior,
+    children,
+    screenListeners,
+    screenOptions,
+  });
 
   return (
     <NavigationContent>

packages/native-stack/CHANGELOG.md

@@ -3,22 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [6.0.0-next.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0-next.7...@react-navigation/native-stack@6.0.0-next.8) (2021-06-10)
-
-**Note:** Version bump only for package @react-navigation/native-stack
-
-
-
-
-
-# [6.0.0-next.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0-next.6...@react-navigation/native-stack@6.0.0-next.7) (2021-06-01)
-
-**Note:** Version bump only for package @react-navigation/native-stack
-
-
-
-
-
 # [6.0.0-next.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0-next.5...@react-navigation/native-stack@6.0.0-next.6) (2021-05-29)
 
 **Note:** Version bump only for package @react-navigation/native-stack

packages/native-stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native-stack",
   "description": "Native stack navigator using react-native-screens",
-  "version": "6.0.0-next.8",
+  "version": "6.0.0-next.6",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,19 +41,19 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.18",
+    "@react-navigation/elements": "^1.0.0-next.16",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.14",
+    "@react-navigation/native": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
-    "@types/react": "^17.0.9",
-    "@types/react-native": "~0.64.9",
+    "@types/react": "^16.9.53",
+    "@types/react-native": "~0.64.4",
     "react": "~16.13.1",
     "react-native": "~0.63.4",
     "react-native-builder-bob": "^0.18.1",
-    "react-native-screens": "^3.3.0",
-    "typescript": "^4.3.2"
+    "react-native-screens": "^3.0.0",
+    "typescript": "^4.2.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^6.0.0",

packages/native-stack/src/types.tsx

@@ -9,12 +9,119 @@ import type {
   StackNavigationState,
   StackRouterOptions,
 } from '@react-navigation/native';
-import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
 import type {
-  ScreenProps,
-  ScreenStackHeaderConfigProps,
-  SearchBarProps,
-} from 'react-native-screens';
+  ImageSourcePropType,
+  NativeSyntheticEvent,
+  StyleProp,
+  TargetedEvent,
+  TextInputFocusEventData,
+  ViewStyle,
+} from 'react-native';
+
+export type PresentationTypes =
+  | 'card'
+  | 'modal'
+  | 'transparentModal'
+  | 'containedModal'
+  | 'containedTransparentModal'
+  | 'fullScreenModal'
+  | 'formSheet';
+export type AnimationTypes =
+  | 'default'
+  | 'fade'
+  | 'flip'
+  | 'none'
+  | 'simple_push'
+  | 'slide_from_bottom'
+  | 'slide_from_right'
+  | 'slide_from_left';
+export type BlurEffectTypes =
+  | 'extraLight'
+  | 'light'
+  | 'dark'
+  | 'regular'
+  | 'prominent'
+  | 'systemUltraThinMaterial'
+  | 'systemThinMaterial'
+  | 'systemMaterial'
+  | 'systemThickMaterial'
+  | 'systemChromeMaterial'
+  | 'systemUltraThinMaterialLight'
+  | 'systemThinMaterialLight'
+  | 'systemMaterialLight'
+  | 'systemThickMaterialLight'
+  | 'systemChromeMaterialLight'
+  | 'systemUltraThinMaterialDark'
+  | 'systemThinMaterialDark'
+  | 'systemMaterialDark'
+  | 'systemThickMaterialDark'
+  | 'systemChromeMaterialDark';
+export type ReplaceTypes = 'push' | 'pop';
+export type OrientationTypes =
+  | 'default'
+  | 'all'
+  | 'portrait'
+  | 'portrait_up'
+  | 'portrait_down'
+  | 'landscape'
+  | 'landscape_left'
+  | 'landscape_right';
+export type HeaderSubviewTypes =
+  | 'back'
+  | 'right'
+  | 'left'
+  | 'center'
+  | 'searchBar';
+export type StatusBarAnimationTypes = 'none' | 'fade' | 'slide';
+export type StatusBarStyleTypes = 'inverted' | 'auto' | 'light' | 'dark';
+export interface SearchBarProps {
+  /**
+   * Indicates whether to to obscure the underlying content
+   */
+  obscureBackground?: boolean;
+  /**
+   * Indicates whether to hide the navigation bar
+   */
+  hideNavigationBar?: boolean;
+  /**
+   * Indicates whether to hide the search bar when scrolling
+   */
+  hideWhenScrolling?: boolean;
+  /**
+   * The auto-capitalization behavior
+   */
+  autoCapitalize?: 'none' | 'words' | 'sentences' | 'characters';
+  /**
+   * Text displayed when search field is empty
+   */
+  placeholder?: string;
+  /**
+   * The search field background color
+   */
+  barTintColor?: string;
+  /**
+   * A callback that gets called when the text changes. It receives the current text value of the search bar.
+   */
+  onChangeText?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+  /**
+   * A callback that gets called when the cancel button is pressed
+   */
+  onCancelButtonPress?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+  /**
+   * A callback that gets called when the search button is pressed. It receives the current text value of the search bar.
+   */
+  onSearchButtonPress?: (
+    e: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => void;
+  /**
+   * A callback that gets called when search bar has received focus
+   */
+  onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+  /**
+   * A callback that gets called when search bar has lost focus
+   */
+  onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
+}
 
 export type NativeStackNavigationEventMap = {
   /**
@@ -181,7 +288,7 @@ export type NativeStackNavigationOptions = {
    *
    * @platform ios
    */
-  headerBlurEffect?: ScreenStackHeaderConfigProps['blurEffect'];
+  headerBlurEffect?: BlurEffectTypes;
   /**
    * Tint color for the header. Changes the color of back button and title.
    */
@@ -238,30 +345,35 @@ export type NativeStackNavigationOptions = {
   /**
    * Sets the status bar animation (similar to the `StatusBar` component).
    * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
-   *
-   * Only supported on iOS.
-   *
-   * @platform ios
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  statusBarAnimation?: ScreenProps['statusBarAnimation'];
+  statusBarAnimation?: StatusBarAnimationTypes;
+  /**
+   * Sets the status bar color (similar to the `StatusBar` component). Defaults to initial status bar color.
+   * Requires `react-native-screens` version >=3.3.0.
+   *
+   * @platform android
+   */
+  statusBarColor?: string;
   /**
    * Whether the status bar should be hidden on this screen.
    * Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
-   *
-   * Only supported on iOS.
-   *
-   * @platform ios
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
   statusBarHidden?: boolean;
   /**
    * Sets the status bar color (similar to the `StatusBar` component).
    * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
-   *
-   * Only supported on iOS.
-   *
-   * @platform ios
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  statusBarStyle?: ScreenProps['statusBarStyle'];
+  statusBarStyle?: StatusBarStyleTypes;
+  /**
+   * Sets the translucency of the status bar. Defaults to `false`.
+   * Requires `react-native-screens` version >=3.3.0.
+   *
+   * @platform android
+   */
+  statusBarTranslucent?: boolean;
   /**
    * Style object for the scene content.
    */
@@ -280,7 +392,7 @@ export type NativeStackNavigationOptions = {
    * - "push": the new screen will perform push animation.
    * - "pop": the new screen will perform pop animation.
    */
-  animationTypeForReplace?: ScreenProps['replaceAnimation'];
+  animationTypeForReplace?: ReplaceTypes;
   /**
    * How the screen should animate when pushed or popped.
    *
@@ -292,7 +404,7 @@ export type NativeStackNavigationOptions = {
    * - "slide_from_left": slide in the new screen from left (Android only, uses default animation on iOS)
    * - "none": don't animate the screen
    */
-  animation?: ScreenProps['stackAnimation'];
+  animation?: AnimationTypes;
   /**
    * How should the screen be presented.
    *
@@ -305,7 +417,7 @@ export type NativeStackNavigationOptions = {
    * - "fullScreenModal": will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android.
    * - "formSheet": will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android.
    */
-  presentation?: Exclude<ScreenProps['stackPresentation'], 'push'> | 'card';
+  presentation?: PresentationTypes;
   /**
    * The display orientation to use for the screen.
    *
@@ -319,7 +431,7 @@ export type NativeStackNavigationOptions = {
    * - "landscape_left": landscape-left orientation is permitted.
    * - "landscape_right": landscape-right orientation is permitted.
    */
-  orientation?: ScreenProps['screenOrientation'];
+  orientation?: OrientationTypes;
 };
 
 export type NativeStackNavigatorProps = DefaultNavigatorOptions<

packages/native-stack/src/views/DebugContainer.native.tsx

@@ -9,7 +9,7 @@ type ContainerProps = ViewProps & {
   children: React.ReactNode;
 };
 
-let Container = View as unknown as React.ComponentType<ContainerProps>;
+let Container = (View as unknown) as React.ComponentType<ContainerProps>;
 
 if (process.env.NODE_ENV !== 'production') {
   const DebugContainer = (props: ContainerProps) => {

packages/native-stack/src/views/HeaderConfig.tsx

@@ -41,7 +41,11 @@ export default function HeaderConfig({
   headerTitleStyle,
   headerTranslucent,
   route,
+  orientation,
   headerSearchBarOptions,
+  statusBarAnimation,
+  statusBarHidden,
+  statusBarStyle,
   title,
 }: Props): JSX.Element {
   const insets = useSafeAreaInsets();
@@ -61,12 +65,15 @@ export default function HeaderConfig({
   const headerStyleFlattened = StyleSheet.flatten(headerStyle) || {};
   const headerLargeStyleFlattened = StyleSheet.flatten(headerLargeStyle) || {};
 
-  const [backTitleFontFamily, largeTitleFontFamily, titleFontFamily] =
-    processFonts([
-      headerBackTitleStyleFlattened.fontFamily,
-      headerLargeTitleStyleFlattened.fontFamily,
-      headerTitleStyleFlattened.fontFamily,
-    ]);
+  const [
+    backTitleFontFamily,
+    largeTitleFontFamily,
+    titleFontFamily,
+  ] = processFonts([
+    headerBackTitleStyleFlattened.fontFamily,
+    headerLargeTitleStyleFlattened.fontFamily,
+    headerTitleStyleFlattened.fontFamily,
+  ]);
 
   const titleText = title !== undefined ? title : route.name;
 
@@ -119,6 +126,11 @@ export default function HeaderConfig({
       largeTitleFontSize={headerLargeTitleStyleFlattened.fontSize}
       largeTitleFontWeight={headerLargeTitleStyleFlattened.fontWeight}
       largeTitleHideShadow={headerLargeTitleShadowVisible === false}
+      // @ts-ignore Renamed from screenOrientation to orientation
+      screenOrientation={orientation}
+      statusBarAnimation={statusBarAnimation}
+      statusBarHidden={statusBarHidden}
+      statusBarStyle={statusBarStyle}
       title={typeof headerTitle === 'string' ? headerTitle : titleText}
       titleColor={
         headerTitleStyleFlattened.color ?? headerTintColor ?? colors.text

packages/native-stack/src/views/NativeStackView.tsx

@@ -102,10 +102,6 @@ function NativeStackViewInner({ state, navigation, descriptors }: Props) {
           headerShown,
           animationTypeForReplace = 'pop',
           animation,
-          orientation,
-          statusBarAnimation,
-          statusBarHidden,
-          statusBarStyle,
         } = options;
 
         let { presentation = 'card' } = options;
@@ -135,10 +131,6 @@ function NativeStackViewInner({ state, navigation, descriptors }: Props) {
             replaceAnimation={animationTypeForReplace}
             stackPresentation={presentation === 'card' ? 'push' : presentation}
             stackAnimation={animation}
-            screenOrientation={orientation}
-            statusBarAnimation={statusBarAnimation}
-            statusBarHidden={statusBarHidden}
-            statusBarStyle={statusBarStyle}
             onWillAppear={() => {
               navigation.emit({
                 type: 'transitionStart',

packages/native/CHANGELOG.md

@@ -3,14 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [6.0.0-next.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.0-next.13...@react-navigation/native@6.0.0-next.14) (2021-06-10)
-
-**Note:** Version bump only for package @react-navigation/native
-
-
-
-
-
 # [6.0.0-next.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.0-next.12...@react-navigation/native@6.0.0-next.13) (2021-05-29)
 
 

packages/native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "6.0.0-next.14",
+  "version": "6.0.0-next.13",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -37,21 +37,21 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^6.0.0-next.14",
+    "@react-navigation/core": "^6.0.0-next.13",
     "escape-string-regexp": "^4.0.0",
-    "nanoid": "^3.1.23"
+    "nanoid": "^3.1.22"
   },
   "devDependencies": {
     "@testing-library/react-native": "^7.2.0",
-    "@types/react": "^17.0.9",
-    "@types/react-dom": "^17.0.6",
-    "@types/react-native": "~0.64.9",
+    "@types/react": "^16.9.53",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-native": "~0.64.4",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-dom": "^16.13.1",
     "react-native": "~0.63.4",
     "react-native-builder-bob": "^0.18.1",
-    "typescript": "^4.3.2"
+    "typescript": "^4.2.3"
   },
   "peerDependencies": {
     "react": "*",

packages/native/src/NavigationContainer.tsx

@@ -67,8 +67,9 @@ function NavigationContainerInner(
     validatePathConfig(linking.config);
   }
 
-  const refContainer =
-    React.useRef<NavigationContainerRef<ParamListBase>>(null);
+  const refContainer = React.useRef<NavigationContainerRef<ParamListBase>>(
+    null
+  );
 
   useBackButton(refContainer);
   useDocumentTitle(refContainer, documentTitle);