@react-native-ohos/elements 2.3.9-rc.1

package/lib/module/Header/HeaderBackButton.js

@@ -0,0 +1,188 @@
+"use strict";
+
+import { useLocale, useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import { Animated, Image, Platform, StyleSheet, View } from 'react-native';
+import backIcon from '../assets/back-icon.png';
+import backIconMask from '../assets/back-icon-mask.png';
+import { MaskedView } from '../MaskedView';
+import { HeaderButton } from "./HeaderButton.js";
+import { HeaderIcon, ICON_MARGIN } from "./HeaderIcon.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function HeaderBackButton({
+  disabled,
+  allowFontScaling,
+  backImage,
+  label,
+  labelStyle,
+  displayMode = Platform.OS === 'ios' ? 'default' : 'minimal',
+  onLabelLayout,
+  onPress,
+  pressColor,
+  pressOpacity,
+  screenLayout,
+  tintColor,
+  titleLayout,
+  truncatedLabel = 'Back',
+  accessibilityLabel = label && label !== 'Back' ? `${label}, back` : 'Go back',
+  testID,
+  style,
+  href
+}) {
+  const {
+    colors,
+    fonts
+  } = useTheme();
+  const {
+    direction
+  } = useLocale();
+  const [labelWidth, setLabelWidth] = React.useState(null);
+  const [truncatedLabelWidth, setTruncatedLabelWidth] = React.useState(null);
+  const renderBackImage = () => {
+    if (backImage) {
+      return backImage({
+        tintColor: tintColor ?? colors.text
+      });
+    } else {
+      return /*#__PURE__*/_jsx(HeaderIcon, {
+        source: backIcon,
+        tintColor: tintColor,
+        style: [styles.icon, displayMode !== 'minimal' && styles.iconWithLabel]
+      });
+    }
+  };
+  const renderLabel = () => {
+    if (displayMode === 'minimal') {
+      return null;
+    }
+    const availableSpace = titleLayout && screenLayout ? (screenLayout.width - titleLayout.width) / 2 - (ICON_WIDTH + ICON_MARGIN) : null;
+    const potentialLabelText = displayMode === 'default' ? label : truncatedLabel;
+    const finalLabelText = availableSpace && labelWidth && truncatedLabelWidth ? availableSpace > labelWidth ? potentialLabelText : availableSpace > truncatedLabelWidth ? truncatedLabel : null : potentialLabelText;
+    const commonStyle = [fonts.regular, styles.label, labelStyle];
+    const hiddenStyle = [commonStyle, {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      opacity: 0
+    }];
+    const labelElement = /*#__PURE__*/_jsxs(View, {
+      style: styles.labelWrapper,
+      children: [label && displayMode === 'default' ? /*#__PURE__*/_jsx(Animated.Text, {
+        style: hiddenStyle,
+        numberOfLines: 1,
+        onLayout: e => setLabelWidth(e.nativeEvent.layout.width),
+        children: label
+      }) : null, truncatedLabel ? /*#__PURE__*/_jsx(Animated.Text, {
+        style: hiddenStyle,
+        numberOfLines: 1,
+        onLayout: e => setTruncatedLabelWidth(e.nativeEvent.layout.width),
+        children: truncatedLabel
+      }) : null, finalLabelText ? /*#__PURE__*/_jsx(Animated.Text, {
+        accessible: false,
+        onLayout: onLabelLayout,
+        style: [tintColor ? {
+          color: tintColor
+        } : null, commonStyle],
+        numberOfLines: 1,
+        allowFontScaling: !!allowFontScaling,
+        children: finalLabelText
+      }) : null]
+    });
+    if (backImage || Platform.OS !== 'ios') {
+      // When a custom backimage is specified, we can't mask the label
+      // Otherwise there might be weird effect due to our mask not being the same as the image
+      return labelElement;
+    }
+    return /*#__PURE__*/_jsx(MaskedView, {
+      maskElement: /*#__PURE__*/_jsxs(View, {
+        style: [styles.iconMaskContainer,
+        // Extend the mask to the center of the screen so that label isn't clipped during animation
+        screenLayout ? {
+          minWidth: screenLayout.width / 2 - 27
+        } : null],
+        children: [/*#__PURE__*/_jsx(Image, {
+          source: backIconMask,
+          resizeMode: "contain",
+          style: [styles.iconMask, direction === 'rtl' && styles.flip]
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.iconMaskFillerRect
+        })]
+      }),
+      children: labelElement
+    });
+  };
+  const handlePress = () => {
+    if (onPress) {
+      requestAnimationFrame(() => onPress());
+    }
+  };
+  return /*#__PURE__*/_jsx(HeaderButton, {
+    disabled: disabled,
+    href: href,
+    accessibilityLabel: accessibilityLabel,
+    testID: testID,
+    onPress: handlePress,
+    pressColor: pressColor,
+    pressOpacity: pressOpacity,
+    style: [styles.container, style],
+    children: /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [renderBackImage(), renderLabel()]
+    })
+  });
+}
+const ICON_WIDTH = Platform.OS === 'ios' ? 13 : 24;
+const ICON_MARGIN_END = Platform.OS === 'ios' ? 22 : 3;
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 0,
+    minWidth: StyleSheet.hairlineWidth,
+    // Avoid collapsing when title is long
+    ...Platform.select({
+      ios: null,
+      default: {
+        marginVertical: 3,
+        marginHorizontal: 11
+      }
+    })
+  },
+  label: {
+    fontSize: 17,
+    // Title and back label are a bit different width due to title being bold
+    // Adjusting the letterSpacing makes them coincide better
+    letterSpacing: 0.35
+  },
+  labelWrapper: {
+    // These styles will make sure that the label doesn't fill the available space
+    // Otherwise it messes with the measurement of the label
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginEnd: ICON_MARGIN
+  },
+  icon: {
+    width: ICON_WIDTH,
+    marginEnd: ICON_MARGIN_END
+  },
+  iconWithLabel: Platform.OS === 'ios' ? {
+    marginEnd: 6
+  } : {},
+  iconMaskContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center'
+  },
+  iconMaskFillerRect: {
+    flex: 1,
+    backgroundColor: '#000'
+  },
+  iconMask: {
+    height: 21,
+    width: 13,
+    marginStart: -14.5,
+    marginVertical: 12,
+    alignSelf: 'center'
+  },
+  flip: {
+    transform: 'scaleX(-1)'
+  }
+});
+//# sourceMappingURL=HeaderBackButton.js.map

