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

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/floatingButton/floatingButton.api.json

@@ -1,12 +1,8 @@
 {
   "name": "FloatingButton",
   "category": "overlays",
-  "description": "Hovering button with gradient background",
-  "modifiers": [
-    "margin",
-    "background",
-    "color"
-  ],
+  "description": "Hovering button with gradient background, backed by ScreenFooter",
+  "modifiers": ["margin", "background", "color"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FloatingButtonScreen.tsx",
   "images": [
     "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/FloatingButton/FloatingButton.gif?raw=true"
@@ -58,6 +54,12 @@
       "type": "boolean",
       "description": "Whether to show background overlay"
     },
+    {
+      "name": "hoisted",
+      "type": "boolean",
+      "description": "Whether the footer should be hoisted above the keyboard. When true, uses KeyboardAccessoryView for keyboard-aware positioning. When false, uses sticky positioning.",
+      "default": "true"
+    },
     {
       "name": "testID",
       "type": "string",
@@ -96,11 +98,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Default",
-              "Full Width"
-            ],
+            "columns": ["Property", "Default", "Full Width"],
             "items": [
               {
                 "title": "Main button",
@@ -130,10 +128,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Layout",
-              "Component"
-            ],
+            "columns": ["Layout", "Component"],
             "items": [
               {
                 "title": "Horizontal",

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

@@ -1,5 +1,4 @@
-import React, { PropsWithChildren, PureComponent } from 'react';
-import { Animated } from 'react-native';
+import React, { PropsWithChildren } from 'react';
 import { ButtonProps } from '../button';
 export declare enum FloatingButtonLayouts {
     VERTICAL = "Vertical",
@@ -23,7 +22,7 @@ export interface FloatingButtonProps {
      */
     bottomMargin?: number;
     /**
-     * Whether the buttons get the container's full with (vertical layout only)
+     * Whether the buttons get the container's full width (vertical layout only)
      */
     fullWidth?: boolean;
     /**
@@ -42,6 +41,12 @@ export interface FloatingButtonProps {
      * Whether to show background overlay
      */
     hideBackgroundOverlay?: boolean;
+    /**
+     * Whether the footer should be hoisted above the keyboard.
+     * When true (default), uses KeyboardAccessoryView for keyboard-aware positioning.
+     * When false, uses sticky positioning.
+     */
+    hoisted?: boolean;
     /**
      * Used as testing identifier
      * <TestID> - the floatingButton container
@@ -50,40 +55,9 @@ export interface FloatingButtonProps {
      */
     testID?: string;
 }
-/**
- * @description: Hovering button with gradient background
- * @modifiers: margin, background, color
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FloatingButtonScreen.tsx
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/FloatingButton/FloatingButton.gif?raw=true
- */
-declare class FloatingButton extends PureComponent<FloatingButtonProps> {
-    static displayName: string;
-    static floatingButtonLayouts: typeof FloatingButtonLayouts;
-    static defaultProps: {
-        duration: number;
-        buttonLayout: FloatingButtonLayouts;
-    };
-    initialVisibility?: boolean;
-    firstLoad: boolean;
-    visibleAnimated: Animated.Value;
-    constructor(props: FloatingButtonProps);
-    componentDidUpdate(prevProps: FloatingButtonProps): void;
-    getAnimatedStyle: () => {
-        opacity: Animated.Value;
-        transform: {
-            translateY: Animated.AnimatedInterpolation<string | number>;
-        }[];
-    };
-    get isSecondaryOnly(): boolean;
-    get isHorizontalLayout(): boolean;
-    get isSecondaryHorizontal(): boolean | undefined;
-    get isSecondaryVertical(): boolean | undefined;
-    renderButton(): React.JSX.Element | undefined;
-    renderOverlay: () => React.JSX.Element | undefined;
-    renderSecondaryButton(): React.JSX.Element | undefined;
-    renderHorizontalLayout(): React.JSX.Element;
-    renderVerticalLayout(): React.JSX.Element;
-    render(): false | React.JSX.Element | undefined;
-}
-declare const _default: React.ForwardRefExoticComponent<FloatingButtonProps & React.RefAttributes<any>> & typeof FloatingButton;
+declare const _default: React.ForwardRefExoticComponent<FloatingButtonProps & React.RefAttributes<any>> & {
+    (props: FloatingButtonProps): React.JSX.Element | null;
+    displayName: string;
+    floatingButtonLayouts: typeof FloatingButtonLayouts;
+};
 export default _default;

package/src/components/floatingButton/index.js

@@ -1,190 +1,80 @@
-import React, { PureComponent } from 'react';
-import { StyleSheet, Animated } from 'react-native';
-import { Constants, asBaseComponent } from "../../commons/new";
-import { Colors, Shadows, Spacings } from "../../style";
-import View from "../view";
-import Image from "../image";
+import React, { useEffect, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { asBaseComponent } from "../../commons/new";
+import { LogService } from "../../services";
+import { Colors, Shadows } from "../../style";
 import Button from "../button";
+import ScreenFooter, { ScreenFooterLayouts, ScreenFooterBackgrounds, KeyboardBehavior, ItemsFit } from "../screenFooter";
 export let FloatingButtonLayouts = /*#__PURE__*/function (FloatingButtonLayouts) {
   FloatingButtonLayouts["VERTICAL"] = "Vertical";
   FloatingButtonLayouts["HORIZONTAL"] = "Horizontal";
   return FloatingButtonLayouts;
 }({});
-const gradientImage = () => require("./gradient.png");
-
 /**
- * @description: Hovering button with gradient background
+ * @description: Hovering button with gradient background, backed by ScreenFooter
  * @modifiers: margin, background, color
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FloatingButtonScreen.tsx
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/FloatingButton/FloatingButton.gif?raw=true
  */
-class FloatingButton extends PureComponent {
-  static displayName = 'FloatingButton';
-  static floatingButtonLayouts = FloatingButtonLayouts;
-  static defaultProps = {
-    duration: 300,
-    buttonLayout: FloatingButtonLayouts.VERTICAL
-  };
-  constructor(props) {
-    super(props);
-    this.initialVisibility = props.visible;
-    this.firstLoad = true;
-    this.visibleAnimated = new Animated.Value(Number(!!props.visible));
-  }
-  componentDidUpdate(prevProps) {
-    const {
-      visible,
-      duration
-    } = this.props;
-    if (prevProps.visible !== visible) {
-      Animated.timing(this.visibleAnimated, {
-        toValue: Number(!!visible),
-        duration,
-        useNativeDriver: true
-      }).start();
-    }
-  }
-  getAnimatedStyle = () => {
-    return {
-      opacity: this.visibleAnimated,
-      transform: [{
-        translateY: this.visibleAnimated.interpolate({
-          inputRange: [0, 1],
-          outputRange: [Constants.screenHeight / 2, 0]
-        })
-      }]
-    };
-  };
-  get isSecondaryOnly() {
-    const {
-      secondaryButton,
-      button
-    } = this.props;
-    return !!secondaryButton && !button;
-  }
-  get isHorizontalLayout() {
-    const {
-      buttonLayout
-    } = this.props;
-    return buttonLayout === FloatingButtonLayouts.HORIZONTAL || this.isSecondaryOnly;
-  }
-  get isSecondaryHorizontal() {
-    const {
-      secondaryButton
-    } = this.props;
-    return secondaryButton && this.isHorizontalLayout;
-  }
-  get isSecondaryVertical() {
-    const {
-      secondaryButton
-    } = this.props;
-    return secondaryButton && !this.isHorizontalLayout;
-  }
-  renderButton() {
-    const {
-      bottomMargin,
-      button,
-      fullWidth,
-      testID
-    } = this.props;
-    if (button) {
-      const shadowStyle = button && !button.outline && !button.link ? styles.shadow : undefined;
-      const marginStyle = {
-        marginTop: Spacings.s4,
-        marginBottom: this.isSecondaryVertical ? Spacings.s4 : bottomMargin || Spacings.s8,
-        marginLeft: this.isSecondaryHorizontal || fullWidth ? Spacings.s4 : undefined,
-        marginRight: this.isSecondaryHorizontal ? Spacings.s5 : fullWidth ? Spacings.s4 : undefined
+const FloatingButton = props => {
+  const {
+    visible = false,
+    button,
+    secondaryButton,
+    bottomMargin,
+    fullWidth,
+    buttonLayout = FloatingButtonLayouts.VERTICAL,
+    duration = 300,
+    withoutAnimation,
+    hideBackgroundOverlay,
+    hoisted = true,
+    testID
+  } = props;
+  useEffect(() => {
+    // eslint-disable-next-line max-len
+    LogService.warn('RNUILib FloatingButton now uses ScreenFooter internally, which requires a SafeAreaProvider. If you experience safe area issues, please wrap your app (or the relevant screen) with <SafeAreaProvider>.');
+  }, []);
+  const footerContentContainerStyle = useMemo(() => {
+    if (bottomMargin !== undefined) {
+      return {
+        paddingBottom: bottomMargin
       };
-      const shouldFlex = this.isSecondaryHorizontal || fullWidth && this.isHorizontalLayout;
-      return <Button size={Button.sizes.large} flex={!!shouldFlex} style={[shadowStyle, marginStyle]} testID={`${testID}.button`} {...button} />;
     }
+    return undefined;
+  }, [bottomMargin]);
+  const isSecondaryOnly = !!secondaryButton && !button;
+  const isHorizontal = buttonLayout === FloatingButtonLayouts.HORIZONTAL || isSecondaryOnly;
+  if (!button && !secondaryButton) {
+    return null;
   }
-  renderOverlay = () => {
-    if (!this.props.hideBackgroundOverlay) {
-      return <View pointerEvents={'none'} style={styles.image}>
-          <Image style={styles.image} source={gradientImage()} resizeMode={'stretch'} tintColor={Colors.$backgroundDefault} />
-        </View>;
+  const renderPrimaryButton = () => {
+    if (!button) {
+      return null;
     }
+    const shadowStyle = !button.outline && !button.link ? styles.shadow : undefined;
+    const shouldFlex = isHorizontal && !!secondaryButton || fullWidth && isHorizontal;
+    return <Button key="primary" size={Button.sizes.large} flex={!!shouldFlex} style={shadowStyle} testID={testID ? `${testID}.button` : undefined} {...button} />;
   };
-  renderSecondaryButton() {
-    const {
-      secondaryButton,
-      bottomMargin,
-      testID,
-      fullWidth,
-      button
-    } = this.props;
-    if (secondaryButton) {
-      const bgColor = secondaryButton.backgroundColor || Colors.$backgroundDefault;
-      const shouldFlex = this.isHorizontalLayout && !!button || fullWidth && this.isSecondaryOnly;
-      const buttonStyle = this.isHorizontalLayout ? [styles.shadow, styles.horizontalSecondaryMargin, {
-        backgroundColor: bgColor
-      }] : {
-        marginBottom: bottomMargin || Spacings.s7
-      };
-      return <Button outline={this.isHorizontalLayout} flex={shouldFlex} link={!this.isHorizontalLayout} size={Button.sizes.large} testID={`${testID}.secondaryButton`} {...secondaryButton} style={buttonStyle} enableShadow={false} />;
-    }
-  }
-  renderHorizontalLayout() {
-    return <>
-        {this.renderOverlay()}
-        {this.renderSecondaryButton()}
-        {this.renderButton()}
-      </>;
-  }
-  renderVerticalLayout() {
-    return <>
-        {this.renderOverlay()}
-        {this.renderButton()}
-        {this.renderSecondaryButton()}
-      </>;
-  }
-  render() {
-    // NOTE: keep this.firstLoad as true as long as the visibility changed to true
-    const {
-      withoutAnimation,
-      visible,
-      fullWidth,
-      testID,
-      button,
-      secondaryButton
-    } = this.props;
-    this.firstLoad && !visible ? this.firstLoad = true : this.firstLoad = false;
-
-    // NOTE: On first load, don't show if it should not be visible
-    if (this.firstLoad === true && !this.initialVisibility) {
-      return false;
+  const renderSecondaryButton = () => {
+    if (!secondaryButton) {
+      return null;
     }
-    if (!visible && withoutAnimation) {
-      return false;
-    }
-    if (button || secondaryButton) {
-      const hasBothButtons = !!(button && secondaryButton);
-      const shouldCenter = !fullWidth || this.isHorizontalLayout && hasBothButtons;
-      return <View row={this.isHorizontalLayout} center={shouldCenter} pointerEvents="box-none" animated style={[styles.container, this.getAnimatedStyle()]} testID={testID}>
-          {this.isHorizontalLayout ? this.renderHorizontalLayout() : this.renderVerticalLayout()}
-        </View>;
-    }
-  }
-}
+    const shouldFlex = isHorizontal && !!button || fullWidth && isSecondaryOnly;
+    const bgColor = secondaryButton.backgroundColor || Colors.$backgroundDefault;
+    return <Button key="secondary" outline={isHorizontal} link={!isHorizontal} flex={shouldFlex} size={Button.sizes.large} testID={testID ? `${testID}.secondaryButton` : undefined} {...secondaryButton} style={isHorizontal ? [styles.shadow, {
+      backgroundColor: bgColor
+    }] : undefined} enableShadow={false} />;
+  };
+  const children = isHorizontal ? [renderSecondaryButton(), renderPrimaryButton()] : [renderPrimaryButton(), renderSecondaryButton()];
+  return <ScreenFooter visible={visible} layout={isHorizontal ? ScreenFooterLayouts.HORIZONTAL : ScreenFooterLayouts.VERTICAL} backgroundType={hideBackgroundOverlay ? ScreenFooterBackgrounds.TRANSPARENT : ScreenFooterBackgrounds.FADING} keyboardBehavior={hoisted ? KeyboardBehavior.HOISTED : KeyboardBehavior.STICKY} animationDuration={withoutAnimation ? 0 : duration} itemsFit={fullWidth ? ItemsFit.STRETCH : undefined} contentContainerStyle={footerContentContainerStyle} testID={testID}>
+      {children}
+    </ScreenFooter>;
+};
+FloatingButton.displayName = 'FloatingButton';
+FloatingButton.floatingButtonLayouts = FloatingButtonLayouts;
 const styles = StyleSheet.create({
-  container: {
-    // ...StyleSheet.absoluteFillObject, // TODO: this is breaking scenarios where the FloatingButton is inside a KeyboardTrackingView
-    top: undefined,
-    zIndex: 99
-  },
-  image: {
-    ...StyleSheet.absoluteFillObject,
-    width: '100%',
-    height: '100%'
-  },
   shadow: {
     ...Shadows.sh20.bottom
-  },
-  horizontalSecondaryMargin: {
-    marginTop: Spacings.s4,
-    marginBottom: Spacings.s7,
-    marginLeft: Spacings.s5
   }
 });
 export default asBaseComponent(FloatingButton);

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
      */