react-native-ui-lib 8.4.3-snapshot.7934 → 8.4.3-snapshot.7939

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "8.4.3-snapshot.7934",
+  "version": "8.4.3-snapshot.7939",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

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

@@ -29,6 +29,7 @@ const FloatingButton = props => {
     hideBackgroundOverlay,
     hoisted = Constants.isAndroid,
     isAndroidEdgeToEdge,
+    animationType,
     testID
   } = props;
   useEffect(() => {
@@ -70,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,45 +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);
@@ -164,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]);
@@ -183,31 +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, containerStyleOverride] : [styles.container, hoistedAnimatedStyle, containerStyleOverride];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [withoutAnimation, containerStyleOverride]);
-  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, containerStyleOverride]}>
-      {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,
-    zIndex: 50
-  },
   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"
     },
     {

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

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

@@ -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

@@ -109,6 +109,7 @@ var _exportNames = {
   HorizontalItemsDistribution: true,
   ItemsFit: true,
   KeyboardBehavior: true,
+  ScreenFooterAnimationTypeProp: true,
   ScreenFooterShadow: true,
   Gradient: true,
   GradientProps: true,
@@ -1199,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 () {