react-native-ui-lib 8.3.3 → 8.3.4-snapshot.7783

package/src/components/dateTimePicker/index.js

@@ -53,8 +53,8 @@ const DateTimePicker = forwardRef((props, ref) => {
   } = props;
   const [value, setValue] = useState(propsValue);
   const chosenDate = useRef(propsValue);
-  const expandable = useRef();
-  const textField = useRef();
+  const expandable = useRef(undefined);
+  const textField = useRef(undefined);
   useImperativeHandle(ref, () => {
     return {
       isValid: () => textField.current?.isValid(),

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

@@ -45,19 +45,19 @@ export interface DialogHeaderProps extends ViewProps {
     /**
      * Pass to render a leading element
      */
-    leadingAccessory?: ReactElement;
+    leadingAccessory?: ReactElement<any>;
     /**
      * Pass to render a trailing element
      */
-    trailingAccessory?: ReactElement;
+    trailingAccessory?: ReactElement<any>;
     /**
      * Pass to render a top element above the title
      */
-    topAccessory?: ReactElement;
+    topAccessory?: ReactElement<any>;
     /**
      * Pass to render a bottom element below the subtitle
      */
-    bottomAccessory?: ReactElement;
+    bottomAccessory?: ReactElement<any>;
     /**
      * Style for the leading + content + trailing components (without the topAccessory\bottomAccessory)
      */

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" | "testID" | "ref" | "onLayout" | "animated" | "reanimated"> | undefined;
+    containerProps: Omit<import("../../components/view").ViewProps, "style" | "ref" | "animated" | "onLayout" | "testID" | "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>;
+    _swipeableRow: RefObject<Swipeable | null>;
     animationOptions: SwipeableProps['animationOptions'];
     leftActionX: Animated.Value;
     constructor(props: DrawerProps);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } 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): React.JSX.Element;
+declare function ExpandableSection(props: ExpandableSectionProps): 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();
+  const scrollViewRef = useRef(undefined);
   const horizontal = propsHorizontal ?? false;
   const {
     onContentSizeChange,

package/src/components/featureHighlight/index.js

@@ -200,16 +200,12 @@ class FeatureHighlight extends Component {
         {title && <Text text60 style={[styles.title, {
         color,
         marginBottom: message ? titleBottomMargin : messageBottomMargin
-      }, titleStyle]} numberOfLines={titleNumberOfLines}
-      // @ts-expect-error
-      pointerEvents={'none'}>
+      }, titleStyle]} numberOfLines={titleNumberOfLines} pointerEvents={'none'}>
             {title}
           </Text>}
         {message && <Text text70 style={[styles.message, {
         color
-      }, messageStyle]} numberOfLines={messageNumberOfLines}
-      // @ts-expect-error
-      pointerEvents={'none'}>
+      }, messageStyle]} numberOfLines={messageNumberOfLines} pointerEvents={'none'}>
             {message}
           </Text>}
         <Button label={defaultButtonLabel} size={ButtonSize.medium} labelStyle={{
@@ -244,7 +240,9 @@ 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;
+    renderCustomItem?: () => React.ReactElement<any>;
     /**
      * The item size
      */
@@ -29,7 +29,7 @@ export interface GridListItemProps {
     /**
      * Title content text
      */
-    title?: string | React.ReactElement;
+    title?: string | React.ReactElement<any>;
     /**
      * Title content typography
      */
@@ -45,7 +45,7 @@ export interface GridListItemProps {
     /**
      * Subtitle content text
      */
-    subtitle?: string | React.ReactElement;
+    subtitle?: string | React.ReactElement<any>;
     /**
      * Subtitle content typography
      */
@@ -61,7 +61,7 @@ export interface GridListItemProps {
     /**
      * Description content text
      */
-    description?: string | React.ReactElement;
+    description?: string | React.ReactElement<any>;
     /**
      * Description content typography
      */
@@ -101,12 +101,12 @@ export interface GridListItemProps {
     /**
      * Renders an overlay on top of the image
      */
-    renderOverlay?: () => React.ReactElement;
+    renderOverlay?: () => React.ReactElement<any>;
     /**
      * Test ID for component
      */
     testID?: string;
-    children?: React.ReactElement | React.ReactElement[];
+    children?: React.ReactElement<any> | React.ReactElement<any>[];
 }
 /**
  * @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 | undefined, textProps: Partial<TextProps>): React.JSX.Element | undefined;
+    renderContent(text: string | React.ReactElement<any> | 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;
+    renderCustomItem?: (item: GridListItemProps) => React.ReactElement<any>;
 }
 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>;
+    hintRef: React.RefObject<RNView | null>;
     setHintLayout: (layoutChangeEvent: LayoutChangeEvent) => void;
     hintPositionStyle: {
         left: number;

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

@@ -1,4 +1,4 @@
-import React, { Component, ReactElement, ElementRef } from 'react';
+import React, { Component, ReactElement, ElementRef, type JSX } 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;
+type ContentType = string | ReactElement<any>;
 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>;
+    hintRef: React.RefObject<RNView | null>;
     animationDuration: number;
     state: {
         targetLayoutInWindow: {
@@ -183,14 +183,14 @@ declare class Hint extends Component<HintProps, HintState> {
     getTipPosition(): Position;
     getHintOffsetForShortMessage: () => number;
     isUsingModal: () => boolean | 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;
+    renderOverlay(): JSX.Element | undefined;
+    renderHintTip(): JSX.Element;
+    renderHint(): JSX.Element;
+    renderHintContainer(): JSX.Element | undefined;
+    renderHintAnchor(): JSX.Element;
+    renderMockChildren(): JSX.Element | undefined;
     renderChildren(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    render(): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
+    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;
 }
 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").MutableRefObject<RNView | null>;
+    targetRef: import("react").RefObject<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 | true | React.JSX.Element | Iterable<React.ReactNode> | null;
+    (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;
     displayName: string;
     positions: typeof HintPositions;
 };
 export { HintProps, Hint };
 declare const _default: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<any>> & {
-    (props: HintProps): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
+    (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;
     displayName: string;
     positions: typeof HintPositions;
 };

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

@@ -1,9 +1,9 @@
-import type { ReactElement } from 'react';
+import type { ReactElement, JSX } 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;
+export type ContentType = string | ReactElement<any>;
 export declare enum TargetAlignments {
     LEFT = "left",
     RIGHT = "right",

package/src/components/icon/index.js

@@ -74,9 +74,6 @@ 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 | React.ReactElement[];
+    customOverlayContent?: React.ReactElement<any> | React.ReactElement<any>[];
     /**
      * Default image source in case of an error
      */

package/src/components/image/index.js

@@ -158,24 +158,27 @@ class Image extends PureComponent {
     const {
       margins
     } = modifiers;
-    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}>
+    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}>
         {(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?: React.ReactChild | undefined;
+    customLoader?: string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | 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.ReactChild;
+    customLoader?: React.ReactElement<any> | number | string;
     /**
      * Color of the loader background (only when passing 'overlay')
      */

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

@@ -1,5 +1,22 @@
-import React from 'react';
-import { MaskedInputProps } from './new';
-export { MaskedInputProps };
-declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+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>>;
 export default _default;

package/src/components/maskedInput/index.js

@@ -1,24 +1,86 @@
-import React, { forwardRef, useEffect } from 'react';
+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 { useThemeProps } from "../../hooks";
-// @ts-expect-error
-import MaskedInputOld from "./old";
-import MaskedInputNew, { MaskedInputProps } from "./new";
-import { LogService } from "../../services";
-function MaskedInputMigrator(props, refToForward) {
+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 {
-    migrate,
+    initialValue,
+    formatter = _identity,
+    containerStyle,
+    renderMaskedText,
+    onChangeText,
     ...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 (!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.`);
+    if (initialValue !== value) {
+      setValue(initialValue);
     }
+  }, [initialValue]);
+  useEffect(() => {
+    keyboardDidHideListener.current = Keyboard.addListener('keyboardDidHide', () => {
+      if (inputRef.current?.isFocused()) {
+        inputRef.current?.blur();
+      }
+    });
+    return () => keyboardDidHideListener.current.remove();
   }, []);
-  if (migrate) {
-    return <MaskedInputNew {...others} ref={refToForward} />;
-  } else {
-    return <MaskedInputOld {...others} ref={refToForward} />;
-  }
+  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>;
 }
-export { MaskedInputProps };
-export default forwardRef(MaskedInputMigrator);
+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);

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

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

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, type JSX } from 'react';
 import { ModalProps as RNModalProps, GestureResponderEvent, KeyboardAvoidingViewProps } from 'react-native';
 import TopBar, { ModalTopBarProps } from './TopBar';
 export { ModalTopBarProps };
@@ -57,8 +57,8 @@ declare class Modal extends Component<ModalProps> {
     static displayName: string;
     static TopBar: typeof TopBar;
     constructor(props: ModalProps);
-    renderTouchableOverlay(): React.JSX.Element | undefined;
-    render(): React.JSX.Element;
+    renderTouchableOverlay(): JSX.Element | undefined;
+    render(): JSX.Element;
 }
 declare const _default: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<any>> & typeof Modal;
 export default _default;

package/src/components/numberInput/index.js

@@ -3,7 +3,7 @@ import React, { useMemo, useCallback, useState, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import { useDidUpdate, useThemeProps } from "../../hooks";
 import { Colors } from "../../style";
-import MaskedInput from "../maskedInput/new";
+import MaskedInput from "../maskedInput";
 import TextField from "../textField";
 import View from "../view";
 import Text from "../text";
@@ -29,7 +29,7 @@ function NumberInput(props, ref) {
   const [options, setOptions] = useState(generateOptions(locale, fractionDigits));
   const initialNumber = getInitialNumber(propsInitialNumber, options);
   const [data, setData] = useState(parseInput(`${initialNumber}`, options, propsInitialNumber));
-  const textField = useRef();
+  const textField = useRef(undefined);
   const [isFocused, setIsFocused] = useState(textFieldProps?.autoFocus ?? false);
   useDidUpdate(() => {
     setOptions(generateOptions(locale, fractionDigits));

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

@@ -28,7 +28,7 @@ export type OverlayTypes = Pick<ImageProps, 'borderRadius'> & {
     /**
      * Custom overlay content to be rendered on top of the image
      */
-    customContent?: React.ReactElement | React.ReactElement[];
+    customContent?: React.ReactElement<any> | React.ReactElement<any>[];
 };
 /**
  * @description: Overlay view with types (default, top, bottom, solid)

package/src/components/picker/PickerDialog.android.js

@@ -1,7 +1,5 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {TextPropTypes} from 'deprecated-react-native-prop-types';
-import PropTypes from 'prop-types';
 import _ from 'lodash';
 
 import Dialog from '../dialog';
@@ -11,19 +9,6 @@ import {Colors, BorderRadiuses} from '../../style';
 
 class PickerDialog extends Component {
   static displayName = 'PickerDialog';
-  static propTypes = {
-    onDone: PropTypes.func,
-    onCancel: PropTypes.func,
-    children: PropTypes.array,
-    /**
-     * select label style
-     */
-    selectLabelStyle: TextPropTypes.style,
-    /**
-     * cancel label style
-     */
-    cancelLabelStyle: TextPropTypes.style
-  };
 
   state = {};
 

package/src/components/picker/PickerDialog.js

@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import PropTypes from 'prop-types';
 import _ from 'lodash';
 
 import Dialog from '../dialog';
@@ -10,12 +9,6 @@ import {Colors} from '../../style';
 
 class PickerDialog extends Component {
   static displayName = 'PickerDialog';
-  static propTypes = {
-    onDone: PropTypes.func,
-    onCancel: PropTypes.func,
-    topBarProps: PropTypes.object,
-    children: PropTypes.array
-  };
 
   state = {};
 

package/src/components/picker/helpers/useImperativePickerHandle.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ExpandableOverlayMethods } from '../../../incubator/expandableOverlay';
 import { TextFieldMethods } from '../../textField';
-declare const useImperativePickerHandle: (ref: React.Ref<any>, expandableRef: React.MutableRefObject<ExpandableOverlayMethods | null>) => React.MutableRefObject<TextFieldMethods | undefined>;
+declare const useImperativePickerHandle: (ref: React.Ref<any>, expandableRef: React.MutableRefObject<ExpandableOverlayMethods | null>) => React.RefObject<TextFieldMethods | undefined>;
 export default useImperativePickerHandle;

package/src/components/picker/helpers/useImperativePickerHandle.js

@@ -1,6 +1,6 @@
 import { useImperativeHandle, useRef } from 'react';
 const useImperativePickerHandle = (ref, expandableRef) => {
-  const pickerRef = useRef();
+  const pickerRef = useRef(undefined);
   useImperativeHandle(ref, () => {
     const {
       isFocused,