package/lib/module/Header/HeaderBackButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useLocale","useTheme","React","Animated","Image","Platform","StyleSheet","View","backIcon","backIconMask","MaskedView","HeaderButton","HeaderIcon","ICON_MARGIN","jsx","_jsx","jsxs","_jsxs","HeaderBackButton","disabled","allowFontScaling","backImage","label","labelStyle","displayMode","OS","onLabelLayout","onPress","pressColor","pressOpacity","screenLayout","tintColor","titleLayout","truncatedLabel","accessibilityLabel","testID","style","href","colors","fonts","direction","labelWidth","setLabelWidth","useState","truncatedLabelWidth","setTruncatedLabelWidth","renderBackImage","text","source","styles","icon","iconWithLabel","renderLabel","availableSpace","width","ICON_WIDTH","potentialLabelText","finalLabelText","commonStyle","regular","hiddenStyle","position","top","left","opacity","labelElement","labelWrapper","children","Text","numberOfLines","onLayout","e","nativeEvent","layout","accessible","color","maskElement","iconMaskContainer","minWidth","resizeMode","iconMask","flip","iconMaskFillerRect","handlePress","requestAnimationFrame","container","Fragment","ICON_MARGIN_END","create","paddingHorizontal","hairlineWidth","select","ios","default","marginVertical","marginHorizontal","fontSize","letterSpacing","flexDirection","alignItems","marginEnd","flex","justifyContent","backgroundColor","height","marginStart","alignSelf","transform"],"sourceRoot":"..\\..\\..\\src","sources":["Header/HeaderBackButton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Header/HeaderBackContext.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import { getNamedContext } from "../getNamedContext.js";
+export const HeaderBackContext = getNamedContext('HeaderBackContext', undefined);
+//# sourceMappingURL=HeaderBackContext.js.map

