React-native: Text component cuts part of the text if fontWeight bold is used

[vitorreis]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] 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...

[johnvillegas40]

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

I am also experiencing this issue. I switched from testing with a Pixel 2 XL to a OnePlus 6T and it broke all of my Text with fontWeight by chopping text off of it.

[jbrodriguez]

I've had reports of this issue in my app.

In all the cases, they were using a OnePlus, which comes standard with some font other than Roboto.

Making them set system font to Roboto fixed the issue.

I wonder if the Instagram screen that exhibits this behavior (https://github.com/facebook/react-native/issues/21729#issuecomment-453459081) is built with React Native as well.

[kunal886496]

Instagram is just a marketing strategy of my react-native.
I have used flutter now.
And its better.

On Wed, Mar 27, 2019, 16:01 Juan B. Rodriguez [e-mail]
wrote:

I've had reports of this issue in my app.

In all the cases, they were using a OnePlus, which comes standard with
some font other than Roboto.

Making them set system font to Roboto fixed the issue.

I wonder if the Instagram screen that exhibits this behavior (#21729
(comment)
https://github.com/facebook/react-native/issues/21729#issuecomment-453459081)
is built with React Native as well.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/21729#issuecomment-477084746,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AbE9BkXw13Ks5lNhXDEadOXLt6rem9Xzks5va0hugaJpZM4XXw0D
.

[dharmen1901]

I am facing the same issue when using Unicode mangal Text (Hindi) in Samsung On6 & m30. I am not sure if the problem will be on all phones. I tried in these 2 only.

[gguidotti]

I can confirm that this is still happening in latest version of React Native when using OnePlus proprietary font (on OnePlus 6) instead of using Robot. Switching it solved the problem, but this is still something which I believe should be fixed

[house92]

Same problem here on OnePlus 6

[MewX]

Still having the same issue.

I worked around it by setting lineHeight:

fontStyle: {
    <your other styles>,
    lineHeight: <your font size> * 1.2,
},

[kunal886496]

Yes same here

On Sat, Aug 24, 2019 at 1:50 PM MewX [e-mail] wrote:

Still having the same issue.

I worked around it by setting lineHeight:

fontStyle: {
,
lineHeight: * 1.2,
},

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/21729?email_source=notifications&email_token=AGYT2BR34JVCBCG37AWAVDLQGDVNZA5CNFSM4F27BUB2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5B3NEY#issuecomment-524531347,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGYT2BVXWRK3CL2NIPJJN5LQGDVNZANCNFSM4F27BUBQ
.

[kinhhopbi0]

This still exists. version 0.60.4

[gaberoganlingumi]

does setting fontWeight: '700' fix it? Sorry I don't have a OnePlus 6 to test this myself.

[Biplovkumar]

Still having the same issue.

I worked around it by setting lineHeight:

fontStyle: {
    <your other styles>,
    lineHeight: <your font size> * 1.2,
},

Thankyou so much sir, you saved my life

[Sreekesh363]

does setting fontWeight: '700' fix it? Sorry I don't have a OnePlus 6 to test this myself.

Nope. If you are using fontWeight, it is advised to set fontFamily to 'Roboto' as for different phones which are not using stock Android OS, this can occur.

[jegathispandi]

I am facing the same issue in oppo A37 and OnePlus 6. could you please help me to resolve this issue?

[stale[bot]]

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.

[jegathispandi]

I am still facing this issue. This issue is react native uses different font. Android uses roboto font for native. but IOS uses different font. If I am using roboto font its working fine. but i need to add this line

const defaultFontFamily = {
...Platform.select({
android: { fontFamily: 'Roboto'}
})
};

const oldRender = Text.render
Text.render = function (...args) {
const origin = oldRender.call(this, ...args);
return React.cloneElement(origin, {
style: [{ fontFamily: 'Roboto'}, origin.props.style]
});
};

[Zakrevskijj]

+1 the same issue

[Harshaou]

One plus 3T same issue

[sunny635533]

@MewX you saved my life too! it works in my app.

[priyankapakhale]

I added alignSelf: "stretch" and it worked for me. If you also want the text in the middle then just add textAlign: "center" as well.
Hope this helps someone.

[ritzblogs]

Checkout https://abodeofmystories.blogspot.com/2020/09/react-native-text-cut-issue.html
Have tested these solutions and it works for me

[aryankush25]

I have added textAlign: 'center' & width: '100%' to the Text styles and it worked beautifully.