Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[0.60.5] fontWeight Has No Affect on Android When Using Numerical Values

See original GitHub issue

fontWeight properties on Text components are not having an affect on Android styles on React Native Version 0.60.5. If I use the bold value, the Text component picks up the bold style, but any other value 200 up through 800 all display the same appearance as normal or 100. I performed the same change on RN Version 0.59.10 and the Text component is styled correctly.

React Native version:

    OS: macOS High Sierra 10.13.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 13.78 GB / 32.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.17.3 - ~/Developer/Projects/hy-vee-grocery/node_modules/.bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 27.0.3, 28.0.3, 29.0.2
      System Images: android-23 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5692245
    Xcode: 10.1/10B61 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: 0.60.5 => 0.60.5

Steps To Reproduce

Change the fontWeight of a Text component from 100 to 600 on Android.

Describe what you expected to happen: Text component should be styled with new fontWeight, but the style does not change.

Snack, code example, screenshot, or link to a repository: RN 0.60.5 fontWeight60 RN 0.59.10 fontWeight59

I just used react-native init projects at RN 0.59.10 and 0.60.5 to reproduce this behavior.

Issue Analytics

State:
Created 4 years ago
Reactions:20
Comments:40 (2 by maintainers)

Top GitHub Comments

48reactions

dulmandakhcommented, Aug 26, 2019

It’s known issue due to Android limitations. Only way to use custom font weights is to create a custom font.

Android added support changing font weights programmatically, but won’t work on older versions.

27reactions

AzadKshitijcommented, Sep 22, 2020

I still have the same issue can anyone tell me about how to solve it!! react-native-cli: 2.0.1 react-native: 0.63.2

Top Results From Across the Web

How to add fonts for different font weights for react-native ...

The out of the box support for custom fonts on Android is a little limited in React Native. It does not support font...

react-native-font-weight - npm package - Snyk

Enables Font Weight attribute for ReactNative Android For more information about how to use this package see README. Latest version published 3 years...

font-weight - CSS: Cascading Style Sheets - MDN Web Docs

The font-weight property is specified using any one of the values ... Higher numbers represent weights that are bolder than (or as bold...

Adding Custom Fonts (A Complete Guide) - React Native 0.60+

Some fonts don't work with the same font-family name format. Try changing your font-family name from NutinoSans-Bold to nutinosans_bold on ...

How To Load and Use Custom Fonts with CSS | DigitalOcean

You learned how each font weight and style is a different file loaded from the service, and that the number of loaded variations...