Last word of Text component disappears on Android 8.0

[lucasharada]

Is this a bug report?

Yes. I have a Screen component on a StackNavigator (react-native-navigation) with 2 Text components and 3 Button components with a text as children. The bug is that 4 out of 5 texts have the last word of the entire text missing. For example, the Text component below doesn't show the entire text; it only shows "Welcome".

<Text
  style={{
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 20
  }}
>
  Welcome back!
</Text>

The same issue happens with the other texts on the Buttons. The strangest thing is that another Text component in the Screen doesn't share the same problem. The code of the no-problem Text component is shown below:

<View
  style={{
    flex: 1,
    justifyContent: 'flex-end',
    marginBottom: 30
  }}
>
  <Text style={{ color: 'white', textAlign: 'center', textDecorationLine: 'underline' }}>
    {'Can't access the app?'}
  </Text>
</View>

The complete Screen render() method:

<View 
  style={{
    flex: 1,
    alignContent: 'space-between',
    backgroundColor: '#022436'
  }}
>
  <CustomStatusBar backgroundColor="#022436" barStyle="light-content" />
  <Logo />
  <View
    style={{
      flex: 4,
      flexDirection: 'column',
      alignItems: 'center',
      alignContent: 'center',
      marginLeft: 20,
      marginRight: 20
    }}
  >
    <Text
      style={{
        fontSize: 24,
        fontWeight: 'bold',
        color: '#fff',
        marginBottom: 20
      }}
    >
      Welcome back!
    </Text>
    <View
      style={{
        alignSelf: 'stretch',
        flexDirection: 'column',
        borderBottomWidth: 1,
        borderColor: '#ddd',
        paddingBottom: 10
      }}
    >
      <FacebookButton buttonColor={'#3b5998'} textColor={'#fff'}>
        Sign in with Facebook
      </FacebookButton>
      <Button buttonColor={'#fff'} textColor={'#4C606B'}>
        Sign up
      </Button>
    </View>
    <Button
      buttonColor={'#fff'}
      textColor={'#4C606B'}
      onPress={() => {
        navigation.navigate('Login');
      }}
    >
      Sign in
    </Button>
    <View
      style={{
        flex: 1,
        justifyContent: 'flex-end',
        marginBottom: 30
      }}
    >
      <Text style={{ color: 'white', textAlign: 'center', textDecorationLine: 'underline' }}>
        {'Can\'t access the app?'}
      </Text>
    </View>
  </View>
</View>

Have you read the Contributing Guidelines?

Yes.

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 9.3.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.51.0 => 0.51.0

Steps to Reproduce

1. Copy the code above;
2. Run on Android 8.0

Expected Behavior

Load all text completely.

Actual Behavior

Some texts have the last word missing, even though the space of the word is being occupied.

Reproducible Demo

[0xashu]

I also suffer from this issue.
Last word of Text component disappears on Android 5.1

But when I remove fontWeight property，It will work.

[jslok]

Maybe the same or similar issue?
#15114

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}