Text is not rendered fully in the available space.

[fabOnReact]

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

[fabOnReact]

Testing getWidth support of padding and margin

getLineWidth	getWidth

[fabOnReact]

Use boring layout instead of getWidth

CLICK TO OPEN EXAMPLE

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 (
    <>
      <View style={styles.container}>
        <View style={styles.flexBrokenStyle}>
          <Text
            textBreakStrategy="simple"
            adjustFontSizeToFit={true}
            style={styles.input}>
            {text}
          </Text>
        </View>
        <Button title="add text" onPress={addText} />
      </View>
    </>
  );
};

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

const RNTesterApp = () => {
  const email =
    'From vincenzoddragon+five@gmail.com From vincenzoddragon+five@gmail.com';
  return (
    <>
      <View style={styles.container}>
        <View style={styles.flexBrokenStyle}>
          <Text
            textBreakStrategy="simple"
            numberOfLines={1}
            style={styles.input}>
            {email}
          </Text>
        </View>
      </View>
    </>
  );
};

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

react/react-native@008b6ea

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)

CLICK TO OPEN TESTS RESULTS

const RNTesterApp = () => {
  const email =
    'From vincenzoddragon+five@gmail.com From vincenzoddragon+five@gmail.com';
  return (
    <>
      <View style={styles.flexBrokenStyle}>
        <Text textBreakStrategy="simple" numberOfLines={1} style={styles.input}>
          {email}
        </Text>
      </View>
    </>
  );
};

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

const RNTesterApp = () => {
  const email1 = 'From vincenzoddragon+five@gmail.com';
  const email2 = 'From vincenzoddragon+five@gmail.com';
  return (
    <>
      <View style={styles.container}>
        <View style={styles.flexBrokenStyle}>
          <Text
            textBreakStrategy="simple"
            numberOfLines={1}
            style={styles.input}>
            {email1}
            <Text style={styles.nestedText}>{email2}</Text>
          </Text>
        </View>
      </View>
    </>
  );
};

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

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 (
    <>
      <View style={styles.row}>
        <View style={[styles.cell1, {flexShrink}]}>
          <Text
            textBreakStrategy="simple"
            numberOfLines={1}
            style={styles.input}>
            {email}
          </Text>
        </View>
        <View style={styles.cell3} />
      </View>
      <Text style={styles.header}>flexShrink is {flexShrink}</Text>
      <Button title="increase flex shrink" onPress={increaseShrink} />
    </>
  );
};

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
Screen.Recording.2023-12-03.at.12.36.53.PM.mov	Screen.Recording.2023-12-03.at.12.18.33.PM.mov

2. Font Size Adjustment with Dynamic Layout

Before	After
	Screen.Recording.2023-12-03.at.12.20.32.PM.mov

3. Wrap, Hyphenation, Padding

Before	After

4. Arabic Language (rtl)

Before	After

4. English Language (ltr)

Before	After

[fabOnReact]

2. Font Size Adjustment with Dynamic Layout

Before	After
	Screen.Recording.2023-12-03.at.12.20.32.PM.mov

[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

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 (
    <>
      <View style={styles.container}>
        <View style={styles.flexBrokenStyle}>
          <Text
            textBreakStrategy="simple"
            numberOfLines={1}
            style={{backgroundColor: 'pink'}}>
            {email}
          </Text>
        </View>
      </View>
    </>
  );
};

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