Fix iOS multi-level tags text overlap in WorkspaceTagsPage

src/components/RenderHTML.tsx

@@ -1,6 +1,7 @@
 import React, {useMemo} from 'react';
 import {RenderHTMLConfigProvider, RenderHTMLSource} from 'react-native-render-html';
 import type {RenderersProps} from 'react-native-render-html';
+import useHasTextAncestor from '@hooks/useHasTextAncestor';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Parser from '@libs/Parser';
 
@@ -22,6 +23,11 @@ type RenderHTMLProps = {
 // context to RenderHTMLSource components. See https://git.io/JRcZb
 // The provider is available at src/components/HTMLEngineProvider/
 function RenderHTML({html: htmlParam, onLinkPress, isSelectable}: RenderHTMLProps) {
+    const hasTextAncestor = useHasTextAncestor();
+    if (__DEV__ && hasTextAncestor) {
+        throw new Error('RenderHTML must not be rendered inside a <Text> component, as it will break the layout on iOS. Render it as a sibling instead.');
+    }
+
     const {windowWidth} = useWindowDimensions();
     const html = useMemo(() => {
         return (

src/hooks/useHasTextAncestor.native.ts

@@ -0,0 +1,7 @@
+import {useContext} from 'react';
+// eslint-disable-next-line no-restricted-imports
+import {unstable_TextAncestorContext as TextAncestorContext} from 'react-native';
+
+export default function useHasTextAncestor(): boolean {
+    return useContext(TextAncestorContext);
+}

src/hooks/useHasTextAncestor.ts

@@ -0,0 +1,4 @@
+// TextAncestorContext is not available on web (react-native-web), so always return false.
+export default function useHasTextAncestor(): boolean {
+    return false;
+}

src/pages/workspace/tags/WorkspaceTagsPage.tsx

@@ -687,13 +687,14 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
                         shouldShow={!hasDependentTags && !hasIndependentTags}
                     />
                 ) : (
-                    <Text style={[styles.textNormal, styles.colorMuted]}>
-                        {!hasDependentTags && !hasIndependentTags && !!policyTagLists.at(0)?.name ? (
-                            <EmployeesSeeTagsAsText customTagName={policyTagLists.at(0)?.name ?? ''} />
-                        ) : (
-                            translate('workspace.tags.subtitle')
-                        )}
-
+                    <>
+                        <Text style={[styles.textNormal, styles.colorMuted]}>
+                            {!hasDependentTags && !hasIndependentTags && !!policyTagLists.at(0)?.name ? (
+                                <EmployeesSeeTagsAsText customTagName={policyTagLists.at(0)?.name ?? ''} />
+                            ) : (
+                                translate('workspace.tags.subtitle')
+                            )}
+                        </Text>
                         {hasDependentTags && (
                             <View style={[styles.renderHTML]}>
                                 <RenderHTML
@@ -706,7 +707,7 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
                                 />
                             </View>
                         )}
-                    </Text>
+                    </>
                 )}
             </View>
             {tagList.length > CONST.SEARCH_ITEM_LIMIT && (

tests/unit/RenderHTMLTest.tsx

@@ -0,0 +1,41 @@
+import {render} from '@testing-library/react-native';
+import React from 'react';
+import {View} from 'react-native';
+import RenderHTML from '@components/RenderHTML';
+
+jest.mock('@hooks/useWindowDimensions', () => () => ({windowWidth: 400}));
+jest.mock('react-native-render-html', () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-unsafe-assignment
+    const {View: MockView} = require('react-native');
+    return {
+        RenderHTMLConfigProvider: ({children}: {children: React.ReactNode}) => children,
+        RenderHTMLSource: () => <MockView />,
+    };
+});
+
+const mockUseHasTextAncestor = jest.fn(() => false);
+jest.mock('@hooks/useHasTextAncestor', () => () => mockUseHasTextAncestor());
+
+describe('RenderHTML', () => {
+    it('throws when rendered inside a Text ancestor', () => {
+        mockUseHasTextAncestor.mockReturnValue(true);
+        expect(() =>
+            render(
+                <View>
+                    <RenderHTML html="<p>test</p>" />
+                </View>,
+            ),
+        ).toThrow('RenderHTML must not be rendered inside a <Text> component');
+    });
+
+    it('does not throw when rendered outside a Text ancestor', () => {
+        mockUseHasTextAncestor.mockReturnValue(false);
+        expect(() =>
+            render(
+                <View>
+                    <RenderHTML html="<p>test</p>" />
+                </View>,
+            ),
+        ).not.toThrow();
+    });
+});