@react-navigation/elements 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/types.tsx

@@ -1,12 +1,16 @@
+import type { MaterialSymbolProps } from '@react-navigation/native';
+import * as React from 'react';
 import type {
   Animated,
   ColorValue,
+  ImageSourcePropType,
   LayoutChangeEvent,
   StyleProp,
   TextInputProps,
   TextStyle,
   ViewStyle,
 } from 'react-native';
+import type { SFSymbol } from 'sf-symbols-typescript';
 
 import type { BlurEffectType } from './getBlurBackgroundColor';
 
@@ -14,6 +18,46 @@ export type HeaderBackButtonDisplayMode = 'default' | 'generic' | 'minimal';
 
 export type Layout = { width: number; height: number };
 
+type IconImage = {
+  /**
+   * - `image` - Use a local image as the icon.
+   */
+  type: 'image';
+  /**
+   * Image source to use as the icon.
+   * - Local image: `require('./path/to/image.png')`
+   * - Drawable resource or xcasset: `{ uri: 'image_name' }`
+   */
+  source: ImageSourcePropType;
+  /**
+   * Whether to apply tint color to the image.
+   * Disabling will keep the image's original colors.
+   *
+   * Defaults to `true`.
+   */
+  tinted?: boolean;
+};
+
+type IconSfSymbol = {
+  /**
+   * - `sfSymbol` - Use an SF Symbol as the icon on iOS.
+   */
+  type: 'sfSymbol';
+  /**
+   * Name of the SF Symbol to use as the icon.
+   */
+  name: SFSymbol;
+};
+
+type IconMaterialSymbol = {
+  /**
+   * - `materialSymbol` - Use a Material Symbol as the icon on Android.
+   */
+  type: 'materialSymbol';
+} & Pick<MaterialSymbolProps, 'name' | 'variant' | 'weight'>;
+
+export type Icon = IconSfSymbol | IconMaterialSymbol | IconImage;
+
 export type HeaderSearchBarRef = {
   focus: () => void;
   blur: () => void;
@@ -33,7 +77,7 @@ export type HeaderSearchBarOptions = {
    * - `clearText` - removes any text present in the search bar input field
    * - `cancelSearch` - cancel the search and close the search bar
    */
-  ref?: React.Ref<HeaderSearchBarRef>;
+  ref?: React.Ref<HeaderSearchBarRef> | undefined;
   /**
    * The auto-capitalization behavior
    */
@@ -42,55 +86,56 @@ export type HeaderSearchBarOptions = {
     | 'words'
     | 'sentences'
     | 'characters'
-    | 'systemDefault';
+    | 'systemDefault'
+    | undefined;
   /**
    * Automatically focuses search input on mount
    */
-  autoFocus?: boolean;
+  autoFocus?: boolean | undefined;
   /**
    * The text to be used instead of default `Cancel` button text
    *
    * @platform ios
    */
-  cancelButtonText?: string;
+  cancelButtonText?: string | undefined;
   /**
    * Sets type of the input. Defaults to `text`.
    */
-  inputType?: 'text' | 'phone' | 'number' | 'email';
+  inputType?: 'text' | 'phone' | 'number' | 'email' | undefined;
   /**
    * Determines how the return key should look. Defaults to `search`.
    */
-  enterKeyHint?: TextInputProps['enterKeyHint'];
+  enterKeyHint?: TextInputProps['enterKeyHint'] | undefined;
   /**
    * A callback that gets called when search input has lost focus
    */
-  onBlur?: TextInputProps['onBlur'];
+  onBlur?: TextInputProps['onBlur'] | undefined;
   /**
    * A callback that gets called when the text changes.
    * It receives the current text value of the search input.
    */
-  onChange?: TextInputProps['onChange'];
+  onChange?: TextInputProps['onChange'] | undefined;
   /**
    * Callback that is called when the submit button is pressed.
    * It receives the current text value of the search input.
    */
-  onSubmitEditing?: TextInputProps['onSubmitEditing'];
+  onSubmitEditing?: TextInputProps['onSubmitEditing'] | undefined;
   /**
    * A callback that gets called when search input is opened
    */
-  onOpen?: () => void;
+  onOpen?: (() => void) | undefined;
   /**
    * A callback that gets called when search input is closed
    */
-  onClose?: () => void;
+  onClose?: (() => void) | undefined;
   /**
    * A callback that gets called when search input has received focus
    */
-  onFocus?: TextInputProps['onFocus'];
+  onFocus?: TextInputProps['onFocus'] | undefined;
   /**
    * Text displayed when search field is empty
    */
-  placeholder?: string;
+  placeholder?: string | undefined;
 };
 
 export type HeaderOptions = {
@@ -101,28 +146,35 @@ export type HeaderOptions = {
    * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
    * The title string is passed in `children`.
    */
-  headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode);
+  headerTitle?:
+    | string
+    | ((props: HeaderTitleProps) => React.ReactNode)
+    | undefined;
   /**
    * How to align the the header title.
    * Defaults to `center` on iOS and `left` on Android.
    */
-  headerTitleAlign?: 'left' | 'center';
+  headerTitleAlign?: 'left' | 'center' | undefined;
   /**
    * Style object for the title component.
    */
-  headerTitleStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+  headerTitleStyle?:
+    | Animated.WithAnimatedValue<StyleProp<TextStyle>>
+    | undefined;
   /**
    * Style object for the container of the `headerTitle` element.
    */
-  headerTitleContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  headerTitleContainerStyle?:
+    | Animated.WithAnimatedValue<StyleProp<ViewStyle>>
+    | undefined;
   /**
    * Whether header title font should scale to respect Text Size accessibility settings. Defaults to `false`.
    */
-  headerTitleAllowFontScaling?: boolean;
+  headerTitleAllowFontScaling?: boolean | undefined;
   /**
    * Options to render a search bar.
    */
-  headerSearchBarOptions?: HeaderSearchBarOptions;
+  headerSearchBarOptions?: HeaderSearchBarOptions | undefined;
   /**
    * How the back button displays icon and title.
    *
@@ -133,27 +185,31 @@ export type HeaderOptions = {
    *
    * Defaults to "default" on iOS, and "minimal" on other platforms.
    */
-  headerBackButtonDisplayMode?: HeaderBackButtonDisplayMode;
+  headerBackButtonDisplayMode?: HeaderBackButtonDisplayMode | undefined;
   /**
    * Style object for header back title. Supported properties:
    * - fontFamily
    * - fontSize
    */
-  headerBackTitleStyle?: StyleProp<{
-    fontFamily?: string;
-    fontSize?: number;
-  }>;
+  headerBackTitleStyle?:
+    | StyleProp<{
+        fontFamily?: string | undefined;
+        fontSize?: number | undefined;
+      }>
+    | undefined;
   /**
    * Function which returns a React Element to display on the left side of the header.
    */
-  headerLeft?: (
-    props: HeaderBackButtonProps & {
-      /**
-       * Whether it's possible to navigate back.
-       */
-      canGoBack?: boolean;
-    }
-  ) => React.ReactNode;
+  headerLeft?:
+    | ((
+        props: HeaderBackButtonProps & {
+          /**
+           * Whether it's possible to navigate back.
+           */
+          canGoBack?: boolean | undefined;
+        }
+      ) => React.ReactNode)
+    | undefined;
   /**
    * Whether the liquid glass background is visible for the item.
    *
@@ -162,20 +218,24 @@ export type HeaderOptions = {
    *
    * Defaults to `true`.
    */
-  headerLeftBackgroundVisible?: boolean;
+  headerLeftBackgroundVisible?: boolean | undefined;
   /**
    * Style object for the container of the `headerLeft` element`.
    */
-  headerLeftContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  headerLeftContainerStyle?:
+    | Animated.WithAnimatedValue<StyleProp<ViewStyle>>
+    | undefined;
   /**
    * Function which returns a React Element to display on the right side of the header.
    */
-  headerRight?: (props: {
-    tintColor?: ColorValue;
-    pressColor?: ColorValue;
-    pressOpacity?: number;
-    canGoBack: boolean;
-  }) => React.ReactNode;
+  headerRight?:
+    | ((props: {
+        tintColor?: ColorValue | undefined;
+        pressColor?: ColorValue | undefined;
+        pressOpacity?: number | undefined;
+        canGoBack: boolean;
+      }) => React.ReactNode)
+    | undefined;
   /**
    * Whether the liquid glass background is visible for the item.
    *
@@ -184,43 +244,47 @@ export type HeaderOptions = {
    *
    * Defaults to `true`.
    */
-  headerRightBackgroundVisible?: boolean;
+  headerRightBackgroundVisible?: boolean | undefined;
   /**
    * Style object for the container of the `headerRight` element.
    */
-  headerRightContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  headerRightContainerStyle?:
+    | Animated.WithAnimatedValue<StyleProp<ViewStyle>>
+    | undefined;
   /**
    * Color for material ripple (Android >= 5.0 only).
    */
-  headerPressColor?: ColorValue;
+  headerPressColor?: ColorValue | undefined;
   /**
    * Color for material ripple (Android >= 5.0 only).
    */
-  headerPressOpacity?: number;
+  headerPressOpacity?: number | undefined;
   /**
    * Tint color for the header.
    */
-  headerTintColor?: ColorValue;
+  headerTintColor?: ColorValue | undefined;
   /**
    * Function which returns a React Element to render as the background of the header.
    * 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: {
-    style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  }) => React.ReactNode;
+  headerBackground?:
+    | ((props: {
+        style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+      }) => React.ReactNode)
+    | undefined;
   /**
    * Style object for the container of the `headerBackground` element.
    */
-  headerBackgroundContainerStyle?: Animated.WithAnimatedValue<
-    StyleProp<ViewStyle>
-  >;
+  headerBackgroundContainerStyle?:
+    | Animated.WithAnimatedValue<StyleProp<ViewStyle>>
+    | undefined;
   /**
    * Defaults to `false`. If `true`, the header will not have a background unless you explicitly provide it with `headerBackground`.
    * The header will also float over the screen so that it overlaps the content underneath.
    * This is useful if you want to render a semi-transparent header or a blurred background.
    */
-  headerTransparent?: boolean;
+  headerTransparent?: boolean | undefined;
   /**
    * Blur effect for the translucent header.
    * The `headerTransparent` option needs to be set to `true` for this to work.
@@ -229,11 +293,11 @@ export type HeaderOptions = {
    *
    * @platform web
    */
-  headerBlurEffect?: BlurEffectType | 'none';
+  headerBlurEffect?: BlurEffectType | 'none' | undefined;
   /**
    * Style object for the header. You can specify a custom background color here, for example.
    */
-  headerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  headerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
   /**
    * Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.
    *
@@ -250,13 +314,13 @@ export type HeaderOptions = {
    * If the above styles are specified in `headerStyle` along with `headerShadowVisible: false`,
    * then `headerShadowVisible: false` will take precedence.
    */
-  headerShadowVisible?: boolean;
+  headerShadowVisible?: boolean | undefined;
   /**
    * 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.
    * Pass 0 or a custom value to disable the default behaviour, and customize the height.
    */
-  headerStatusBarHeight?: number;
+  headerStatusBarHeight?: number | undefined;
 };
 
 export type HeaderTitleProps = {
@@ -267,58 +331,58 @@ export type HeaderTitleProps = {
   /**
    * Whether title font should scale to respect Text Size accessibility settings.
    */
-  allowFontScaling?: boolean;
+  allowFontScaling?: boolean | undefined;
   /**
    * Tint color for the header.
    */
-  tintColor?: ColorValue;
+  tintColor?: ColorValue | undefined;
   /**
    * Callback to trigger when the size of the title element changes.
    */
-  onLayout?: (e: LayoutChangeEvent) => void;
+  onLayout?: ((e: LayoutChangeEvent) => void) | undefined;
   /**
    * Style object for the title element.
    */
-  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>> | undefined;
 };
 
 export type HeaderButtonProps = {
   /**
    * Callback to call when the button is pressed.
    */
-  onPress?: () => void;
+  onPress?: (() => void) | undefined;
   /**
    * The `href` to use for the anchor tag on web
    */
-  href?: string;
+  href?: string | undefined;
   /**
    * Whether the button is disabled.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Accessibility label for the button for screen readers.
    */
-  accessibilityLabel?: string;
+  accessibilityLabel?: string | undefined;
   /**
    * ID to locate this button in tests.
    */
-  testID?: string;
+  testID?: string | undefined;
   /**
    * Tint color for the header button.
    */
-  tintColor?: ColorValue;
+  tintColor?: ColorValue | undefined;
   /**
    * Color for material ripple (Android >= 5.0 only).
    */
-  pressColor?: ColorValue;
+  pressColor?: ColorValue | undefined;
   /**
    * Opacity when the button is pressed, used when ripple is not supported.
    */
-  pressOpacity?: number;
+  pressOpacity?: number | undefined;
   /**
    * Style object for the button.
    */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
   /**
    * Content to render for the button. Usually the icon.
    */
@@ -327,18 +391,31 @@ export type HeaderButtonProps = {
 
 export type HeaderBackButtonProps = Omit<HeaderButtonProps, 'children'> & {
   /**
-   * Function which returns a React Element to display custom image in header's back button.
+   * Icon to display for the back button.
+   *
+   * Supported types:
+   * - image: custom image source
+   * - sfSymbol: SF Symbol icon (iOS only)
+   * - materialSymbol: material symbol icon (Android only)
+   * - React Node: function that returns a React Element
+   *
+   * Defaults to back icon image for the platform
+   * - A chevron on iOS
+   * - An arrow on Android
    */
-  backImage?: (props: { tintColor: ColorValue }) => React.ReactNode;
+  icon?:
+    | Icon
+    | ((props: { tintColor: ColorValue | undefined }) => React.ReactNode)
+    | undefined;
   /**
    * Label text for the button. Usually the title of the previous screen.
    * By default, this is only shown on iOS.
    */
-  label?: string;
+  label?: string | undefined;
   /**
    * Label text to show when there isn't enough space for the full label.
    */
-  truncatedLabel?: string;
+  truncatedLabel?: string | undefined;
   /**
    * How the back button displays icon and title.
    *
@@ -349,13 +426,13 @@ export type HeaderBackButtonProps = Omit<HeaderButtonProps, 'children'> & {
    *
    * Defaults to "default" on iOS, and "minimal" on other platforms.
    */
-  displayMode?: HeaderBackButtonDisplayMode;
+  displayMode?: HeaderBackButtonDisplayMode | undefined;
   /**
    * Style object for the label.
    */
-  labelStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+  labelStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>> | undefined;
   /**
    * Whether label font should scale to respect Text Size accessibility settings.
    */
-  allowFontScaling?: boolean;
+  allowFontScaling?: boolean | undefined;
 };

package/src/useFrameSize.tsx

@@ -26,7 +26,7 @@ export function useFrameSize<T>(
   selector: (frame: Frame) => T,
   throttle?: boolean
 ): T {
-  const context = React.useContext(FrameContext);
+  const context = React.use(FrameContext);
 
   if (context == null) {
     throw new Error('useFrameSize must be used within a FrameSizeProvider');

package/lib/module/Lazy.js

@@ -1,42 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-/**
- * Render content lazily based on visibility.
- *
- * When enabled:
- * - If content is visible, it will render immediately
- * - If content is not visible, it won't render until it becomes visible
- *
- * Otherwise:
- * - If content is visible, it will render immediately
- * - If content is not visible, it will defer rendering until idle
- *
- * Once rendered, the content remains rendered.
- */
-export function Lazy({
-  enabled,
-  visible,
-  children
-}) {
-  const [rendered, setRendered] = React.useState(enabled ? visible : false);
-  const shouldRenderInIdle = !(enabled || visible || rendered);
-  React.useEffect(() => {
-    if (shouldRenderInIdle === false) {
-      return;
-    }
-    const id = requestIdleCallback(() => {
-      setRendered(true);
-    });
-    return () => cancelIdleCallback(id);
-  }, [shouldRenderInIdle]);
-  if (visible && rendered === false) {
-    setRendered(true);
-    return children;
-  }
-  if (rendered) {
-    return children;
-  }
-  return null;
-}
-//# sourceMappingURL=Lazy.js.map

package/lib/module/Lazy.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Lazy","enabled","visible","children","rendered","setRendered","useState","shouldRenderInIdle","useEffect","id","requestIdleCallback","cancelIdleCallback"],"sourceRoot":"../../src","sources":["Lazy.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAiB9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,IAAIA,CAAC;EAAEC,OAAO;EAAEC,OAAO;EAAEC;AAAgB,CAAC,EAAE;EAC1D,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGN,KAAK,CAACO,QAAQ,CAACL,OAAO,GAAGC,OAAO,GAAG,KAAK,CAAC;EAEzE,MAAMK,kBAAkB,GAAG,EAAEN,OAAO,IAAIC,OAAO,IAAIE,QAAQ,CAAC;EAE5DL,KAAK,CAACS,SAAS,CAAC,MAAM;IACpB,IAAID,kBAAkB,KAAK,KAAK,EAAE;MAChC;IACF;IAEA,MAAME,EAAE,GAAGC,mBAAmB,CAAC,MAAM;MACnCL,WAAW,CAAC,IAAI,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,MAAMM,kBAAkB,CAACF,EAAE,CAAC;EACrC,CAAC,EAAE,CAACF,kBAAkB,CAAC,CAAC;EAExB,IAAIL,OAAO,IAAIE,QAAQ,KAAK,KAAK,EAAE;IACjCC,WAAW,CAAC,IAAI,CAAC;IAEjB,OAAOF,QAAQ;EACjB;EAEA,IAAIC,QAAQ,EAAE;IACZ,OAAOD,QAAQ;EACjB;EAEA,OAAO,IAAI;AACb","ignoreList":[]}

package/lib/module/assets/back-icon.ios.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 12 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10.527 1.485L1.584 10.5L10.559 19.542" stroke="#0c0000" stroke-width="2.5" stroke-linecap="round"
-    stroke-linejoin="round" />
-</svg>

package/lib/module/assets/search-icon.ios.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="9.75" cy="9.75" r="8" stroke="#000" stroke-width="2" />
-  <path d="M15.5 15.5L22 22" stroke="#000" stroke-width="2" stroke-linecap="round" />
-</svg>

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

@@ -1,31 +0,0 @@
-import * as React from 'react';
-type Props = {
-    /**
-     * Whether lazy rendering is enabled.
-     */
-    enabled: boolean;
-    /**
-     * Whether the component is visible.
-     */
-    visible: boolean;
-    /**
-     * Content to render.
-     */
-    children: React.ReactElement;
-};
-/**
- * Render content lazily based on visibility.
- *
- * When enabled:
- * - If content is visible, it will render immediately
- * - If content is not visible, it won't render until it becomes visible
- *
- * Otherwise:
- * - If content is visible, it will render immediately
- * - If content is not visible, it will defer rendering until idle
- *
- * Once rendered, the content remains rendered.
- */
-export declare function Lazy({ enabled, visible, children }: Props): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
-export {};
-//# sourceMappingURL=Lazy.d.ts.map

package/lib/typescript/src/Lazy.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Lazy.d.ts","sourceRoot":"","sources":["../../../src/Lazy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,KAAK,GAAG;IACX;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,KAAK,iFA4BzD"}