react-native-ui-lib 8.4.3 → 8.5.0

package/lib/package.json

@@ -10,7 +10,7 @@
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "lodash": "^4.17.21",
+    "lodash": "4.18.1",
     "prop-types": "^15.5.10"
   },
   "devDependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "8.4.3",
+  "version": "8.5.0",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -34,7 +34,7 @@
     "date-fns": "^2.29.3",
     "deprecated-react-native-prop-types": "^2.3.0",
     "hoist-non-react-statics": "^3.0.0",
-    "lodash": "^4.17.21",
+    "lodash": "4.18.1",
     "memoize-one": "^5.0.5",
     "prop-types": "^15.5.10",
     "react-freeze": "^1.0.0",
@@ -66,7 +66,7 @@
     "@react-native/metro-config": "0.77.3",
     "@react-native/typescript-config": "0.77.3",
     "@shopify/flash-list": "1.7.6",
-    "@testing-library/react-native": "^11.5.1",
+    "@testing-library/react-native": "12.9.0",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^29.5.13",
     "@types/lodash": "^4.0.0",
@@ -82,7 +82,7 @@
     "light-date": "^1.2.0",
     "moment": "^2.24.0",
     "object-hash": "^3.0.0",
-    "postcss": "^8.4.21",
+    "postcss": "^8.5.8",
     "postcss-js": "^4.0.0",
     "prettier": "^3.2.5",
     "react": "18.3.1",

package/src/components/WheelPicker/usePresenter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { WheelPickerItemValue } from './types';
 import { WheelPickerItemProps } from './Item';
 type PropTypes<T> = {

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

@@ -5,6 +5,8 @@ export declare enum ChipsInputChangeReason {
     Added = "added",
     Removed = "removed"
 }
+type ChipsInputChangeReasonUnion = `${ChipsInputChangeReason}`;
+export type ChipsInputChangeReasonProps = ChipsInputChangeReasonUnion | ChipsInputChangeReason;
 export type ChipsInputChipProps = ChipProps & {
     invalid?: boolean;
 };

package/src/components/colorPicker/ColorPickerPresenter.d.ts

@@ -12,5 +12,5 @@ export declare function getValidColorString(text?: string): {
     valid: boolean;
     hex?: undefined;
 };
-export declare function getHexString(color: HSLColor): string;
+export declare function getHexString(color: HSLColor): Uppercase<string>;
 export declare function getTextColor(color: string): string;

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

@@ -5,7 +5,7 @@ export declare enum FloatingButtonLayouts {
     VERTICAL = "Vertical",
     HORIZONTAL = "Horizontal"
 }
-export interface FloatingButtonProps extends Pick<ScreenFooterProps, 'isAndroidEdgeToEdge'> {
+export interface FloatingButtonProps extends Pick<ScreenFooterProps, 'isAndroidEdgeToEdge' | 'animationType'> {
     /**
      * Whether the button is visible
      */

package/src/components/floatingButton/index.js

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { asBaseComponent, Constants } from "../../commons/new";
 import { LogService } from "../../services";
-import { Colors, Shadows } from "../../style";
+import { Colors, Shadows, Spacings } from "../../style";
 import Button from "../button";
 import ScreenFooter, { ScreenFooterLayouts, ScreenFooterBackgrounds, KeyboardBehavior, ItemsFit } from "../screenFooter";
 export let FloatingButtonLayouts = /*#__PURE__*/function (FloatingButtonLayouts) {
@@ -29,22 +29,26 @@ const FloatingButton = props => {
     hideBackgroundOverlay,
     hoisted = Constants.isAndroid,
     isAndroidEdgeToEdge,
+    animationType,
     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 isSecondaryOnly = !!secondaryButton && !button;
+  const isHorizontal = buttonLayout === FloatingButtonLayouts.HORIZONTAL || isSecondaryOnly;
   const footerContentContainerStyle = useMemo(() => {
     if (bottomMargin !== undefined) {
       return {
         paddingBottom: bottomMargin
       };
     }
-    return undefined;
-  }, [bottomMargin]);
-  const isSecondaryOnly = !!secondaryButton && !button;
-  const isHorizontal = buttonLayout === FloatingButtonLayouts.HORIZONTAL || isSecondaryOnly;
+    const isSecondaryAtBottom = !!secondaryButton && (isSecondaryOnly || !isHorizontal);
+    return {
+      paddingBottom: isSecondaryAtBottom ? Spacings.s7 : Spacings.s8
+    };
+  }, [bottomMargin, secondaryButton, isSecondaryOnly, isHorizontal]);
   if (!button && !secondaryButton) {
     return null;
   }
@@ -67,7 +71,7 @@ const FloatingButton = props => {
     }] : 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} isAndroidEdgeToEdge={isAndroidEdgeToEdge} animationDuration={withoutAnimation ? 0 : duration} itemsFit={fullWidth ? ItemsFit.STRETCH : undefined} contentContainerStyle={footerContentContainerStyle} testID={testID}>
+  return <ScreenFooter visible={visible} layout={isHorizontal ? ScreenFooterLayouts.HORIZONTAL : ScreenFooterLayouts.VERTICAL} backgroundType={hideBackgroundOverlay ? ScreenFooterBackgrounds.TRANSPARENT : ScreenFooterBackgrounds.FADING} keyboardBehavior={hoisted ? KeyboardBehavior.HOISTED : KeyboardBehavior.STICKY} isAndroidEdgeToEdge={isAndroidEdgeToEdge} animationDuration={withoutAnimation ? 0 : duration} animationType={animationType} itemsFit={fullWidth ? ItemsFit.STRETCH : undefined} contentContainerStyle={footerContentContainerStyle} testID={testID}>
       {children}
     </ScreenFooter>;
 };

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/helpers/AvatarHelper.d.ts