package/lib/module/Header/HeaderBackContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getNamedContext","HeaderBackContext","undefined"],"sourceRoot":"..\\..\\..\\src","sources":["Header/HeaderBackContext.tsx"],"mappings":";;AAAA,SAASA,eAAe,QAAQ,uBAAoB;AAEpD,OAAO,MAAMC,iBAAiB,GAAGD,eAAe,CAE9C,mBAAmB,EAAEE,SAAS,CAAC","ignoreList":[]}

package/lib/module/Header/HeaderBackground.js

@@ -0,0 +1,47 @@
+"use strict";
+
+import { useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import { Animated, Platform, StyleSheet } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function HeaderBackground({
+  style,
+  ...rest
+}) {
+  const {
+    colors,
+    dark
+  } = useTheme();
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.container, {
+      backgroundColor: colors.card,
+      borderBottomColor: colors.border,
+      ...(Platform.OS === 'ios' && {
+        shadowColor: dark ? 'rgba(255, 255, 255, 0.45)' : 'rgba(0, 0, 0, 1)'
+      })
+    }, style],
+    ...rest
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    ...Platform.select({
+      android: {
+        elevation: 4
+      },
+      ios: {
+        shadowOpacity: 0.3,
+        shadowRadius: 0,
+        shadowOffset: {
+          width: 0,
+          height: StyleSheet.hairlineWidth
+        }
+      },
+      default: {
+        borderBottomWidth: StyleSheet.hairlineWidth
+      }
+    })
+  }
+});
+//# sourceMappingURL=HeaderBackground.js.map

package/lib/module/Header/HeaderBackground.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTheme","React","Animated","Platform","StyleSheet","jsx","_jsx","HeaderBackground","style","rest","colors","dark","View","styles","container","backgroundColor","card","borderBottomColor","border","OS","shadowColor","create","flex","select","android","elevation","ios","shadowOpacity","shadowRadius","shadowOffset","width","height","hairlineWidth","default","borderBottomWidth"],"sourceRoot":"..\\..\\..\\src","sources":["Header/HeaderBackground.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SACEC,QAAQ,EACRC,QAAQ,EAERC,UAAU,QAGL,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOtB,OAAO,SAASC,gBAAgBA,CAAC;EAAEC,KAAK;EAAE,GAAGC;AAAY,CAAC,EAAE;EAC1D,MAAM;IAAEC,MAAM;IAAEC;EAAK,CAAC,GAAGX,QAAQ,CAAC,CAAC;EAEnC,oBACEM,IAAA,CAACJ,QAAQ,CAACU,IAAI;IACZJ,KAAK,EAAE,CACLK,MAAM,CAACC,SAAS,EAChB;MACEC,eAAe,EAAEL,MAAM,CAACM,IAAI;MAC5BC,iBAAiB,EAAEP,MAAM,CAACQ,MAAM;MAChC,IAAIf,QAAQ,CAACgB,EAAE,KAAK,KAAK,IAAI;QAC3BC,WAAW,EAAET,IAAI,GACb,2BAA2B,GAC3B;MACN,CAAC;IACH,CAAC,EACDH,KAAK,CACL;IAAA,GACEC;EAAI,CACT,CAAC;AAEN;AAEA,MAAMI,MAAM,GAAGT,UAAU,CAACiB,MAAM,CAAC;EAC/BP,SAAS,EAAE;IACTQ,IAAI,EAAE,CAAC;IACP,GAAGnB,QAAQ,CAACoB,MAAM,CAAC;MACjBC,OAAO,EAAE;QACPC,SAAS,EAAE;MACb,CAAC;MACDC,GAAG,EAAE;QACHC,aAAa,EAAE,GAAG;QAClBC,YAAY,EAAE,CAAC;QACfC,YAAY,EAAE;UACZC,KAAK,EAAE,CAAC;UACRC,MAAM,EAAE3B,UAAU,CAAC4B;QACrB;MACF,CAAC;MACDC,OAAO,EAAE;QACPC,iBAAiB,EAAE9B,UAAU,CAAC4B;MAChC;IACF,CAAC;EACH;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/Header/HeaderButton.js

