react-native-ui-lib 8.4.3 → 8.5.0-snapshot.7950

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
@@ -67,7 +67,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/screenFooter/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow } from './types';
-export { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow };
+import { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterAnimationTypeProp, ScreenFooterShadow } from './types';
+export { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterAnimationTypeProp, ScreenFooterShadow };
 declare const _default: React.ForwardRefExoticComponent<ScreenFooterProps & React.RefAttributes<any>> & {
     (props: ScreenFooterProps): React.JSX.Element;
     displayName: string;

package/src/components/screenFooter/index.js

@@ -1,6 +1,6 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
-import Animated, { useAnimatedKeyboard, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { Keyboard } from 'uilib-native';
 import { SafeAreaContextPackage } from "../../optionalDependencies";
 import View from "../view";
@@ -9,9 +9,9 @@ import Assets from "../../assets";
 import { Colors, Shadows, Spacings } from "../../style";
 import { asBaseComponent, Constants } from "../../commons/new";
 import { useKeyboardHeight } from "../../hooks";
-import { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow } from "./types";
-export { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow };
-const androidVersion = Constants.getAndroidVersion();
+import useAnimatedFooterStyle from "./useAnimatedFooterStyle";
+import { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterAnimationTypeProp, ScreenFooterShadow } from "./types";
+export { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterAnimationTypeProp, ScreenFooterShadow };
 const ScreenFooter = props => {
   const {
     testID,
@@ -25,44 +25,24 @@ const ScreenFooter = props => {
     itemWidth,
     horizontalItemsDistribution: distribution,
     visible = true,
-    animationDuration = 200,
+    animationDuration,
+    animationType,
     shadow = ScreenFooterShadow.SH20,
     hideDivider = false,
-    isAndroidEdgeToEdge = !!androidVersion && androidVersion >= 35 ? true : undefined,
+    isAndroidEdgeToEdge,
+    containerStyle: containerStyleOverride,
     contentContainerStyle: contentContainerStyleOverride
   } = props;
-  const withoutAnimation = animationDuration === 0;
-  const keyboard = useAnimatedKeyboard({
-    isNavigationBarTranslucentAndroid: isAndroidEdgeToEdge,
-    isStatusBarTranslucentAndroid: isAndroidEdgeToEdge
-  });
-  const [height, setHeight] = useState(0);
-  const visibilityTranslateY = useSharedValue(0);
-
-  // Update visibility translation when visible or height changes
-  useEffect(() => {
-    visibilityTranslateY.value = withTiming(visible ? 0 : height, {
-      duration: animationDuration
-    });
-  }, [visible, height, animationDuration, visibilityTranslateY]);
-
-  // Animated style for STICKY behavior (counters Android system offset + visibility)
-  const stickyAnimatedStyle = useAnimatedStyle(() => {
-    const counterSystemOffset = Constants.isAndroid ? keyboard.height.value : 0;
-    return {
-      transform: [{
-        translateY: counterSystemOffset + visibilityTranslateY.value
-      }]
-    };
-  });
-
-  // Animated style for HOISTED behavior (visibility only, keyboard handled by KeyboardAccessoryView)
-  const hoistedAnimatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{
-        translateY: visibilityTranslateY.value
-      }]
-    };
+  const {
+    containerStyle,
+    setHeight
+  } = useAnimatedFooterStyle({
+    animationDuration,
+    animationType,
+    keyboardBehavior,
+    visible,
+    isAndroidEdgeToEdge,
+    containerStyle: containerStyleOverride
   });
   const onLayout = useCallback(event => {
     setHeight(event.nativeEvent.layout.height);
@@ -163,13 +143,13 @@ const ScreenFooter = props => {
         maxWidth: '100%'
       };
       return <View key={index} style={fixedStyle}>
-            {child}
-          </View>;
+          {child}
+        </View>;
     }
     if (isHorizontal && React.isValidElement(child) && itemsFit === ItemsFit.STRETCH) {
       return <View flex row centerH key={index}>
-            {child}
-          </View>;
+          {child}
+        </View>;
     }
     return child;
   }, [itemsFit, itemWidth, isHorizontal]);
@@ -182,30 +162,19 @@ const ScreenFooter = props => {
         </View>
       </>;
   }, [renderBackground, testID, contentContainerStyle, childrenArray]);
