react-native-ui-lib 8.3.4-snapshot.7813 → 8.3.4-snapshot.7814

package/src/components/dialog/useDialogContent.d.ts

@@ -8,6 +8,6 @@ declare const useDialogContent: (props: InternalDialogCloseButtonProps) => {
     containerStyle: false | "" | import("react-native").ViewStyle | import("react-native").RegisteredStyle<import("react-native").ViewStyle> | import("react-native").RecursiveArray<import("react-native").ViewStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").ViewStyle>> | (import("react-native").StyleProp<import("react-native").ViewStyle> | {
         backgroundColor: string;
     })[] | null | undefined;
-    containerProps: Omit<import("../../components/view").ViewProps, "style" | "ref" | "animated" | "onLayout" | "testID" | "reanimated"> | undefined;
+    containerProps: Omit<import("../../components/view").ViewProps, "style" | "testID" | "ref" | "onLayout" | "animated" | "reanimated"> | undefined;
 };
 export default useDialogContent;

package/src/components/drawer/index.d.ts

@@ -126,7 +126,7 @@ declare class Drawer extends PureComponent<DrawerProps> {
     };
     leftRender: SwipeableProps['renderLeftActions'];
     rightRender: SwipeableProps['renderLeftActions'];
-    _swipeableRow: RefObject<Swipeable | null>;
+    _swipeableRow: RefObject<Swipeable>;
     animationOptions: SwipeableProps['animationOptions'];
     leftActionX: Animated.Value;
     constructor(props: DrawerProps);

package/src/components/expandableSection/index.d.ts