@@ -2,7 +2,7 @@ export declare function getInitialsTypography(size: number): import("react-nativ
 export declare function hashStringToNumber(str?: string): number;
 export declare function getAvatarColors(): string[];
 export declare function getColorById(id: string, avatarColors?: string[]): string;
-export declare function getInitials(name?: string, limit?: number): string;
+export declare function getInitials(name?: string, limit?: number): Uppercase<string>;
 export declare function getBackgroundColor(name?: string, avatarColors?: string[], hashFunction?: (name?: string) => number, defaultColor?: string): string | undefined;
 export declare function isGravatarUrl(url: string): boolean;
 export declare function isBlankGravatarUrl(url: string): boolean;

package/src/incubator/slider/Thumb.js

@@ -40,7 +40,7 @@ const Thumb = props => {
     height: THUMB_SIZE
   });
   const lastOffset = useSharedValue(0);
-  const gesture = Gesture.Pan().onBegin(() => {
+  const gesture = Gesture.Pan().hitSlop(hitSlop).onBegin(() => {
     onSeekStart?.();
     isPressed.value = true;
     lastOffset.value = offset.value;

package/src/index.d.ts

@@ -23,7 +23,7 @@ export { default as Button, ButtonProps, ButtonSize, ButtonAnimationDirection }
 export { default as Card, CardProps, CardSectionProps, CardSelectionOptions } from './components/card';
 export { default as Carousel, CarouselProps, PageControlPosition } from './components/carousel';
 export { default as Checkbox, CheckboxProps, CheckboxRef } from './components/checkbox';
-export { default as ChipsInput, ChipsInputProps, ChipsInputChipProps } from './components/chipsInput';
+export { default as ChipsInput, ChipsInputProps, ChipsInputChipProps, ChipsInputChangeReason, ChipsInputChangeReasonProps } from './components/chipsInput';
 export { default as Chip, ChipProps } from './components/chip';
 export { default as ColorPicker, ColorPickerProps } from './components/colorPicker';
 export { default as ColorPalette, ColorPaletteProps } from './components/colorPalette';
@@ -38,7 +38,7 @@ export { default as ExpandableSection, ExpandableSectionProps } from './componen
 export { default as Fader, FaderProps, FaderPosition } from './components/fader';
 export { default as FeatureHighlight, FeatureHighlightProps } from './components/featureHighlight';
 export { default as FloatingButton, FloatingButtonProps, FloatingButtonLayouts } from './components/floatingButton';
-export { default as ScreenFooter, ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow } from './components/screenFooter';
+export { default as ScreenFooter, ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterAnimationTypeProp, ScreenFooterShadow } from './components/screenFooter';
 export { default as Gradient, GradientProps, GradientTypes } from './components/gradient';
 export { default as Slider } from './components/slider';
 export { default as GradientSlider } from './components/slider/GradientSlider';

package/src/index.js

@@ -61,6 +61,8 @@ var _exportNames = {
   ChipsInput: true,
   ChipsInputProps: true,
   ChipsInputChipProps: true,
+  ChipsInputChangeReason: true,
+  ChipsInputChangeReasonProps: true,
   Chip: true,
   ChipProps: true,
   ColorPicker: true,
@@ -107,6 +109,7 @@ var _exportNames = {
   HorizontalItemsDistribution: true,
   ItemsFit: true,
   KeyboardBehavior: true,
+  ScreenFooterAnimationTypeProp: true,
   ScreenFooterShadow: true,
   Gradient: true,
   GradientProps: true,
@@ -432,6 +435,18 @@ Object.defineProperty(exports, "ChipsInput", {
     return _chipsInput().default;
   }
 });
+Object.defineProperty(exports, "ChipsInputChangeReason", {
+  enumerable: true,
+  get: function () {
+    return _chipsInput().ChipsInputChangeReason;
+  }
+});
+Object.defineProperty(exports, "ChipsInputChangeReasonProps", {
+  enumerable: true,
+  get: function () {
+    return _chipsInput().ChipsInputChangeReasonProps;
+  }
+});
 Object.defineProperty(exports, "ChipsInputChipProps", {
   enumerable: true,
   get: function () {
@@ -1185,6 +1200,12 @@ Object.defineProperty(exports, "ScreenFooter", {
     return _screenFooter().default;
   }
 });
+Object.defineProperty(exports, "ScreenFooterAnimationTypeProp", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ScreenFooterAnimationTypeProp;
+  }
+});
 Object.defineProperty(exports, "ScreenFooterBackgrounds", {
   enumerable: true,
   get: function () {

package/src/testkit/Component.driver.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DragData, UniDriver, UniDriverClass } from './UniDriver';
 export type ComponentDriverArgs = {
     testID: string;

package/src/testkit/drivers/TestingLibraryDriver.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DragData, UniDriver } from '../UniDriver';
 import { ReactTestInstance } from 'react-test-renderer';
 export declare class TestingLibraryDriver<Props> implements UniDriver<Props> {