[Android] Text missing on Android Q

[mbaaij]

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(R) Core(TM) 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,
  },
})

3. open Pixel_2_XL_API_29 in emulator
4. react-native run-android

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

[seomaz]

Same here, only happens when use api 29 and android 9+ (Q), with some device for example pixel 2 XL.

Pixel 2 XL with android 8.1 and api 27 works fine.

[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.

[enahum]

Same here for us

See screenshot: from left to right Oreo, Pie, Q and the three of them are rendering the same code

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import DeviceInfo from 'react-native-device-info';

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.paragraph}>
                    {`Android ${DeviceInfo.getAPILevel()}`}
                </Text>
                <View style={{marginRight: 10}}>
                    <Text style={styles.paragraph}>
                        {'aaa aaa aaaaa aaa aaa aaaaaaaa aaa aaa aaaa aa a aaaa-aaaaaa, aaa aaa aaaaaaa aaaaa aaaaa aaaaaaaa-aaaa-aaaa-aaaaaa, aaaaaaaa-aa-aaaaaaa-aaaaa-aa-aaa aaa. aaa aaaaa. aaa aaaaa aaaaaaa a aaa\'a aaaa aa aaaaaaaaaaaa aaaa.'}
                    </Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        paddingTop: 20,
        backgroundColor: '#ecf0f1',
        padding: 8,
    },
    paragraph: {
        fontSize: 15,
        textAlign: 'center',
    },
});

NOTE: If the marginRight: 10 is removed from the parent View, then it renders correctly :S

[christianbach]

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

[ripzery]

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

This works for me

[seomaz]

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

how to use with react-native-render-html: /~https://github.com/archriss/react-native-render-html??

[lvanhala]

We have the same problem. Does anybody know if this has been fixed in the latest react native version?

[abelyeupear]

Same issue. Is this a breaking change in Android 10? I cannot see anything related to this change on the release notes: https://source.android.com/setup/start/android-10-release

[jjhampton]

Any updates on this? It would be useful if there was a solution within React Native (or a way to patch RN), so that developers wouldn't have to manually set every single <Text> component to have the prop textBreakStrategy={'simple'} .

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[jjhampton]

bump

[safaiyeh]

What is the current default for the textBreakStrategy on the Text component? Just undefined? It might be worth sending in a PR to make the default simple

[MoOx]

Doc is saying it's highQuality https://reactnative.dev/docs/text#textbreakstrategy

[fachryansyah]

same problem here.. i don't know why if i wrote some text, it will be missing 1 word, if i type "New Series" the word "Series" is wil be gone, i've tried with textBreakStrategy

<View style={styles.left}>
    <Text style={styles.textSection} textBreakStrategy="simple">New Series</Text>
</View>

and the result is :

is'nt working any more, but i've tried with adjustsFontSizeToFit={true} and numberOfLines={1} props :

<View style={styles.left}>
    <Text style={styles.textSection} numberOfLines={1} adjustsFontSizeToFit>New Series</Text>
</View>

result :

its work perfectly, but i don't know is that best practice or not

[MoOx]

Is this somehow related to #25481 ?

[fabOnReact]

unluckily can not reproduce in our latest master branch using example #25258 (comment)

CLICK TO OPEN TESTS RESULTS

api 29

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.