react-native
react-native copied to clipboard
[0.73.1] fontWeight not apply while using custom font
Description
I just tried to use custom font in my project template, and i realize when i want to use fontWeight
as a reference of my custom font family it's not applicable, is it expected or am i doing something wrong while linking my custom font?
I'm expecting fontWeight
should applicable with font as google fonts declared
- Thin 100
- Thin 100 Italic
- ExtraLight 200
- ...
Steps to reproduce
- Download font from google
- Extract downloaded font and copy font into project directory (without
pt
prefix) - linking the fonts with react-native-asset
- Paste this code in
App.[js/tsx]
import React from 'react';
import { Text, View } from 'react-native';
const TextExample = props => {
const fontListRegularWithFontWeight = [
{fontFamily: 'DMSans-Regular', fontWeight: '100'},
{fontFamily: 'DMSans-Regular', fontWeight: '200'},
{fontFamily: 'DMSans-Regular', fontWeight: '300'},
{fontFamily: 'DMSans-Regular', fontWeight: '400'},
{fontFamily: 'DMSans-Regular', fontWeight: '500'},
{fontFamily: 'DMSans-Regular', fontWeight: '600'},
{fontFamily: 'DMSans-Regular', fontWeight: '700'},
{fontFamily: 'DMSans-Regular', fontWeight: '800'},
{fontFamily: 'DMSans-Regular', fontWeight: '900'},
];
const fontListWithCustomFontOnly = [
{fontFamily: 'DMSans-Thin'},
{fontFamily: 'DMSans-ExtraLight'},
{fontFamily: 'DMSans-Light'},
{fontFamily: 'DMSans-Regular'},
{fontFamily: 'DMSans-Medium'},
{fontFamily: 'DMSans-SemiBold'},
{fontFamily: 'DMSans-Bold'},
{fontFamily: 'DMSans-ExtraBold'},
{fontFamily: 'DMSans-Black'},
];
return (
<View style={{flex: 1}}>
<Text style={{textAlign: 'center'}}>Custom Font Regular with fontWeight</Text>
<View style={{borderWidth: 1, margin: 14, padding: 14, marginBottom: 24, alignItems: 'center'}}>
{fontListRegularWithFontWeight.map((x, i) => (
<Text key={x.fontFamily + i} style={x}>
{JSON.stringify(x)}
</Text>
))}
</View>
<Text style={{textAlign: 'center'}}>Custom Font With Exact Font Name</Text>
<View style={{borderWidth: 1, margin: 14, padding: 14, alignItems: 'center'}}>
{fontListWithCustomFontOnly.map((x, i) => (
<Text key={x.fontFamily + i} style={x}>
{JSON.stringify(x)}
</Text>
))}
</View>
</View>
);
};
export default TextExample;
React Native Version
0.73.1
Affected Platforms
Runtime - Android
Output of npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 12.5
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 679.42 MB / 16.00 GB
Shell:
version: 5.8.1
path: /bin/zsh
Binaries:
Node:
version: 18.19.0
path: /usr/local/bin/node
Yarn:
version: 1.22.19
path: ~/.yarn/bin/yarn
npm:
version: 10.2.3
path: /usr/local/bin/npm
Watchman:
version: 2023.12.04.00
path: /usr/local/bin/watchman
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms:
- DriverKit 21.4
- iOS 16.0
- macOS 12.3
- tvOS 16.0
- watchOS 9.0
Android SDK:
API Levels:
- "27"
- "28"
- "29"
- "30"
- "31"
- "33"
- "34"
Build Tools:
- 28.0.3
- 29.0.2
- 29.0.3
- 30.0.2
- 30.0.3
- 31.0.0
- 33.0.0
- 33.0.1
- 33.0.2
- 34.0.0
System Images:
- android-23 | Intel x86 Atom_64
- android-27 | Google APIs ARM 64 v8a
- android-28 | Google APIs Intel x86 Atom
- android-29 | Google APIs Intel x86 Atom
- android-30 | Google APIs Intel x86 Atom
- android-30 | Google Play ARM 64 v8a
- android-34 | Google APIs Intel x86_64 Atom
Android NDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10406996
Xcode:
version: 14.0.1/14A400
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.9
path: /usr/bin/javac
Ruby:
version: 2.7.4
path: /Users/administrator_1/.rvm/rubies/ruby-2.7.4/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.1
wanted: 0.73.1
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: false
### Stacktrace or Logs
```text
noneed
Reproducer
https://snack.expo.dev/w667bnl74