From 0d8362a03fa750a14991acd46cc7457ea6a5cc15 Mon Sep 17 00:00:00 2001
From: Felipe Rocha <felipe.rocha@gympass.com>
Date: Fri, 7 Jun 2024 08:26:30 -0300
Subject: [PATCH 01/11] feat(wip): result ellipsis onlayout test - remove this
 commit

---
 .../yoga/src/Result/native/Result/index.jsx   | 107 +++++++++++-------
 1 file changed, 66 insertions(+), 41 deletions(-)

diff --git a/packages/yoga/src/Result/native/Result/index.jsx b/packages/yoga/src/Result/native/Result/index.jsx
index 4cadaec5a9..e90bb5c2cf 100644
--- a/packages/yoga/src/Result/native/Result/index.jsx
+++ b/packages/yoga/src/Result/native/Result/index.jsx
@@ -1,4 +1,4 @@
-import React, { isValidElement } from 'react';
+import React, { isValidElement, useState } from 'react';
 
 import { arrayOf, string, shape, func, bool, node } from 'prop-types';
 
@@ -23,48 +23,73 @@ const Result = ({
   children,
   attendancesColor,
   badgeIcon,
-}) => (
-  <StyledBox divided={divided} display="flex" flexDirection="row">
-    {Avatar && <>{isValidElement(Avatar) ? Avatar : <Avatar />}</>}
-    <Content>
-      {!!attendances?.length && (
-        <Attendances
-          attendances={attendances}
-          rate={rate}
-          color={attendancesColor}
-        />
-      )}
-      <Box
-        flexDirection="row"
-        alignItems="center"
-        marginRight={badgeIcon ? 'small' : 'zero'}
-      >
-        <Text.Body1 numberOfLines={1} bold>
-          {title}
-        </Text.Body1>
-        {badgeIcon && (
-          <Badge
-            icon={badgeIcon}
-            fill="text.primary"
-            ml="xxxsmall"
-            bg="neon"
-            justifyContent="center"
-            alignItems="center"
-            borderRadius="circle"
-            w="small"
-            h="small"
+}) => {
+  const [textWidth, setTextWidth] = useState(0);
+
+  const onTextLayout = event => {
+    const { width } = event.nativeEvent.layout;
+
+    setTextWidth(width);
+  };
+
+  return (
+    <StyledBox divided={divided} display="flex" flexDirection="row">
+      {Avatar && <>{isValidElement(Avatar) ? Avatar : <Avatar />}</>}
+      <Content>
+        {!!attendances?.length && (
+          <Attendances
+            attendances={attendances}
+            rate={rate}
+            color={attendancesColor}
           />
         )}
-      </Box>
-      {subTitle && subTitle !== '' && (
-        <Text.Body2 numberOfLines={1} color="deep">
-          {subTitle}
-        </Text.Body2>
-      )}
-      {children}
-    </Content>
-  </StyledBox>
-);
+        <Box
+          flexDirection="row"
+          alignItems="center"
+          position="relative"
+          bg="yellow"
+        >
+          <Box flex={1}>
+            <Text.Body1
+              onLayout={onTextLayout}
+              numberOfLines={1}
+              bold
+              bg="cyan"
+            >
+              {/* Very very reallyveryveryveryveryeys long text text */}
+              {/* Veryaaaaaaffdfdf verysadddaaefesss reallyveryveryveryveryeysaaaa */}
+              {/* Medium text example */}
+              {/* Shortasasassdasas texttextreallyshortaf right here ellipsis */}
+              Short Text
+              {/* Academi a hahahah acomaaaan omegrandea sasadeverdade */}
+            </Text.Body1>
+          </Box>
+          {true && (
+            <Badge
+              left={textWidth - 24}
+              icon={badgeIcon}
+              fill="text.primary"
+              ml="xxxsmall"
+              bg="neon"
+              justifyContent="center"
+              alignItems="center"
+              borderRadius="circle"
+              w="small"
+              h="small"
+              position="absolute"
+            />
+          )}
+        </Box>
+        {subTitle && subTitle !== '' && (
+          <Text.Body2 numberOfLines={1} color="deep">
+            {subTitle}
+          </Text.Body2>
+        )}
+        {children}
+      </Content>
+    </StyledBox>
+  );
+};
 
 Result.propTypes = {
   /** The component Avatar */

From b27faeaa9662b39fd8ddf347728fe69476c71bb2 Mon Sep 17 00:00:00 2001
From: Felipe Rocha <felipe.rocha@gympass.com>
Date: Mon, 10 Jun 2024 18:19:16 -0300
Subject: [PATCH 02/11] refactor: onlayout explicit declaration prop

---
 packages/yoga/src/Avatar/native/Avatar.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/yoga/src/Avatar/native/Avatar.jsx b/packages/yoga/src/Avatar/native/Avatar.jsx
index e2a186a76e..f0d0653fd9 100644
--- a/packages/yoga/src/Avatar/native/Avatar.jsx
+++ b/packages/yoga/src/Avatar/native/Avatar.jsx
@@ -50,6 +50,7 @@ const Avatar = forwardRef(
       borderRadius,
       width,
       height,
+      onLayout,
       ...props
     },
     ref,
@@ -63,6 +64,7 @@ const Avatar = forwardRef(
         justifyContent="center"
         width={width}
         height={height}
+        onLayout={onLayout}
         overflow="hidden"
         borderRadius={borderRadius}
         {...props}

From 487b2f0d860681a0190623ed4757f77e5b7c1ddd Mon Sep 17 00:00:00 2001
From: Felipe Rocha <felipe.rocha@gympass.com>
Date: Mon, 10 Jun 2024 18:19:58 -0300
Subject: [PATCH 03/11] feat: add new texwithbadge result component

---
 .../Result/native/Result/TextWithBadge.jsx    | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 packages/yoga/src/Result/native/Result/TextWithBadge.jsx

diff --git a/packages/yoga/src/Result/native/Result/TextWithBadge.jsx b/packages/yoga/src/Result/native/Result/TextWithBadge.jsx
new file mode 100644
index 0000000000..16d621cbe9
--- /dev/null
+++ b/packages/yoga/src/Result/native/Result/TextWithBadge.jsx
@@ -0,0 +1,74 @@
+import React, { useCallback, useState } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { string, number, node } from 'prop-types';
+
+import Text from '../../../Text';
+import Box from '../../../Box';
+import Badge from '../Badge';
+
+const SCREEN_PADDINGS = 20;
+const CONTENT_MARGINS = 20;
+const AVATAR_CONTENT_MARGINS = 16;
+const BADGE_LIMIT = 20;
+
+const TextWithBadge = ({ avatarWidth, badgeIcon, title }) => {
+  const [textSize, setTextSize] = useState(0);
+  const { width: windowWidth } = useWindowDimensions();
+
+  const textMaxSize =
+    windowWidth -
+    (SCREEN_PADDINGS + CONTENT_MARGINS + AVATAR_CONTENT_MARGINS + avatarWidth);
+  const shouldTruncate = textSize >= textMaxSize - BADGE_LIMIT;
+  const containerWidth = shouldTruncate ? null : textSize;
+  const textWidth = shouldTruncate ? '100%' : null;
+
+  const onTextLayout = useCallback(event => {
+    const { width } = event.nativeEvent.layout;
+
+    setTextSize(width);
+  }, []);
+
+  return (
+    <Box
+      flexDirection="row"
+      alignItems="center"
+      justifyContent="flex-end"
+      position="relative"
+      width={containerWidth}
+    >
+      <Text.Body1
+        onLayout={onTextLayout}
+        bold
+        position="absolute"
+        left={0}
+        numberOfLines={1}
+        paddingRight="medium"
+        flex={1}
+        width={textWidth}
+      >
+        {title}
+      </Text.Body1>
+      <Badge
+        icon={badgeIcon}
+        fill="text.primary"
+        ml="xxxsmall"
+        bg="neon"
+        justifyContent="center"
+        alignItems="center"
+        borderRadius="circle"
+        w="small"
+        h="small"
+      />
+    </Box>
+  );
+};
+
+TextWithBadge.propTypes = {
+  avatarWidth: number.isRequired,
+  badgeIcon: node.isRequired,
+  title: string.isRequired,
+};
+
+TextWithBadge.defaultProps = {};
+
+export default TextWithBadge;

From f84b58550a0120a27a05f5b14795566304e64bb4 Mon Sep 17 00:00:00 2001
From: Felipe Rocha <felipe.rocha@gympass.com>
Date: Mon, 10 Jun 2024 18:20:39 -0300
Subject: [PATCH 04/11] feat: integrate new textwithbadge component on result

---
 .../Result/__snapshots__/index.test.jsx.snap  | 30 ++------
 .../yoga/src/Result/native/Result/index.jsx   | 69 +++++++------------
 2 files changed, 32 insertions(+), 67 deletions(-)

diff --git a/packages/yoga/src/Result/native/Result/__snapshots__/index.test.jsx.snap b/packages/yoga/src/Result/native/Result/__snapshots__/index.test.jsx.snap
index 7802f9cb15..ce7ef18058 100644
--- a/packages/yoga/src/Result/native/Result/__snapshots__/index.test.jsx.snap
+++ b/packages/yoga/src/Result/native/Result/__snapshots__/index.test.jsx.snap
@@ -24,6 +24,7 @@ exports[`<Result /> should match snapshot 1`] = `
     display="flex"
     height={48}
     justifyContent="center"
+    onLayout={[Function]}
     overflow="hidden"
     style={
       [
@@ -533,16 +534,9 @@ exports[`<Result /> should match snapshot 1`] = `
       </View>
     </View>
     <View
-      alignItems="center"
-      flexDirection="row"
-      marginRight="zero"
       style={
         [
-          {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "marginRight": 0,
-          },
+          {},
         ]
       }
     >
@@ -1056,6 +1050,7 @@ exports[`<Result /> should match snapshot without attendence 1`] = `
     display="flex"
     height={48}
     justifyContent="center"
+    onLayout={[Function]}
     overflow="hidden"
     style={
       [
@@ -1184,16 +1179,9 @@ exports[`<Result /> should match snapshot without attendence 1`] = `
     }
   >
     <View
-      alignItems="center"
-      flexDirection="row"
-      marginRight="zero"
       style={
         [
-          {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "marginRight": 0,
-          },
+          {},
         ]
       }
     >
@@ -1573,6 +1561,7 @@ exports[`<Result /> should match snapshot without limitLabel prop 1`] = `
     display="flex"
     height={48}
     justifyContent="center"
+    onLayout={[Function]}
     overflow="hidden"
     style={
       [
@@ -2082,16 +2071,9 @@ exports[`<Result /> should match snapshot without limitLabel prop 1`] = `
       </View>
     </View>
     <View
-      alignItems="center"
-      flexDirection="row"
-      marginRight="zero"
       style={
         [
-          {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "marginRight": 0,
-          },
+          {},
         ]
       }
     >
diff --git a/packages/yoga/src/Result/native/Result/index.jsx b/packages/yoga/src/Result/native/Result/index.jsx
index e90bb5c2cf..9b45f14270 100644
--- a/packages/yoga/src/Result/native/Result/index.jsx
+++ b/packages/yoga/src/Result/native/Result/index.jsx
@@ -1,13 +1,12 @@
-import React, { isValidElement, useState } from 'react';
-
+import React, { isValidElement, useCallback, useState } from 'react';
 import { arrayOf, string, shape, func, bool, node } from 'prop-types';
 
 import Text from '../../../Text';
 import Box from '../../../Box';
 import Attendances from '../Attendances';
-import Badge from '../Badge';
 
 import { Content, StyledBox } from './styles';
+import TextWithBadge from './TextWithBadge';
 
 /**
  * The Result component is used when you have a list to show. It is applied to
@@ -24,17 +23,25 @@ const Result = ({
   attendancesColor,
   badgeIcon,
 }) => {
-  const [textWidth, setTextWidth] = useState(0);
+  const [avatarWidth, setAvatarWidth] = useState(0);
 
-  const onTextLayout = event => {
+  const onAvatarLayout = useCallback(event => {
     const { width } = event.nativeEvent.layout;
 
-    setTextWidth(width);
-  };
+    setAvatarWidth(width);
+  }, []);
 
   return (
     <StyledBox divided={divided} display="flex" flexDirection="row">
-      {Avatar && <>{isValidElement(Avatar) ? Avatar : <Avatar />}</>}
+      {Avatar && (
+        <>
+          {isValidElement(Avatar) ? (
+            React.cloneElement(Avatar, { onLayout: onAvatarLayout })
+          ) : (
+            <Avatar onLayout={onAvatarLayout} />
+          )}
+        </>
+      )}
       <Content>
         {!!attendances?.length && (
           <Attendances
@@ -43,43 +50,19 @@ const Result = ({
             color={attendancesColor}
           />
         )}
-        <Box
-          flexDirection="row"
-          alignItems="center"
-          position="relative"
-          bg="yellow"
-        >
-          <Box flex={1}>
-            <Text.Body1
-              onLayout={onTextLayout}
-              numberOfLines={1}
-              bold
-              bg="cyan"
-            >
-              {/* Very very reallyveryveryveryveryeys long text text */}
-              {/* Veryaaaaaaffdfdf verysadddaaefesss reallyveryveryveryveryeysaaaa */}
-              {/* Medium text example */}
-              {/* Shortasasassdasas texttextreallyshortaf right here ellipsis */}
-              Short Text
-              {/* Academi a hahahah acomaaaan omegrandea sasadeverdade */}
+        {badgeIcon ? (
+          <TextWithBadge
+            avatarWidth={avatarWidth}
+            badgeIcon={badgeIcon}
+            title={title}
+          />
+        ) : (
+          <Box>
+            <Text.Body1 bold numberOfLines={1}>
+              {title}
             </Text.Body1>
           </Box>
-          {true && (
-            <Badge
-              left={textWidth - 24}
-              icon={badgeIcon}
-              fill="text.primary"
-              ml="xxxsmall"
-              bg="neon"
-              justifyContent="center"
-              alignItems="center"
-              borderRadius="circle"
-              w="small"
-              h="small"
-              position="absolute"
-            />
-          )}
-        </Box>
+        )}
         {subTitle && subTitle !== '' && (
           <Text.Body2 numberOfLines={1} color="deep">
             {subTitle}

From e860a0615cd632ea59c8a53df34b716dcc610c57 Mon Sep 17 00:00:00 2001
From: Felipe Rocha <felipe.rocha@gympass.com>
Date: Tue, 11 Jun 2024 18:25:20 -0300
Subject: [PATCH 05/11] refactor: update textwithbadge to ts file

---
 .../index.tsx}                                | 51 ++++++++-----------
 .../native/Result/TextWithBadge/styles.ts     | 42 +++++++++++++++
 2 files changed, 63 insertions(+), 30 deletions(-)
 rename packages/yoga/src/Result/native/Result/{TextWithBadge.jsx => TextWithBadge/index.tsx} (56%)
 create mode 100644 packages/yoga/src/Result/native/Result/TextWithBadge/styles.ts

diff --git a/packages/yoga/src/Result/native/Result/TextWithBadge.jsx b/packages/yoga/src/Result/native/Result/TextWithBadge/index.tsx
similarity index 56%
rename from packages/yoga/src/Result/native/Result/TextWithBadge.jsx
rename to packages/yoga/src/Result/native/Result/TextWithBadge/index.tsx
index 16d621cbe9..6961973935 100644
--- a/packages/yoga/src/Result/native/Result/TextWithBadge.jsx
+++ b/packages/yoga/src/Result/native/Result/TextWithBadge/index.tsx
@@ -1,18 +1,27 @@
-import React, { useCallback, useState } from 'react';
+import React, { ReactNode, useCallback, useState } from 'react';
 import { useWindowDimensions } from 'react-native';
-import { string, number, node } from 'prop-types';
 
-import Text from '../../../Text';
-import Box from '../../../Box';
-import Badge from '../Badge';
+import Badge from '../../Badge';
+
+import { StyledBoxContainer, StyledText } from './styles';
+
+interface TextWithBadgeProps {
+  avatarWidth: number;
+  badgeIcon: ReactNode;
+  title: string;
+}
 
 const SCREEN_PADDINGS = 20;
 const CONTENT_MARGINS = 20;
 const AVATAR_CONTENT_MARGINS = 16;
 const BADGE_LIMIT = 20;
 
-const TextWithBadge = ({ avatarWidth, badgeIcon, title }) => {
-  const [textSize, setTextSize] = useState(0);
+const TextWithBadge = ({
+  avatarWidth,
+  badgeIcon,
+  title,
+}: TextWithBadgeProps) => {
+  const [textSize, setTextSize] = useState<number>(0);
   const { width: windowWidth } = useWindowDimensions();
 
   const textMaxSize =
@@ -29,25 +38,15 @@ const TextWithBadge = ({ avatarWidth, badgeIcon, title }) => {
   }, []);
 
   return (
-    <Box
-      flexDirection="row"
-      alignItems="center"
-      justifyContent="flex-end"
-      position="relative"
-      width={containerWidth}
-    >
-      <Text.Body1
+    <StyledBoxContainer containerWidth={containerWidth}>
+      <StyledText
         onLayout={onTextLayout}
         bold
-        position="absolute"
-        left={0}
         numberOfLines={1}
-        paddingRight="medium"
-        flex={1}
-        width={textWidth}
+        textWidth={textWidth}
       >
         {title}
-      </Text.Body1>
+      </StyledText>
       <Badge
         icon={badgeIcon}
         fill="text.primary"
@@ -59,16 +58,8 @@ const TextWithBadge = ({ avatarWidth, badgeIcon, title }) => {
         w="small"
         h="small"
       />
-    </Box>
+    </StyledBoxContainer>
   );
 };
 
-TextWithBadge.propTypes = {
-  avatarWidth: number.isRequired,
-  badgeIcon: node.isRequired,
-  title: string.isRequired,
-};
-
-TextWithBadge.defaultProps = {};
-
 export default TextWithBadge;
diff --git a/packages/yoga/src/Result/native/Result/TextWithBadge/styles.ts b/packages/yoga/src/Result/native/Result/TextWithBadge/styles.ts
new file mode 100644
index 0000000000..365b60da71
--- /dev/null
+++ b/packages/yoga/src/Result/native/Result/TextWithBadge/styles.ts
@@ -0,0 +1,42 @@
+import React, { ReactNode } from 'react';
+import styled, { css } from 'styled-components';
+import Text from '../../../../Text';
+import Box from '../../../../Box';
+
+export const StyledBoxContainer = styled(Box)<{
+  containerWidth?: number | null;
+  children: ReactNode;
+}>`
+  ${({ containerWidth }) =>
+    css`
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-end;
+      position: relative;
+      width: ${containerWidth}px;
+    `}
+`;
+
+export const StyledText = styled(Text.Body1)<{
+  onLayout: (event: any) => void;
+  textWidth?: string | null;
+  numberOfLines: number;
+  bold: boolean;
+  children: React.ReactNode;
+}>`
+  ${({
+    textWidth,
+    theme: {
+      yoga: {
+        spacing: { medium },
+      },
+    },
+  }) =>
+    css`
+      position: absolute;
+      left: 0;
+      padding-right: ${medium};
+      flex: 1;
+      width: ${textWidth};
+    `}
+`;

From 69c00a7b5349a36b2572c51103f06d57763957cf Mon Sep 17 00:00:00 2001
From: Felipe Rocha <felipe.rocha@gympass.com>
Date: Tue, 11 Jun 2024 18:25:41 -0300
Subject: [PATCH 06/11] chore: add textwithbadge tests

---
 .../__snapshots__/index.test.tsx.snap         | 244 ++++++++++++++++++
 .../Result/TextWithBadge/index.test.tsx       |  50 ++++
 2 files changed, 294 insertions(+)
 create mode 100644 packages/yoga/src/Result/native/Result/TextWithBadge/__snapshots__/index.test.tsx.snap
 create mode 100644 packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx

diff --git a/packages/yoga/src/Result/native/Result/TextWithBadge/__snapshots__/index.test.tsx.snap b/packages/yoga/src/Result/native/Result/TextWithBadge/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000..742f876ce1
--- /dev/null
+++ b/packages/yoga/src/Result/native/Result/TextWithBadge/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,244 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextWithBadge should match snapshot 1`] = `
+<View
+  containerWidth={0}
+  style={
+    [
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "flex-end",
+        "position": "relative",
+        "width": 0,
+      },
+    ]
+  }
+>
+  <Text
+    bold={true}
+    numberOfLines={1}
+    onLayout={[Function]}
+    style={
+      [
+        {
+          "color": "#231B22",
+          "flexBasis": 0,
+          "flexGrow": 1,
+          "flexShrink": 1,
+          "fontFamily": "Rubik",
+          "fontSize": 16,
+          "fontWeight": "500",
+          "left": 0,
+          "lineHeight": 24,
+          "paddingRight": 20,
+          "position": "absolute",
+          "width": "",
+        },
+      ]
+    }
+    textWidth={null}
+  >
+    Text with badge
+  </Text>
+  <View
+    alignItems="center"
+    bg="neon"
+    borderRadius="circle"
+    h="small"
+    justifyContent="center"
+    ml="xxxsmall"
+    style={
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#DCFF79",
+          "borderRadius": 9999,
+          "height": 16,
+          "justifyContent": "center",
+          "marginLeft": 4,
+          "width": 16,
+        },
+      ]
+    }
+    w="small"
+  >
+    <View
+      aria-hidden={true}
+      fill="#231B22"
+      height={10.67}
+      style={
+        [
+          {
+            "height": 10.67,
+            "width": 10.67,
+          },
+        ]
+      }
+      width={10.67}
+    />
+  </View>
+</View>
+`;
+
+exports[`TextWithBadge should match snapshot with long title 1`] = `
+<View
+  containerWidth={0}
+  style={
+    [
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "flex-end",
+        "position": "relative",
+        "width": 0,
+      },
+    ]
+  }
+>
+  <Text
+    bold={true}
+    numberOfLines={1}
+    onLayout={[Function]}
+    style={
+      [
+        {
+          "color": "#231B22",
+          "flexBasis": 0,
+          "flexGrow": 1,
+          "flexShrink": 1,
+          "fontFamily": "Rubik",
+          "fontSize": 16,
+          "fontWeight": "500",
+          "left": 0,
+          "lineHeight": 24,
+          "paddingRight": 20,
+          "position": "absolute",
+          "width": "",
+        },
+      ]
+    }
+    textWidth={null}
+  >
+    This is an example of a very long title that should be truncated
+  </Text>
+  <View
+    alignItems="center"
+    bg="neon"
+    borderRadius="circle"
+    h="small"
+    justifyContent="center"
+    ml="xxxsmall"
+    style={
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#DCFF79",
+          "borderRadius": 9999,
+          "height": 16,
+          "justifyContent": "center",
+          "marginLeft": 4,
+          "width": 16,
+        },
+      ]
+    }
+    w="small"
+  >
+    <View
+      aria-hidden={true}
+      fill="#231B22"
+      height={10.67}
+      style={
+        [
+          {
+            "height": 10.67,
+            "width": 10.67,
+          },
+        ]
+      }
+      width={10.67}
+    />
+  </View>
+</View>
+`;
+
+exports[`TextWithBadge should match snapshot without badgeIcon 1`] = `
+<View
+  containerWidth={0}
+  style={
+    [
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "flex-end",
+        "position": "relative",
+        "width": 0,
+      },
+    ]
+  }
+>
+  <Text
+    bold={true}
+    numberOfLines={1}
+    onLayout={[Function]}
+    style={
+      [
+        {
+          "color": "#231B22",
+          "flexBasis": 0,
+          "flexGrow": 1,
+          "flexShrink": 1,
+          "fontFamily": "Rubik",
+          "fontSize": 16,
+          "fontWeight": "500",
+          "left": 0,
+          "lineHeight": 24,
+          "paddingRight": 20,
+          "position": "absolute",
+          "width": "",
+        },
+      ]
+    }
+    textWidth={null}
+  >
+    Title without Badge
+  </Text>
+  <View
+    alignItems="center"
+    bg="neon"
+    borderRadius="circle"
+    h="small"
+    justifyContent="center"
+    ml="xxxsmall"
+    style={
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#DCFF79",
+          "borderRadius": 9999,
+          "height": 16,
+          "justifyContent": "center",
+          "marginLeft": 4,
+          "width": 16,
+        },
+      ]
+    }
+    w="small"
+  >
+    <View
+      aria-hidden={true}
+      fill="#231B22"
+      height={10.67}
+      style={
+        [
+          {
+            "height": 10.67,
+            "width": 10.67,
+          },
+        ]
+      }
+      width={10.67}
+    />
+  </View>
+</View>
+`;
diff --git a/packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx b/packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx
new file mode 100644
index 0000000000..c5b61aafcc
--- /dev/null
+++ b/packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider } from '../../../../index';
+import TextWithBadge from '.';
+
+import { WellhubIcon } from '../../../../../../icons/src/svg/icon_wellhub.svg';
+
+describe('TextWithBadge', () => {
+  it('should match snapshot', () => {
+    const { toJSON } = render(
+      <ThemeProvider>
+        <TextWithBadge
+          avatarWidth={50}
+          badgeIcon={WellhubIcon}
+          title="Text with badge"
+        />
+      </ThemeProvider>,
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with long title', () => {
+    const { toJSON } = render(
+      <ThemeProvider>
+        <TextWithBadge
+          avatarWidth={50}
+          badgeIcon={WellhubIcon}
+          title="This is an example of a very long title that should be truncated"
+        />
+      </ThemeProvider>,
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot without badgeIcon', () => {
+    const { toJSON } = render(
+      <ThemeProvider>
+        <TextWithBadge
+          avatarWidth={50}
+          badgeIcon={null}
+          title="Title without Badge"
+        />
+      </ThemeProvider>,
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

From 7a76e72db7dcd738fcbf0448e947afbe52200b36 Mon Sep 17 00:00:00 2001
From: Felipe Rocha <felipe.rocha@gympass.com>
Date: Tue, 11 Jun 2024 18:32:05 -0300
Subject: [PATCH 07/11] fix: fix codacy test import suggestion

---
 .../yoga/src/Result/native/Result/TextWithBadge/index.test.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx b/packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx
index c5b61aafcc..6eef8bbd7c 100644
--- a/packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx
+++ b/packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react-native';
 import { ThemeProvider } from '../../../../index';
 import TextWithBadge from '.';
 
-import { WellhubIcon } from '../../../../../../icons/src/svg/icon_wellhub.svg';
+import { WellhubIcon } from '@gympass/yoga-icons/src/svg/icon_wellhub.svg';
 
 describe('TextWithBadge', () => {
   it('should match snapshot', () => {

From d79e76a7debd53cc2d5fdf7fa31a89bf22712ead Mon Sep 17 00:00:00 2001
From: Felipe Rocha <felipe.rocha@gympass.com>
Date: Tue, 11 Jun 2024 18:37:08 -0300
Subject: [PATCH 08/11] fix: apply codacy import order suggestion

---
 .../src/Result/native/Result/TextWithBadge/index.test.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx b/packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx
index 6eef8bbd7c..de2ce56309 100644
--- a/packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx
+++ b/packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
+import { WellhubIcon } from '@gympass/yoga-icons/src/svg/icon_wellhub.svg';
+
 import { ThemeProvider } from '../../../../index';
 import TextWithBadge from '.';
 
-import { WellhubIcon } from '@gympass/yoga-icons/src/svg/icon_wellhub.svg';
-
 describe('TextWithBadge', () => {
   it('should match snapshot', () => {
     const { toJSON } = render(

From 845591691f2a63f36aa7f27e9bcf0ba8be54e440 Mon Sep 17 00:00:00 2001
From: Felipe Rocha <felipe.rocha@gympass.com>
Date: Wed, 12 Jun 2024 12:12:32 -0300
Subject: [PATCH 09/11] fix: fix unusual dependency import

---
 .../__snapshots__/index.test.tsx.snap         | 142 +++++++++++++++++-
 .../Result/TextWithBadge/index.test.tsx       |   2 +-
 2 files changed, 135 insertions(+), 9 deletions(-)

diff --git a/packages/yoga/src/Result/native/Result/TextWithBadge/__snapshots__/index.test.tsx.snap b/packages/yoga/src/Result/native/Result/TextWithBadge/__snapshots__/index.test.tsx.snap
index 742f876ce1..266b506ce2 100644
--- a/packages/yoga/src/Result/native/Result/TextWithBadge/__snapshots__/index.test.tsx.snap
+++ b/packages/yoga/src/Result/native/Result/TextWithBadge/__snapshots__/index.test.tsx.snap
@@ -63,20 +63,83 @@ exports[`TextWithBadge should match snapshot 1`] = `
     }
     w="small"
   >
