@react-navigation/elements 1.1.1 → 1.3.0

package/lib/module/SafeAreaProviderCompat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SafeAreaProviderCompat.tsx"],"names":["React","Dimensions","Platform","StyleSheet","View","initialWindowMetrics","SafeAreaInsetsContext","SafeAreaProvider","width","height","get","initialMetrics","OS","frame","x","y","insets","top","left","right","bottom","SafeAreaProviderCompat","children","style","styles","container","create","flex"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,UADF,EAEEC,QAFF,EAIEC,UAJF,EAKEC,IALF,QAOO,cAPP;AAQA,SACEC,oBADF,EAEEC,qBAFF,EAGEC,gBAHF,QAIO,gCAJP;AAWA,MAAM;AAAEC,EAAAA,KAAK,GAAG,CAAV;AAAaC,EAAAA,MAAM,GAAG;AAAtB,IAA4BR,UAAU,CAACS,GAAX,CAAe,QAAf,CAAlC,C,CAEA;AACA;AACA;;AACA,MAAMC,cAAc,GAClBT,QAAQ,CAACU,EAAT,KAAgB,KAAhB,IAAyBP,oBAAoB,IAAI,IAAjD,GACI;AACEQ,EAAAA,KAAK,EAAE;AAAEC,IAAAA,CAAC,EAAE,CAAL;AAAQC,IAAAA,CAAC,EAAE,CAAX;AAAcP,IAAAA,KAAd;AAAqBC,IAAAA;AAArB,GADT;AAEEO,EAAAA,MAAM,EAAE;AAAEC,IAAAA,GAAG,EAAE,CAAP;AAAUC,IAAAA,IAAI,EAAE,CAAhB;AAAmBC,IAAAA,KAAK,EAAE,CAA1B;AAA6BC,IAAAA,MAAM,EAAE;AAArC;AAFV,CADJ,GAKIf,oBANN;AAQA,eAAe,SAASgB,sBAAT,CAAgC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAhC,EAA4D;AACzE,sBACE,oBAAC,qBAAD,CAAuB,QAAvB,QACIP,MAAD,IAAY;AACX,QAAIA,MAAJ,EAAY;AACV;AACA;AACA;AACA,0BAAO,oBAAC,IAAD;AAAM,QAAA,KAAK,EAAE,CAACQ,MAAM,CAACC,SAAR,EAAmBF,KAAnB;AAAb,SAAyCD,QAAzC,CAAP;AACD;;AAED,wBACE,oBAAC,gBAAD;AAAkB,MAAA,cAAc,EAAEX,cAAlC;AAAkD,MAAA,KAAK,EAAEY;AAAzD,OACGD,QADH,CADF;AAKD,GAdH,CADF;AAkBD;AAEDD,sBAAsB,CAACV,cAAvB,GAAwCA,cAAxC;AAEA,MAAMa,MAAM,GAAGrB,UAAU,CAACuB,MAAX,CAAkB;AAC/BD,EAAAA,SAAS,EAAE;AACTE,IAAAA,IAAI,EAAE;AADG;AADoB,CAAlB,CAAf","sourcesContent":["import * as React from 'react';\nimport {\n  Dimensions,\n  Platform,\n  StyleProp,\n  StyleSheet,\n  View,\n  ViewStyle,\n} from 'react-native';\nimport {\n  initialWindowMetrics,\n  SafeAreaInsetsContext,\n  SafeAreaProvider,\n} from 'react-native-safe-area-context';\n\ntype Props = {\n  children: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n};\n\nconst { width = 0, height = 0 } = Dimensions.get('window');\n\n// To support SSR on web, we need to have empty insets for initial values\n// Otherwise there can be mismatch between SSR and client output\n// We also need to specify empty values to support tests environments\nconst initialMetrics =\n  Platform.OS === 'web' || initialWindowMetrics == null\n    ? {\n        frame: { x: 0, y: 0, width, height },\n        insets: { top: 0, left: 0, right: 0, bottom: 0 },\n      }\n    : initialWindowMetrics;\n\nexport default function SafeAreaProviderCompat({ children, style }: Props) {\n  return (\n    <SafeAreaInsetsContext.Consumer>\n      {(insets) => {\n        if (insets) {\n          // If we already have insets, don't wrap the stack in another safe area provider\n          // This avoids an issue with updates at the cost of potentially incorrect values\n          // https://github.com/react-navigation/react-navigation/issues/174\n          return <View style={[styles.container, style]}>{children}</View>;\n        }\n\n        return (\n          <SafeAreaProvider initialMetrics={initialMetrics} style={style}>\n            {children}\n          </SafeAreaProvider>\n        );\n      }}\n    </SafeAreaInsetsContext.Consumer>\n  );\n}\n\nSafeAreaProviderCompat.initialMetrics = initialMetrics;\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n});\n"]}
+{"version":3,"sources":["SafeAreaProviderCompat.tsx"],"names":["React","Dimensions","Platform","StyleSheet","View","initialWindowMetrics","SafeAreaInsetsContext","SafeAreaProvider","width","height","get","initialMetrics","OS","frame","x","y","insets","top","left","right","bottom","SafeAreaProviderCompat","children","style","styles","container","create","flex"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,UADF,EAEEC,QAFF,EAIEC,UAJF,EAKEC,IALF,QAOO,cAPP;AAQA,SACEC,oBADF,EAEEC,qBAFF,EAGEC,gBAHF,QAIO,gCAJP;AAWA,MAAM;AAAEC,EAAAA,KAAK,GAAG,CAAV;AAAaC,EAAAA,MAAM,GAAG;AAAtB,IAA4BR,UAAU,CAACS,GAAX,CAAe,QAAf,CAAlC,C,CAEA;AACA;AACA;;AACA,MAAMC,cAAc,GAClBT,QAAQ,CAACU,EAAT,KAAgB,KAAhB,IAAyBP,oBAAoB,IAAI,IAAjD,GACI;AACEQ,EAAAA,KAAK,EAAE;AAAEC,IAAAA,CAAC,EAAE,CAAL;AAAQC,IAAAA,CAAC,EAAE,CAAX;AAAcP,IAAAA,KAAd;AAAqBC,IAAAA;AAArB,GADT;AAEEO,EAAAA,MAAM,EAAE;AAAEC,IAAAA,GAAG,EAAE,CAAP;AAAUC,IAAAA,IAAI,EAAE,CAAhB;AAAmBC,IAAAA,KAAK,EAAE,CAA1B;AAA6BC,IAAAA,MAAM,EAAE;AAArC;AAFV,CADJ,GAKIf,oBANN;AAQA,eAAe,SAASgB,sBAAT,OAA4D;AAAA,MAA5B;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAA4B;AACzE,sBACE,oBAAC,qBAAD,CAAuB,QAAvB,QACIP,MAAD,IAAY;AACX,QAAIA,MAAJ,EAAY;AACV;AACA;AACA;AACA,0BAAO,oBAAC,IAAD;AAAM,QAAA,KAAK,EAAE,CAACQ,MAAM,CAACC,SAAR,EAAmBF,KAAnB;AAAb,SAAyCD,QAAzC,CAAP;AACD;;AAED,wBACE,oBAAC,gBAAD;AAAkB,MAAA,cAAc,EAAEX,cAAlC;AAAkD,MAAA,KAAK,EAAEY;AAAzD,OACGD,QADH,CADF;AAKD,GAdH,CADF;AAkBD;AAEDD,sBAAsB,CAACV,cAAvB,GAAwCA,cAAxC;AAEA,MAAMa,MAAM,GAAGrB,UAAU,CAACuB,MAAX,CAAkB;AAC/BD,EAAAA,SAAS,EAAE;AACTE,IAAAA,IAAI,EAAE;AADG;AADoB,CAAlB,CAAf","sourcesContent":["import * as React from 'react';\nimport {\n  Dimensions,\n  Platform,\n  StyleProp,\n  StyleSheet,\n  View,\n  ViewStyle,\n} from 'react-native';\nimport {\n  initialWindowMetrics,\n  SafeAreaInsetsContext,\n  SafeAreaProvider,\n} from 'react-native-safe-area-context';\n\ntype Props = {\n  children: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n};\n\nconst { width = 0, height = 0 } = Dimensions.get('window');\n\n// To support SSR on web, we need to have empty insets for initial values\n// Otherwise there can be mismatch between SSR and client output\n// We also need to specify empty values to support tests environments\nconst initialMetrics =\n  Platform.OS === 'web' || initialWindowMetrics == null\n    ? {\n        frame: { x: 0, y: 0, width, height },\n        insets: { top: 0, left: 0, right: 0, bottom: 0 },\n      }\n    : initialWindowMetrics;\n\nexport default function SafeAreaProviderCompat({ children, style }: Props) {\n  return (\n    <SafeAreaInsetsContext.Consumer>\n      {(insets) => {\n        if (insets) {\n          // If we already have insets, don't wrap the stack in another safe area provider\n          // This avoids an issue with updates at the cost of potentially incorrect values\n          // https://github.com/react-navigation/react-navigation/issues/174\n          return <View style={[styles.container, style]}>{children}</View>;\n        }\n\n        return (\n          <SafeAreaProvider initialMetrics={initialMetrics} style={style}>\n            {children}\n          </SafeAreaProvider>\n        );\n      }}\n    </SafeAreaInsetsContext.Consumer>\n  );\n}\n\nSafeAreaProviderCompat.initialMetrics = initialMetrics;\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n});\n"]}

package/lib/typescript/src/types.d.ts

@@ -73,7 +73,7 @@ export declare type HeaderOptions = {
     headerTintColor?: string;
     /**
      * Function which returns a React Element to render as the background of the header.
-     * This is useful for using backgrounds such as an image or a gradient.
+     * This is useful for using backgrounds such as an image, a gradient, blur effect etc.
      * You can use this with `headerTransparent` to render a blur view, for example, to create a translucent header.
      */
     headerBackground?: (props: {
@@ -93,6 +93,23 @@ export declare 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.
@@ -122,15 +139,11 @@ export declare type HeaderTitleProps = {
      */
     style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
 };
-export declare type HeaderBackButtonProps = {
+export declare type HeaderButtonProps = {
     /**
-     * Whether the button is disabled.
+     * Tint color for the header button.
      */
-    disabled?: boolean;
-    /**
-     * Callback to call when the button is pressed.
-     */
-    onPress?: () => void;
+    tintColor?: string;
     /**
      * Color for material ripple (Android >= 5.0 only).
      */
@@ -139,16 +152,26 @@ export declare type HeaderBackButtonProps = {
      * Opacity when the button is pressed, used when ripple is not supported.
      */
     pressOpacity?: number;
+    /**
+     * Whether it's possible to navigate back in stack.
+     */
+    canGoBack?: boolean;
+};
+export declare type HeaderBackButtonProps = HeaderButtonProps & {
+    /**
+     * Whether the button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Callback to call when the button is pressed.
+     */
+    onPress?: () => void;
     /**
      * Function which returns a React Element to display custom image in header's back button.
      */
     backImage?: (props: {
         tintColor: string;
     }) => React.ReactNode;
-    /**
-     * Tint color for the header.
-     */
-    tintColor?: string;
     /**
      * Label text for the button. Usually the title of the previous screen.
      * By default, this is only shown on iOS.
@@ -183,10 +206,6 @@ export declare type HeaderBackButtonProps = {
      * Layout of the title element in the header.
      */
     titleLayout?: Layout;
-    /**
-     * Whether it's possible to navigate back in stack.
-     */
-    canGoBack?: boolean;
     /**
      * Accessibility label for the button for screen readers.
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -38,13 +38,13 @@
   },
   "devDependencies": {
     "@react-native-masked-view/masked-view": "^0.2.4",
-    "@react-navigation/native": "^6.0.3",
+    "@react-navigation/native": "^6.0.7",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^17.0.9",
     "@types/react-native": "~0.64.9",
     "del-cli": "^3.0.1",
-    "react": "~16.13.1",
-    "react-native": "~0.63.4",
+    "react": "17.0.1",
+    "react-native": "~0.64.3",
     "react-native-builder-bob": "^0.18.1",
     "typescript": "^4.3.2"
   },
@@ -68,5 +68,5 @@
       ]
     ]
   },
-  "gitHead": "38ac69f17ee314f96d3d4bcee02349fa4a02d422"
+  "gitHead": "4c5805867ce946d99ba17f71b4d6086bb8751262"
 }

package/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

package/src/Header/HeaderBackButton.tsx

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

package/src/Header/getDefaultHeaderHeight.tsx

@@ -12,7 +12,7 @@ export default function getDefaultHeaderHeight(
   const isLandscape = layout.width > layout.height;
 
   if (Platform.OS === 'ios') {
-    if (Platform.isPad) {
+    if (Platform.isPad || Platform.isTVOS) {
       if (modalPresentation) {
         headerHeight = 56;
       } else {

package/src/types.tsx

@@ -77,7 +77,7 @@ export type HeaderOptions = {
   headerTintColor?: string;
   /**
    * Function which returns a React Element to render as the background of the header.
-   * This is useful for using backgrounds such as an image or a gradient.
+   * This is useful for using backgrounds such as an image, a gradient, blur effect etc.
    * You can use this with `headerTransparent` to render a blur view, for example, to create a translucent header.
    */
   headerBackground?: (props: {
@@ -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.
@@ -130,15 +147,11 @@ export type HeaderTitleProps = {
   style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
 };
 
-export type HeaderBackButtonProps = {
+export type HeaderButtonProps = {
   /**
-   * Whether the button is disabled.
+   * Tint color for the header button.
    */
-  disabled?: boolean;
-  /**
-   * Callback to call when the button is pressed.
-   */
-  onPress?: () => void;
+  tintColor?: string;
   /**
    * Color for material ripple (Android >= 5.0 only).
    */
@@ -148,13 +161,24 @@ export type HeaderBackButtonProps = {
    */
   pressOpacity?: number;
   /**
-   * Function which returns a React Element to display custom image in header's back button.
+   * Whether it's possible to navigate back in stack.
    */
-  backImage?: (props: { tintColor: string }) => React.ReactNode;
+  canGoBack?: boolean;
+};
+
+export type HeaderBackButtonProps = HeaderButtonProps & {
   /**
-   * Tint color for the header.
+   * Whether the button is disabled.
    */
-  tintColor?: string;
+  disabled?: boolean;
+  /**
+   * Callback to call when the button is pressed.
+   */
+  onPress?: () => void;
+  /**
+   * Function which returns a React Element to display custom image in header's back button.
+   */
+  backImage?: (props: { tintColor: string }) => React.ReactNode;
   /**
    * Label text for the button. Usually the title of the previous screen.
    * By default, this is only shown on iOS.
@@ -189,10 +213,6 @@ export type HeaderBackButtonProps = {
    * Layout of the title element in the header.
    */
   titleLayout?: Layout;
-  /**
-   * Whether it's possible to navigate back in stack.
-   */
-  canGoBack?: boolean;
   /**
    * Accessibility label for the button for screen readers.
    */