@@ -0,0 +1,56 @@
+"use strict";
+
+import { Platform, StyleSheet } from 'react-native';
+import { PlatformPressable } from "../PlatformPressable.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function HeaderButton({
+  disabled,
+  onPress,
+  pressColor,
+  pressOpacity,
+  accessibilityLabel,
+  testID,
+  style,
+  href,
+  children
+}) {
+  return /*#__PURE__*/_jsx(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: children
+  });
+}
+const androidRipple = {
+  borderless: true,
+  foreground: Platform.OS === 'android' && Platform.Version >= 23,
+  radius: 20
+};
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    // Roundness for iPad hover effect
+    borderRadius: 10
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+//# sourceMappingURL=HeaderButton.js.map

package/lib/module/Header/HeaderButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Platform","StyleSheet","PlatformPressable","jsx","_jsx","HeaderButton","disabled","onPress","pressColor","pressOpacity","accessibilityLabel","testID","style","href","children","android_ripple","androidRipple","styles","container","hitSlop","select","ios","undefined","default","top","right","bottom","left","borderless","foreground","OS","Version","radius","create","flexDirection","alignItems","paddingHorizontal","borderRadius","opacity"],"sourceRoot":"..\\..\\..\\src","sources":["Header/HeaderButton.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,UAAU,QAAQ,cAAc;AAEnD,SAASC,iBAAiB,QAAQ,yBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGzD,OAAO,SAASC,YAAYA,CAAC;EAC3BC,QAAQ;EACRC,OAAO;EACPC,UAAU;EACVC,YAAY;EACZC,kBAAkB;EAClBC,MAAM;EACNC,KAAK;EACLC,IAAI;EACJC;AACiB,CAAC,EAAE;EACpB,oBACEV,IAAA,CAACF,iBAAiB;IAChBI,QAAQ,EAAEA,QAAS;IACnBO,IAAI,EAAEA,IAAK;IACXH,kBAAkB,EAAEA,kBAAmB;IACvCC,MAAM,EAAEA,MAAO;IACfJ,OAAO,EAAEA,OAAQ;IACjBC,UAAU,EAAEA,UAAW;IACvBC,YAAY,EAAEA,YAAa;IAC3BM,cAAc,EAAEC,aAAc;IAC9BJ,KAAK,EAAE,CAACK,MAAM,CAACC,SAAS,EAAEZ,QAAQ,IAAIW,MAAM,CAACX,QAAQ,EAAEM,KAAK,CAAE;IAC9DO,OAAO,EAAEnB,QAAQ,CAACoB,MAAM,CAAC;MACvBC,GAAG,EAAEC,SAAS;MACdC,OAAO,EAAE;QAAEC,GAAG,EAAE,EAAE;QAAEC,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE,EAAE;QAAEC,IAAI,EAAE;MAAG;IACtD,CAAC,CAAE;IAAAb,QAAA,EAEFA;EAAQ,CACQ,CAAC;AAExB;AAEA,MAAME,aAAa,GAAG;EACpBY,UAAU,EAAE,IAAI;EAChBC,UAAU,EAAE7B,QAAQ,CAAC8B,EAAE,KAAK,SAAS,IAAI9B,QAAQ,CAAC+B,OAAO,IAAI,EAAE;EAC/DC,MAAM,EAAE;AACV,CAAC;AAED,MAAMf,MAAM,GAAGhB,UAAU,CAACgC,MAAM,CAAC;EAC/Bf,SAAS,EAAE;IACTgB,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,iBAAiB,EAAE,CAAC;IACpB;IACAC,YAAY,EAAE;EAChB,CAAC;EACD/B,QAAQ,EAAE;IACRgC,OAAO,EAAE;EACX;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/Header/HeaderHeightContext.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import { getNamedContext } from "../getNamedContext.js";
+export const HeaderHeightContext = getNamedContext('HeaderHeightContext', undefined);
+//# sourceMappingURL=HeaderHeightContext.js.map

