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

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

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.

This still exists. Any solution?

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"

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

This is surprising.

I set the width to solve the problem

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

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

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

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)

Merge 0.66 into master (#951)

Upgrade from 0.66.0 to 0.66.4 (#977)

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

+1

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

Is it because of other dependency or what?

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.

fix: Add space to text string to workaround RN text display bug

fix: Add space to text string to workaround RN text display bug (#57783)

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

Still experiencing this in 2025. This is pretty ridiculous.

import React from "react";
import { Text, TextProps } from "react-native";
import clsx from "clsx";
import { ReactNode } from "react";

interface StyledTextProps extends TextProps {
  children: ReactNode;
  className?: string;
}

const StyledText: React.FC<StyledTextProps> = ({ children, className, ...props }) => (
  <Text className={clsx("dark:text-white text-black", className)} {...props}>
  {children}{" "} {/* To fix android system wide bold text */}
  </Text>
);

export default StyledText;

This is what worked for me, adding a {" "}

Confirm this is still an issue as of RN 0.85.3. The extra space workaround seems to work well.

+1 This issue should be reopened because the problem still persists.

Navigation Menu

Repository navigation

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

Environment

Description

Reproducible Demo

31 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Environment

Description

Reproducible Demo

Activity

react-native-bot commented on Oct 11, 2018

kunal886496 commented on Oct 20, 2018

kunal886496 commented on Oct 20, 2018

vitorreis commented on Oct 20, 2018

kunal886496 commented on Oct 20, 2018

ps2qwert commented on Dec 4, 2018

SanchezQb commented on Dec 12, 2018

faridhub95 commented on Dec 19, 2018

adititipnis commented on Jan 11, 2019

31 remaining items

cglacet commented on Nov 3, 2021

emaborsa commented on Jan 23, 2023

Mihai-github commented on Jul 29, 2023

chavanRk commented on Dec 6, 2023

derekblank commented on Jan 12, 2024

moksaiho commented on Apr 25, 2024

amandaoneal commented on Jul 22, 2025

agonsgd commented on Sep 17, 2025

robgraeber commented on Jun 26, 2026

daaugusto commented on Jul 28, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions