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}
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..266b506ce2
--- /dev/null
+++ b/packages/yoga/src/Result/native/Result/TextWithBadge/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,370 @@
+// 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"
+  >
+    <RNSVGSvgView
+      aria-hidden={true}
+      bbHeight={10.67}
+      bbWidth={10.67}
+      fill="#231B22"
+      focusable={false}
+      height={10.67}
+      style={
+        [
+          {
+            "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>
+`;
+
+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"
+  >
+    <RNSVGSvgView
+      aria-hidden={true}
+      bbHeight={10.67}
+      bbWidth={10.67}
+      fill="#231B22"
+      focusable={false}
+      height={10.67}
+      style={
+        [
+          {
+            "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>
+`;
+
+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..d968d35222
--- /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 { WellhubIcon } from '@gympass/yoga-icons';
+
+import { ThemeProvider } from '../../../../index';
+import TextWithBadge from '.';
+
+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();
+  });
+});
diff --git a/packages/yoga/src/Result/native/Result/TextWithBadge/index.tsx b/packages/yoga/src/Result/native/Result/TextWithBadge/index.tsx
new file mode 100644
index 0000000000..285320efec
--- /dev/null
+++ b/packages/yoga/src/Result/native/Result/TextWithBadge/index.tsx
@@ -0,0 +1,70 @@
+import React, { ReactNode, useCallback, useState } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+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,
+}: TextWithBadgeProps) => {
+  const [textSize, setTextSize] = useState<number>(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(
+    ({
+      nativeEvent: {
+        layout: { width },
+      },
+    }) => {
+      setTextSize(width);
+    },
+    [],
+  );
+
+  return (
+    <StyledBoxContainer containerWidth={containerWidth}>
+      <StyledText
+        onLayout={onTextLayout}
+        bold
+        numberOfLines={1}
+        textWidth={textWidth}
+      >
+        {title}
+      </StyledText>
+      <Badge
+        icon={badgeIcon}
+        fill="text.primary"
+        ml="xxxsmall"
+        bg="neon"
+        justifyContent="center"
+        alignItems="center"
+        borderRadius="circle"
+        w="small"
+        h="small"
+      />
+    </StyledBoxContainer>
+  );
+};
+
+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..34b852e693
--- /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: ({ nativeEvent: { layout } }) => 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};
+    `}
+`;
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 4cadaec5a9..2d06358ae1 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 } 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
@@ -23,48 +22,62 @@ 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}
-        />
+}) => {
+  const [avatarWidth, setAvatarWidth] = useState(0);
+
+  const onAvatarLayout = useCallback(
+    ({
+      nativeEvent: {
+        layout: { width },
+      },
+    }) => {
+      setAvatarWidth(width);
+    },
+    [],
+  );
+
+  return (
+    <StyledBox divided={divided} display="flex" flexDirection="row">
+      {Avatar && (
+        <>
+          {isValidElement(Avatar) ? (
+            React.cloneElement(Avatar, { onLayout: onAvatarLayout })
+          ) : (
+            <Avatar onLayout={onAvatarLayout} />
+          )}
+        </>
       )}
-      <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"
+      <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>
-);
+        {badgeIcon ? (
+          <TextWithBadge
+            avatarWidth={avatarWidth}
+            badgeIcon={badgeIcon}
+            title={title}
+          />
+        ) : (
+          <Box>
+            <Text.Body1 bold numberOfLines={1}>
+              {title}
+            </Text.Body1>
+          </Box>
+        )}
+        {subTitle && subTitle !== '' && (
+          <Text.Body2 numberOfLines={1} color="deep">
+            {subTitle}
+          </Text.Body2>
+        )}
+        {children}
+      </Content>
+    </StyledBox>
+  );
+};
 
 Result.propTypes = {
   /** The component Avatar */