-  const Container = useMemo(() => {
-    return withoutAnimation ? View : Animated.View;
-  }, [withoutAnimation]);
-  const containerStyle = useMemo(() => {
-    return withoutAnimation ? styles.container : [styles.container, hoistedAnimatedStyle];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [withoutAnimation]);
-  if (keyboardBehavior === KeyboardBehavior.HOISTED) {
-    return <Container style={containerStyle} pointerEvents={visible ? 'box-none' : 'none'}>
-        <Keyboard.KeyboardAccessoryView renderContent={renderFooterContent} kbInputRef={undefined} scrollBehavior={Keyboard.KeyboardAccessoryView.scrollBehaviors.FIXED_OFFSET} useSafeArea={false} manageScrollView={false} revealKeyboardInteractive onHeightChanged={setHeight} />
-      </Container>;
-  }
-  return <Animated.View testID={testID} onLayout={onLayout} style={[styles.container, stickyAnimatedStyle]}>
-      {renderFooterContent()}
+  const renderKeyboardAwareFooter = useCallback(() => {
+    if (keyboardBehavior === 'hoisted') {
+      return <Keyboard.KeyboardAccessoryView renderContent={renderFooterContent} kbInputRef={undefined} scrollBehavior={Keyboard.KeyboardAccessoryView.scrollBehaviors.FIXED_OFFSET} useSafeArea={false} manageScrollView={false} revealKeyboardInteractive onHeightChanged={setHeight} />;
+    } else {
+      return renderFooterContent();
+    }
+  }, [keyboardBehavior, renderFooterContent]);
+  return <Animated.View testID={testID} style={containerStyle} onLayout={keyboardBehavior === 'hoisted' ? undefined : onLayout} pointerEvents={!visible ? 'none' : keyboardBehavior === 'hoisted' ? 'box-none' : 'auto'}>
+      {renderKeyboardAwareFooter()}
     </Animated.View>;
 };
 ScreenFooter.displayName = 'ScreenFooter';
 const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0
