react-native: [Android] Text missing on Android Q

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

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.

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'} .

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

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

@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??

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

This works for me

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.