How Do I Add Custom Font In React Native Not Using Xcode?

Is there a way to add custom font in React Native in Atom editor and not using Xcode?

Solution 1:

There is an easier way of doing things through command line using rnpm. It adds fonts to both android and ios. Place the font you want to add to a suitable location inside your project directory. In your package.json just add the following:

... "rnpm": { "assets": ["path/to/your/font/directory"] }, ... Then from command line do: rnpm link

you can now happily use your fonts in your app.

Note: you have to have rnpm installed for this to work. Just do npm install -g rnpm

Here is the documentation: https://github.com/rnpm/rnpm#advanced-usage

Solution 2:

The way without edit package.json is:

1. Install in your proyect react-native-vector-icons (npm install --save react-native-vector-icons).

2. Move the fonts into node_modules/react-native-vector-icons/Fonts.

3. run react-native link.

4. run react-native run-ios

The problem is that the name of the fonts is different than the file name. The way to show all names of the installed fonts is modify AppDelegate.m and put the loop:

   for (NSString *familyName in [UIFont familyNames]) {
        for (NSString *fontName in [UIFont fontNamesForFamilyName:familyName]) {
            NSLog(@"%@", fontName);
        }
    }

For icons fonts the name is the same.

Solution 3:

Not Possible to add Custom Font iOS .
You are using Xcode then add Font in native app

• Copy your font file into resources
  
• Add a key to your Info.plist file called UIAppFonts. ("Fonts provided by application)Make this key an array
  
• For each font you have, enter the full name of your font file (including the extension) as items to the UIAppFonts array