chore: merge current main

- @react-navigation/bottom-tabs@6.0.0-next.17
 - @react-navigation/core@6.0.0-next.13
 - @react-navigation/devtools@6.0.0-next.14
 - @react-navigation/drawer@6.0.0-next.16
 - @react-navigation/elements@1.0.0-next.16
 - flipper-plugin-react-navigation@1.1.4
 - @react-navigation/material-bottom-tabs@6.0.0-next.13
 - @react-navigation/material-top-tabs@6.0.0-next.14
 - @react-navigation/native-stack@6.0.0-next.6
 - @react-navigation/native@6.0.0-next.13
 - @react-navigation/stack@6.0.0-next.24

example/ios/Podfile.lock

@@ -370,8 +370,9 @@ PODS:
     - React-RCTVibration
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.0.0):
+  - RNScreens (3.3.0):
     - React-Core
+    - React-RCTImage
   - RNVectorIcons (8.1.0):
     - React-Core
   - UMAppLoader (2.1.0)
@@ -680,7 +681,7 @@ SPEC CHECKSUMS:
   RNCMaskedView: fc29d354a40316a990e8fb46391f08aea829c3aa
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNReanimated: 70f662b5232dd5d19ccff581e919a54ea73df51c
-  RNScreens: e8e8dd0588b5da0ab57dcca76ab9b2d8987757e0
+  RNScreens: bf59f17fbf001f1025243eeed5f19419d3c11ef2
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   UMAppLoader: fe2708bb0ac5cd70052bc207d06aa3b7e72b9e97
   UMBarCodeScannerInterface: 79f92bea5f7af39b381a4c82298105ceb537408a

example/ios/ReactNavigation/Info.plist

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

example/package.json

@@ -32,10 +32,10 @@
     "react-native-appearance": "~0.3.3",
     "react-native-gesture-handler": "~1.10.2",
     "react-native-pager-view": "~5.0.12",
-    "react-native-paper": "^4.9.0",
+    "react-native-paper": "^4.9.1",
     "react-native-reanimated": "~2.1.0",
     "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.0.0",
+    "react-native-screens": "^3.0.0",
     "react-native-tab-view": "^3.0.1",
     "react-native-unimodules": "~0.13.1",
     "react-native-vector-icons": "^8.1.0",

example/server/babel.config.js

@@ -7,14 +7,9 @@ const alias = Object.fromEntries(
   fs
     .readdirSync(packages)
     .filter((name) => !name.startsWith('.'))
-    .map((name) => [
+    .map((name) => [name, require(`../../packages/${name}/package.json`)])
-      `@react-navigation/${name}`,
+    .filter(([, pak]) => pak.source != null)
-      path.resolve(
+    .map(([name, pak]) => [pak.name, path.resolve(packages, name, pak.source)])
-        packages,
-        name,
-        require(`../../packages/${name}/package.json`).source
-      ),
-    ])
 );
 
 module.exports = {

example/src/index.tsx

@@ -32,7 +32,6 @@ import {
   Platform,
   ScaledSize,
   ScrollView,
-  StatusBar,
 } from 'react-native';
 import {
   DarkTheme as PaperDarkTheme,
@@ -230,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}
@@ -312,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

@@ -8,8 +8,6 @@ const packages = path.resolve(__dirname, '..', 'packages');
 module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);
 
