Merge pull request Expensify#81738 from MobileMage/fix/81022-ios-tags-text-overlap

Fix iOS multi-level tags text overlap in WorkspaceTagsPage

Author: tylerkaraszewski

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/index.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/index.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;
+}

tests/unit/RenderHTMLTest.tsx

@@ -0,0 +1,42 @@
+import {render} from '@testing-library/react-native';
+import React from 'react';
+import {View} from 'react-native';
+import Text from '@components/Text';
+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(
+                <Text>
+                    <RenderHTML html="<p>test</p>" />
+                </Text>,
+            ),
+        ).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();
+    });
+});