react-native-ui-lib 7.38.1-snapshot.6307 → 7.38.1-snapshot.6312

package/package.json

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

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

@@ -162,30 +162,29 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "
      * Image props object
      */
     imageProps?: Partial<Omit<import("react-native").ImageProps, "source"> & Pick<import("react-native").ImageBackgroundProps, "imageStyle"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & import("../..").RecorderProps & {
-        /**
-         * Avatar colors to be used when useAutoColors is true
-         */
         sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
         assetName?: string | undefined;
         assetGroup?: string | undefined;
         tintColor?: string | undefined;
-        supportRTL?: boolean | undefined; /**
-         * Background color for Avatar
-         */
+        supportRTL?: boolean | undefined;
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined; /**
-         * Image props object
-         */
+        overlayType?: string | undefined;
         overlayIntensity?: import("../overlay").OverlayIntensityType | undefined;
         overlayColor?: string | undefined;
         customOverlayContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
         errorSource?: import("../image").ImageSourceType;
-        imageId?: string | undefined;
+        imageId?: string | undefined; /**
+         * Listener-callback for when an image's (uri) loading
+         * fails (equiv. to Image.onError()).
+         */
         useBackgroundContainer?: boolean | undefined;
         width?: string | number | undefined;
         height?: string | number | undefined;
-        source: import("../image").ImageSourceType;
+        source: import("../image").ImageSourceType; /**
+         * Hash the name (or label) to get a color, so each name will have a specific color.
+         * Default is false.
+         */
     } & AnimatedImageProps> | undefined;
     /**
      * Image style object used to pass additional style props
@@ -291,30 +290,29 @@ declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps,
      * Image props object
      */
     imageProps?: Partial<Omit<import("react-native").ImageProps, "source"> & Pick<import("react-native").ImageBackgroundProps, "imageStyle"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & import("../..").RecorderProps & {
-        /**
-         * Avatar colors to be used when useAutoColors is true
-         */
         sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
         assetName?: string | undefined;
         assetGroup?: string | undefined;
         tintColor?: string | undefined;
-        supportRTL?: boolean | undefined; /**
-         * Background color for Avatar
-         */
+        supportRTL?: boolean | undefined;
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined; /**
-         * Image props object
-         */
+        overlayType?: string | undefined;
         overlayIntensity?: import("../overlay").OverlayIntensityType | undefined;
         overlayColor?: string | undefined;
         customOverlayContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
         errorSource?: import("../image").ImageSourceType;
-        imageId?: string | undefined;
+        imageId?: string | undefined; /**
+         * Listener-callback for when an image's (uri) loading
+         * fails (equiv. to Image.onError()).
+         */
         useBackgroundContainer?: boolean | undefined;
         width?: string | number | undefined;
         height?: string | number | undefined;
-        source: import("../image").ImageSourceType;
+        source: import("../image").ImageSourceType; /**
+         * Hash the name (or label) to get a color, so each name will have a specific color.
+         * Default is false.
+         */
     } & AnimatedImageProps> | undefined;
     /**
      * Image style object used to pass additional style props

package/src/components/avatar/index.js

@@ -16,7 +16,6 @@ import AnimatedImage from "../animatedImage";
 import * as AvatarHelper from "../../helpers/AvatarHelper";
 import { useThemeProps } from "../../hooks";
 import { isSvg } from "../../utils/imageUtils";
-import Constants from "../../commons/Constants";
 export let BadgePosition = /*#__PURE__*/function (BadgePosition) {
   BadgePosition["TOP_RIGHT"] = "TOP_RIGHT";
   BadgePosition["TOP_LEFT"] = "TOP_LEFT";
@@ -150,7 +149,7 @@ const Avatar = forwardRef((props, ref) => {
   const renderImage = () => {
     if (source !== undefined) {
       // Looks like reanimated does not support SVG
-      const ImageContainer = animate && !isSvg(source) && !Constants.isWeb ? AnimatedImage : Image;
+      const ImageContainer = animate && !isSvg(source) ? AnimatedImage : Image;
       return <ImageContainer style={_imageStyle} source={source} onLoadStart={onImageLoadStart} onLoadEnd={onImageLoadEnd} onError={onImageLoadError} testID={`${testID}.image`} width={size} height={size} containerStyle={_baseContainerStyle} {...imageProps} />;
     }
   };

package/src/components/badge/index.js

@@ -10,6 +10,8 @@ import Image from "../image";
 import View from "../view";
 import Text from "../text";
 const LABEL_FORMATTER_VALUES = [1, 2, 3, 4];
+const DEFAULT_PIMPLE_SIZE = 10;
+const DEFAULT_BADGE_SIZE = 20;
 /**
  * @description: Round colored badge, typically used to show a number
  * @extends: View
@@ -37,7 +39,14 @@ class Badge extends PureComponent {
     };
   }
   get size() {
-    return this.props.size || 20;
+    const {
+      size,
+      label
+    } = this.props;
+    if (size !== undefined) {
+      return size;
+    }
+    return label === undefined ? DEFAULT_PIMPLE_SIZE : DEFAULT_BADGE_SIZE;
   }
   isSmallBadge() {
     return this.size <= 16;