Custom Fonts with NativeBase

NativeBase helps you build consistent UI across android, iOS, and web. It is an accessible, utility-first component library. For the past 6 years, we have been building and maintaining it. During that time, many issues have come and gone. But customizing fonts for an app or website has always been a challenge for developers.

This article is a guide to help you add beautiful custom fonts in NativeBase that suits your project.

Initial Steps

Before getting started, you need to first load your font into the project. We will majorly focus on three project setups — React Native, Expo, and NextJS.

For React Native

If you want to set up a new project:

Plain JavaScript

npx react-native init MyApp --template @native-base/react-native-template

With TypeScript

npx react-native init MyApp --template @native-base/react-native-template-typescript

If you want to use an existing project, set up a basic React Native app using the steps given here. Ignore this step if already completed.

# Create a new React Native app with react-native cli
npx react-native init AwesomeProject

Follow the instructions given in this link to set up NativeBase in your new project.

Test if everything in the setup is proper by running your dev script.

Once the set-up is complete, you can add the fonts to your project. Here is how to do it:

• Get the font file needed for your project
• Create a configuration file react-native.config.js in the root project directory and add the code below:

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

• Link the font assets

yarn react-native link
 
#or
 
npx react-native link

Note: Make sure to link the font assets every time you add a new font to the project.

• Extend NativeBase theme object by following the step given at the end.

For Expo

If you want to set up a new project:

Plain JavaScript

expo init my-app --template @native-base/expo-template

With TypeScript

expo init my-app --template @native-base/expo-template-typescript

If you want to use an existing project, set up a basic Expo app using the instructions given in this link. Ignore this step if already completed.

# Create a new Expo app with expo cli
expo init AwesomeProject

Follow the steps given here to set up NativeBase in your new project. Test everything is running okay by running yarn start.

To set up the custom fonts follow the steps provided in the official docs of Expo here.

Here's a blog explaining how to customize NativeBase to incorporate new themes.

For Next.js

If you want to setup a new project:

Plain Javascript

yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base

With Typescript

yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript

If you want to use an existing project, set up a basic Next.js app.

npx create-next-app@latest
# or
yarn create next-app

Set up NativeBase in your project by following the steps given here. Test everything is running okay by running yarn start.

Adding Fonts to your project

To add a web font to your Next.js application, add the font to a Custom Document.

You can add custom fonts to your Next.js project in three different ways:

1. Using Next Head component with CDN
2. Downloading font locally and adding it to assets of your project
3. Using CSS import

For more details of your preferred method, please follow this guide: https://medium.com/nextjs/how-to-add-font-in-next-js-7a7fba80d528

Extending NativeBase theme object

Now, all that is left is to map the font property to the font file and family in NativeBase.

To do this, you need to extend the NativeBase theme object and override fontConfig and font properties. This will define the mappings to something like this:

import { NativeBaseProvider, extendTheme } from 'native-base';
 
const theme = extendTheme({
  fontConfig: {
    Roboto: {
      100: {
        normal: 'Roboto-Light',
        italic: 'Roboto-LightItalic',
      },
      200: {
        normal: 'Roboto-Light',
        italic: 'Roboto-LightItalic',
      },
      300: {
        normal: 'Roboto-Light',
        italic: 'Roboto-LightItalic',
      },
      400: {
        normal: 'Roboto-Regular',
        italic: 'Roboto-Italic',
      },
      500: {
        normal: 'Roboto-Medium',
      },
      600: {
        normal: 'Roboto-Medium',
        italic: 'Roboto-MediumItalic',
      },
      // Add more variants
      //   700: {
      //     normal: 'Roboto-Bold',
      //   },
      //   800: {
      //     normal: 'Roboto-Bold',
      //     italic: 'Roboto-BoldItalic',
      //   },
      //   900: {
      //     normal: 'Roboto-Bold',
      //     italic: 'Roboto-BoldItalic',
      //   },
    },
  },
 
  // Make sure values below matches any of the keys in `fontConfig`
  fonts: {
    heading: 'Roboto',
    body: 'Roboto',
    mono: 'Roboto',
    customFont: 'Roboto',
  },
});
 
export default function App() {
  return (
    <NativeBaseProvider theme={theme}>
      <Text fontFamily="body" fontWeight="600" fontStyle="italic" />
    </NativeBaseProvider>
  );
}

That's all.

Now you can use your custom font like this:

<Text fontFamily="body" fontWeight="600" fontStyle="italic" />

Till next time then. Ciao!