Skip to content

Commit bf1df60

Browse files
committed
Add dev warning when RenderHTML is rendered inside Text
Log a warning in development when RenderHTML is used inside a Text ancestor, as this causes layout issues on iOS due to block-level Views being nested inside inline Text components. Fixes #81022
1 parent 5b5afbd commit bf1df60

File tree

1 file changed

+10
-1
lines changed

1 file changed

+10
-1
lines changed

src/components/RenderHTML.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import React, {useMemo} from 'react';
1+
import React, {useContext, useMemo} from 'react';
2+
// eslint-disable-next-line no-restricted-imports
3+
import {unstable_TextAncestorContext as TextAncestorContext} from 'react-native';
24
import {RenderHTMLConfigProvider, RenderHTMLSource} from 'react-native-render-html';
35
import type {RenderersProps} from 'react-native-render-html';
46
import useWindowDimensions from '@hooks/useWindowDimensions';
7+
import Log from '@libs/Log';
58
import Parser from '@libs/Parser';
69

710
type LinkPressHandler = NonNullable<RenderersProps['a']>['onPress'];
@@ -22,6 +25,12 @@ type RenderHTMLProps = {
2225
// context to RenderHTMLSource components. See https://git.io/JRcZb
2326
// The provider is available at src/components/HTMLEngineProvider/
2427
function RenderHTML({html: htmlParam, onLinkPress, isSelectable}: RenderHTMLProps) {
28+
const isInsideText = useContext(TextAncestorContext);
29+
30+
if (__DEV__ && isInsideText) {
31+
Log.warn('RenderHTML should not be rendered inside a <Text> component, as it may cause layout issues on iOS.');
32+
}
33+
2534
const {windowWidth} = useWindowDimensions();
2635
const html = useMemo(() => {
2736
return (

0 commit comments

Comments
 (0)