feat: add a headerShadowVisible option to header

react-navigation · Oct 8, 2021 · 8e7ba69 · 8e7ba69
1 parent fa45dde
commit 8e7ba69
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/packages/elements/src/Header/Header.tsx b/packages/elements/src/Header/Header.tsx
@@ -70,6 +70,7 @@ export default function Header(props: Props) {
     headerTitleContainerStyle: titleContainerStyle,
     headerBackgroundContainerStyle: backgroundContainerStyle,
     headerStyle: customHeaderStyle,
+    headerShadowVisible,
     headerPressColor,
     headerPressOpacity,
     headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
@@ -175,6 +176,15 @@ export default function Header(props: Props) {
     }
   }
 
+  const backgroundStyle = [
+    safeStyles,
+    headerShadowVisible === false && {
+      elevation: 0,
+      shadowOpacity: 0,
+      borderBottomWidth: 0,
+    },
+  ];
+
   const leftButton = headerLeft
     ? headerLeft({
         tintColor: headerTintColor,
@@ -210,9 +220,9 @@ export default function Header(props: Props) {
         ]}
       >
         {headerBackground ? (
-          headerBackground({ style: safeStyles })
+          headerBackground({ style: backgroundStyle })
         ) : headerTransparent ? null : (
-          <HeaderBackground style={safeStyles} />
+          <HeaderBackground style={backgroundStyle} />
         )}
       </Animated.View>
       <Animated.View

diff --git a/packages/elements/src/types.tsx b/packages/elements/src/types.tsx
@@ -99,6 +99,23 @@ export type HeaderOptions = {
    * Style object for the header. You can specify a custom background color here, for example.
    */
   headerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.
+   *
+   * This is a short-hand for the following styles:
+   *
+   * ```js
+   * {
+   *   elevation: 0,
+   *   shadowOpacity: 0,
+   *   borderBottomWidth: 0,
+   * }
+   * ```
+   *
+   * If the above styles are specified in `headerStyle` along with `headerShadowVisible: false`,
+   * then `headerShadowVisible: false` will take precedence.
+   */
+  headerShadowVisible?: boolean;
   /**
    * Extra padding to add at the top of header to account for translucent status bar.
    * By default, it uses the top value from the safe area insets of the device.