react-native Steps to use custom fonts in React Native (iOS)


Example

1. Include the font in your Xcode project.

Including font to Xcode project

2. Make sure that they are included in the Target Membership column

Click on the font from the navigator, and check if the font included.

Check font in target membership

3. Check if the font included as Resource in your bundle

click on your Xcode project file, select "Build Phases, select "Copy Bundle Resources". Check if your font is added.

check in build phases

4. Include the font in Application Plist (Info.plist)

from the application main folder open Info.plist, click on "Information Property List", and then click the plus sign (+). from drop down list choose "Fonts provided by application".

enter image description here

5. Add Font name in Fonts provided by application

expand Fonts Provided by Application and add the Font Name exactly to value column

enter image description here

  1. Use it in the Application

     <Text style={{fontFamily:'IndieFlower'}}>
       Welcome to React Native!
     </Text>