Fonts

Installing custom fonts

The easiest way to install custom fonts to your RN project is do as follows:

Define path to assets directory with fonts in project:
Place your fonts files in your assets folder
Link fonts files using 'react-native link' command
Restart your project to refresh changes
You are able to use fontFamily based on fonts files

Configuring fonts in ThemeProvider

To create a custom font you need to prepare fontConfig where fonts are divided by platforms. After you have to pass the fontConfig into configureFonts method in a custom theme.

Note: To override font on all platforms use default key.

Check the default theme to see what customization options are supported.

import * as React from 'react';
import { configureFonts, DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import App from './src/App';

const fontConfig = {
  default: {
    regular: {
      fontFamily: 'sans-serif',
      fontWeight: 'normal',
    },
    medium: {
      fontFamily: 'sans-serif-medium',
      fontWeight: 'normal',
    },
    light: {
      fontFamily: 'sans-serif-light',
      fontWeight: 'normal',
    },
    thin: {
      fontFamily: 'sans-serif-thin',
      fontWeight: 'normal',
    },
  },
};

const theme = {
  ...DefaultTheme,
  fonts: configureFonts(fontConfig),
};

export default function Main() {
  return (
    <PaperProvider theme={theme}>
      <App />
    </PaperProvider>
  );
}