diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx
index 769eaa80df4b..ca0ae859c3ad 100644
--- a/src/components/SelectionList/RadioListItem.tsx
+++ b/src/components/SelectionList/RadioListItem.tsx
@@ -1,7 +1,6 @@
import React from 'react';
import {View} from 'react-native';
-import Text from '@components/Text';
-import Tooltip from '@components/Tooltip';
+import TextWithTooltip from '@components/TextWithTooltip';
import useThemeStyles from '@hooks/useThemeStyles';
import type {RadioListItemProps} from './types';
@@ -10,30 +9,18 @@ function RadioListItem({item, showTooltip, textStyles, alternateTextStyles}: Rad
return (
-
-
- {item.text}
-
-
+ textStyles={textStyles}
+ />
{!!item.alternateText && (
-
-
- {item.alternateText}
-
-
+ textStyles={alternateTextStyles}
+ />
)}
);
diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx
index 3c973ad0bbea..11ef03bec33d 100644
--- a/src/components/SelectionList/UserListItem.tsx
+++ b/src/components/SelectionList/UserListItem.tsx
@@ -1,8 +1,7 @@
import React from 'react';
import {View} from 'react-native';
import SubscriptAvatar from '@components/SubscriptAvatar';
-import Text from '@components/Text';
-import Tooltip from '@components/Tooltip';
+import TextWithTooltip from '@components/TextWithTooltip';
import useThemeStyles from '@hooks/useThemeStyles';
import type {UserListItemProps} from './types';
@@ -18,29 +17,17 @@ function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style
/>
)}
-
-
- {item.text}
-
-
+ textStyles={[textStyles, style]}
+ />
{!!item.alternateText && (
-
-
- {item.alternateText}
-
-
+ textStyles={[alternateTextStyles, style]}
+ />
)}
{!!item.rightElement && item.rightElement}
diff --git a/src/components/TextWithTooltip/index.native.tsx b/src/components/TextWithTooltip/index.native.tsx
new file mode 100644
index 000000000000..f8013ae00e4c
--- /dev/null
+++ b/src/components/TextWithTooltip/index.native.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import Text from '@components/Text';
+import type TextWithTooltipProps from './types';
+
+function TextWithTooltip({text, textStyles}: TextWithTooltipProps) {
+ return (
+
+ {text}
+
+ );
+}
+
+TextWithTooltip.displayName = 'TextWithTooltip';
+
+export default TextWithTooltip;
diff --git a/src/components/TextWithTooltip/index.tsx b/src/components/TextWithTooltip/index.tsx
new file mode 100644
index 000000000000..fd202db8de64
--- /dev/null
+++ b/src/components/TextWithTooltip/index.tsx
@@ -0,0 +1,41 @@
+import React, {useState} from 'react';
+import Text from '@components/Text';
+import Tooltip from '@components/Tooltip';
+import type TextWithTooltipProps from './types';
+
+type LayoutChangeEvent = {
+ target: HTMLElement;
+};
+
+function TextWithTooltip({text, shouldShowTooltip, textStyles}: TextWithTooltipProps) {
+ const [showTooltip, setShowTooltip] = useState(false);
+
+ return (
+
+ {
+ const target = (e.nativeEvent as unknown as LayoutChangeEvent).target;
+ if (!shouldShowTooltip) {
+ return;
+ }
+ if (target.scrollWidth > target.offsetWidth) {
+ setShowTooltip(true);
+ return;
+ }
+ setShowTooltip(false);
+ }}
+ >
+ {text}
+
+
+ );
+}
+
+TextWithTooltip.displayName = 'TextWithTooltip';
+
+export default TextWithTooltip;
diff --git a/src/components/TextWithTooltip/types.ts b/src/components/TextWithTooltip/types.ts
new file mode 100644
index 000000000000..80517b0b2acf
--- /dev/null
+++ b/src/components/TextWithTooltip/types.ts
@@ -0,0 +1,9 @@
+import type {StyleProp, TextStyle} from 'react-native';
+
+type TextWithTooltipProps = {
+ text: string;
+ shouldShowTooltip: boolean;
+ textStyles?: StyleProp;
+};
+
+export default TextWithTooltipProps;