-    <View
+    <RNSVGSvgView
       aria-hidden={true}
+      bbHeight={10.67}
+      bbWidth={10.67}
       fill="#231B22"
+      focusable={false}
       height={10.67}
       style={
         [
           {
-            "height": 10.67,
-            "width": 10.67,
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          [
+            {
+              "height": 10.67,
+              "width": 10.67,
+            },
+          ],
+          {
+            "opacity": 1,
+          },
+          {
+            "flex": 0,
+            "height": 10,
+            "width": 10,
           },
         ]
       }
       width={10.67}
-    />
+    >
+      <RNSVGGroup
+        fill={
+          [
+            0,
+            4280490786,
+          ]
+        }
+        fillOpacity={1}
+        fillRule={1}
+        font={{}}
+        matrix={
+          [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ]
+        }
+        opacity={1}
+        originX={0}
+        originY={0}
+        propList={
+          [
+            "fill",
+          ]
+        }
+        rotation={0}
+        scaleX={1}
+        scaleY={1}
+        skewX={0}
+        skewY={0}
+        stroke={null}
+        strokeDasharray={null}
+        strokeDashoffset={null}
+        strokeLinecap={0}
+        strokeLinejoin={0}
+        strokeMiterlimit={4}
+        strokeOpacity={1}
+        strokeWidth={1}
+        vectorEffect={0}
+        x={0}
+        y={0}
+      />
+    </RNSVGSvgView>
   </View>
 </View>
 `;
@@ -144,20 +207,83 @@ exports[`TextWithBadge should match snapshot with long title 1`] = `
     }
     w="small"
   >