package/lib/module/Header/HeaderHeightContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getNamedContext","HeaderHeightContext","undefined"],"sourceRoot":"..\\..\\..\\src","sources":["Header/HeaderHeightContext.tsx"],"mappings":";;AAAA,SAASA,eAAe,QAAQ,uBAAoB;AAEpD,OAAO,MAAMC,mBAAmB,GAAGD,eAAe,CAChD,qBAAqB,EACrBE,SACF,CAAC","ignoreList":[]}

package/lib/module/Header/HeaderIcon.js

@@ -0,0 +1,38 @@
+"use strict";
+
+import { useLocale, useTheme } from '@react-navigation/native';
+import { Image, Platform, StyleSheet } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function HeaderIcon({
+  source,
+  style,
+  ...rest
+}) {
+  const {
+    colors
+  } = useTheme();
+  const {
+    direction
+  } = useLocale();
+  return /*#__PURE__*/_jsx(Image, {
+    source: source,
+    resizeMode: "contain",
+    fadeDuration: 0,
+    tintColor: colors.text,
+    style: [styles.icon, direction === 'rtl' && styles.flip, style],
+    ...rest
+  });
+}
+export const ICON_SIZE = Platform.OS === 'ios' ? 21 : 24;
+export const ICON_MARGIN = Platform.OS === 'ios' ? 8 : 3;
+const styles = StyleSheet.create({
+  icon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    margin: ICON_MARGIN
+  },
+  flip: {
+    transform: 'scaleX(-1)'
+  }
+});
+//# sourceMappingURL=HeaderIcon.js.map

package/lib/module/Header/HeaderIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useLocale","useTheme","Image","Platform","StyleSheet","jsx","_jsx","HeaderIcon","source","style","rest","colors","direction","resizeMode","fadeDuration","tintColor","text","styles","icon","flip","ICON_SIZE","OS","ICON_MARGIN","create","width","height","margin","transform"],"sourceRoot":"..\\..\\..\\src","sources":["Header/HeaderIcon.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,0BAA0B;AAC9D,SAASC,KAAK,EAAmBC,QAAQ,EAAEC,UAAU,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5E,OAAO,SAASC,UAAUA,CAAC;EAAEC,MAAM;EAAEC,KAAK;EAAE,GAAGC;AAAiB,CAAC,EAAE;EACjE,MAAM;IAAEC;EAAO,CAAC,GAAGV,QAAQ,CAAC,CAAC;EAC7B,MAAM;IAAEW;EAAU,CAAC,GAAGZ,SAAS,CAAC,CAAC;EAEjC,oBACEM,IAAA,CAACJ,KAAK;IACJM,MAAM,EAAEA,MAAO;IACfK,UAAU,EAAC,SAAS;IACpBC,YAAY,EAAE,CAAE;IAChBC,SAAS,EAAEJ,MAAM,CAACK,IAAK;IACvBP,KAAK,EAAE,CAACQ,MAAM,CAACC,IAAI,EAAEN,SAAS,KAAK,KAAK,IAAIK,MAAM,CAACE,IAAI,EAAEV,KAAK,CAAE;IAAA,GAC5DC;EAAI,CACT,CAAC;AAEN;AAEA,OAAO,MAAMU,SAAS,GAAGjB,QAAQ,CAACkB,EAAE,KAAK,KAAK,GAAG,EAAE,GAAG,EAAE;AACxD,OAAO,MAAMC,WAAW,GAAGnB,QAAQ,CAACkB,EAAE,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;AAExD,MAAMJ,MAAM,GAAGb,UAAU,CAACmB,MAAM,CAAC;EAC/BL,IAAI,EAAE;IACJM,KAAK,EAAEJ,SAAS;IAChBK,MAAM,EAAEL,SAAS;IACjBM,MAAM,EAAEJ;EACV,CAAC;EACDH,IAAI,EAAE;IACJQ,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/Header/HeaderSearchBar.js

