react-native-ui-lib 8.2.0-snapshot.7650 → 8.2.0-snapshot.7661

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,23 +1,85 @@
-import React, { forwardRef, useEffect } from 'react';
-// @ts-expect-error
-import MaskedInputOld from "./old";
-import MaskedInputNew, { MaskedInputProps } from "./new";
-import { LogService } from "../../services";
-function MaskedInputMigrator(props, refToForward) {
+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 {
-    migrate,
+    initialValue,
+    formatter = _identity,
+    containerStyle,
+    renderMaskedText,
+    onChangeText,
     ...others
   } = props;
+  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,

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren, ReactNode, type JSX } from 'react';
 import { FlatListProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { ExpandableOverlayProps, ExpandableOverlayMethods } from '../../incubator/expandableOverlay';
 import { ModalTopBarProps } from '../modal/TopBar';
@@ -19,7 +19,7 @@ export type PickerSingleValue = string | number;
 export type PickerMultiValue = PickerSingleValue[];
 export type PickerValue = PickerSingleValue | PickerMultiValue | undefined;
 type PickerFilteredItems = ReactNode | Pick<PickerItemProps, 'label' | 'value' | 'disabled'>[] | undefined;
-type RenderPickerOverloads<ValueType> = ValueType extends PickerValue ? (value?: ValueType, label?: string) => React.ReactElement : never;
+type RenderPickerOverloads<ValueType> = ValueType extends PickerValue ? (value?: ValueType, label?: string) => React.ReactElement<any> : never;
 type RenderPicker = RenderPickerOverloads<PickerValue>;
 export type RenderCustomModalProps = {
     visible: boolean;
@@ -55,7 +55,7 @@ type PickerPropsDeprecation = {
     renderCustomDialogHeader?: (callbacks: {
         onDone?: () => void;
         onCancel?: () => void;
-    }) => React.ReactElement;
+    }) => React.ReactElement<any>;
     /**
      * @deprecated
      * Render custom picker input (the value will be passed)
@@ -69,7 +69,7 @@ type PickerPropsDeprecation = {
      * Render custom picker overlay (e.g ({visible, children, toggleModal}) => {...})
      * instead use renderOverlay
      */
-    renderCustomModal?: (modalProps: RenderCustomModalProps) => React.ReactElement;
+    renderCustomModal?: (modalProps: RenderCustomModalProps) => React.ReactElement<any>;
     /**
      * @deprecated
      * Pass props to the picker modal
@@ -97,7 +97,7 @@ type PickerSearchProps = {
     /**
      * Render custom search input (only when passing showSearch)
      */
-    renderCustomSearch?: (props: PickerItemsListProps) => React.ReactElement;
+    renderCustomSearch?: (props: PickerItemsListProps) => React.ReactElement<any>;
 };
 type PickerListProps = PickerSearchProps & {
     /**
@@ -106,7 +106,7 @@ type PickerListProps = PickerSearchProps & {
     renderHeader?: (callbacks: {
         onDone?: () => void;
         onCancel?: () => void;
-    }) => React.ReactElement;
+    }) => React.ReactElement<any>;
     /**
      * Pass props to the list component that wraps the picker items (allows to control FlatList behavior)
      */
@@ -128,7 +128,7 @@ type PickerExpandableOverlayProps = {
     /**
      * Render custom picker overlay (e.g ({visible, children, toggleModal}) => {...})
      */
-    renderOverlay?: (modalProps: RenderCustomModalProps) => React.ReactElement;
+    renderOverlay?: (modalProps: RenderCustomModalProps) => React.ReactElement<any>;
     /**
      * Add blur effect to picker modal (iOS only)
      */
@@ -213,11 +213,11 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & Picke
     renderItem?: (value: PickerValue, itemProps: PickerItemProps & {
         isSelected: boolean;
         isItemDisabled: boolean;
-    }, label?: string) => React.ReactElement;
+    }, label?: string) => React.ReactElement<any>;
     /**
      * Render custom top element
      */