-  config.context = path.resolve(__dirname, '..');
-
   config.module.rules.push({
     test: /\.(js|ts|tsx)$/,
     include: /(packages|example)\/.+/,
@@ -19,19 +17,25 @@ 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': path.resolve(__dirname, 'node_modules', 'react-native-web'),
-    'react-native-web': path.resolve(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'),
   });
 
   fs.readdirSync(packages)
     .filter((name) => !name.startsWith('.'))
     .forEach((name) => {
-      config.resolve.alias[`@react-navigation/${name}`] = path.resolve(
+      const pak = require(`../packages/${name}/package.json`);
-        packages,
+
-        name,
+      if (pak.source == null) {
-        require(`../packages/${name}/package.json`).source
+        return;
-      );
+      }
+
+      config.resolve.alias[pak.name] = path.resolve(packages, name, pak.source);
     });
 
   return config;

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+
+
+
+
 # [6.0.0-next.16](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.15...@react-navigation/bottom-tabs@6.0.0-next.16) (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.16",
+  "version": "6.0.0-next.17",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,12 +36,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.15",
+    "@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.12",
+    "@react-navigation/native": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.53",
@@ -51,7 +51,7 @@
     "react-native": "~0.63.4",
     "react-native-builder-bob": "^0.18.1",
     "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.0.0",
+    "react-native-screens": "^3.0.0",
     "typescript": "^4.2.3"
   },
   "peerDependencies": {

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`.
+   * Sets the status bar animation (similar to the `StatusBar` component). Requires enabling (or deleting)
-   * Set it to `false` if you want to render the screen on initial render.
+   * `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.
+   * Sets the status bar color (similar to the `StatusBar` component).
-   */
+   * Requires enabled `react-native-screens` version >=3.3.0.
-  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.
+   * @platform android
    */
-  tabBarLabel?:
+  statusBarColor?: string;
-    | 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.
+   * 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: {
+  statusBarHidden?: boolean;
-    focused: boolean;
-    color: string;
-    size: number;
-  }) => React.ReactNode;
-
   /**
-   * 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.
+   * Sets the translucency of the status bar. Defaults to true. Requires enabled `react-native-screens` version >=3.3.0.
-   * 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.
+   * @platform android
-   * You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
    */
-  tabBarBackground?: () => React.ReactNode;
+  statusBarTranslucent?: boolean;
-
-  /**
-   * Whether this screen should be unmounted when navigating away from it.
-   * Defaults to `false`.
-   */
-  unmountOnBlur?: 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/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

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,6 +3,17 @@
 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.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)