@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import React from 'react';
 export type ExpandableSectionProps = {
     /**
      * expandableSection header element
@@ -36,5 +36,5 @@ export type ExpandableSectionProps = {
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ExpandableSectionScreen.tsx
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ExpandableSection/ExpandableSection.gif?raw=true
  */
-declare function ExpandableSection(props: ExpandableSectionProps): JSX.Element;
+declare function ExpandableSection(props: ExpandableSectionProps): React.JSX.Element;
 export default ExpandableSection;

package/src/components/fadedScrollView/index.js

@@ -20,7 +20,7 @@ const FadedScrollView = props => {
     ...others
   } = props;
   const ScrollView = useGesture ? GestureScrollView : RNScrollView;
-  const scrollViewRef = useRef(undefined);
+  const scrollViewRef = useRef();
   const horizontal = propsHorizontal ?? false;
   const {
     onContentSizeChange,

package/src/components/featureHighlight/index.js

@@ -200,12 +200,16 @@ class FeatureHighlight extends Component {
         {title && <Text text60 style={[styles.title, {
         color,
         marginBottom: message ? titleBottomMargin : messageBottomMargin
-      }, titleStyle]} numberOfLines={titleNumberOfLines} pointerEvents={'none'}>
+      }, titleStyle]} numberOfLines={titleNumberOfLines}
+      // @ts-expect-error
+      pointerEvents={'none'}>
             {title}
           </Text>}
         {message && <Text text70 style={[styles.message, {
         color
-      }, messageStyle]} numberOfLines={messageNumberOfLines} pointerEvents={'none'}>
+      }, messageStyle]} numberOfLines={messageNumberOfLines}
+      // @ts-expect-error
+      pointerEvents={'none'}>
             {message}
           </Text>}
         <Button label={defaultButtonLabel} size={ButtonSize.medium} labelStyle={{
@@ -240,9 +244,7 @@ class FeatureHighlight extends Component {
           {pageControlProps ? <View flex bottom>
               <PageControl {...pageControlProps} containerStyle={{
             marginBottom: 24
-          }} ref={r => {
-            this.viewRef = r;
-          }} />
+          }} ref={r => this.viewRef = r} />
               <View accessible accessibilityLabel={'dismiss button'} />
             </View> : <View flex accessible accessibilityLabel={'dismiss'} accessibilityRole={'button'} />}
         </TouchableWithoutFeedback>

package/src/components/gridListItem/index.d.ts

@@ -21,7 +21,7 @@ export interface GridListItemProps {
     /**
      * Custom GridListItem to be rendered in the GridView
      */
-    renderCustomItem?: () => React.ReactElement<any>;
+    renderCustomItem?: () => React.ReactElement;
     /**
      * The item size
      */
@@ -29,7 +29,7 @@ export interface GridListItemProps {
     /**
      * Title content text
      */
-    title?: string | React.ReactElement<any>;
+    title?: string | React.ReactElement;
     /**
      * Title content typography
      */
@@ -45,7 +45,7 @@ export interface GridListItemProps {
     /**
      * Subtitle content text
      */
-    subtitle?: string | React.ReactElement<any>;
+    subtitle?: string | React.ReactElement;
     /**
      * Subtitle content typography
      */
@@ -61,7 +61,7 @@ export interface GridListItemProps {
     /**
      * Description content text
      */
-    description?: string | React.ReactElement<any>;
+    description?: string | React.ReactElement;
     /**
      * Description content typography
      */
@@ -101,12 +101,12 @@ export interface GridListItemProps {
     /**
      * Renders an overlay on top of the image
      */
-    renderOverlay?: () => React.ReactElement<any>;
+    renderOverlay?: () => React.ReactElement;
     /**
      * Test ID for component
      */
     testID?: string;
-    children?: React.ReactElement<any> | React.ReactElement<any>[];
+    children?: React.ReactElement | React.ReactElement[];
 }
 /**
  * @description: A single grid view/list item component
@@ -122,7 +122,7 @@ declare class GridListItem extends Component<GridListItemProps> {
     onItemPress: () => void;
     getItemSizeObj(): ImageSize;
     getContainerHorizontalAlignment: (this: any, horizontalAlignment: any) => "center" | "flex-start" | "flex-end" | undefined;
-    renderContent(text: string | React.ReactElement<any> | undefined, textProps: Partial<TextProps>): React.JSX.Element | undefined;
+    renderContent(text: string | React.ReactElement | undefined, textProps: Partial<TextProps>): React.JSX.Element | undefined;
     render(): React.JSX.Element;
 }
 export default GridListItem;

package/src/components/gridView/index.d.ts

@@ -39,7 +39,7 @@ export interface GridViewProps {
     /**
      * Pass to render a custom item
      */
-    renderCustomItem?: (item: GridListItemProps) => React.ReactElement<any>;
+    renderCustomItem?: (item: GridListItemProps) => React.ReactElement;
 }
 interface GridViewState {
     viewWidth: number;

package/src/components/hint/HintBubble.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { View as RNView, LayoutChangeEvent } from 'react-native';
 import { HintProps } from './types';
 interface HintBubbleProps extends Pick<HintProps, 'testID' | 'visible' | 'message' | 'messageStyle' | 'color' | 'removePaddings' | 'enableShadow' | 'borderRadius' | 'iconStyle' | 'icon' | 'customContent'> {
-    hintRef: React.RefObject<RNView | null>;
+    hintRef: React.RefObject<RNView>;
     setHintLayout: (layoutChangeEvent: LayoutChangeEvent) => void;
     hintPositionStyle: {
         left: number;

package/src/components/hint/HintOld.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, ReactElement, ElementRef, type JSX } from 'react';
+import React, { Component, ReactElement, ElementRef } from 'react';
 import { Animated, GestureResponderEvent, ImageSourcePropType, ImageStyle, StyleProp, TextStyle, ViewStyle, LayoutChangeEvent, View as RNView } from 'react-native';
 declare enum TARGET_POSITIONS {
     LEFT = "left",
@@ -18,7 +18,7 @@ interface HintTargetFrame {
 type Position = Pick<ViewStyle, 'top' | 'bottom' | 'left' | 'right'>;
 type HintPositionStyle = Position & Pick<ViewStyle, 'alignItems'>;
 type Paddings = Pick<ViewStyle, 'paddingLeft' | 'paddingRight' | 'paddingVertical' | 'paddingHorizontal'>;
-type ContentType = string | ReactElement<any>;
+type ContentType = string | ReactElement;
 export interface HintProps {
     /**
      * Control the visibility of the hint
@@ -130,7 +130,7 @@ declare class Hint extends Component<HintProps, HintState> {
     };
     static positions: typeof HintPositions;
     targetRef: ElementRef<typeof RNView> | null;
-    hintRef: React.RefObject<RNView | null>;
+    hintRef: React.RefObject<RNView>;
     animationDuration: number;
     state: {
         targetLayoutInWindow: {
@@ -183,14 +183,14 @@ declare class Hint extends Component<HintProps, HintState> {
     getTipPosition(): Position;
     getHintOffsetForShortMessage: () => number;
     isUsingModal: () => boolean | undefined;
-    renderOverlay(): JSX.Element | undefined;
-    renderHintTip(): JSX.Element;
-    renderHint(): JSX.Element;
-    renderHintContainer(): JSX.Element | undefined;
-    renderHintAnchor(): JSX.Element;
-    renderMockChildren(): JSX.Element | undefined;
+    renderOverlay(): React.JSX.Element | undefined;
+    renderHintTip(): React.JSX.Element;
+    renderHint(): React.JSX.Element;
+    renderHintContainer(): React.JSX.Element | undefined;
+    renderHintAnchor(): React.JSX.Element;
+    renderMockChildren(): React.JSX.Element | undefined;
     renderChildren(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    render(): string | number | bigint | true | JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;
+    render(): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
 }
 declare const _default: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<any>> & typeof Hint;
 export default _default;

package/src/components/hint/hooks/useHintLayout.d.ts

@@ -6,7 +6,7 @@ export default function useHintLayout({ onBackgroundPress, targetFrame }: UseHin
     targetLayoutState: LayoutRectangle | undefined;
     targetLayoutInWindowState: LayoutRectangle | undefined;
     hintMessageWidth: number | undefined;
-    targetRef: import("react").RefObject<RNView | null>;
+    targetRef: import("react").MutableRefObject<RNView | null>;
     onTargetLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => void;
     setHintLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => void;
 };

package/src/components/hint/index.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { HintPositions, HintProps } from './types';
 declare const Hint: {
-    (props: HintProps): string | number | bigint | true | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;
+    (props: HintProps): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
     displayName: string;
     positions: typeof HintPositions;
 };
 export { HintProps, Hint };
 declare const _default: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<any>> & {
-    (props: HintProps): string | number | bigint | true | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;
+    (props: HintProps): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
     displayName: string;
     positions: typeof HintPositions;
 };

package/src/components/hint/types.d.ts

@@ -1,9 +1,9 @@
-import type { ReactElement, JSX } from 'react';
+import type { ReactElement } from 'react';
 import type { GestureResponderEvent, ImageSourcePropType, ImageStyle, LayoutRectangle, StyleProp, TextStyle, ViewStyle } from 'react-native';
 export type PositionStyle = Pick<ViewStyle, 'top' | 'bottom' | 'left' | 'right'>;
 export type LayoutStyle = PositionStyle & Pick<ViewStyle, 'alignItems'>;
 export type PaddingsStyle = Pick<ViewStyle, 'paddingLeft' | 'paddingRight' | 'paddingVertical' | 'paddingHorizontal'>;
-export type ContentType = string | ReactElement<any>;
+export type ContentType = string | ReactElement;
 export declare enum TargetAlignments {
     LEFT = "left",
     RIGHT = "right",

package/src/components/icon/index.js

@@ -74,6 +74,9 @@ const Icon = forwardRef((props, ref) => {
     </>;
 });
 Icon.displayName = 'Icon';
+Icon.defaultProps = {
+  assetGroup: 'icons'
+};
 export default asBaseComponent(Icon, {
   modifiersOptions: {
     margins: true

package/src/components/image/index.d.ts

@@ -50,7 +50,7 @@ export type ImageProps = Omit<RNImageProps, 'source'> & Pick<ImageBackgroundProp
     /**
      * Render an overlay with custom content
      */
-    customOverlayContent?: React.ReactElement<any> | React.ReactElement<any>[];
+    customOverlayContent?: React.ReactElement | React.ReactElement[];
     /**
      * Default image source in case of an error
      */

package/src/components/image/index.js

@@ -158,27 +158,24 @@ class Image extends PureComponent {
     const {
       margins
     } = modifiers;
-    return <ImageView
-    // @ts-expect-error TODO: this error emanates from the fact that
-    // RNImage does not support `resizeMode` inside styles.containImage
-    // I think this is too complex for TS to handle as using inline style
-    // solves it. It is probably possible to refactor and solve it, but
-    // I feel it is not worth the risk ATM.
-    style={[tintColor && {
-      tintColor
-    }, shouldFlipRTL && styles.rtlFlipped, width ? {
-      width
-    } : undefined, height ? {
-      height
-    } : undefined, borderRadius ? {
-      borderRadius
-    } : undefined, cover && styles.coverImage, this.isGif() && styles.gifImage, aspectRatio ? {
-      aspectRatio
-    } : undefined, !useImageInsideContainer && margins, useImageInsideContainer && styles.containImage, style, useImageInsideContainer && styles.shrink]} accessible={false} accessibilityRole={'image'} fsTagName={recorderTag} {...others}
-    // NOTE: imageStyle prop is only relevant for when rendering ImageBackground component
-    imageStyle={this.getImageStyle()} onError={this.onError} source={source}>
+    return (
+      // @ts-ignore
+      <ImageView style={[tintColor && {
+        tintColor
+      }, shouldFlipRTL && styles.rtlFlipped, width && {
+        width
+      }, height && {
+        height
+      }, borderRadius && {
+        borderRadius
+      }, cover && styles.coverImage, this.isGif() && styles.gifImage, aspectRatio && {
+        aspectRatio
+      }, !useImageInsideContainer && margins, useImageInsideContainer && styles.containImage, style, useImageInsideContainer && styles.shrink]} accessible={false} accessibilityRole={'image'} fsTagName={recorderTag} {...others}
+      // NOTE: imageStyle prop is only relevant for when rendering ImageBackground component
+      imageStyle={this.getImageStyle()} onError={this.onError} source={source}>
         {(overlayType || customOverlayContent) && <Overlay type={overlayType} intensity={overlayIntensity} color={overlayColor} customContent={customOverlayContent} borderRadius={borderRadius} />}
-      </ImageView>;
+      </ImageView>
+    );
   };
   renderRegularImage() {
     const {

package/src/components/loaderScreen/index.d.ts

@@ -3,7 +3,7 @@ import { LoaderScreenProps } from './types';
 export { LoaderScreenProps };
 declare const _default: React.ForwardRefExoticComponent<import("react-native").ActivityIndicatorProps & {
     loaderColor?: string | undefined;
-    customLoader?: string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    customLoader?: React.ReactChild | undefined;
     backgroundColor?: string | undefined;
     message?: string | undefined;
     messageStyle?: import("react-native").TextStyle | undefined;

package/src/components/loaderScreen/types.d.ts

@@ -8,7 +8,7 @@ export type LoaderScreenProps = ActivityIndicatorProps & {
     /**
      * Custom loader
      */
-    customLoader?: React.ReactElement<any> | number | string;
+    customLoader?: React.ReactChild;
     /**
      * Color of the loader background (only when passing 'overlay')
      */

package/src/components/maskedInput/index.d.ts

@@ -1,22 +1,5 @@
-import React, { type JSX } from 'react';
-import { TextInputProps, StyleProp, ViewStyle } from 'react-native';
-export interface MaskedInputProps extends Omit<TextInputProps, 'value'> {
-    /**
-     * Initial value to pass to masked input
-     */
-    initialValue?: string;
-    /**
-     * callback for rendering the custom input out of the value returns from the actual input
-     */
-    renderMaskedText?: (value?: string) => JSX.Element | undefined;
-    /**
-     * Custom formatter for the input value
-     */
-    formatter?: (value?: string) => string | undefined;
-    /**
-     * container style for the masked input container
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-}
-declare const _default: React.ForwardRefExoticComponent<MaskedInputProps & React.RefAttributes<any>>;
+import React from 'react';
+import { MaskedInputProps } from './new';
+export { MaskedInputProps };
+declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
 export default _default;

package/src/components/maskedInput/index.js

@@ -1,86 +1,24 @@
-import _isFunction from "lodash/isFunction";
-import _identity from "lodash/identity";
-import React, { useCallback, useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';
-import { StyleSheet, Keyboard, TextInput } from 'react-native';
+import React, { forwardRef, useEffect } from 'react';
 import { useThemeProps } from "../../hooks";
-import View from "../view";
-import Text from "../text";
-import TouchableOpacity from "../touchableOpacity";
-/**
- * @description: Mask Input to create custom looking inputs with custom formats
- * @gif: https://camo.githubusercontent.com/61eedb65e968845d5eac713dcd21a69691571fb1/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f4b5a5a7446666f486f454b334b2f67697068792e676966
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/MaskedInputScreen.tsx
- */
-function MaskedInput(props, ref) {
+// @ts-expect-error
+import MaskedInputOld from "./old";
+import MaskedInputNew, { MaskedInputProps } from "./new";
+import { LogService } from "../../services";
+function MaskedInputMigrator(props, refToForward) {
   const {
-    initialValue,
-    formatter = _identity,
-    containerStyle,
-    renderMaskedText,
-    onChangeText,
+    migrate,
     ...others
   } = useThemeProps(props, 'MaskedInput');
-  const [value, setValue] = useState(initialValue);
-  const inputRef = useRef(undefined);
-  const keyboardDidHideListener = useRef(undefined);
-  useImperativeHandle(ref, () => {
-    return {
-      isFocused: () => inputRef.current?.isFocused(),
-      focus,
-      blur: () => inputRef.current?.blur(),
-      clear: () => {
-        inputRef.current?.clear();
-        setValue('');
-        // NOTE: This fixes an RN issue - when triggering imperative clear method, it doesn't call onChangeText
-        onChangeText?.('');
-      }
-    };
-  });
   useEffect(() => {
-    if (initialValue !== value) {
-      setValue(initialValue);
+    if (!migrate) {
+      LogService.warn(`UILib MaskedInput implementation has been updated and now requires manual migration. To proceed, pass the "migrate" prop and check if the functionality works as expected.`);
     }
-  }, [initialValue]);
-  useEffect(() => {
-    keyboardDidHideListener.current = Keyboard.addListener('keyboardDidHide', () => {
-      if (inputRef.current?.isFocused()) {
-        inputRef.current?.blur();
-      }
-    });
-    return () => keyboardDidHideListener.current.remove();
-  }, []);
-  const _onChangeText = useCallback(value => {
-    const formattedValue = formatter(value) ?? '';
-    setValue(formattedValue);
-    onChangeText?.(formattedValue);
-  }, [onChangeText, formatter]);
-  const focus = useCallback(() => {
-    inputRef.current?.focus();
   }, []);
-  const _renderMaskedText = () => {
-    if (_isFunction(renderMaskedText)) {
-      return renderMaskedText(value);
-    }
-    return <Text>{value}</Text>;
-  };
-  return <TouchableOpacity style={containerStyle} activeOpacity={1} onPress={focus}>
-      <TextInput {...others} value={value}
-    // @ts-expect-error
-    ref={inputRef} style={styles.hiddenInput} enableErrors={false} hideUnderline placeholder="" caretHidden multiline={false} onChangeText={_onChangeText} />
-      <View style={styles.maskedInputWrapper}>{_renderMaskedText()}</View>
-    </TouchableOpacity>;
-}
-const styles = StyleSheet.create({
-  hiddenInput: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 1,
-    color: 'transparent',
-    backgroundColor: 'transparent',
-    height: undefined
-  },
-  maskedInputWrapper: {
-    zIndex: 0
+  if (migrate) {
+    return <MaskedInputNew {...others} ref={refToForward} />;
+  } else {
+    return <MaskedInputOld {...others} ref={refToForward} />;
   }
-});
-MaskedInput.displayName = 'MaskedInput';
-export default forwardRef(MaskedInput);
+}
+export { MaskedInputProps };
+export default forwardRef(MaskedInputMigrator);

package/src/components/maskedInput/maskedInput.api.json

@@ -44,6 +44,7 @@
     "  return (",
     "    <div>",
     "      <MaskedInput",
+    "        migrate",
     "        renderMaskedText={renderTimeText}",
     "        formatter={formatter}",
     "        keyboardType={'numeric'}",

package/src/components/maskedInput/new.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TextInputProps, StyleProp, ViewStyle } from 'react-native';
+export interface MaskedInputProps extends Omit<TextInputProps, 'value'> {
+    /**
+     * Initial value to pass to masked input
+     */
+    initialValue?: string;
+    /**
+     * callback for rendering the custom input out of the value returns from the actual input
+     */
+    renderMaskedText?: (value?: string) => JSX.Element | undefined;
+    /**
+     * Custom formatter for the input value
+     */
+    formatter?: (value?: string) => string | undefined;
+    /**
+     * container style for the masked input container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+}
+declare const _default: React.ForwardRefExoticComponent<MaskedInputProps & React.RefAttributes<any>>;
+export default _default;

package/src/components/maskedInput/new.js

@@ -0,0 +1,85 @@
+import _isFunction from "lodash/isFunction";
+import _identity from "lodash/identity";
+import React, { useCallback, useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';
+import { StyleSheet, Keyboard, TextInput } from 'react-native';
+import View from "../view";
+import Text from "../text";
+import TouchableOpacity from "../touchableOpacity";
+/**
+ * @description: Mask Input to create custom looking inputs with custom formats
+ * @gif: https://camo.githubusercontent.com/61eedb65e968845d5eac713dcd21a69691571fb1/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f4b5a5a7446666f486f454b334b2f67697068792e676966
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/MaskedInputScreen.tsx
+ */
+function MaskedInput(props, ref) {
+  const {
+    initialValue,
+    formatter = _identity,
+    containerStyle,
+    renderMaskedText,
+    onChangeText,
+    ...others
+  } = props;
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef();
+  const keyboardDidHideListener = useRef();
+  useImperativeHandle(ref, () => {
+    return {
+      isFocused: () => inputRef.current?.isFocused(),
+      focus,
+      blur: () => inputRef.current?.blur(),
+      clear: () => {
+        inputRef.current?.clear();
+        setValue('');
+        // NOTE: This fixes an RN issue - when triggering imperative clear method, it doesn't call onChangeText
+        onChangeText?.('');
+      }
+    };
+  });
+  useEffect(() => {
+    if (initialValue !== value) {
+      setValue(initialValue);
+    }
+  }, [initialValue]);
+  useEffect(() => {
+    keyboardDidHideListener.current = Keyboard.addListener('keyboardDidHide', () => {
+      if (inputRef.current?.isFocused()) {
+        inputRef.current?.blur();
+      }
+    });
+    return () => keyboardDidHideListener.current.remove();
+  }, []);
+  const _onChangeText = useCallback(value => {
+    const formattedValue = formatter(value) ?? '';
+    setValue(formattedValue);
+    onChangeText?.(formattedValue);
+  }, [onChangeText, formatter]);
+  const focus = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+  const _renderMaskedText = () => {
+    if (_isFunction(renderMaskedText)) {
+      return renderMaskedText(value);
+    }
+    return <Text>{value}</Text>;
+  };
+  return <TouchableOpacity style={containerStyle} activeOpacity={1} onPress={focus}>
+      <TextInput {...others} value={value}
+    // @ts-expect-error
+    ref={inputRef} style={styles.hiddenInput} enableErrors={false} hideUnderline placeholder="" caretHidden multiline={false} onChangeText={_onChangeText} />
+      <View style={styles.maskedInputWrapper}>{_renderMaskedText()}</View>
+    </TouchableOpacity>;
+}
+const styles = StyleSheet.create({
+  hiddenInput: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 1,
+    color: 'transparent',
+    backgroundColor: 'transparent',
+    height: undefined
+  },
+  maskedInputWrapper: {
+    zIndex: 0
+  }
+});
+MaskedInput.displayName = 'MaskedInput';
+export default forwardRef(MaskedInput);