DEV Community: Talha Javed

Add Custom Fonts in React Native 0.63 >= for android and iOS

Talha Javed — Tue, 13 Apr 2021 11:41:17 +0000

Adding Custom Fonts to React Native App is quite easy and only needs a few steps. I am writing down the steps I did to add custom fonts to my app.

Download Google Font
First, you need to download your desired fonts from Google Fonts.

Add fonts to app folder
Then create a fonts folder in your root App/assets folder and paste downloaded fonts files in it.

Export fonts
Now create a file named react-native.config.js at the root of your app and add the path of fonts folder like this

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./App/assets/fonts'],
};

Link assets to project
After adding this, Now run “react-native link”. This will copy the font to the app. For android it will be copied to “android > app > src > main > assets > fonts” folder. For iOS the font name will be added to info.plist file in ios > your_app_name > Info.plist

npx react-native link

Add resources to target
Now at this point, your custom fonts will start working for the android app but you need to do one last step to make it work for iOS.

Go to the desired target of your app in Xcode, select the Build Phases tab, and add font files in the "Copy Bundle Resources" tab as shown below.

Xcode step is done for us at the linking step. Just have to remember to rebuild the app after.

Hope you were able to add custom fonts to your app.

How I Use VSCode

Talha Javed — Fri, 13 Dec 2019 17:49:19 +0000

I recently updated and shared my Visual Studio Code settings on How I VSCode.

Check them out and share yours as well!

Answer: How to set iOS status bar background color in React Native?

Talha Javed — Sat, 07 Dec 2019 13:48:24 +0000

answer re: How to set iOS status bar background color in React Native?

Dec 7 '19

set iOS & Android statusbar backgroundColor in react-native

    import React, { Component } from 'react';
    import { Platform, StyleSheet, View, StatusBar } from 'react-native';
    import Constants from 'expo-constants';


    class Statusbar extends Component {

        render() {
            return (
                <View style={styles.StatusBar}>
                    <StatusBar translucent barStyle="light-content" />
                </View>
            );
        }
    }

    const styles =

…

Open Full Answer

successfully completed 🎉🎉

Talha Javed — Sun, 13 Oct 2019 11:24:59 +0000

Confirmation: http://university.mongodb.com/course_completion/9d58d436-974e-47ef-bf01-d3ce51df6634

check out my fiverr profile now i am level one 🎉

Talha Javed — Fri, 27 Sep 2019 17:21:17 +0000

https://www.fiverr.com/talha_javed97

React Native Swipe Image

Talha Javed — Sun, 07 Jul 2019 07:41:46 +0000

A React Native library to swipe image on top, bottom, left, right like your favorite platforms!

https://www.npmjs.com/package/react-native-swipe-image