Text component cuts part of the text if fontWeight bold is used

[vitorreis]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.5
      CPU: x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
      Memory: 514.83 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.9.0 - ~/.nvm/versions/node/v8.9.0/bin/node
      npm: 6.4.1 - ~/.nvm/versions/node/v8.9.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0
      react-native: 0.57.2 => 0.57.2
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1

Description

In some devices when using a component with the syle fontWeight: 'bold' it removes the last word of the content of the text. My guess is that it's related with the latest android version, I could test and reproduce this bug in the OnePlus 6 device.

See how the hello world app renders with/without the font style bold.

Before adding bold style to text

After adding bold style to text

Reproducible Demo

1. react-native init bug 
2. Connect an android device OnePlus 6 with latest version of android on the computer
3. Add `fontWeight: 'bold',` to App.js line 45 (instructions styles)
4. Run the app in the device 

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[kunal886496]

This still exists. Any solution?

[kunal886496]

This is the config:

"babylon": "^6.18.0",
"react": "16.4.1",
"react-actioncable-provider": "^1.0.3",
"react-native": "0.57.0",
"react-native-android-keyboard-adjust": "^1.1.1",
"react-native-fs": "^2.11.15",
"react-native-image-picker": "^0.26.10",
"react-native-image-resizer": "^1.0.0",
"react-native-keyboard-aware-scrollview": "^2.0.0",
"react-native-loader": "^1.2.1",
"react-native-material-design": "^0.3.7",
"react-native-material-ui": "^1.30.1",
"react-native-photo-upload": "^1.2.0",
"react-native-push-notification": "^3.1.1",
"react-native-sound": "^0.10.9",
"react-native-vector-icons": "^5.0.0",
"react-native-websocket": "^1.0.2",
"react-redux": "^5.0.7",
"react-router-native": "^4.3.0",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"socket.io-client": "^2.1.1"

[vitorreis]

No solution so far, I've workarounded it by removing the font bold style.

[kunal886496]

This is surprising.

[ps2qwert]

I set the width to solve the problem

[SanchezQb]

I also use a OnePlus and I had this issue. A workaround I used is to set fontFamily to 'Roboto'

[faridhub95]

I'm using oneplus 3t can confirm, the bug is still there even when using recent react version

[adititipnis]

One plus 6t.. same issue.

I also use a OnePlus and I had this issue. A workaround I used is to set fontFamily to 'Roboto'

This works though.

I've seen something similar happen on my Instagram as well! Now I see why...