Bug description
A long URL in Markdown text that renders over more than one line causes an EnrichedMarkdownText element to set its height incorrectly, causing unnecessary scrolling. This appears to be an Android-specific problem, as it renders with the correct height on iOS.
To reproduce
Render an EnrichedMarkdownText element on a React Native page with a URL that wraps more than one line. The exact reproduction will depend on font choice, screen size, etc., but this is a minimal reproduction in my context (screenshots below).
<Text>Some text before rendered Markdown</Text>
<EnrichedMarkdownText
markdown={'Find related online resources here: https://www.example.com/a-long-bit-of-text-that-keeps-going'}
/>
<Text>Some text after rendered Markdown</Text>
Expected behaviour
The EnrichedMarkdownText element should render with the correct calculated height, so it does not cut off text or cause a scroll.
Screenshots
Correct behaviour (iOS)
Incorrect behaviour (Android)
Note that text is cut off, due to rendering with only two lines of height, rather than three.
The text can be dragged up to scroll to show all three lines.
Devices affected
Occurs on all Android devices tested; details listed below for information.
- Android Emulator, API 36.0
- Google Pixel 10 Pro XL, Android v16
- Motorola Moto G71 5G, Android v11
- Google Pixel 8, Android v14
- Samsung Galaxy Tab S10 Plus, Android v15
Additional context
This behaviour only seems to occur when there is some text immediately before the long URL, and there is enough space between that text and the line end that some of the URL could render there (although it does not: it always starts on a new line on Android).
Bug description
A long URL in Markdown text that renders over more than one line causes an
EnrichedMarkdownTextelement to set its height incorrectly, causing unnecessary scrolling. This appears to be an Android-specific problem, as it renders with the correct height on iOS.To reproduce
Render an
EnrichedMarkdownTextelement on a React Native page with a URL that wraps more than one line. The exact reproduction will depend on font choice, screen size, etc., but this is a minimal reproduction in my context (screenshots below).Expected behaviour
The
EnrichedMarkdownTextelement should render with the correct calculated height, so it does not cut off text or cause a scroll.Screenshots
Correct behaviour (iOS)
Incorrect behaviour (Android)
Note that text is cut off, due to rendering with only two lines of height, rather than three.
The text can be dragged up to scroll to show all three lines.
Devices affected
Occurs on all Android devices tested; details listed below for information.
Additional context
This behaviour only seems to occur when there is some text immediately before the long URL, and there is enough space between that text and the line end that some of the URL could render there (although it does not: it always starts on a new line on Android).