react-native-ui-lib 8.4.3-snapshot.7923 → 8.4.3-snapshot.7930

package/package.json

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

package/src/components/badge/index.js

@@ -130,11 +130,10 @@ class Badge extends PureComponent {
   renderLabel() {
     const {
       labelStyle,
-      label,
-      testID
+      label
     } = this.props;
     if (label) {
-      return <Text style={[this.styles.label, this.isSmallBadge() && this.styles.labelSmall, labelStyle]} allowFontScaling={false} numberOfLines={1} testID={testID ? `${testID}.label` : 'badge'} recorderTag={'unmask'}>
+      return <Text style={[this.styles.label, this.isSmallBadge() && this.styles.labelSmall, labelStyle]} allowFontScaling={false} numberOfLines={1} testID="badge" recorderTag={'unmask'}>
           {this.getFormattedLabel()}
         </Text>;
     }
@@ -151,13 +150,12 @@ class Badge extends PureComponent {
       iconStyle,
       iconProps,
       borderColor,
-      label,
-      testID
+      label
     } = this.props;
     const flex = label ? 0 : 1;
     return icon && <Image source={icon} resizeMode="contain" tintColor={Colors.$iconDefaultLight}
     //@ts-ignore
-    borderColor={borderColor} testID={testID ? `${testID}.icon` : undefined} {...iconProps} style={{
+    borderColor={borderColor} {...iconProps} style={{
       flex,
       ...iconStyle
     }} />;

package/src/components/screenFooter/index.js

@@ -29,6 +29,7 @@ const ScreenFooter = props => {
     shadow = ScreenFooterShadow.SH20,
     hideDivider = false,
     isAndroidEdgeToEdge = !!androidVersion && androidVersion >= 35 ? true : undefined,
+    containerStyle: containerStyleOverride,
     contentContainerStyle: contentContainerStyleOverride
   } = props;
   const withoutAnimation = animationDuration === 0;
@@ -186,15 +187,15 @@ const ScreenFooter = props => {
     return withoutAnimation ? View : Animated.View;
   }, [withoutAnimation]);
   const containerStyle = useMemo(() => {
-    return withoutAnimation ? styles.container : [styles.container, hoistedAnimatedStyle];
+    return withoutAnimation ? [styles.container, containerStyleOverride] : [styles.container, hoistedAnimatedStyle, containerStyleOverride];
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [withoutAnimation]);
+  }, [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]}>
+  return <Animated.View testID={testID} onLayout={onLayout} style={[styles.container, stickyAnimatedStyle, containerStyleOverride]}>
       {renderFooterContent()}
     </Animated.View>;
 };
@@ -204,7 +205,8 @@ const styles = StyleSheet.create({
     position: 'absolute',
     bottom: 0,
     left: 0,
-    right: 0
+    right: 0,
+    zIndex: 50
   },
   contentContainer: {
     paddingTop: Spacings.s4,

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

@@ -97,6 +97,11 @@ export interface ScreenFooterProps extends PropsWithChildren<{}> {
      * Only applies when backgroundType is 'solid'
      */
     hideDivider?: boolean;
+    /**
+     * Custom style for the outer container of the footer.
+     * Can be used to override zIndex or other container-level properties.
+     */
+    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/testkit/index.d.ts

@@ -23,4 +23,3 @@ export { ToastDriver } from '../incubator/toast/Toast.driver.new';
 export { DateTimePickerDriver } from '../components/dateTimePicker/DateTimePicker.driver';
 export { TimelineDriver } from '../components/timeline/timeline.driver';
 export { ChipDriver } from '../components/chip/chip.driver';
-export { BadgeDriver } from '../components/badge/badge.driver';

package/src/testkit/index.js

@@ -22,5 +22,4 @@ export { ExpandableOverlayDriver } from "../incubator/expandableOverlay/Expandab
 export { ToastDriver } from "../incubator/toast/Toast.driver.new";
 export { DateTimePickerDriver } from "../components/dateTimePicker/DateTimePicker.driver";
 export { TimelineDriver } from "../components/timeline/timeline.driver";
-export { ChipDriver } from "../components/chip/chip.driver";
-export { BadgeDriver } from "../components/badge/badge.driver";
+export { ChipDriver } from "../components/chip/chip.driver";

package/src/components/badge/badge.driver.d.ts

@@ -1,37 +0,0 @@
-import { ComponentProps } from '../../testkit/new/Component.driver';
-export declare const BadgeDriver: (props: ComponentProps) => {
-    getLabel: () => {
-        getText: () => string | (string | import("react-test-renderer").ReactTestInstance)[];
-        getStyle: () => import("react-native").TextStyle;
-        press: () => void;
-        hasOnPress: () => boolean;
-        onPressIn: () => void;
-        hasOnPressIn: () => boolean;
-        onPressOut: () => void;
-        hasOnPressOut: () => boolean;
-        onLongPress: () => void;
-        hasOnLongPress: () => boolean;
-        getElement: () => import("react-test-renderer").ReactTestInstance;
-        queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
-        exists: () => boolean;
-    };
-    getIcon: () => {
-        exists: () => boolean;
-        getStyle: () => any;
-        getElement: () => import("react-test-renderer").ReactTestInstance;
-        queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
-    };
-    getStyle: () => any;
-    getSize: () => number;
-    press: () => void;
-    hasOnPress: () => boolean;
-    onPressIn: () => void;
-    hasOnPressIn: () => boolean;
-    onPressOut: () => void;
-    hasOnPressOut: () => boolean;
-    onLongPress: () => void;
-    hasOnLongPress: () => boolean;
-    getElement: () => import("react-test-renderer").ReactTestInstance;
-    queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
-    exists: () => boolean;
-};

package/src/components/badge/badge.driver.js

@@ -1,47 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { useComponentDriver } from "../../testkit/new/Component.driver";
-import { usePressableDriver } from "../../testkit/new/usePressable.driver";
-import { TextDriver } from "../text/Text.driver.new";
-import { ImageDriver } from "../image/Image.driver.new";
-export const BadgeDriver = props => {
-  const driver = usePressableDriver(useComponentDriver(props));
-  const labelDriver = TextDriver({
-    renderTree: props.renderTree,
-    testID: `${props.testID}.label`
-  });
-  const iconDriver = ImageDriver({
-    renderTree: props.renderTree,
-    testID: `${props.testID}.icon`
-  });
-  const getLabel = () => {
-    return {
-      ...labelDriver
-    };
-  };
-  const getIcon = () => {
-    const exists = () => {
-      return iconDriver.exists();
-    };
-    const getStyle = () => {
-      return StyleSheet.flatten(iconDriver.getElement().props.style);
-    };
-    return {
-      ...iconDriver,
-      exists,
-      getStyle
-    };
-  };
-  const getStyle = () => {
-    return StyleSheet.flatten(driver.getElement().props.style);
-  };
-  const getSize = () => {
-    return getStyle().height;
-  };
-  return {
-    ...driver,
-    getLabel,
-    getIcon,
-    getStyle,
-    getSize
-  };
-};