-  },
   contentContainer: {
     paddingTop: Spacings.s4,
     paddingHorizontal: Spacings.s5,

package/src/components/screenFooter/screenFooter.api.json

@@ -55,13 +55,19 @@
     {
       "name": "visible",
       "type": "boolean",
-      "description": "If true, the footer is visible. If false, it slides down",
+      "description": "If true, the footer is visible. If false, the footer is hidden using the configured animation type",
       "default": "true"
     },
+    {
+      "name": "animationType",
+      "type": "ScreenFooterAnimationTypeProp",
+      "description": "The animation type for showing/hiding the footer [slide, fade, none]",
+      "default": "'slide'"
+    },
     {
       "name": "animationDuration",
       "type": "number",
-      "description": "Duration of the show/hide animation in ms",
+      "description": "Duration of the show/hide animation in ms (sending 0 will disable the animation)",
       "default": "200"
     },
     {
@@ -87,6 +93,11 @@
       "type": "boolean",
       "description": "Indicates if the device is an Android device that supports edge-to-edge. Defaults to true for Android with version 35 and above, undefined for others."
     },
+    {
+      "name": "containerStyle",
+      "type": "StyleProp<ViewStyle>",
+      "description": "Custom style for the outer container of the footer. Can be used to override zIndex or other container-level properties."
+    },
     {
       "name": "contentContainerStyle",
       "type": "StyleProp<ViewStyle>",

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

@@ -32,7 +32,25 @@ export declare enum ScreenFooterShadow {
     SH20 = "sh20",
     SH30 = "sh30"
 }
-export interface ScreenFooterProps extends PropsWithChildren<{}> {
+export declare enum ScreenFooterAnimation {
+    NONE = "none",
+    SLIDE = "slide",
+    FADE = "fade"
+}
+export type ScreenFooterAnimationTypeProp = ScreenFooterAnimation | `${ScreenFooterAnimation}`;
+export interface AnimatedFooterStyleProps {
+    /**
+     * The type of animation to use when showing or hiding the footer.
+     * @default 'slide'
+     */
+    animationType?: ScreenFooterAnimationTypeProp;
+    /**
+     * Duration of the show/hide animation in ms (sending 0 will disable the animation).
+     * @default 200
+     */
+    animationDuration?: number;
+}
+export interface ScreenFooterProps extends AnimatedFooterStyleProps, PropsWithChildren<{}> {
     /**
      * Used as testing identifier
      */
@@ -78,11 +96,6 @@ export interface ScreenFooterProps extends PropsWithChildren<{}> {
      * If true, the footer is visible. If false, it slides down.
      */
     visible?: boolean;
-    /**
-     * Duration of the show/hide animation in ms.
-     * @default 200
-     */
-    animationDuration?: number;
     /**
      * If true, the footer will respect the safe area (add bottom padding)
      */
@@ -97,6 +110,10 @@ export interface ScreenFooterProps extends PropsWithChildren<{}> {
      * Only applies when backgroundType is 'solid'
      */
     hideDivider?: boolean;
+    /**
+     * Custom style for the outer container of the footer.
+     */
+    containerStyle?: StyleProp<ViewStyle>;
     /**
      * Custom style for the content container that wraps the footer's children.
      * Can be used to override default padding, gap, or other layout properties.

package/src/components/screenFooter/types.js

@@ -36,4 +36,10 @@ export let ScreenFooterShadow = /*#__PURE__*/function (ScreenFooterShadow) {
   ScreenFooterShadow["SH20"] = "sh20";
   ScreenFooterShadow["SH30"] = "sh30";
   return ScreenFooterShadow;
+}({});
+export let ScreenFooterAnimation = /*#__PURE__*/function (ScreenFooterAnimation) {
+  ScreenFooterAnimation["NONE"] = "none";
+  ScreenFooterAnimation["SLIDE"] = "slide";
+  ScreenFooterAnimation["FADE"] = "fade";
+  return ScreenFooterAnimation;
 }({});

package/src/components/screenFooter/useAnimatedFooterStyle.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ViewStyle } from 'react-native';
+import { AnimatedFooterStyleProps, ScreenFooterProps } from './types';
+declare const useAnimatedFooterStyle: (props: AnimatedFooterStyleProps & Pick<ScreenFooterProps, 'keyboardBehavior' | 'visible' | 'isAndroidEdgeToEdge' | 'containerStyle'>) => {
+    containerStyle: (import("react-native").StyleProp<ViewStyle> | {
+        position: "absolute";
+        bottom: number;
+        left: number;
+        right: number;
+        zIndex: number;
+    })[];
+    setHeight: import("react").Dispatch<import("react").SetStateAction<number>>;
+};
+export default useAnimatedFooterStyle;

package/src/components/screenFooter/useAnimatedFooterStyle.js

@@ -0,0 +1,72 @@
+import { useAnimatedKeyboard, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native';
+import { Constants } from "../../commons/new";
+import { useEffect, useMemo, useState } from 'react';
+const androidVersion = Constants.getAndroidVersion();
+const useAnimatedFooterStyle = props => {
+  const {
+    animationType: animationTypeProp = 'slide',
+    animationDuration: animationDurationProp = 200,
+    keyboardBehavior,
+    visible,
+    isAndroidEdgeToEdge = !!androidVersion && androidVersion >= 35 ? true : undefined,
+    containerStyle: containerStyleOverride
+  } = props;
+  const animationType = animationDurationProp === 0 ? 'none' : animationTypeProp;
+  const animationDuration = animationType === 'none' ? 0 : animationDurationProp;
+  const keyboard = useAnimatedKeyboard({
+    isNavigationBarTranslucentAndroid: isAndroidEdgeToEdge,
+    isStatusBarTranslucentAndroid: isAndroidEdgeToEdge
+  });
+  const [height, setHeight] = useState(0);
+  const animatedValue = useSharedValue(animationType === 'fade' && visible ? 1 : 0);
+  useEffect(() => {
+    if (animationType === 'slide') {
+      animatedValue.value = withTiming(visible ? 0 : height, {
+        duration: animationDuration
+      });
+    } else {
+      animatedValue.value = withTiming(visible ? 1 : 0, {
+        duration: animationDuration
+      });
+    }
+  }, [visible, height, animationDuration, animatedValue, animationType]);
+  const animatedStyle = useAnimatedStyle(() => {
+    let style = {};
+    let translateY = 0;
+    if (animationType === 'slide') {
+      translateY = animatedValue.value;
+    } else {
+      style = {
+        opacity: animatedValue.value
+      };
+    }
+    if (keyboardBehavior === 'sticky' && Constants.isAndroid) {
+      translateY += keyboard.height.value;
+    }
+    if (animationType === 'slide' || translateY !== 0) {
+      style.transform = [{
+        translateY
+      }];
+    }
+    return style;
+  });
+  const containerStyle = useMemo(() => {
+    return [styles.container, animatedStyle, containerStyleOverride];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containerStyleOverride]);
+  return {
+    containerStyle,
+    setHeight
+  };
+};
+export default useAnimatedFooterStyle;
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 50
+  }
+});

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;

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

@@ -8,7 +8,7 @@ export declare enum OffsetType {
     RIGHT = "RIGHT"
 }
 export type ScrollToItemProps<T extends ScrollToSupportedViews> = {
-    scrollViewRef?: RefObject<T>;
+    scrollViewRef?: RefObject<T | null>;
     /**
      * The number of items
      */

package/src/components/text/Text.driver.d.ts

@@ -2,6 +2,6 @@
 import { TextProps } from './index';
 import { ComponentDriver } from '../../testkit/Component.driver';
 export declare class TextDriver extends ComponentDriver<TextProps> {
-    getTextContent: () => Promise<import("react").ReactNode>;
+    getTextContent: () => Promise<string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined>;
     isPressable: () => Promise<boolean | null>;
 }

package/src/components/textArea/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import {View, TextInput as RNTextInput, StyleSheet} from 'react-native';
-import {TextInputPropTypes} from 'deprecated-react-native-prop-types';
 import BaseInput from '../baseInput';
 import {Colors} from '../../style';
 
@@ -15,11 +14,6 @@ import {Colors} from '../../style';
 export default class TextArea extends BaseInput {
   static displayName = 'TextArea';
 
-  static propTypes = {
-    ...TextInputPropTypes,
-    ...BaseInput.propTypes
-  };
-
   generateStyles() {
     this.styles = createStyles(this.props);
   }

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

@@ -171,19 +171,19 @@ export type TextFieldProps = MarginModifiers & PaddingModifiers & TypographyModi
     /**
      * 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 trailing element
      */
-    topTrailingAccessory?: ReactElement;
+    topTrailingAccessory?: ReactElement<any>;
     /**
      * Pass to render a bottom element below the input
      */
-    bottomAccessory?: ReactElement;
+    bottomAccessory?: ReactElement<any>;
     /**
      * Should show a clear button when there is a value
      */