@react-navigation/elements 2.0.0-alpha.5 → 2.0.0-alpha.7

package/src/Header/HeaderButton.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+
+import { PlatformPressable } from '../PlatformPressable';
+import type { HeaderButtonProps } from '../types';
+
+export function HeaderButton({
+  disabled,
+  onPress,
+  pressColor,
+  pressOpacity,
+  accessibilityLabel,
+  testID,
+  style,
+  href,
+  children,
+}: HeaderButtonProps) {
+  return (
+    <PlatformPressable
+      disabled={disabled}
+      href={href}
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+      onPress={onPress}
+      pressColor={pressColor}
+      pressOpacity={pressOpacity}
+      android_ripple={androidRipple}
+      style={[styles.container, disabled && styles.disabled, style]}
+      hitSlop={Platform.select({
+        ios: undefined,
+        default: { top: 16, right: 16, bottom: 16, left: 16 },
+      })}
+    >
+      {children}
+    </PlatformPressable>
+  );
+}
+
+const androidRipple = {
+  borderless: true,
+  foreground: Platform.OS === 'android' && Platform.Version >= 23,
+  radius: 20,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});

package/src/Header/getDefaultHeaderHeight.tsx

@@ -1,14 +1,20 @@
-import { Platform } from 'react-native';
+import { PixelRatio, Platform } from 'react-native';
 
 import type { Layout } from '../types';
 
 export function getDefaultHeaderHeight(
   layout: Layout,
   modalPresentation: boolean,
-  statusBarHeight: number
+  topInset: number
 ): number {
   let headerHeight;
 
+  // On models with Dynamic Island the status bar height is smaller than the safe area top inset.
+  const hasDynamicIsland = Platform.OS === 'ios' && topInset > 50;
+  const statusBarHeight = hasDynamicIsland
+    ? topInset - (5 + 1 / PixelRatio.get())
+    : topInset;
+
   const isLandscape = layout.width > layout.height;
 
   if (Platform.OS === 'ios') {

package/src/Header/getHeaderTitle.tsx

@@ -7,6 +7,6 @@ export function getHeaderTitle(
   return typeof options.headerTitle === 'string'
     ? options.headerTitle
     : options.title !== undefined
-    ? options.title
-    : fallback;
+      ? options.title
+      : fallback;
 }

package/src/Label/getLabel.tsx

@@ -5,6 +5,6 @@ export function getLabel(
   return options.label !== undefined
     ? options.label
     : options.title !== undefined
-    ? options.title
-    : fallback;
+      ? options.title
+      : fallback;
 }

package/src/PlatformPressable.tsx

@@ -101,8 +101,8 @@ export function PlatformPressable({
                 pressColor !== undefined
                   ? pressColor
                   : dark
-                  ? 'rgba(255, 255, 255, .32)'
-                  : 'rgba(0, 0, 0, .32)',
+                    ? 'rgba(255, 255, 255, .32)'
+                    : 'rgba(0, 0, 0, .32)',
               ...android_ripple,
             }
           : undefined

package/src/Screen.tsx

@@ -65,6 +65,9 @@ export function Screen(props: Props) {
       accessibilityElementsHidden={!focused}
       importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
       style={[styles.container, style]}
+      // On Fabric we need to disable collapsing for the background to ensure
+      // that we won't render unnecessary views due to the view flattening.
+      collapsable={false}
     >
       <View style={styles.content}>
         <HeaderShownContext.Provider

package/src/index.tsx

@@ -7,6 +7,7 @@ export { Header } from './Header/Header';
 export { HeaderBackButton } from './Header/HeaderBackButton';
 export { HeaderBackContext } from './Header/HeaderBackContext';
 export { HeaderBackground } from './Header/HeaderBackground';
+export { HeaderButton } from './Header/HeaderButton';
 export { HeaderHeightContext } from './Header/HeaderHeightContext';
 export { HeaderShownContext } from './Header/HeaderShownContext';
 export { HeaderTitle } from './Header/HeaderTitle';

package/src/types.tsx

@@ -148,6 +148,26 @@ export type HeaderTitleProps = {
 };
 
 export type HeaderButtonProps = {
+  /**
+   * Callback to call when the button is pressed.
+   */
+  onPress?: () => void;
+  /**
+   * The `href` to use for the anchor tag on web
+   */
+  href?: string;
+  /**
+   * Whether the button is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Accessibility label for the button for screen readers.
+   */
+  accessibilityLabel?: string;
+  /**
+   * ID to locate this button in tests.
+   */
+  testID?: string;
   /**
    * Tint color for the header button.
    */
@@ -161,28 +181,20 @@ export type HeaderButtonProps = {
    */
   pressOpacity?: number;
   /**
-   * Whether it's possible to navigate back in stack.
-   */
-  canGoBack?: boolean;
-};
-
-export type HeaderBackButtonProps = HeaderButtonProps & {
-  /**
-   * Whether the button is disabled.
+   * Style object for the button.
    */
-  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
   /**
-   * Callback to call when the button is pressed.
+   * Content to render for the button. Usually the icon.
    */
-  onPress?: () => void;
+  children: React.ReactNode;
+};
+
+export type HeaderBackButtonProps = Omit<HeaderButtonProps, 'children'> & {
   /**
    * Function which returns a React Element to display custom image in header's back button.
    */
   backImage?: (props: { tintColor: string }) => React.ReactNode;
-  /**
-   * The `href` to use for the anchor tag on web
-   */
-  href?: string;
   /**
    * Label text for the button. Usually the title of the previous screen.
    * By default, this is only shown on iOS.
@@ -217,16 +229,4 @@ export type HeaderBackButtonProps = HeaderButtonProps & {
    * Layout of the title element in the header.
    */
   titleLayout?: Layout;
-  /**
-   * Accessibility label for the button for screen readers.
-   */
-  accessibilityLabel?: string;
-  /**
-   * ID to locate this button in tests.
-   */
-  testID?: string;
-  /**
-   * Style object for the button.
-   */
-  style?: StyleProp<ViewStyle>;
 };