+
+
+### Bug Fixes
+
+* validate property names in linking config ([324ea71](https://github.com/react-navigation/react-navigation/commit/324ea7181db6b743f512854be267cc9d65975b6f))
+
+
+
+
+
 # [6.0.0-next.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.11...@react-navigation/core@6.0.0-next.12) (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.12",
+  "version": "6.0.0-next.13",
   "keywords": [
     "react",
     "react-native",

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

@@ -2420,3 +2420,57 @@ it('correctly applies initialRouteName for config with similar route names v2',
     getStateFromPath<object>(getPathFromState<object>(state, config), config)
   ).toEqual(state);
 });
+
+it('throws when invalid properties are specified in the config', () => {
+  expect(() =>
+    getStateFromPath<object>('', {
+      Foo: 'foo',
+      Bar: {
+        path: 'bar',
+      },
+    } as any)
+  ).toThrowErrorMatchingInlineSnapshot(`
+    "Found invalid properties in the configuration:
+    - Foo
+    - Bar
+
+    Did you forget to specify them under a 'screens' property?
+
+    You can only specify the following properties:
+    - initialRouteName
+    - screens
+
+    See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
+  `);
+
+  expect(() =>
+    getStateFromPath<object>('', {
+      screens: {
+        Foo: 'foo',
+        Bar: {
+          path: 'bar',
+        },
+        Baz: {
+          Qux: {
+            path: 'qux',
+          },
+        },
+      },
+    } as any)
+  ).toThrowErrorMatchingInlineSnapshot(`
+    "Found invalid properties in the configuration:
+    - Qux
+
+    Did you forget to specify them under a 'screens' property?
+
+    You can only specify the following properties:
+    - initialRouteName
+    - screens
+    - path
+    - exact
+    - stringify
+    - parse
+
+    See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
+  `);
+});

packages/core/src/getPathFromState.tsx

@@ -7,6 +7,7 @@ import * as queryString from 'query-string';
 
 import fromEntries from './fromEntries';
 import type { PathConfig, PathConfigMap } from './types';
+import validatePathConfig from './validatePathConfig';
 
 type Options<ParamList> = {
   initialRouteName?: string;
@@ -75,6 +76,10 @@ export default function getPathFromState<ParamList extends {}>(
     );
   }
 
+  if (options) {
+    validatePathConfig(options);
+  }
+
   // Create a normalized configs object which will be easier to use
   const configs: Record<string, ConfigItem> = options?.screens
     ? createNormalizedConfigs(options?.screens)

packages/core/src/getStateFromPath.tsx

@@ -8,6 +8,7 @@ import * as queryString from 'query-string';
 
 import findFocusedRoute from './findFocusedRoute';
 import type { PathConfigMap } from './types';
+import validatePathConfig from './validatePathConfig';
 
 type Options<ParamList extends {}> = {
   initialRouteName?: string;
@@ -65,6 +66,10 @@ export default function getStateFromPath<ParamList extends {}>(
   path: string,
   options?: Options<ParamList>
 ): ResultState | undefined {
+  if (options) {
+    validatePathConfig(options);
+  }
+
   let initialRoutes: InitialRouteConfig[] = [];
 
   if (options?.initialRouteName) {

packages/core/src/index.tsx

@@ -19,4 +19,5 @@ export { default as useNavigationBuilder } from './useNavigationBuilder';
 export { default as useNavigationContainerRef } from './useNavigationContainerRef';
 export { default as useNavigationState } from './useNavigationState';
 export { default as useRoute } from './useRoute';
+export { default as validatePathConfig } from './validatePathConfig';
 export * from '@react-navigation/routers';

packages/core/src/validatePathConfig.tsx

@@ -0,0 +1,32 @@
+const formatToList = (items: string[]) =>
+  items.map((key) => `- ${key}`).join('\n');
+
+export default function validatePathConfig(config: any, root = true) {
+  const validKeys = ['initialRouteName', 'screens'];
+
+  if (!root) {
+    validKeys.push('path', 'exact', 'stringify', 'parse');
+  }
+
+  const invalidKeys = Object.keys(config).filter(
+    (key) => !validKeys.includes(key)
+  );
+
+  if (invalidKeys.length) {
+    throw new Error(
+      `Found invalid properties in the configuration:\n${formatToList(
+        invalidKeys
+      )}\n\nDid you forget to specify them under a 'screens' property?\n\nYou can only specify the following properties:\n${formatToList(
+        validKeys
+      )}\n\nSee https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration.`
+    );
+  }
+
+  if (config.screens) {
+    Object.entries(config.screens).forEach(([_, value]) => {
+      if (typeof value !== 'string') {
+        validatePathConfig(value, false);
+      }
+    });
+  }
+}

packages/devtools/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+
+
+
+
 # [6.0.0-next.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.12...@react-navigation/devtools@6.0.0-next.13) (2021-05-29)
 
 

packages/devtools/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/devtools",
   "description": "Developer tools for React Navigation",
-  "version": "6.0.0-next.13",
+  "version": "6.0.0-next.14",
   "keywords": [
     "react",
     "react-native",
@@ -40,7 +40,7 @@
     "nanoid": "^3.1.22"
   },
   "devDependencies": {
-    "@react-navigation/core": "^6.0.0-next.12",
+    "@react-navigation/core": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
     "@types/deep-equal": "^1.0.1",
     "@types/react": "^16.9.53",

packages/drawer/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+
+
+
+
 # [6.0.0-next.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.14...@react-navigation/drawer@6.0.0-next.15) (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.15",
+  "version": "6.0.0-next.16",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,12 +41,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.15",
+    "@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.12",
+    "@react-navigation/native": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "~0.64.4",
@@ -57,7 +57,7 @@
     "react-native-gesture-handler": "~1.10.2",
     "react-native-reanimated": "~2.1.0",
     "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.0.0",
+    "react-native-screens": "^3.0.0",
     "typescript": "^4.2.3"
   },
   "peerDependencies": {

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`.
+   * Sets the status bar animation (similar to the `StatusBar` component). Requires enabling (or deleting)
-   * Set it to `false` if you want to render the screen on initial render.
+   * `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.
+   * Whether the status bar should be hidden on this screen. Requires enabling (or deleting)
-   * Defaults to `true`.
+   * `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
+   * Sets the status bar color (similar to the `StatusBar` component). Requires enabling (or deleting)
-   * or a function that given { focused: boolean, color: string } returns a React.Node
+   * `View controller-based status bar appearance` in your Info.plist file and having `react-native-screens` enabled.
-   * When undefined, scene title is used.
+   * On Android, requires `react-native-screens` version >=3.3.0.
    */
-  drawerLabel?:
+  statusBarStyle?: 'inverted' | 'auto' | 'light' | 'dark';
-    | 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.
+   * Sets the translucency of the status bar. Defaults to true. Requires enabled `react-native-screens` version >=3.3.0.
+   *
+   * @platform android
    */
-  drawerIcon?: (props: {
+  statusBarTranslucent?: boolean;
-    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 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/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}

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/elements/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+
+
+
+
 # [1.0.0-next.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.14...@react-navigation/elements@1.0.0-next.15) (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.15",
+  "version": "1.0.0-next.16",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@react-native-masked-view/masked-view": "^0.2.3",
-    "@react-navigation/native": "^6.0.0-next.12",
+    "@react-navigation/native": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "~0.64.4",

packages/elements/src/PlatformPressable.tsx

@@ -53,7 +53,7 @@ export default function PlatformPressable({
   };
 
   const handlePressIn = (e: GestureResponderEvent) => {
-    animateTo(pressOpacity, 150);
+    animateTo(pressOpacity, 0);
     onPressIn?.(e);
   };
 

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

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
+
+
+
+
 ## [1.1.3](https://github.com/react-navigation/react-navigation/compare/flipper-plugin-react-navigation@1.1.2...flipper-plugin-react-navigation@1.1.3) (2021-05-29)
 
 **Note:** Version bump only for package flipper-plugin-react-navigation

packages/flipper-plugin-react-navigation/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 React Navigation Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -0,0 +1,5 @@
+# `flipper-plugin-react-navigation`
+
+Flipper plugin with developer tools for React Navigation.
+
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/6.x/devtools).

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

@@ -1,17 +1,23 @@
 {
   "$schema": "https://fbflipper.com/schemas/plugin-package/v2.json",
   "name": "flipper-plugin-react-navigation",
-  "id": "react-navigation",
+  "description": "Developer tools for React Navigation",
-  "version": "1.1.3",
+  "version": "1.1.4",
-  "pluginType": "client",
   "main": "dist/bundle.js",
-  "flipperBundlerEntry": "src/index.tsx",
   "license": "MIT",
   "keywords": [
     "flipper-plugin"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-navigation/react-navigation.git",
+    "directory": "packages/flipper-plugin-react-navigation"
+  },
+  "id": "react-navigation",
+  "pluginType": "client",
   "icon": "directions",
   "title": "React Navigation",
+  "flipperBundlerEntry": "src/index.tsx",
   "scripts": {
     "lint": "flipper-pkg lint",
     "prepack": "flipper-pkg lint && flipper-pkg bundle",
@@ -28,7 +34,7 @@
     "@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.12",
+    "@react-navigation/core": "^6.0.0-next.13",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
     "antd": "^4.14.0",
@@ -37,8 +43,5 @@
     "flipper-plugin": "^0.90.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
-  },
-  "dependencies": {
-    "shortid": "^2.2.16"
   }
 }

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+
+
+
+
 # [6.0.0-next.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.11...@react-navigation/material-bottom-tabs@6.0.0-next.12) (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.12",
+  "version": "6.0.0-next.13",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,10 +41,10 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.15"
+    "@react-navigation/elements": "^1.0.0-next.16"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.12",
+    "@react-navigation/native": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "~0.64.4",
@@ -53,7 +53,7 @@
     "react": "~16.13.1",
     "react-native": "~0.63.4",
     "react-native-builder-bob": "^0.18.1",
-    "react-native-paper": "^4.9.0",
+    "react-native-paper": "^4.9.1",
     "react-native-safe-area-context": "~3.2.0",
     "react-native-vector-icons": "^8.1.0",
     "typescript": "^4.2.3"

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+
+
+
+
 # [6.0.0-next.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.12...@react-navigation/material-top-tabs@6.0.0-next.13) (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.13",
+  "version": "6.0.0-next.14",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -45,7 +45,7 @@
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.12",
+    "@react-navigation/native": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "~0.64.4",

packages/native-stack/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+
+
+
+
 # [6.0.0-next.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0-next.4...@react-navigation/native-stack@6.0.0-next.5) (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.5",
+  "version": "6.0.0-next.6",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,11 +41,11 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.15",
+    "@react-navigation/elements": "^1.0.0-next.16",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.12",
+    "@react-navigation/native": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "~0.64.4",

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,
+  ImageSourcePropType,
-  ScreenStackHeaderConfigProps,
+  NativeSyntheticEvent,
-  SearchBarProps,
+  StyleProp,
-} from 'react-native-screens';
+  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.
    */
@@ -234,34 +341,39 @@ export type NativeStackNavigationOptions = {
    *
    * @platform ios
    */
-  headerSearchBar?: SearchBarProps;
+  headerSearchBarOptions?: SearchBarProps;
   /**
    * 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.
-   *
+   * On Android, requires `react-native-screens` version >=3.3.0.
-   * Only supported on iOS.
-   *
-   * @platform ios
    */
-  statusBarAnimation?: ScreenStackHeaderConfigProps['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.
-   *
+   * On Android, requires `react-native-screens` version >=3.3.0.
-   * Only supported on iOS.
-   *
-   * @platform ios
    */
   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.
-   *
+   * On Android, requires `react-native-screens` version >=3.3.0.
-   * Only supported on iOS.
-   *
-   * @platform ios
    */
-  statusBarStyle?: ScreenStackHeaderConfigProps['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?: ScreenStackHeaderConfigProps['screenOrientation'];
+  orientation?: OrientationTypes;
 };
 
 export type NativeStackNavigatorProps = DefaultNavigatorOptions<

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Platform, View, ViewProps } from 'react-native';
+// @ts-ignore Getting private component
+import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
+import type { StackPresentationTypes } from 'react-native-screens';
+
+type ContainerProps = ViewProps & {
+  stackPresentation: StackPresentationTypes;
+  children: React.ReactNode;
+};
+
+let Container = (View as unknown) as React.ComponentType<ContainerProps>;
+
+if (process.env.NODE_ENV !== 'production') {
+  const DebugContainer = (props: ContainerProps) => {
+    const { stackPresentation, ...rest } = props;
+
+    if (Platform.OS === 'ios' && stackPresentation !== 'push') {
+      // This is necessary for LogBox
+      return (
+        <AppContainer>
+          <View {...rest} />
+        </AppContainer>
+      );
+    }
+
+    return <View {...rest} />;
+  };
+
+  Container = DebugContainer;
+}
+
+export default Container;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { View, ViewProps } from 'react-native';
+import type { StackPresentationTypes } from 'react-native-screens';
+
+type ContainerProps = ViewProps & {
+  stackPresentation: StackPresentationTypes;
+  children: React.ReactNode;
+};
+
+export default function Container(props: ContainerProps) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { stackPresentation: _, ...rest } = props;
+  return <View {...rest} />;
+}

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

@@ -0,0 +1,13 @@
+// @ts-ignore: No declaration available
+import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
+
+export function processFonts(
+  fontFamilies: (string | undefined)[]
+): (string | undefined)[] {
+  // @ts-ignore: React Native types are incorrect here and don't consider fontFamily a style value
+  const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
+  if (typeof fontFamilyProcessor === 'function') {
+    return fontFamilies.map(fontFamilyProcessor);
+  }
+  return fontFamilies;
+}

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

@@ -1,13 +1,5 @@
-// @ts-ignore: No declaration available
-import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
-
 export function processFonts(
-  fontFamilies: (string | undefined)[]
+  _: (string | undefined)[]
 ): (string | undefined)[] {
-  // @ts-ignore: React Native types are incorrect here and don't consider fontFamily a style value
+  throw new Error('Not supported on Web');
-  const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
-  if (typeof fontFamilyProcessor === 'function') {
-    return fontFamilies.map(fontFamilyProcessor);
-  }
-  return fontFamilies;
 }

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

@@ -42,7 +42,7 @@ export default function HeaderConfig({
   headerTranslucent,
   route,
   orientation,
-  headerSearchBar,
+  headerSearchBarOptions,
   statusBarAnimation,
   statusBarHidden,
   statusBarStyle,
@@ -84,7 +84,11 @@ export default function HeaderConfig({
       ? headerTitle({ tintColor, children: titleText })
       : null;
 
-  if (Platform.OS === 'ios' && headerSearchBar != null && SearchBar == null) {
+  if (
+    Platform.OS === 'ios' &&
+    headerSearchBarOptions != null &&
+    SearchBar == null
+  ) {
     throw new Error(
       `The current version of 'react-native-screens' doesn't support SearchBar in the header. Please update to the latest version to use this option.`
     );
@@ -122,6 +126,7 @@ 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}
@@ -179,9 +184,9 @@ export default function HeaderConfig({
           {headerRightElement}
         </ScreenStackHeaderRightView>
       ) : null}
-      {Platform.OS === 'ios' && headerSearchBar != null ? (
+      {Platform.OS === 'ios' && headerSearchBarOptions != null ? (
         <ScreenStackHeaderSearchBarView>
-          <SearchBar {...headerSearchBar} />
+          <SearchBar {...headerSearchBarOptions} />
         </ScreenStackHeaderSearchBarView>
       ) : null}
     </ScreenStackHeaderConfig>

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

@@ -7,9 +7,7 @@ import {
   useTheme,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { Platform, StyleSheet, View, ViewProps } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
-// @ts-ignore Getting private component
-import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
 import {
   Screen,
   ScreenStack,
@@ -22,33 +20,11 @@ import type {
   NativeStackNavigationHelpers,
   NativeStackNavigationOptions,
 } from '../types';
+import DebugContainer from './DebugContainer';
 import HeaderConfig from './HeaderConfig';
 
 const isAndroid = Platform.OS === 'android';
 
-type ContainerProps = ViewProps & { stackPresentation: StackPresentationTypes };
-
-let Container = (View as unknown) as React.ComponentType<ContainerProps>;
-
-if (process.env.NODE_ENV !== 'production') {
-  const DebugContainer = (props: ContainerProps) => {
-    const { stackPresentation, ...rest } = props;
-
-    if (Platform.OS === 'ios' && stackPresentation !== 'push') {
-      // This is necessary for LogBox
-      return (
-        <AppContainer>
-          <View {...rest} />
-        </AppContainer>
-      );
-    }
-
-    return <View {...rest} />;
-  };
-
-  Container = DebugContainer;
-}
-
 const MaybeNestedStack = ({
   options,
   route,
@@ -81,7 +57,7 @@ const MaybeNestedStack = ({
   }, [headerShown, presentation, route.name]);
 
   const content = (
-    <Container
+    <DebugContainer
       style={[
         styles.container,
         presentation !== 'transparentModal' &&
@@ -93,7 +69,7 @@ const MaybeNestedStack = ({
       stackPresentation={presentation === 'card' ? 'push' : presentation}
     >
       {children}
-    </Container>
+    </DebugContainer>
   );
 
   if (isHeaderInModal) {

packages/native/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Bug Fixes
+
+* validate property names in linking config ([324ea71](https://github.com/react-navigation/react-navigation/commit/324ea7181db6b743f512854be267cc9d65975b6f))
+
+
+
+
+
 # [6.0.0-next.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.0-next.11...@react-navigation/native@6.0.0-next.12) (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.12",
+  "version": "6.0.0-next.13",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -37,7 +37,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^6.0.0-next.12",
+    "@react-navigation/core": "^6.0.0-next.13",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.22"
   },

packages/native/src/NavigationContainer.tsx

@@ -6,6 +6,7 @@ import {
   NavigationContainerProps,
   NavigationContainerRef,
   ParamListBase,
+  validatePathConfig,
 } from '@react-navigation/core';
 import * as React from 'react';
 
@@ -62,6 +63,10 @@ function NavigationContainerInner(
 ) {
   const isLinkingEnabled = linking ? linking.enabled !== false : false;
 
+  if (linking?.config) {
+    validatePathConfig(linking.config);
+  }
+
   const refContainer = React.useRef<NavigationContainerRef<ParamListBase>>(
     null
   );

packages/stack/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.24](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.23...@react-navigation/stack@6.0.0-next.24) (2021-05-29)
+
+
+### Bug Fixes
+
+* remove card shadow from default animation ([70f4fe2](https://github.com/react-navigation/react-navigation/commit/70f4fe2ffaa219a2a72e0ae25b7d5d007948c2a4)), closes [#9569](https://github.com/react-navigation/react-navigation/issues/9569)
+
+
+
+
+
 # [6.0.0-next.23](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.22...@react-navigation/stack@6.0.0-next.23) (2021-05-29)
 
 **Note:** Version bump only for package @react-navigation/stack

packages/stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "6.0.0-next.23",
+  "version": "6.0.0-next.24",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,13 +40,13 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.15",
+    "@react-navigation/elements": "^1.0.0-next.16",
     "color": "^3.1.3",
     "react-native-iphone-x-helper": "^1.3.0",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.12",
+    "@react-navigation/native": "^6.0.0-next.13",
     "@testing-library/react-native": "^7.2.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.53",
@@ -57,7 +57,7 @@
     "react-native-builder-bob": "^0.18.1",
     "react-native-gesture-handler": "~1.10.2",
     "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.0.0",
+    "react-native-screens": "^3.0.0",
     "typescript": "^4.2.3"
   },
   "peerDependencies": {

packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -302,12 +302,12 @@ export function forScaleFromCenterAndroid({
     closing,
     current.progress.interpolate({
       inputRange: [0, 1],
-      outputRange: [0.9, 1],
+      outputRange: [0.925, 1],
       extrapolate: 'clamp',
     }),
     progress.interpolate({
       inputRange: [0, 1, 2],
-      outputRange: [0.85, 1, 1.1],
+      outputRange: [0.85, 1, 1.075],
     })
   );
 

packages/stack/src/types.tsx

@@ -199,7 +199,64 @@ export type StackDescriptor = Descriptor<
 
 export type StackDescriptorMap = Record<string, StackDescriptor>;
 
+export type NativeScreenTraitsProps = {
+  /**
+   * 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
+   */
+  orientation?:
+    | 'default'
+    | 'all'
+    | 'portrait'
+    | 'portrait_up'
+    | 'portrait_down'
+    | 'landscape'
+    | 'landscape_left'
+    | 'landscape_right';
+  /**
+   * 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.
+   */
+  statusBarAnimation?: 'none' | 'fade' | 'slide';
+  /**
+   * Sets the status bar color (similar to the `StatusBar` component).
+   * Requires enabled `react-native-screens` version >=3.3.0.
+   *
+   * @platform android
+   */
+  statusBarColor?: string;
+  /**
+   * 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.
+   */
+  statusBarHidden?: boolean;
+  /**
+   * 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.
+   */
+  statusBarStyle?: 'inverted' | 'auto' | 'light' | 'dark';
+  /**
+   * Sets the translucency of the status bar. Defaults to true. Requires enabled `react-native-screens` version >=3.3.0.
+   *
+   * @platform android
+   */
+  statusBarTranslucent?: boolean;
+};
+
 export type StackNavigationOptions = StackHeaderOptions &
+  NativeScreenTraitsProps &
   Partial<TransitionPreset> & {
     /**
      * String that can be displayed in the header as a fallback for `headerTitle`.

packages/stack/src/views/Screens.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Animated, View, ViewProps } from 'react-native';
 
+import type { NativeScreenTraitsProps } from '../types';
+
 let Screens: typeof import('react-native-screens') | undefined;
 
 try {
@@ -27,11 +29,12 @@ export const MaybeScreen = ({
   enabled,
   active,
   ...rest
-}: ViewProps & {
+}: ViewProps &
-  enabled: boolean;
+  NativeScreenTraitsProps & {
-  active: 0 | 1 | Animated.AnimatedInterpolation;
+    enabled: boolean;
-  children: React.ReactNode;
+    active: 0 | 1 | Animated.AnimatedInterpolation;
-}) => {
+    children: React.ReactNode;
+  }) => {
   if (Screens != null) {
     return (
       <Screens.Screen enabled={enabled} activityState={active} {...rest} />

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

@@ -92,7 +92,7 @@ const hasOpacityStyle = (style: any) => {
 
 export default class Card extends React.Component<Props> {
   static defaultProps = {
-    shadowEnabled: true,
+    shadowEnabled: false,
     gestureEnabled: true,
     gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
     overlay: ({

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

@@ -555,6 +555,12 @@ export default class CardStack extends React.Component<Props, State> {
               headerTransparent,
               headerStyle,
               headerTintColor,
+              orientation,
+              statusBarAnimation,
+              statusBarColor,
+              statusBarHidden,
+              statusBarStyle,
+              statusBarTranslucent,
             } = scene.descriptor.options;
 
             const safeAreaInsetTop = insets.top;
@@ -607,6 +613,12 @@ export default class CardStack extends React.Component<Props, State> {
                 enabled={detachInactiveScreens}
                 active={isScreenActive}
                 pointerEvents="box-none"
+                orientation={orientation}
+                statusBarAnimation={statusBarAnimation}
+                statusBarColor={statusBarColor}
+                statusBarHidden={statusBarHidden}
+                statusBarStyle={statusBarStyle}
+                statusBarTranslucent={statusBarTranslucent}
               >
                 <CardContainer
                   index={index}

yarn.lock

@@ -15534,11 +15534,6 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
-nanoid@^2.1.0:
-  version "2.1.11"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
-  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
-
 nanoid@^3.1.22:
   version "3.1.22"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.22.tgz#b35f8fb7d151990a8aebd5aa5015c03cf726f844"
@@ -18370,10 +18365,10 @@ react-native-pager-view@~5.0.12:
   resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-5.0.12.tgz#5106735d944e7f876b006377ab6a18859bf7730c"
   integrity sha512-QmHUnQeP2qcxDofEOnKRmoUue0RaT55lhNJDfcQ1/SNuxif4Q2UyvDfqeItm1+toaE5tVnXqoreZh82FqUqnvw==
 
-react-native-paper@^4.9.0:
+react-native-paper@^4.9.1:
-  version "4.9.0"
+  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.9.0.tgz#af67ae6fd92c13d8cf5e37700ad2b37aac85b2ed"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.9.1.tgz#9b2aadcb1bd48ff6825641df60821e20e0cc8276"
-  integrity sha512-1+7V5wJgNcEdTE+sckGF+ABImLQbWdYFGTEqkVsqdsd1mKxRSVeHJXqeQAZwiFJAZJiHzxL403rKPNdi8ZpGng==
+  integrity sha512-vGgNvQE/GlNSjwJw+1LW0yoULTh7enxln16bYfOoI9Xiz1NOKxhfyQN0/LlZn7JFhRdbXW+3+6yMBJ50Emt+ng==
   dependencies:
     "@callstack/react-theme-provider" "^3.0.6"
     color "^3.1.2"
@@ -18395,14 +18390,9 @@ react-native-safe-area-context@3.2.0, react-native-safe-area-context@~3.2.0:
   integrity sha512-k2Nty4PwSnrg9HwrYeeE+EYqViYJoOFwEy9LxL5RIRfoqxAq/uQXNGwpUg2/u4gnKpBbEPa9eRh15KKMe/VHkA==
 
 react-native-screens@^3.0.0:
-  version "3.2.0"
+  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.2.0.tgz#e2c8a4879c72f49af5b49e8859c84978a95d112b"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.3.0.tgz#d4464a96620b85d09e46bd6865b5f48456c244f0"
-  integrity sha512-pV4a32neQA69xhVsL9k1J/rM/SiP5zgGHjJsnNVEcuhBu+dlsutT2YFszQN4MgpP2dhHHu1O7DyRSHti+wh7Wg==
+  integrity sha512-ni11jC6I9cFVXdLIDwkgafDHw/STXUNzkR5Fx3w8Wikdzi8gfTEan2kiOm7aS42d2F/LXddZ6i74Z2em0L6LPQ==
-
-react-native-screens@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.0.0.tgz#ee4c2d69abf7411603868b57214feec5e8f637fa"
-  integrity sha512-35II5oxTaVp3OP8y0eLPOPpQkxG4fRKQ+dL1YSE1we5kCZFOU0l/Rn0T79HbyUu1LPwUZr6lZupPs0ULnRyMuQ==
 
 react-native-tab-view@^3.0.1:
   version "3.0.1"
@@ -19812,13 +19802,6 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
-shortid@^2.2.16:
-  version "2.2.16"
-  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.16.tgz#b742b8f0cb96406fd391c76bfc18a67a57fe5608"
-  integrity sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==
-  dependencies:
-    nanoid "^2.1.0"
-
 side-channel@^1.0.3, side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"