fontFamily unrecognized in react native ios app - reactjs

Question

I'm struggling to get my font, PressStart2P, loaded on. Its a font from google fonts. . . Have gone through the following steps, multiple times, to make sure I wasnt sloppy. By all indications, the font should be available in the react native app.
created the assets folder at the root of my project directory
create the fonts folder within the assets folder and place the font files inside... exactly as the PostScript name indicates, and have used both .otf and .ttf versions of the font.
in package.json, specified where the custom fonts are located:
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
in my terminal, entered npx react-native link
added my fonts in App.js
For reference, here is the entire App.js file:
import React, { Component } from 'react';
import { Text, View , TouchableOpacity} from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<View style={{ backgroundColor:'#e9ffc945',flex: 1,
justifyContent: "center", alignItems: "center" }}>
<Text style={{fontSize:26, color: "#85321b45",
fontFamily: "PressStart2P"}}>Allah'u'Abha :)</Text>
<TouchableOpacity
style={{
backgroundColor:'#a4a6fc19',
padding: 95,
borderRadius: 19,
}}
>
<Text
style={{
color: "white",
fontSize: 20
}}
>
</Text>
</TouchableOpacity>
</View>
);
}
}
Additionally, I've checked in my copy bundle resources, in my project target in xcode... the file is there. Any ideas out there ?

Answer 1

I think you are using Font Family name which is not recognized with iOS. Instead of Font Family name, you should use PostScript Name of each font
Open Font Book ( Spotlight type FontBook )
Select your Font and view more information and it will look like this
You need to give PostScript name of the font as fontFamily . Otherwise android will work but iOS will give errors.
This is updated codebase of your App.js
import React, { Component } from 'react';
import { Text, View , TouchableOpacity} from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<View style={{ backgroundColor:'#e9ffc945',flex: 1,
justifyContent: "center", alignItems: "center" }}>
<Text style={{fontSize:26, color: "#85321b45",
fontFamily: "PressStart2P-Regular"}}>Allah'u'Abha :)</Text>
<TouchableOpacity
style={{
backgroundColor:'#a4a6fc19',
padding: 95,
borderRadius: 19,
}}
>
<Text
style={{
color: "white",
fontSize: 20
}}
>
</Text>
</TouchableOpacity>
</View>
);
}
}
After that link your assets again and clean project using xcode and rebuild.
Now you are ready to go...
Make sure you have link your assets and clean project before running

Answer 2

The recommended way is to create your own component, such as MyAppText. MyAppText would be a simple component that renders a Text component using your universal style and can pass through other props, etc.
https://facebook.github.io/react-native/docs/text.html#limited-style-inheritance