[Android] Text missing on Android Q

For an article page we render multiple paragraphs as Text components. Only some paragraphs don’t show the last line on Android Q. We couldn’t find any logic in which case the paragraph will fail to render everything.

React Native Environment Info: System: OS: macOS High Sierra 10.13.6 CPU: (12) x64 Intel® Core™ i7-8850H CPU @ 2.60GHz Memory: 3.45 GB / 32.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.13.0 - /usr/local/bin/node Yarn: 1.15.2 - /usr/local/bin/yarn npm: 6.4.1 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1 Android SDK: API Levels: 21, 23, 25, 26, 27, 28 Build Tools: 25.0.2, 27.0.3, 28.0.3 System Images: android-23 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom IDEs: Android Studio: 3.4 AI-183.6156.11.34.5522156 Xcode: 10.1/10B61 - /usr/bin/xcodebuild npmPackages: react: 16.8.3 => 16.8.3 react-native: 0.59.9 => 0.59.9 npmGlobalPackages: react-native-cli: 2.0.1 react-native-git-upgrade: 0.2.7

Steps To Reproduce

1. react-native init androidBug
2. Add script below to App.js

import {Platform, StyleSheet, Text, View, FlatList} from 'react-native';
import { LoremIpsum } from "lorem-ipsum";

const lorem = new LoremIpsum({
  sentencesPerParagraph: {
    max: 8,
    min: 4
  },
  wordsPerSentence: {
    max: 16,
    min: 4
  }
});

lorem.generateWords(1);
lorem.generateSentences(5);
lorem.generateParagraphs(7);

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: lorem.generateParagraphs(7)},
            {key: lorem.generateParagraphs(7)},
            {key: lorem.generateParagraphs(7)},
            {key: lorem.generateParagraphs(7)},
            {key: lorem.generateParagraphs(7)},
            {key: lorem.generateParagraphs(7)},
            {key: lorem.generateParagraphs(7)},
            {key: lorem.generateParagraphs(7)},
            {key: lorem.generateParagraphs(7)},
            {key: lorem.generateParagraphs(7)},
            {key: lorem.generateParagraphs(7)},
            {key: lorem.generateParagraphs(7)},
            ]}
          renderItem={({item}) => {
            console.log(item.key);
           return <Text style={{marginBottom:50, fontSize:18}}>{item.key}</Text>}
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
})

1. open Pixel_2_XL_API_29 in emulator
2. react-native run-android

I would expect to see all text rendered completely, but some are cut off at the end (see images).

[christianbach]

@enahum @tbress89 setting the textBreakStrategy prop for Text to simple solves the problem for us on Android 10

[tbress89]

Same issue here, it seems to be related to the default textBreakStrategy of a TextView that changed from highQuality into simple since Android Q.

In this screenshot I have Pixel 3, API 28 (Android O) on the left and Pixel 3, API 29 (Android Q) on the right, same textual input. On the left the word “elektriciteitsfactuur” get’s split while on the right that’s not the case anymore, this causes an extra newline in the paragraph but the height measurement of the TextView seems to respond wrongly to this behaviour.