search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
118.43k stars 24.25k forks source link

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

Closed vitorreis closed 3 years ago

vitorreis commented 5 years ago

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 screenshot_20181011-170135 After adding bold style to text screenshot_20181011-170110

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 commented 5 years ago

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 commented 5 years ago

This still exists. Any solution?

kunal886496 commented 5 years ago

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 commented 5 years ago

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

kunal886496 commented 5 years ago

This is surprising.

ps2qwert commented 5 years ago

I set the width to solve the problem

SanchezQb commented 5 years ago

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

faridhub95 commented 5 years ago

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

adititipnis commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 notifications@github.com 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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Same problem here on OnePlus 6

MewX commented 5 years ago

Still having the same issue.

I worked around it by setting lineHeight:

fontStyle: {
    <your other styles>,
    lineHeight: <your font size> * 1.2,
},
kunal886496 commented 5 years ago

Yes same here

On Sat, Aug 24, 2019 at 1:50 PM MewX notifications@github.com 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 , or mute the thread .
kinhhopbi0 commented 5 years ago

This still exists. version 0.60.4

gaberoganlingumi commented 5 years ago

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

Biplovkumar commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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

stale[bot] commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

+1 the same issue

Harshaou commented 4 years ago

One plus 3T same issue

sunny635533 commented 4 years ago

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

priyankapakhale commented 4 years ago

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 commented 3 years ago

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

aryankush25 commented 3 years ago

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

sanjaykmwt94222 commented 3 years ago

This issue occurs with the font Oneplus Slate change the font and boom the issue is resolved.

15110011 commented 3 years ago

in my case, just remove letterSpacing on Android? or set an int number not a float(if u want to use it) ex: letterSpacing: Platform.OS === 'ios' ? 0.5 : 1

LorandP commented 3 years ago

This worked for me and I have a OnePlus 7T. Thank you!

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

jvmMachado commented 3 years ago

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

Same issue Using OnePlus 6. That's the workaround that did the trick.

safaiyeh commented 3 years ago

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

Closing in favor of this work around

cglacet commented 2 years ago

Any real solution to this problem? I've noticed using react-native-element's text component doesn't yield the same issue. Anyone had success with updating to a newer version?

(In my case I added a space at the end of my string and it worked, but that's not really a viable solution)

emaborsa commented 1 year ago 
"dependencies": {
    "@react-navigation/native-stack": "^6.9.8",
    "react": "18.2.0",
    "react-native": "0.71.1",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-safe-area-context": "^4.5.0",
    "react-native-screens": "^3.19.0",
    "react-native-svg": "^13.7.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.0.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.7",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },

Still have the problem.

Mihai-github commented 1 year ago

+1

chavanRk commented 9 months ago

fontWeight : 500,700 is not working fontStyle : 'Nunito-Bold' is also not working

Is it because of other dependency or what?

derekblank commented 8 months ago

Still experiencing this in 2024. I noted that <Text> appears to remove the end node of each text string.

When there are two or more words in one <Text> element, the last word is removed:

<Text>Working Offline</Text>
→ "Working "

When there is one word in a <Text> element, the last letter is removed:

<Text>Working</Text><Text>Offline</Text>
→ "Workin Offlin"

When there are two or more words in one <Text> element and a space is added, the space is removed:

<Text>Working Offline </Text>
→ "Working Offline"

In our case, adding a space at the end of the string was a suitable workaround.

moksaiho commented 5 months ago

textAlign: 'center'

Still experiencing this in 2024. I noted that <Text> appears to remove the end node of each text string.

This works for some cases for me. In one case: like const category = ['Course Project ', 'Course Study ', 'ExtraCurricular ']; {category.map((item, index) => { return (

{item} 
      );
    })}  you need to add space in both category and behind {item} so that you word will not be chopped off