-    <View
+    <RNSVGSvgView
       aria-hidden={true}
+      bbHeight={10.67}
+      bbWidth={10.67}
       fill="#231B22"
+      focusable={false}
       height={10.67}
       style={
         [
           {
-            "height": 10.67,
-            "width": 10.67,
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          [
+            {
+              "height": 10.67,
+              "width": 10.67,
+            },
+          ],
+          {
+            "opacity": 1,
+          },
+          {
+            "flex": 0,
+            "height": 10,
+            "width": 10,
           },
         ]
       }
       width={10.67}
-    />
+    >
+      <RNSVGGroup
+        fill={
+          [
+            0,
+            4280490786,
+          ]
+        }
+        fillOpacity={1}
+        fillRule={1}
+        font={{}}
+        matrix={
+          [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ]
+        }
+        opacity={1}
+        originX={0}
+        originY={0}
+        propList={
+          [
+            "fill",
+          ]
+        }
+        rotation={0}
+        scaleX={1}
+        scaleY={1}
+        skewX={0}
+        skewY={0}
+        stroke={null}
+        strokeDasharray={null}
+        strokeDashoffset={null}
+        strokeLinecap={0}
+        strokeLinejoin={0}
+        strokeMiterlimit={4}
+        strokeOpacity={1}
+        strokeWidth={1}
+        vectorEffect={0}
+        x={0}
+        y={0}
+      />
+    </RNSVGSvgView>
   </View>
 </View>
 `;
diff --git a/packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx b/packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx
index de2ce56309..d968d35222 100644
--- a/packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx
+++ b/packages/yoga/src/Result/native/Result/TextWithBadge/index.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
-import { WellhubIcon } from '@gympass/yoga-icons/src/svg/icon_wellhub.svg';
+import { WellhubIcon } from '@gympass/yoga-icons';
 
 import { ThemeProvider } from '../../../../index';
 import TextWithBadge from '.';

From a3f1a9589b68bd7c0251906198492b3d2782cb07 Mon Sep 17 00:00:00 2001
From: Felipe Rocha <felipe.rocha@gympass.com>
Date: Thu, 13 Jun 2024 14:35:03 -0300
Subject: [PATCH 10/11] fix: fix useless onlayout any typing

---
 .../Result/native/Result/TextWithBadge/styles.ts  |  2 +-
 packages/yoga/src/Result/native/Result/index.jsx  | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/yoga/src/Result/native/Result/TextWithBadge/styles.ts b/packages/yoga/src/Result/native/Result/TextWithBadge/styles.ts
index 365b60da71..34b852e693 100644
--- a/packages/yoga/src/Result/native/Result/TextWithBadge/styles.ts
+++ b/packages/yoga/src/Result/native/Result/TextWithBadge/styles.ts
@@ -18,7 +18,7 @@ export const StyledBoxContainer = styled(Box)<{
 `;
 
 export const StyledText = styled(Text.Body1)<{
-  onLayout: (event: any) => void;
+  onLayout: ({ nativeEvent: { layout } }) => void;
   textWidth?: string | null;
   numberOfLines: number;
   bold: boolean;
diff --git a/packages/yoga/src/Result/native/Result/index.jsx b/packages/yoga/src/Result/native/Result/index.jsx
index 9b45f14270..2d06358ae1 100644
--- a/packages/yoga/src/Result/native/Result/index.jsx
+++ b/packages/yoga/src/Result/native/Result/index.jsx
@@ -25,11 +25,16 @@ const Result = ({
 }) => {
   const [avatarWidth, setAvatarWidth] = useState(0);
 
-  const onAvatarLayout = useCallback(event => {
-    const { width } = event.nativeEvent.layout;
-
-    setAvatarWidth(width);
-  }, []);
+  const onAvatarLayout = useCallback(
+    ({
+      nativeEvent: {
+        layout: { width },
+      },
+    }) => {
+      setAvatarWidth(width);
+    },
+    [],
+  );
 
   return (
     <StyledBox divided={divided} display="flex" flexDirection="row">

From aed4b6d56109481f7d5db17d12104d1b3653b556 Mon Sep 17 00:00:00 2001
From: Felipe Rocha <felipe.rocha@gympass.com>
Date: Thu, 13 Jun 2024 14:44:36 -0300
Subject: [PATCH 11/11] fix: fix useless onlayout any typing on textwithbadge
 component

---
 .../Result/native/Result/TextWithBadge/index.tsx  | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/yoga/src/Result/native/Result/TextWithBadge/index.tsx b/packages/yoga/src/Result/native/Result/TextWithBadge/index.tsx
index 6961973935..285320efec 100644
--- a/packages/yoga/src/Result/native/Result/TextWithBadge/index.tsx
+++ b/packages/yoga/src/Result/native/Result/TextWithBadge/index.tsx
@@ -31,11 +31,16 @@ const TextWithBadge = ({
   const containerWidth = shouldTruncate ? null : textSize;
   const textWidth = shouldTruncate ? '100%' : null;
 
-  const onTextLayout = useCallback(event => {
-    const { width } = event.nativeEvent.layout;
-
-    setTextSize(width);
-  }, []);
+  const onTextLayout = useCallback(
+    ({
+      nativeEvent: {
+        layout: { width },
+      },
+    }) => {
+      setTextSize(width);
+    },
+    [],
+  );
 
   return (
     <StyledBoxContainer containerWidth={containerWidth}>