React Native - Failed to parse declaration in styled-components - react-native

Question

The same approach using stylesheet works normally
Environment
System:
OS: macOS 11.6
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU # 2.60GHz
Memory: 1.03 GB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.6.0 - ~/.nvm/versions/node/v16.6.0/bin/node
Yarn: 1.22.11 - ~/.nvm/versions/node/v16.6.0/bin/yarn
npm: 6.14.4 - ~/Projects/design-system/typography/node_modules/.bin/npm
Watchman: 2021.09.13.00 - /usr/local/bin/watchman
npmPackages:
styled-components: 5.1.0 => 5.1.0
Reproduction
import React from 'react';
import styled from 'styled-components/native';
import { View } from 'react-native';
const CustomText = styled.Text(({ theme }) => ({
fontFamily: 'Zapf Humanist 601',
}));
export default App = () => (
<View>
<CustomText>Your Text<CustomText>
</View>
);
Steps to reproduce
Copy ZapfHumanist601BT-Roman.ttf in your fonts folder (./src/assets/fonts)
Make a link font using npx react-native link
Apply a linked font in your text component
Expected Behavior
The font is expected to be applied in the style
Actual Behavior
Error: Failed to parse declaration "fontFamily: Zapf Humanist 601"

Answer 1

The font-weight property will not work fine in this situation.
You can put your fonts in src/assets/fonts directory:
src
|_ assets
|_ Montserrat-Bold.ttf
|_ Montserrat-Regular.ttf
// and so on for the rest of fonts file
And define the assets properties in the react-native.config.js file which is at the root of your project in this way:
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./src/assets/fonts/'],
};
Now, you can use the fonts in the styles like this (without define the weight property):
title : {
fontFamily: Montserrat-Regular
}