-    renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
+    renderCustomTopElement?: (value?: PickerValue) => React.ReactElement<any>;
     /**
      * Selection status bar props
      */

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

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, type JSX } from 'react';
 import { Animated, StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
 /**
  * @description: Progress bar
@@ -15,17 +15,8 @@ interface Props {
     fullWidth?: boolean;
     /**
      * Override container style
-     * @deprecated Use containerStyle instead
      */
     style?: StyleProp<ViewStyle>;
-    /**
-     * Override container style
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Override progress style
-     */
-    progressStyle?: StyleProp<ViewStyle>;
     /**
      * Progress color
      */
@@ -67,7 +58,7 @@ declare class ProgressBar extends PureComponent<Props, State> {
         borderTopRightRadius: number;
     };
     renderCustomElement(): React.FunctionComponentElement<any> | undefined;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export { ProgressBar };
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>> & typeof ProgressBar;

package/src/components/progressBar/index.js

@@ -105,9 +105,7 @@ class ProgressBar extends PureComponent {
   render() {
     const {
       style,
-      containerStyle,
-      testID,
-      progressStyle
+      testID
     } = this.props;
     const {
       containerWidth = 0
@@ -117,13 +115,12 @@ class ProgressBar extends PureComponent {
       inputRange: [0, 100],
       outputRange
     });
-    const animatedStyle = {
-      transform: [{
-        translateX: newProgress
-      }]
-    };
-    return <View onLayout={this.getContainerWidth} style={[styles.container, this.getContainerStyle(), style, containerStyle]} {...this.getAccessibilityProps()} testID={testID}>
-        {!!containerWidth && <Animated.View style={[styles.progress, this.getProgressStyle(), progressStyle, animatedStyle]}>
+    return <View onLayout={this.getContainerWidth} style={[styles.container, this.getContainerStyle(), style]} {...this.getAccessibilityProps()} testID={testID}>
+        {!!containerWidth && <Animated.View style={[styles.progress, this.getProgressStyle(), {
+        transform: [{
+          translateX: newProgress
+        }]
+      }]}>
             {this.renderCustomElement()}
           </Animated.View>}
       </View>;

package/src/components/progressBar/progressBar.api.json

@@ -16,15 +16,10 @@
       "description": "FullWidth Ui preset"
     },
     {
-      "name": "containerStyle",
+      "name": "style",
       "type": "ViewStyle",
       "description": "Override container style"
     },
-    {
-      "name": "progressStyle",
-      "type": "ViewStyle",
-      "description": "Override progress style"
-    },
     {
       "name": "progressColor",
       "type": "string",

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

@@ -1,12 +1,19 @@
 import React, { Component } from 'react';
-import { Animated, FlatListProps, ImageSourcePropType, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent } from 'react-native';
+import { Animated, FlatListProps, ScrollViewProps, ImageSourcePropType, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent } from 'react-native';
 import { ForwardRefInjectedProps } from '../../commons/new';
 import { ComponentStatics } from '../../typings/common';
-export interface ScrollBarProps extends FlatListProps<any> {
+export type ListProps = (FlatListProps<any> & {
     /**
      * Whether to use a FlatList. NOTE: you must pass 'data' and 'renderItem' props as well
      */
-    useList?: boolean;
+    useList: true;
+}) | (ScrollViewProps & {
+    /**
+     * Whether to use a ScrollView. NOTE: you must pass 'contentContainerStyle' prop as well
+     */
+    useList?: false;
+});
+export type ScrollBarProps = ListProps & {
     /**
      * The element to use as a container, instead of a View
      */
@@ -44,7 +51,7 @@ export interface ScrollBarProps extends FlatListProps<any> {
      * The index to currently focus on
      */
     focusIndex?: number;
-}
+};
 type Props = ScrollBarProps & ForwardRefInjectedProps;
 type State = {
     gradientOpacity: Animated.Value;

package/src/components/searchInput/index.js

@@ -32,7 +32,7 @@ const SearchInput = forwardRef((props, ref) => {
     style,
     inaccessible
   } = props;
-  const currentAnimatedValue = useRef();
+  const currentAnimatedValue = useRef(undefined);
   const searchInputRef = useRef(null);
   const [hasValue, setHasValue] = useState(Boolean(controlledValue));
   const [value, setValue] = useState(controlledValue);

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

@@ -26,7 +26,7 @@ export type SearchInputProps = TextInputProps & {
     /**
      * Custom right element
      */
-    customRightElement?: React.ReactElement;
+    customRightElement?: React.ReactElement<any>;
     /**
      * Whether to show a loader instead of the left search icon
      */
@@ -38,7 +38,7 @@ export type SearchInputProps = TextInputProps & {
     /**
      * custom loader element
      */
-    customLoader?: React.ReactElement;
+    customLoader?: React.ReactElement<any>;
     /**
      * converts the colors of the search's input elements, icons and button to white
      */

package/src/components/sectionsWheelPicker/SectionsWheelPicker.driver.d.ts

@@ -7,11 +7,11 @@ export declare const SectionsWheelPickerDriver: (props: ComponentProps) => {
         moveToItem: (index: number, itemHeight?: number, numberOfRows?: number) => void;
         getLabel: () => string | (string | ReactTestInstance)[];
         scroll: (contentOffset: Partial<import("react-native/types").NativeScrollPoint>, options?: {
-            contentInset: import("react-native/types").NativeScrollRectangle;
-            zoomScale: number;
             layoutMeasurement: import("react-native/types").NativeScrollSize;
             contentSize: import("react-native/types").NativeScrollSize;
             velocity?: import("react-native/types").NativeScrollVelocity | undefined;
+            contentInset: import("react-native/types").NativeScrollRectangle;
+            zoomScale: number;
             targetContentOffset?: import("react-native/types").NativeScrollPoint | undefined;
         } | undefined) => void;
         triggerEvent: (eventName?: string | undefined, event?: Partial<import("react-native/types").NativeScrollEvent> | undefined) => void;

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

@@ -35,7 +35,7 @@ export interface SkeletonListProps {
     /**
      * Extra content to be rendered on the end of the list item
      */
-    renderEndContent?: () => React.ReactElement | undefined;
+    renderEndContent?: () => React.ReactElement<any> | undefined;
 }
 export interface SkeletonViewProps extends AccessibilityProps, AlignmentModifiers, PaddingModifiers, MarginModifiers {
     /**
@@ -155,9 +155,9 @@ declare class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
     renderTextContentTemplate: () => React.JSX.Element;
     renderTemplate: () => React.JSX.Element;
     renderAdvanced: () => React.JSX.Element;
-    renderWithFading: (skeleton: any) => string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
-    renderSkeleton(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+    renderWithFading: (skeleton: any) => string | number | bigint | boolean | 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 | undefined;
+    renderSkeleton(): string | number | bigint | boolean | 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 | undefined;
     renderNothing: () => null;
-    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+    render(): string | number | bigint | boolean | 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 | undefined;
 }
 export default SkeletonView;

package/src/components/slider/Thumb.d.ts

@@ -26,7 +26,7 @@ export interface ThumbProps extends ViewProps {
      */
     disabled?: boolean;
     /** ref to thumb component */
-    ref?: React.RefObject<RNView>;
+    ref?: React.RefObject<RNView | null>;
 }
 declare const Thumb: React.ForwardRefExoticComponent<Omit<ThumbProps, "ref"> & React.RefAttributes<unknown>>;
 export default Thumb;

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

@@ -44,7 +44,7 @@ export type SliderProps = Omit<ThumbProps, 'ref'> & {
     /**
      * Custom render instead of rendering the track
      */
-    renderTrack?: () => ReactElement | ReactElement[];
+    renderTrack?: () => ReactElement<any> | ReactElement<any>[];
     /**
      * Callback for onValueChange
      */

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { ViewProps } from '../view';
 import { ButtonProps } from '../button';

package/src/components/tabController/TabBarItem.d.ts

@@ -47,11 +47,11 @@ export interface TabControllerItemProps extends Pick<TabControllerBarProps, 'spr
     /**
      * Pass to render a leading element
      */
-    leadingAccessory?: ReactElement;
+    leadingAccessory?: ReactElement<any>;
     /**
      * Pass to render a trailing element
      */
-    trailingAccessory?: ReactElement;
+    trailingAccessory?: ReactElement<any>;
     /**
      * A fixed width for the item
      */

package/src/components/tabController/TabBarItem.js

@@ -46,7 +46,7 @@ export default function TabBarItem({
     currentPage,
     setCurrentIndex
   } = useContext(TabBarContext);
-  const itemRef = useRef();
+  const itemRef = useRef(undefined);
   const itemWidth = useRef(props.width);
   const isPressed = useSharedValue(false);
   // JSON.parse(JSON.stringify is due to an issue with reanimated

package/src/components/tabController/TabPage.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren, type JSX } from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 export interface TabControllerPageProps {
     /**
@@ -30,4 +30,4 @@ export interface TabControllerPageProps {
  * @description: TabController's TabPage
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
  */
-export default function TabPage({ testID, index, lazy, renderLoading, style, lazyLoadTime, ...props }: PropsWithChildren<TabControllerPageProps>): React.JSX.Element;
+export default function TabPage({ testID, index, lazy, renderLoading, style, lazyLoadTime, ...props }: PropsWithChildren<TabControllerPageProps>): JSX.Element;