Skip to content

fontWeight behavior changed on Android between <0.60.0 and >= 0.60.0 - now high font weights can default to low ones #25696

Closed
@iamacup

Description

@iamacup

Prior to 0.60.0 font weights that were not supported but were high would default to the nearest 'bold' font. Now they just default to a non-bold font.

React Native version:

Steps To Reproduce

1a. react-native init AwesomeProject (at time of writing defaults to version 0.60.3)
2a. Use this code in App.js


import React, {Fragment} from 'react';
import { Text, SafeAreaView } from 'react-native';

const App = () => {
  return (
      <SafeAreaView>
        <Text style={{fontWeight: '900'}}>FONT WEIGHT 900</Text>
        <Text style={{fontWeight: '800'}}>FONT WEIGHT 800</Text>
        <Text style={{fontWeight: '700'}}>FONT WEIGHT 700</Text>
        <Text style={{fontWeight: '600'}}>FONT WEIGHT 600</Text>
        <Text style={{fontWeight: '500'}}>FONT WEIGHT 500</Text>
        <Text style={{fontWeight: '400'}}>FONT WEIGHT 400</Text>
        <Text style={{fontWeight: '300'}}>FONT WEIGHT 300</Text>
        <Text style={{fontWeight: '200'}}>FONT WEIGHT 200</Text>
        <Text style={{fontWeight: '100'}}>FONT WEIGHT 100</Text>
      </SafeAreaView>
  );
};

export default App;

3a. Run the app in an emulator or on device
4a. Output: https://imgur.com/VEpgKzC

react-native info
  info Fetching system and libraries information...
  System:
      OS: macOS 10.14.5
      CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
      Memory: 1.28 GB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.2.0 - /usr/local/bin/node
      Yarn: 1.15.2 - /usr/local/bin/yarn
      npm: 6.10.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 23, 28
        Build Tools: 28.0.3
        System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5692245
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.6 => 16.8.6 
      react-native: 0.60.3 => 0.60.3 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
    

THEN

1b. react-native init AwesomeProject2 --version 0.59.9
2b. Use code from above in App.js
3b. Run the app in an emulator or on device
4b. Output: https://imgur.com/ZW9hZGU

react-native info
  info 
    React Native Environment Info:
      System:
        OS: macOS 10.14.5
        CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
        Memory: 1.34 GB / 16.00 GB
        Shell: 3.2.57 - /bin/bash
      Binaries:
        Node: 12.2.0 - /usr/local/bin/node
        Yarn: 1.15.2 - /usr/local/bin/yarn
        npm: 6.10.0 - /usr/local/bin/npm
        Watchman: 4.9.0 - /usr/local/bin/watchman
      SDKs:
        iOS SDK:
          Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
        Android SDK:
          API Levels: 23, 28
          Build Tools: 28.0.3
          System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
      IDEs:
        Android Studio: 3.4 AI-183.6156.11.34.5692245
        Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
      npmPackages:
        react: 16.8.3 => 16.8.3 
        react-native: 0.59.9 => 0.59.9 
      npmGlobalPackages:
        create-react-native-app: 1.0.0
        react-native-cli: 2.0.1
  

Describe what you expected to happen:

When an unsupported font weight is higher than a supported, non standard font weight, the default should be picked as the fatter one not the skinny one.

Snack, code example, or link to a repository:

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions