chore: publish

- @react-navigation/bottom-tabs@6.0.0-next.2
 - @react-navigation/drawer@6.0.0-next.2
 - @react-navigation/elements@1.0.0-next.2
 - @react-navigation/stack@6.0.0-next.3

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.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.1...@react-navigation/bottom-tabs@6.0.0-next.2) (2021-03-12)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [6.0.0-next.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0...@react-navigation/bottom-tabs@6.0.0-next.1) (2021-03-10)
 
 

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.1",
+  "version": "6.0.0-next.2",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -37,7 +37,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.1",
+    "@react-navigation/elements": "^1.0.0-next.2",
     "color": "^3.1.3",
     "warn-once": "^0.0.1"
   },

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

@@ -6,7 +6,7 @@ import {
   // @ts-ignore
   shouldUseActivityState,
 } from 'react-native-screens';
-import { ResourceSavingScene } from '@react-navigation/elements';
+import { ResourceSavingView } from '@react-navigation/elements';
 
 type Props = {
   visible: boolean;
@@ -34,8 +34,8 @@ export default function ScreenFallback({ visible, children, ...rest }: Props) {
   }
 
   return (
-    <ResourceSavingScene visible={visible} {...rest}>
+    <ResourceSavingView visible={visible} {...rest}>
       {children}
-    </ResourceSavingScene>
+    </ResourceSavingView>
   );
 }

