Text is not rendered fully in the available space.

[fabOnReact]

https://gist.github.com/fabriziobertoglio1987/7173e32796635cac5390d4d3fb4ed9b9 https://github.com/facebook/react-native/issues/39722 https://github.com/Expensify/App/issues/21219 PR https://github.com/facebook/react-native/pull/41770

[fabOnReact]

Testing getWidth support of padding and margin

| getLineWidth | getWidth | | ----------- | ----------- | | | |

[fabOnReact]

Use boring layout instead of getWidth

CLICK TO OPEN EXAMPLE

```javascript import * as React from 'react'; import { Button, Text, SafeAreaView, StyleSheet, Pressable, View, } from 'react-native'; const RNTesterApp = () => { const [text, setText] = React.useState('From vincenzoddragon+five@gmail.com'); var things = ['short', 'verylong', 'superlongword']; var thing = things[Math.floor(Math.random() * things.length)]; const addText = () => { setText(prevText => prevText + ' ' + thing); }; const email = 'From vincenzoddragon+five@gmail.com From vincenzoddragon+five@gmail.com \n'; return ( <> {text} ); }; export default RNTesterApp; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', padding: 8, backgroundColor: 'yellow', }, flexBrokenStyle: { flexDirection: 'row', backgroundColor: 'red', maxWidth: 300, }, input: { backgroundColor: 'pink', }, }); ```

CLICK TO OPEN VIDEOS

| Original Issue commit 85308 | After PR | | ----------- | ----------- | | | |

[fabOnReact]

BoringLayout support for margin and padding with single line text

```javascript const RNTesterApp = () => { const email = 'From vincenzoddragon+five@gmail.com From vincenzoddragon+five@gmail.com'; return ( <> {email} ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', padding: 8, backgroundColor: 'yellow', }, flexBrokenStyle: { flexDirection: 'row', backgroundColor: 'red', }, input: { backgroundColor: 'pink', marginLeft: 50, paddingLeft: 50, marginRight: 50, paddingRight: 50, }, }); ``` | Before | After | | ----------- | ----------- | | | | https://github.com/facebook/react-native/commit/008b6ea20eacf6a8beb9c1beff7e3ee1c21705ef The previous implementation does not support margin and padding: The new implementation correctly adds margin and padding:

[fabOnReact]

Text width is larger of parent

Text width is higher of parent ([YogaMeasureMode.EXACTLY](https://github.com/fabriziobertoglio1987/react-native/blob/008b6ea20eacf6a8beb9c1beff7e3ee1c21705ef/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java#L132))

CLICK TO OPEN TESTS RESULTS

```javascript const RNTesterApp = () => { const email = 'From vincenzoddragon+five@gmail.com From vincenzoddragon+five@gmail.com'; return ( <> {email} ); }; const styles = StyleSheet.create({ container: { justifyContent: 'center', padding: 8, backgroundColor: 'yellow', }, flexBrokenStyle: { paddingTop: 50, paddingRight: 0, width: 300, height: 300, backgroundColor: 'red', }, input: { backgroundColor: 'pink', width: 400, }, }); ```

| Before | After | | ----------- | ----------- | | | |

[fabOnReact]

Nested Text with different fontSize

CLICK TO OPEN SOURCECODE

```javascript const RNTesterApp = () => { const email1 = 'From vincenzoddragon+five@gmail.com'; const email2 = 'From vincenzoddragon+five@gmail.com'; return ( <> {email1} {email2} ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', padding: 8, backgroundColor: 'yellow', }, flexBrokenStyle: { flexDirection: 'row', backgroundColor: 'red', }, input: { backgroundColor: 'pink', }, nestedText: { fontSize: 30, }, }); ```

| Before | After | | ----------- | ----------- | | | |

[fabOnReact]

No regression detected with adjustFontSizeToFit

| Before | After | | ----------- | ----------- | | | |

[fabOnReact]

No regresssion when using flex shrink

CLICK TO OPEN TESTS RESULTS

```javascript const RNTesterApp = () => { const [flexShrink, setFlexShrink] = React.useState(1); const increaseShrink = () => { setFlexShrink(prevFlexShrink => prevFlexShrink + 1); }; const email = 'From vincenzoddragon+five@gmail.com From vincenzoddragon+five@gmail.com'; return ( <> {email} flexShrink is {flexShrink} ); }; const styles = StyleSheet.create({ row: { flex: 1, flexDirection: 'row', }, cell1: { backgroundColor: 'yellow', flexBasis: 800, height: 100, borderWidth: 2, borderColor: 'red', }, cell3: { backgroundColor: 'pink', flexBasis: 300, flexShrink: 1, height: 100, borderWidth: 2, borderColor: 'red', }, header: { color: 'red', fontSize: 25, }, }); ```

| Before | After | | ----------- | ----------- | | | |

[fabOnReact]

RNTester examples (old architecture)

1) FontSizeAdjustment, Wrap, Hyphenation | Before | After | | ----------- | ----------- | | | | 2) Padding | Before | After | | ----------- | ----------- | | | | 3. Text Metrics | Before | After | | ----------- | ----------- | | | | 4. Nested, Text Align | Before | After | | ----------- | ----------- | | | | 5. Number of Lines, allowFontScaling | Before | After | | ----------- | ----------- | | | | | Before | After | | ----------- | ----------- | | | |

[fabOnReact]

3. Text Metrics

Before	After

4. Nested, Text Align

Before	After

[fabOnReact]

5. Number of Lines, allowFontScaling

Before	After

Before	After

[fabOnReact]

RNTester examples (new architecture, no changes added in new arch)

1. Dynamic Font Size Adjustment | Before | After | | ----------- | ----------- | |

[fabOnReact]

2. Font Size Adjustment with Dynamic Layout

Before	After

[fabOnReact]

3. Wrap, Hyphenation, Padding

Before	After

4. Arabic Language (rtl)

Before	After

4. English Language (ltr)

Before	After

[fabOnReact]

The text takes the full available space

CLICK TO OPEN SOURCECODE

```javascript import * as React from 'react'; import {Text, SafeAreaView, StyleSheet, Pressable, View} from 'react-native'; const RNTesterApp = () => { const email = 'From vincenzoddragon+five@gmail.com From vincenzoddrlxagon+five@gmail.com'; return ( <> {email} ); }; export default RNTesterApp; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', padding: 8, backgroundColor: 'yellow', }, flexBrokenStyle: { flexDirection: 'row', }, flexBrokenStyle2: { alignSelf: 'flex-start', }, }); ```

| Before | After | | ----------- | ----------- | | | |