react-native-ui-lib 7.39.1 → 7.40.0-snapshot.6818

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.39.1",
+  "version": "7.40.0-snapshot.6818",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -32,13 +32,15 @@
     "pre-push": "npm run build:dev && npm run test",
     "docs:deploy": "./scripts/docs/deployDocs.sh",
     "docs:build": "node scripts/docs/buildDocs.js",
+    "docs:start": "(cd docuilib && yarn start)",
     "calendar:createMocks": "node scripts/createCalendarMockData.js",
     "snippets:build": "node scripts/generateSnippets.js",
     "release": "node ./scripts/release/release.js",
     "releaseDemo": "./scripts/release/releaseDemo.sh",
     "releaseDocs": "./scripts/release/releaseDocs.sh",
     "releaseEslint": "./scripts/release/releaseEslint.sh",
-    "releaseNative": "./scripts/release/releaseNative.sh"
+    "releaseNative": "./scripts/release/releaseNative.sh",
+    "updateWebAssets": "node scripts/assets/extractDimensions.js"
   },
   "dependencies": {
     "babel-plugin-transform-inline-environment-variables": "^0.0.2",
@@ -77,7 +79,7 @@
     "@react-native/eslint-config": "0.73.2",
     "@react-native/metro-config": "0.73.5",
     "@react-native/typescript-config": "0.73.1",
-    "@shopify/flash-list": "^1.2.1",
+    "@shopify/flash-list": "1.7.6",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^11.5.1",
     "@types/hoist-non-react-statics": "^3.3.1",
@@ -119,7 +121,7 @@
     "react-native-linear-gradient": "2.6.2",
     "react-native-mmkv": "2.11.0",
     "react-native-navigation": "7.40.1",
-    "react-native-reanimated": "3.8.1",
+    "react-native-reanimated": "3.16.7",
     "react-native-shimmer-placeholder": "^2.0.6",
     "react-native-svg": "15.2.0",
     "react-native-svg-transformer": "1.5.0",

package/scripts/docs/buildDocsCommon.js

@@ -31,6 +31,9 @@ const VALID_COMPONENTS_CATEGORIES = [
 
 function buildDocs(apiFolders, componentsPreProcess) {
   let components = readComponentsFromApiFiles(apiFolders);
+
+  logStatistics(components);
+
   components = componentsPreProcess?.(components) ?? components;
   resetDocsDir();
   processComponents(components);
@@ -85,13 +88,9 @@ function processComponents(components) {
     content += `sidebar_label: ${componentName}\n`;
     content += '---\n\n';
 
-    if (component.docs) {
-      content += `import ComponentPage from '@site/src/components/ComponentPage';\n\n`;
-      const componentObject = JSON.stringify(component);
-      content += `<ComponentPage component={${componentObject}}/>\n`;
-    } else {
-      content += `${buildOldDocs(component)}\n`;
-    }
+    content += `import ComponentPage from '@site/src/components/ComponentPage';\n\n`;
+    const componentObject = JSON.stringify(component);
+    content += `<ComponentPage component={${componentObject}}/>\n`;
 
     let dirPath;
     switch (component.category) {
@@ -134,86 +133,20 @@ function generateExtendsLink(extendsLink) {
   return extendsText;
 }
 
-function buildOldDocs(component) {
-  let content = '';
-  content += `import UILivePreview from '@site/src/components/UILivePreview';\n\n`;
-
-  /* General Info */
-  content += `${component.description}  \n`;
-  if (typeof component.example === 'string') {
-    content += `[(code example)](${component.example})\n`;
-  } else if (Array.isArray(component.example)) {
-    content += '(code examples: ';
-    component.example.forEach((example, index) => {
-      const slashIndex = example.lastIndexOf('/');
-      const dotIndex = example.lastIndexOf('.');
-      content += `${index > 0 ? ', ' : ''}[${example.slice(slashIndex + 1, dotIndex)}](${example})`;
-    });
-    content += ')\n';
-  }
-
-  if (component.extends) {
-    let extendsText = component.extends?.join(', ');
-    if (component.extendsLink) {
-      extendsText = `[${extendsText}](${component.extendsLink})`;
-    } else {
-      extendsText = _.map(component.extends, generateExtendsLink).join(', ');
-    }
-    content += ':::info\n';
-    content += `This component extends **${extendsText}** props.\n`;
-    content += ':::\n';
-  }
-
-  if (component.modifiers) {
-    content += ':::tip\n';
-    content += `This component support **${component.modifiers?.join(', ')}** modifiers.\n`;
-    content += ':::\n';
-  }
+function logStatistics(components) {
+  const groupedComponents = _.countBy(components, 'name');
+  const duplicateComponents = Object.entries(groupedComponents)
+    .filter(([_, count]) => count > 1)
+    .map(([name, count]) => `${name} (${count} times)`);
 
-  if (component.caution) {
-    content += ':::caution\n';
-    content += `${component.caution}\n`;
-    content += ':::\n';
+  if (duplicateComponents.length > 0) {
+    console.log('Components with multiple occurrences:\n-', duplicateComponents.join('\n- '));
   }
 
-  if (component.note) {
-    content += ':::note\n';
-    content += `${component.note}\n`;
-    content += ':::\n';
+  const componentsWithoutSnippet = components.filter(c => !c.snippet).map(c => c.name);
+  if (componentsWithoutSnippet.length > 0) {
+    console.log('Components missing snippet:\n-', componentsWithoutSnippet.join('\n- '));
   }
-
-  /* Images */
-  content += `<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}>`;
-  component.images?.forEach(image => {
-    content += `<img style={{maxHeight: '420px'}} src={'${image}'}/>`;
-    content += '\n\n';
-  });
-  content += '</div>\n\n';
-
-  /* Snippet */
-  if (component.snippet) {
-    content += `### Usage\n`;
-    content += `<UILivePreview componentName={"${component.name}"} code={\`${component.snippet
-      ?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), ''))
-      .join('\n')
-      .toString()}\`}/>\n\n`;
-  } else {
-    console.warn(`${component.name} does not have a snippet`);
-  }
-
-  /* Props */
-  content += '## API\n';
-  _.sortBy(component.props, p => p.name)?.forEach(prop => {
-    content += `### ${prop.name}\n`;
-    if (prop.note) {
-      content += `#### ${prop.note}\n`;
-    }
-    content += `${prop.description}\n`;
-    // content += `<span style={{color: 'grey'}}>${_.escape(prop.type)}</span>\n\n`;
-    content += `\`${prop.type} \` \n\n`;
-  });
-
-  return content;
 }
 
 module.exports = {buildDocs};

package/scripts/release/prReleaseNotesCommon.js

@@ -196,7 +196,7 @@ async function generateReleaseNotes(latestVersion,
   newVersion,
   fileNamePrefix,
   repo,
-  header = '',
+  getHeader = () => '',
   tagPrefix = '',
   categories = []) {
   let latestVer, newVer;
@@ -214,6 +214,7 @@ async function generateReleaseNotes(latestVersion,
   });
 
   rl.on('close', () => {
+    const header = getHeader(newVer);
     console.info(`Current latest version is v${latestVer}`);
     console.info(`Generating release notes out or PRs for v${newVer}`);
     _generateReleaseNotes(latestVer, newVer, fileNamePrefix, repo, header, tagPrefix, categories);

package/src/assets/index.js

@@ -1,12 +1,9 @@
 import { Assets } from "./Assets";
 export default new Assets().loadAssetsGroup('', {
-  get icons() {
-    return require("./icons").icons;
-  },
   get emojis() {
     return require("./emojis").emojis;
   },
-  get images() {
-    return require("./images").images;
+  get internal() {
+    return require("./internal").internal;
   }
 });

package/src/assets/internal/icons/index.js

@@ -0,0 +1,50 @@
+export const icons = {
+  get check() {
+    return require('./check.png');
+  },
+  get checkMarkSmall() {
+    return require('./checkMarkSmall.png');
+  },
+  get checkSmall() {
+    return require('./checkSmall.png');
+  },
+  get chevronDown() {
+    return require('./chevronDown.png');
+  },
+  get exclamationSmall() {
+    return require('./exclamationSmall.png');
+  },
+  get minusOutline() {
+    return require('./minusOutline.png');
+  },
+  get minusOutlineSmall() {
+    return require('./minusOutlineSmall.png');
+  },
+  get minusSmall() {
+    return require('./minusSmall.png');
+  },
+  get plusOutline() {
+    return require('./plusOutline.png');
+  },
+  get plusOutlineSmall() {
+    return require('./plusOutlineSmall.png');
+  },
+  get plusSmall() {
+    return require('./plusSmall.png');
+  },
+  get search() {
+    return require('./search.png');
+  },
+  get x() {
+    return require('./x.png');
+  },
+  get xFlat() {
+    return require('./xFlat.png');
+  },
+  get xMedium() {
+    return require('./xMedium.png');
+  },
+  get xSmall() {
+    return require('./xSmall.png');
+  }
+};

package/src/assets/internal/icons/index.web.js

@@ -0,0 +1,50 @@
+export const icons = {
+  get check() {
+    return {uri: require('./check.png'), width: 21, height: 15};
+  },
+  get checkMarkSmall() {
+    return {uri: require('./checkMarkSmall.png'), width: 16, height: 16};
+  },
+  get checkSmall() {
+    return {uri: require('./checkSmall.png'), width: 24, height: 24};
+  },
+  get chevronDown() {
+    return {uri: require('./chevronDown.png'), width: 16, height: 16};
+  },
+  get exclamationSmall() {
+    return {uri: require('./exclamationSmall.png'), width: 16, height: 16};
+  },
+  get minusOutline() {
+    return {uri: require('./minusOutline.png'), width: 32, height: 32};
+  },
+  get minusOutlineSmall() {
+    return {uri: require('./minusOutlineSmall.png'), width: 24, height: 24};
+  },
+  get minusSmall() {
+    return {uri: require('./minusSmall.png'), width: 16, height: 16};
+  },
+  get plusOutline() {
+    return {uri: require('./plusOutline.png'), width: 32, height: 32};
+  },
+  get plusOutlineSmall() {
+    return {uri: require('./plusOutlineSmall.png'), width: 24, height: 24};
+  },
+  get plusSmall() {
+    return {uri: require('./plusSmall.png'), width: 16, height: 16};
+  },
+  get search() {
+    return {uri: require('./search.png'), width: 24, height: 24};
+  },
+  get x() {
+    return {uri: require('./x.png'), width: 17, height: 16};
+  },
+  get xFlat() {
+    return {uri: require('./xFlat.png'), width: 16, height: 16};
+  },
+  get xMedium() {
+    return {uri: require('./xMedium.png'), width: 24, height: 24};
+  },
+  get xSmall() {
+    return {uri: require('./xSmall.png'), width: 16, height: 16};
+  }
+};

package/src/assets/internal/images/index.js

@@ -0,0 +1,26 @@
+export const images = {
+  get gradient() {
+    return require('./gradient.png');
+  },
+  get gradientOverlay() {
+    return require('./gradientOverlay.png');
+  },
+  get gradientOverlayHigh() {
+    return require('./gradientOverlayHigh.png');
+  },
+  get gradientOverlayLow() {
+    return require('./gradientOverlayLow.png');
+  },
+  get gradientOverlayMedium() {
+    return require('./gradientOverlayMedium.png');
+  },
+  get hintTipMiddle() {
+    return require('./hintTipMiddle.png');
+  },
+  get hintTipSide() {
+    return require('./hintTipSide.png');
+  },
+  get transparentSwatch() {
+    return require('./transparentSwatch.png');
+  }
+};

package/src/assets/internal/images/index.web.js

@@ -0,0 +1,26 @@
+export const images = {
+  get gradient() {
+    return {uri: require('./gradient.png'), width: 56, height: 2};
+  },
+  get gradientOverlay() {
+    return {uri: require('./gradientOverlay.png'), width: 76, height: 48};
+  },
+  get gradientOverlayHigh() {
+    return {uri: require('./gradientOverlayHigh.png'), width: 1, height: 297};
+  },
+  get gradientOverlayLow() {
+    return {uri: require('./gradientOverlayLow.png'), width: 1, height: 297};
+  },
+  get gradientOverlayMedium() {
+    return {uri: require('./gradientOverlayMedium.png'), width: 1, height: 297};
+  },
+  get hintTipMiddle() {
+    return {uri: require('./hintTipMiddle.png'), width: 20, height: 7};
+  },
+  get hintTipSide() {
+    return {uri: require('./hintTipSide.png'), width: 20, height: 24};
+  },
+  get transparentSwatch() {
+    return {uri: require('./transparentSwatch.png'), width: 100, height: 100};
+  }
+};

package/src/assets/internal/index.d.ts

@@ -0,0 +1,4 @@
+export declare const internal: {
+    readonly icons: any;
+    readonly images: any;
+};

package/src/assets/internal/index.js

@@ -0,0 +1,8 @@
+export const internal = {
+  get icons() {
+    return require("./icons").icons;
+  },
+  get images() {
+    return require("./images").images;
+  }
+};

package/src/commons/Constants.d.ts

@@ -47,6 +47,7 @@ declare const constants: {
     };
     backspaceKey: string;
     enterKey: string;
+    getFontScale: () => number;
 };
 export default constants;
 export declare const _reset: () => void;

package/src/commons/Constants.js

@@ -1,4 +1,4 @@
-import { Platform, Dimensions, NativeModules, I18nManager, AccessibilityInfo, StatusBar } from 'react-native';
+import { Platform, Dimensions, NativeModules, I18nManager, AccessibilityInfo, StatusBar, PixelRatio } from 'react-native';
 export let orientations = /*#__PURE__*/function (orientations) {
   orientations["PORTRAIT"] = "portrait";
   orientations["LANDSCAPE"] = "landscape";
@@ -166,7 +166,9 @@ const constants = {
   },
   /* Keyboard */
   backspaceKey: 'Backspace',
-  enterKey: 'Enter'
+  enterKey: 'Enter',
+  /* Font scale */
+  getFontScale: PixelRatio.getFontScale
 };
 setStatusBarHeight();
 Dimensions.addEventListener('change', updateConstants);

package/src/components/KeyboardAwareScrollView/KeyboardAwareScrollView.api.json

@@ -0,0 +1,40 @@
+{
+  "name": "KeyboardAwareScrollView",
+  "category": "form",
+  "description": "A wrapper component which handles the ScrollView insets properly when the keyboard is shown and hides the content, scrolling content above the keybaord.",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/KeyboardAwareScrollViewScreen.js",
+  "props": [
+    {
+      "name": "getTextInputRefs",
+      "type": "function",
+      "description": "Function that returns an array of TextInput refs"
+    },
+    {
+      "name": "onScroll",
+      "type": "function",
+      "description": "Callback for scroll events"
+    },
+    {
+      "name": "startScrolledToBottom",
+      "type": "boolean",
+      "description": "Whether to start scrolled to bottom"
+    },
+    {
+      "name": "scrollToBottomOnKBShow",
+      "type": "boolean",
+      "description": "Whether to scroll to bottom when keyboard shows"
+    },
+    {
+      "name": "scrollToInputAdditionalOffset",
+      "type": "number",
+      "description": "Additional offset when scrolling to input"
+    }
+  ],
+  "snippet": [
+    "<KeyboardAwareScrollView>",
+    "  <View>",
+    "    <TextField placeholder=\"Input with scrolling\" />",
+    "  </View>",
+    "</KeyboardAwareScrollView>"
+  ]
+}

package/src/components/avatar/avatar.api.json

@@ -72,17 +72,100 @@
     {"name": "ribbonStyle", "type": "ViewStyle", "description": "Ribbon custom style"},
     {"name": "ribbonLabelStyle", "type": "TextStyle", "description": "Ribbon label custom style"},
     {"name": "customRibbon", "type": "JSX.Element", "description": "Custom ribbon"},
-    {"name": "isOnline", "type": "boolean", "description": "Determine if to show online badge"},
-    {
-      "name": "status",
-      "type": "StatusModes",
-      "description": "AWAY, ONLINE, OFFLINE or NONE mode (if set to a value other then 'NONE' will override isOnline prop)"
-    },
     {"name": "size", "type": " number", "description": "Custom size for the Avatar", "default": "50"},
     {"name": "onPress", "type": "(props: any) => void", "description": "Press handler"},
     {"name": "testID", "type": "string", "description": "Test identifier"}
   ],
   "snippet": [
-    "<Avatar source={{uri: 'https://lh3.googleusercontent.com/-cw77lUnOvmI/AAAAAAAAAAI/AAAAAAAAAAA/WMNck32dKbc/s181-c/104220521160525129167.jpg'$1}} label={IT$2}/>"
-  ]
+    "<View flex center row gap-s5>",
+    "<Avatar",
+    "  size={60$2}",
+    "  source={{uri: 'https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/avatar_1.jpg'}$3}",
+    "  badgeProps={{label: '2'}$4}",
+    "  badgePosition={'BOTTOM_RIGHT'}",
+    "  onPress={() => {}}",
+    "/>",
+    "<Avatar",
+    "  size={60}",
+    "  source={{uri: 'https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/avatar_1.jpg'}}",
+    "  ribbonLabel='NEW'",
+    "/>",
+    "</View>"
+  ],
+  "docs": {
+    "hero": {
+      "title": "Avatar",
+      "description": "An Avatar component is a visual representation of a user or entity, often displayed as a circular image, icon, or placeholder with initials. In mobile app design systems, it is used to personalize the interface by representing users in profiles, chats, notifications, or lists. Avatars help users quickly recognize people, accounts, or items, enhancing both engagement and navigational clarity.",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Avatar/avatar_hero.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "table",
+            "columns": ["Property", "Component"],
+            "items": [
+              {
+                "title": "Image",
+                "description": "",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Avatar/avatar_table01.png"
+                  }
+                ]
+              },
+              {
+                "title": "Initials",
+                "description": "",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Avatar/avatar_table04.png"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "table",
+            "columns": ["Property", "Component"],
+            "items": [
+              {
+                "title": "Badge (online indication)",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Avatar/avatarPlaceholder_overview_table.png"
+                  }
+                ]
+              },
+              {
+                "title": "Badge with icon",
+                "description": "Not supported in XXSmall and 3Xsmall.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Avatar/avatarPlaceholder_overview_table02.png"
+                  }
+                ]
+              },
+              {
+                "title": "Label",
+                "description": "Supported only in XLarge, Large and Medium.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Avatar/avatarPlaceholder_overview_table03.png"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }

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

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, AccessibilityProps } from 'react-native';
+import { StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, TextProps, AccessibilityProps } from 'react-native';
 import { BadgeProps } from '../badge';
 import { ImageProps } from '../image';
 import { AnimatedImageProps } from '../animatedImage';
@@ -95,6 +95,7 @@ export type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'> & Props
      * The label color
      */
     labelColor?: string;
+    labelEllipsizeMode?: TextProps['ellipsizeMode'];
     /**
      * ribbon label to display on the avatar
      */
@@ -162,21 +163,14 @@ 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;
@@ -230,6 +224,7 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "
      * The label color
      */
     labelColor?: string | undefined;
+    labelEllipsizeMode?: TextProps['ellipsizeMode'];
     /**
      * ribbon label to display on the avatar
      */
@@ -291,21 +286,14 @@ 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;
@@ -359,6 +347,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps,
      * The label color
      */
     labelColor?: string | undefined;
+    labelEllipsizeMode?: "middle" | "head" | "tail" | "clip" | undefined;
     /**
      * ribbon label to display on the avatar
      */

package/src/components/avatar/index.js

@@ -56,6 +56,7 @@ const Avatar = forwardRef((props, ref) => {
     useAutoColors,
     autoColorsConfig,
     containerStyle,
+    labelEllipsizeMode = 'clip',
     onPress,
     children
   } = themeProps;
@@ -178,7 +179,7 @@ const Avatar = forwardRef((props, ref) => {
   const Container = onPress ? TouchableOpacity : View;
   return <Container style={_containerStyle} ref={ref} testID={testID} onPress={onPress} accessible={!_isUndefined(onPress)} accessibilityLabel={'Avatar'} accessibilityRole={onPress ? 'button' : 'image'} hitSlop={onPress ? hitTargetPadding : undefined} {...accessibilityProps}>
       <View testID={`${testID}.container`} style={textContainerStyle}>
-        {!_isUndefined(text) && <Text numberOfLines={1} style={textStyle} testID={`${testID}.label`}>
+        {!_isUndefined(text) && <Text numberOfLines={1} ellipsizeMode={labelEllipsizeMode} style={textStyle} testID={`${testID}.label`}>
             {text}
           </Text>}
       </View>
@@ -194,7 +195,8 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: BorderRadiuses.br100
+    borderRadius: BorderRadiuses.br100,
+    overflow: 'hidden'
   },
   initialsContainerWithInset: {
     top: 1,