CODEWITHSUNDEEP
reactjsreact-native
neutrino
neutrino

Reputation: 924

fontFamily unrecognized in react native ios app

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.

  1. created the assets folder at the root of my project directory
  2. 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.
  3. in package.json, specified where the custom fonts are located:
 "rnpm": {
   "assets": [
  "./assets/fonts/"
   ]
 },
  1. in my terminal, entered npx react-native link
  2. 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 ?

Upvotes: 3

Views: 2081

Answers (2)

Asad
Asad

Reputation: 573

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

enter image description here

Upvotes: 0

Akila Devinda
Akila Devinda

Reputation: 5492

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

  1. Open Font Book ( Spotlight type FontBook )
  2. Select your Font and view more information and it will look like this

enter image description here

  • 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

Upvotes: 4

Related Questions