@react-navigation/elements 3.0.0-alpha.11 → 3.0.0-alpha.13

package/src/types.tsx

@@ -39,7 +39,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
    */
@@ -48,55 +48,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 = {
@@ -107,28 +108,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.
    *
@@ -139,27 +147,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.
    *
@@ -168,20 +180,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.
    *
@@ -190,43 +206,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.
@@ -235,11 +255,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.
    *
@@ -256,13 +276,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 = {
@@ -273,58 +293,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.
    */
@@ -360,16 +380,17 @@ export type HeaderBackButtonProps = Omit<HeaderButtonProps, 'children'> & {
    */
   icon?:
     | HeaderIcon
-    | ((props: { tintColor: ColorValue | undefined }) => React.ReactNode);
+    | ((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.
    *
@@ -380,13 +401,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/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/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"}

package/src/Lazy.tsx

@@ -1,59 +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 function Lazy({ enabled, visible, children }: Props) {
-  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;
-}