packages/drawer/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.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.1...@react-navigation/drawer@6.0.0-next.2) (2021-03-12)
+
+
+### Features
+
+* export drawer button ([2c8401d](https://github.com/react-navigation/react-navigation/commit/2c8401d5cb347d37c96e5b30f8ad05c17fd22ea4))
+
+
+
+
+
 # [6.0.0-next.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0...@react-navigation/drawer@6.0.0-next.1) (2021-03-10)
 
 

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.1",
+  "version": "6.0.0-next.2",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -42,7 +42,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.1",
+    "@react-navigation/elements": "^1.0.0-next.2",
     "color": "^3.1.3",
     "warn-once": "^0.0.1"
   },

packages/drawer/src/index.tsx

@@ -11,6 +11,7 @@ export { default as DrawerItem } from './views/DrawerItem';
 export { default as DrawerItemList } from './views/DrawerItemList';
 export { default as DrawerContent } from './views/DrawerContent';
 export { default as DrawerContentScrollView } from './views/DrawerContentScrollView';
+export { default as DrawerToggleButton } from './views/DrawerToggleButton';
 
 /**
  * Utilities

packages/drawer/src/views/ScreenFallback.tsx

@@ -6,7 +6,7 @@ import {
   // @ts-ignore
   shouldUseActivityState,
 } from 'react-native-screens';
-import { ResourceSavingScene } from '@react-navigation/elements';
+import { ResourceSavingView } from '@react-navigation/elements';
 
 type Props = {
   visible: boolean;
@@ -34,8 +34,8 @@ export default function ScreenFallback({ visible, children, ...rest }: Props) {
   }
 
   return (
-    <ResourceSavingScene visible={visible} {...rest}>
+    <ResourceSavingView visible={visible} {...rest}>
       {children}
-    </ResourceSavingScene>
+    </ResourceSavingView>
   );
 }

packages/elements/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0-next.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.1...@react-navigation/elements@1.0.0-next.2) (2021-03-12)
+
+
+### Bug Fixes
+
+* use theme in PlatformPressable ([40439cc](https://github.com/react-navigation/react-navigation/commit/40439ccb420825a1aa480648526a816f2422ea6e))
+
+
+### Features
+
+* return nearest parent header height for useHeaderHeight ([24b3f73](https://github.com/react-navigation/react-navigation/commit/24b3f739da4b8af8dca77d92c72cfdaa762e564a))
+
+
+
+
+
 # [1.0.0-next.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0...@react-navigation/elements@1.0.0-next.1) (2021-03-10)
 
 

packages/elements/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "1.0.0-next.1",
+  "version": "1.0.0-next.2",
   "keywords": [
     "react-native",
     "react-navigation",

packages/elements/src/Header/HeaderBackButton.tsx

@@ -22,7 +22,8 @@ export default function HeaderBackButton({
   labelVisible = Platform.OS === 'ios',
   onLabelLayout,
   onPress,
-  pressColorAndroid: customPressColorAndroid,
+  pressColor,
+  pressOpacity,
   screenLayout,
   tintColor: customTintColor,
   titleLayout,
@@ -31,7 +32,7 @@ export default function HeaderBackButton({
   testID,
   style,
 }: HeaderBackButtonProps) {
-  const { dark, colors } = useTheme();
+  const { colors } = useTheme();
 
   const [initialLabelWidth, setInitialLabelWidth] = React.useState<
     undefined | number
@@ -45,13 +46,6 @@ export default function HeaderBackButton({
           default: colors.text,
         });
 
-  const pressColorAndroid =
-    customPressColorAndroid !== undefined
-      ? customPressColorAndroid
-      : dark
-      ? 'rgba(255, 255, 255, .32)'
-      : 'rgba(0, 0, 0, .32)';
-
   const handleLabelLayout = (e: LayoutChangeEvent) => {
     onLabelLayout?.(e);
 
@@ -156,7 +150,8 @@ export default function HeaderBackButton({
       accessibilityLabel={accessibilityLabel}
       testID={testID}
       onPress={disabled ? undefined : handlePress}
-      pressColor={pressColorAndroid}
+      pressColor={pressColor}
+      pressOpacity={pressOpacity}
       android_ripple={{ borderless: true }}
       style={[styles.container, disabled && styles.disabled, style]}
       hitSlop={Platform.select({

packages/elements/src/PlatformPressable.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Platform, Pressable, PressableProps } from 'react-native';
+import { useTheme } from '@react-navigation/native';
 
 export type Props = PressableProps & {
   pressColor?: string;
@@ -12,24 +13,30 @@ const ANDROID_SUPPORTS_RIPPLE =
   Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP;
 
 /**
- * PlatformPressable provides an abstraction on top of TouchableNativeFeedback and
+ * PlatformPressable provides an abstraction on top of Pressable to handle platform differences.
- * TouchableOpacity to handle platform differences.
- *
- * On Android, you can pass the props of TouchableNativeFeedback.
- * On other platforms, you can pass the props of TouchableOpacity.
  */
 export default function PlatformPressable({
   android_ripple,
-  pressColor = 'rgba(0, 0, 0, .32)',
+  pressColor,
   pressOpacity,
   style,
   ...rest
 }: Props) {
+  const { dark } = useTheme();
+
   return (
     <Pressable
       android_ripple={
         ANDROID_SUPPORTS_RIPPLE
-          ? { color: pressColor, ...android_ripple }
+          ? {
+              color:
+                pressColor !== undefined
+                  ? pressColor
+                  : dark
+                  ? 'rgba(255, 255, 255, .32)'
+                  : 'rgba(0, 0, 0, .32)',
+              ...android_ripple,
+            }
           : undefined
       }
       style={({ pressed }) => [

packages/elements/src/Screen.tsx

@@ -30,6 +30,7 @@ export default function Screen(props: Props) {
   const insets = useSafeAreaInsets();
 
   const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const parentHeaderHeight = React.useContext(HeaderHeightContext);
 
   const {
     header,
@@ -50,7 +51,9 @@ export default function Screen(props: Props) {
         <HeaderShownContext.Provider
           value={isParentHeaderShown || headerShown !== false}
         >
-          <HeaderHeightContext.Provider value={headerShown ? headerHeight : 0}>
+          <HeaderHeightContext.Provider
+            value={headerShown ? headerHeight : parentHeaderHeight}
+          >
             {children}
           </HeaderHeightContext.Provider>
         </HeaderShownContext.Provider>

packages/elements/src/index.tsx

@@ -11,7 +11,7 @@ export { default as getHeaderTitle } from './Header/getHeaderTitle';
 
 export { default as MissingIcon } from './MissingIcon';
 export { default as PlatformPressable } from './PlatformPressable';
-export { default as ResourceSavingScene } from './ResourceSavingScene';
+export { default as ResourceSavingView } from './ResourceSavingView';
 export { default as SafeAreaProviderCompat } from './SafeAreaProviderCompat';
 export { default as Screen } from './Screen';
 

packages/elements/src/types.tsx

@@ -127,13 +127,16 @@ export type HeaderBackButtonProps = {
   disabled?: boolean;
   /**
    * Callback to call when the button is pressed.
-   * By default, this triggers `goBack`.
    */
   onPress?: () => void;
   /**
    * Color for material ripple (Android >= 5.0 only).
    */
-  pressColorAndroid?: string;
+  pressColor?: string;
+  /**
+   * Opacity when the button is pressed, used when ripple is not supported.
+   */
+  pressOpacity?: number;
   /**
    * Function which returns a React Element to display custom image in header's back button.
    */

packages/stack/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.2...@react-navigation/stack@6.0.0-next.3) (2021-03-12)
+
+
+### Features
+
+* export drawer button ([2c8401d](https://github.com/react-navigation/react-navigation/commit/2c8401d5cb347d37c96e5b30f8ad05c17fd22ea4))
+* return nearest parent header height for useHeaderHeight ([24b3f73](https://github.com/react-navigation/react-navigation/commit/24b3f739da4b8af8dca77d92c72cfdaa762e564a))
+
+
+
+
+
+# [6.0.0-next.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.1...@react-navigation/stack@6.0.0-next.2) (2021-03-11)
+
+
+### Bug Fixes
+
+* respect headerStatusBarHeight option in Stack ([#9405](https://github.com/react-navigation/react-navigation/issues/9405)) ([8a6511c](https://github.com/react-navigation/react-navigation/commit/8a6511c491b2affbe378d720e613a3e3041ca9c2))
+
+
+
+
+
 # [6.0.0-next.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0...@react-navigation/stack@6.0.0-next.1) (2021-03-10)
 
 

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.1",
+  "version": "6.0.0-next.3",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,7 +41,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.1",
+    "@react-navigation/elements": "^1.0.0-next.2",
     "color": "^3.1.3",
     "react-native-iphone-x-helper": "^1.3.0",
     "warn-once": "^0.0.1"

packages/stack/src/types.tsx

@@ -1,6 +1,5 @@
 import type * as React from 'react';
 import type { Animated, StyleProp, TextStyle, ViewStyle } from 'react-native';
-import type { EdgeInsets } from 'react-native-safe-area-context';
 import type {
   NavigationProp,
   ParamListBase,
@@ -149,10 +148,6 @@ export type StackHeaderProps = {
    * Layout of the screen.
    */
   layout: Layout;
-  /**
-   * Safe area insets to use in the header, e.g. to apply extra spacing for statusbar and notch.
-   */
-  insets: EdgeInsets;
   /**
    * Options for the back button.
    */
@@ -267,17 +262,6 @@ export type StackNavigationOptions = StackHeaderOptions &
      * Not supported on Web.
      */
     gestureVelocityImpact?: number;
-    /**
-     * Safe area insets for the screen. This is used to avoid elements like notch and status bar.
-     * By default, the device's safe area insets are automatically detected. You can override the behavior with this option.
-     * For example, to remove the extra spacing for status bar, pass `safeAreaInsets: { top: 0 }`.
-     */
-    safeAreaInsets?: {
-      top?: number;
-      right?: number;
-      bottom?: number;
-      left?: number;
-    };
     /**
      * Whether to detach the previous screen from the view hierarchy to save memory.
      * Set it to `false` if you need the previous screen to be seen through the active screen.

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { StackActions, useNavigationState } from '@react-navigation/native';
 import { getHeaderTitle, HeaderShownContext } from '@react-navigation/elements';
 
@@ -10,13 +11,14 @@ import type { StackHeaderProps } from '../../types';
 export default React.memo(function Header({
   back,
   layout,
-  insets,
   progress,
   options,
   route,
   navigation,
   styleInterpolator,
 }: StackHeaderProps) {
+  const insets = useSafeAreaInsets();
+
   let previousTitle;
 
   // The label for the left back button shows the title of the previous screen
@@ -47,7 +49,11 @@ export default React.memo(function Header({
   );
 
   const statusBarHeight =
-    (isModal && !isFirstRouteInParent) || isParentHeaderShown ? 0 : insets.top;
+    options.headerStatusBarHeight !== undefined
+      ? options.headerStatusBarHeight
+      : (isModal && !isFirstRouteInParent) || isParentHeaderShown
+      ? 0
+      : insets.top;
 
   return (
     <HeaderSegment

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

@@ -7,7 +7,6 @@ import {
   ParamListBase,
 } from '@react-navigation/native';
 import { HeaderBackContext, getHeaderTitle } from '@react-navigation/elements';
-import type { EdgeInsets } from 'react-native-safe-area-context';
 
 import Header from './Header';
 import {
@@ -28,7 +27,6 @@ import type {
 export type Props = {
   mode: 'float' | 'screen';
   layout: Layout;
-  insets: EdgeInsets;
   scenes: (Scene | undefined)[];
   getPreviousScene: (props: { route: Route<string> }) => Scene | undefined;
   getFocusedRoute: () => Route<string>;
@@ -45,7 +43,6 @@ export default function HeaderContainer({
   mode,
   scenes,
   layout,
-  insets,
   getPreviousScene,
   getFocusedRoute,
   onContentHeightChange,
@@ -105,7 +102,6 @@ export default function HeaderContainer({
 
         const props: StackHeaderProps = {
           layout,
-          insets,
           back: headerBack,
           progress: scene.progress,
           options: scene.descriptor.options,

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

@@ -111,6 +111,10 @@ export default function HeaderSegment(props: Props) {
     headerBackTestID,
     headerBackAllowFontScaling,
     headerBackTitleStyle,
+    headerTitleContainerStyle,
+    headerLeftContainerStyle,
+    headerRightContainerStyle,
+    headerBackgroundContainerStyle,
     headerStyle: customHeaderStyle,
     headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
     styleInterpolator,
@@ -172,10 +176,13 @@ export default function HeaderSegment(props: Props) {
       layout={layout}
       headerTitle={headerTitle}
       headerLeft={headerLeft}
-      headerTitleContainerStyle={titleStyle}
+      headerTitleContainerStyle={[titleStyle, headerTitleContainerStyle]}
-      headerLeftContainerStyle={leftButtonStyle}
+      headerLeftContainerStyle={[leftButtonStyle, headerLeftContainerStyle]}
-      headerRightContainerStyle={rightButtonStyle}
+      headerRightContainerStyle={[rightButtonStyle, headerRightContainerStyle]}
-      headerBackgroundContainerStyle={backgroundStyle}
+      headerBackgroundContainerStyle={[
+        backgroundStyle,
+        headerBackgroundContainerStyle,
+      ]}
       headerStyle={customHeaderStyle}
       headerStatusBarHeight={headerStatusBarHeight}
       {...rest}

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

@@ -119,6 +119,8 @@ function CardContainer({
   scene,
   transitionSpec,
 }: Props) {
+  const parentHeaderHeight = React.useContext(HeaderHeightContext);
+
   const handleOpen = () => {
     const { route } = scene.descriptor;
 
@@ -263,7 +265,9 @@ function CardContainer({
             <HeaderShownContext.Provider
               value={isParentHeaderShown || headerShown !== false}
             >
-              <HeaderHeightContext.Provider value={headerHeight}>
+              <HeaderHeightContext.Provider
+                value={headerShown ? headerHeight : parentHeaderHeight}
+              >
                 {renderScene({ route: scene.descriptor.route })}
               </HeaderHeightContext.Provider>
             </HeaderShownContext.Provider>
@@ -274,7 +278,6 @@ function CardContainer({
             {renderHeader({
               mode: 'screen',
               layout,
-              insets,
               scenes: [previousScene, scene],
               getPreviousScene,
               getFocusedRoute,

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

@@ -108,13 +108,8 @@ const getHeaderHeights = (
     const height =
       typeof style.height === 'number' ? style.height : previous[curr.key];
 
-    const safeAreaInsets = {
-      ...insets,
-      ...options.safeAreaInsets,
-    };
-
     const {
-      headerStatusBarHeight = isParentHeaderShown ? 0 : safeAreaInsets.top,
+      headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
     } = options;
 
     acc[curr.key] =
@@ -420,13 +415,6 @@ export default class CardStack extends React.Component<Props, State> {
       };
     }
 
-    const {
-      top = insets.top,
-      right = insets.right,
-      bottom = insets.bottom,
-      left = insets.left,
-    } = focusedOptions.safeAreaInsets || {};
-
     let activeScreensLimit = 1;
 
     for (let i = scenes.length - 1; i >= 0; i--) {
@@ -465,7 +453,6 @@ export default class CardStack extends React.Component<Props, State> {
           {renderHeader({
             mode: 'float',
             layout,
-            insets: { top, right, bottom, left },
             scenes,
             getPreviousScene: this.getPreviousScene,
             getFocusedRoute: this.getFocusedRoute,
@@ -540,7 +527,6 @@ export default class CardStack extends React.Component<Props, State> {
             }
 
             const {
-              safeAreaInsets,
               headerShown = true,
               headerTransparent,
               cardShadowEnabled,
@@ -598,12 +584,10 @@ export default class CardStack extends React.Component<Props, State> {
               }
             }
 
-            const {
+            const safeAreaInsetTop = insets.top;
-              top: safeAreaInsetTop = insets.top,
+            const safeAreaInsetRight = insets.right;
-              right: safeAreaInsetRight = insets.right,
+            const safeAreaInsetBottom = insets.bottom;
-              bottom: safeAreaInsetBottom = insets.bottom,
+            const safeAreaInsetLeft = insets.left;
-              left: safeAreaInsetLeft = insets.left,
-            } = safeAreaInsets || {};
 
             const headerHeight =
               headerShown !== false ? headerHeights[route.key] : 0;