@@ -0,0 +1,288 @@
+"use strict";
+
+import { useNavigation, useTheme } from '@react-navigation/native';
+import Color from 'color';
+import * as React from 'react';
+import { Animated, Image, Platform, StyleSheet, TextInput, View } from 'react-native';
+import clearIcon from '../assets/clear-icon.png';
+import closeIcon from '../assets/close-icon.png';
+import searchIcon from '../assets/search-icon.png';
+import { PlatformPressable } from "../PlatformPressable.js";
+import { Text } from "../Text.js";
+import { HeaderButton } from "./HeaderButton.js";
+import { HeaderIcon } from "./HeaderIcon.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const INPUT_TYPE_TO_MODE = {
+  text: 'text',
+  number: 'numeric',
+  phone: 'tel',
+  email: 'email'
+};
+const useNativeDriver = Platform.OS !== 'web';
+function HeaderSearchBarInternal({
+  visible,
+  inputType,
+  autoFocus = true,
+  placeholder = 'Search',
+  cancelButtonText = 'Cancel',
+  enterKeyHint = 'search',
+  onChangeText,
+  onClose,
+  tintColor,
+  style,
+  ...rest
+}, ref) {
+  const navigation = useNavigation();
+  const {
+    dark,
+    colors,
+    fonts
+  } = useTheme();
+  const [value, setValue] = React.useState('');
+  const [rendered, setRendered] = React.useState(visible);
+  const [visibleAnim] = React.useState(() => new Animated.Value(visible ? 1 : 0));
+  const [clearVisibleAnim] = React.useState(() => new Animated.Value(0));
+  const visibleValueRef = React.useRef(visible);
+  const clearVisibleValueRef = React.useRef(false);
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    // Avoid act warning in tests just by rendering header
+    if (visible === visibleValueRef.current) {
+      return;
+    }
+    Animated.timing(visibleAnim, {
+      toValue: visible ? 1 : 0,
+      duration: 100,
+      useNativeDriver
+    }).start(({
+      finished
+    }) => {
+      if (finished) {
+        setRendered(visible);
+        visibleValueRef.current = visible;
+      }
+    });
+    return () => {
+      visibleAnim.stopAnimation();
+    };
+  }, [visible, visibleAnim]);
+  const hasText = value !== '';
+  React.useEffect(() => {
+    if (clearVisibleValueRef.current === hasText) {
+      return;
+    }
+    Animated.timing(clearVisibleAnim, {
+      toValue: hasText ? 1 : 0,
+      duration: 100,
+      useNativeDriver
+    }).start(({
+      finished
+    }) => {
+      if (finished) {
+        clearVisibleValueRef.current = hasText;
+      }
+    });
+  }, [clearVisibleAnim, hasText]);
+  const clearText = React.useCallback(() => {
+    inputRef.current?.clear();
+    inputRef.current?.focus();
+    setValue('');
+  }, []);
+  const onClear = React.useCallback(() => {
+    clearText();
+    // FIXME: figure out how to create a SyntheticEvent
+    // @ts-expect-error: we don't have the native event here
+    onChangeText?.({
+      nativeEvent: {
+        text: ''
+      }
+    });
+  }, [clearText, onChangeText]);
+  const cancelSearch = React.useCallback(() => {
+    onClear();
+    onClose();
+  }, [onClear, onClose]);
+  React.useEffect(() => navigation?.addListener('blur', cancelSearch), [cancelSearch, navigation]);
+  React.useImperativeHandle(ref, () => ({
+    focus: () => {
+      inputRef.current?.focus();
+    },
+    blur: () => {
+      inputRef.current?.blur();
+    },
+    setText: text => {
+      inputRef.current?.setNativeProps({
+        text
+      });
+      setValue(text);
+    },
+    clearText,
+    cancelSearch
+  }), [cancelSearch, clearText]);
+  if (!visible && !rendered) {
+    return null;
+  }
+  const textColor = tintColor ?? colors.text;
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    pointerEvents: visible ? 'auto' : 'none',
+    accessibilityLiveRegion: "polite",
+    accessibilityElementsHidden: !visible,
+    importantForAccessibility: visible ? 'auto' : 'no-hide-descendants',
+    style: [styles.container, {
+      opacity: visibleAnim
+    }, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.searchbarContainer,
+      children: [/*#__PURE__*/_jsx(HeaderIcon, {
+        source: searchIcon,
+        tintColor: textColor,
+        style: styles.inputSearchIcon
+      }), /*#__PURE__*/_jsx(TextInput, {
+        ...rest,
+        ref: inputRef,
+        onChange: onChangeText,
+        onChangeText: setValue,
+        autoFocus: autoFocus,
+        inputMode: INPUT_TYPE_TO_MODE[inputType ?? 'text'],
+        enterKeyHint: enterKeyHint,
+        placeholder: placeholder,
+        placeholderTextColor: Color(textColor).alpha(0.5).string(),
+        cursorColor: colors.primary,
+        selectionHandleColor: colors.primary,
+        selectionColor: Color(colors.primary).alpha(0.3).string(),
+        style: [fonts.regular, styles.searchbar, {
+          backgroundColor: Platform.select({
+            ios: dark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
+            default: 'transparent'
+          }),
+          color: textColor,
+          borderBottomColor: Color(textColor).alpha(0.2).string()
+        }]
+      }), Platform.OS === 'ios' ||
+      // @ts-ignore
+      Platform.OS === 'harmony' ? /*#__PURE__*/_jsx(PlatformPressable, {
+        onPress: onClear,
+        style: [{
+          opacity: clearVisibleAnim,
+          transform: [{
+            scale: clearVisibleAnim
+          }]
+        }, styles.clearButton],
+        children: /*#__PURE__*/_jsx(Image, {
+          source: clearIcon,
+          resizeMode: "contain",
+          tintColor: textColor,
+          style: styles.clearIcon
+        })
+      }) : null]
+    }), Platform.OS !== 'ios' &&
+    // @ts-ignore
+    Platform.OS !== 'harmony' ? /*#__PURE__*/_jsx(HeaderButton, {
+      onPress: () => {
+        if (value) {
+          onClear();
+        } else {
+          onClose();
+        }
+      },
+      style: styles.closeButton,
+      children: /*#__PURE__*/_jsx(HeaderIcon, {
+        source: closeIcon,
+        tintColor: textColor
+      })
+    }) : null, Platform.OS === 'ios' ? /*#__PURE__*/_jsx(PlatformPressable, {
+      onPress: cancelSearch,
+      style: styles.cancelButton,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [fonts.regular, {
+          color: tintColor ?? colors.primary
+        }, styles.cancelText],
+        children: cancelButtonText
+      })
+    }) : null]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'stretch'
+  },
+  inputSearchIcon: {
+    position: 'absolute',
+    opacity: 0.5,
+    left: Platform.select({
+      ios: 16,
+      default: 4
+    }),
+    top: Platform.select({
+      ios: -1,
+      default: 17
+    }),
+    ...Platform.select({
+      ios: {
+        height: 18,
+        width: 18
+      },
+      default: {}
+    })
+  },
+  closeButton: {
+    position: 'absolute',
+    opacity: 0.5,
+    right: Platform.select({
+      ios: 0,
+      default: 8
+    }),
+    top: Platform.select({
+      ios: -2,
+      default: 17
+    })
+  },
+  clearButton: {
+    position: 'absolute',
+    right: 0,
+    top: -7,
+    bottom: 0,
+    justifyContent: 'center',
+    padding: 8
+  },
+  clearIcon: {
+    height: 16,
+    width: 16,
+    opacity: 0.5
+  },
+  cancelButton: {
+    alignSelf: 'center',
+    top: -4
+  },
+  cancelText: {
+    fontSize: 17,
+    marginHorizontal: 12
+  },
+  searchbarContainer: {
+    flex: 1
+  },
+  searchbar: Platform.select({
+    ios: {
+      flex: 1,
+      fontSize: 17,
+      paddingHorizontal: 32,
+      marginLeft: 16,
+      marginTop: -1,
+      marginBottom: 4,
+      borderRadius: 8
+    },
+    default: {
+      flex: 1,
+      fontSize: 18,
+      paddingHorizontal: 36,
+      marginRight: 8,
+      marginTop: 8,
+      marginBottom: 8,
+      borderBottomWidth: 1
+    }
+  })
+});
+export const HeaderSearchBar = /*#__PURE__*/React.forwardRef(HeaderSearchBarInternal);
+//# sourceMappingURL=HeaderSearchBar.js.map