I am working on a RN app using react-native-paper to handle theming and UI. I have the theme working to format my ponents, however when I try to incorporate custom fonts it does not have any effect on the react-native-paper ponents. I have followed the [font guide][1] but it did not change this issue.

I follow the expo example of how to load fonts using loadFontAsync(), and when I pass these fonts to my own ponents using the style prop fontFamily: 'Rubik-Regular the font works so I know it is not an issue of the font not existing.

As I am new to react-native-paper, I think my issue is with my fontConfig or configureFonts(). Any help or direction would be greatly appreciated.

import React from 'react';
import { Provider as ReduxProvider } from 'react-redux'
import configureStore from './store'
]import { configureFonts, DefaultTheme, Provider as PaperProvider } from 'react-native-paper'
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import AppNavigator from './ponents/AppNavigator'

const store = configureStore();

const fontConfig = {
    default: {
        regular: {
            fontFamily: 'Rubik-Regular',
            fontWeight: 'normal',
        },
        medium: {
            fontFamily: 'Rubik-Black',
            fontWeight: 'normal',
        },
        light: {
            fontFamily: 'Rubik-Light',
            fontWeight: 'normal',
        },
        thin: {
            fontFamily: 'Rubik-LightItalic',
            fontWeight: 'normal',
        },
    },
};

let customFonts = {
    'Rubik-Regular': require('./assets/fonts/Rubik-Regular.ttf'),
    'Rubik-Black': require('./assets/fonts/Rubik-Black.ttf'),
    'Rubik-Light': require('./assets/fonts/Rubik-Light.ttf'),
    'Rubik-LightItalic': require('./assets/fonts/Rubik-LightItalic.ttf'),
}


const theme = {
    ...DefaultTheme,
    roundness: 30,
    fonts: configureFonts(fontConfig),
    colors: {
        ...DefaultTheme.colors,
        primary: '#0d80d6',
        accent: '#E68FAE',
        background: '#C6E1F2',
    },
}

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            fontsLoaded: false,
        };
    }

    async loadFontsAsync() {
        await Font.loadAsync(customFonts);
        this.setState({ fontsLoaded: true });
    }

    ponentDidMount() {
        this.loadFontsAsync();
    }

    render() {
        if (this.state.fontsLoaded) {
         return (
                <ReduxProvider store={store}>
                    <PaperProvider theme={theme}>
                        <AppNavigator/>
                    </PaperProvider>
                </ReduxProvider>
            );
        }
        else {
            return <AppLoading/>;
        }
    }
}

I am working on a RN app using react-native-paper to handle theming and UI. I have the theme working to format my ponents, however when I try to incorporate custom fonts it does not have any effect on the react-native-paper ponents. I have followed the [font guide][1] but it did not change this issue.

I follow the expo example of how to load fonts using loadFontAsync(), and when I pass these fonts to my own ponents using the style prop fontFamily: 'Rubik-Regular the font works so I know it is not an issue of the font not existing.

As I am new to react-native-paper, I think my issue is with my fontConfig or configureFonts(). Any help or direction would be greatly appreciated.

import React from 'react';
import { Provider as ReduxProvider } from 'react-redux'
import configureStore from './store'
]import { configureFonts, DefaultTheme, Provider as PaperProvider } from 'react-native-paper'
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import AppNavigator from './ponents/AppNavigator'

const store = configureStore();

const fontConfig = {
    default: {
        regular: {
            fontFamily: 'Rubik-Regular',
            fontWeight: 'normal',
        },
        medium: {
            fontFamily: 'Rubik-Black',
            fontWeight: 'normal',
        },
        light: {
            fontFamily: 'Rubik-Light',
            fontWeight: 'normal',
        },
        thin: {
            fontFamily: 'Rubik-LightItalic',
            fontWeight: 'normal',
        },
    },
};

let customFonts = {
    'Rubik-Regular': require('./assets/fonts/Rubik-Regular.ttf'),
    'Rubik-Black': require('./assets/fonts/Rubik-Black.ttf'),
    'Rubik-Light': require('./assets/fonts/Rubik-Light.ttf'),
    'Rubik-LightItalic': require('./assets/fonts/Rubik-LightItalic.ttf'),
}


const theme = {
    ...DefaultTheme,
    roundness: 30,
    fonts: configureFonts(fontConfig),
    colors: {
        ...DefaultTheme.colors,
        primary: '#0d80d6',
        accent: '#E68FAE',
        background: '#C6E1F2',
    },
}

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            fontsLoaded: false,
        };
    }

    async loadFontsAsync() {
        await Font.loadAsync(customFonts);
        this.setState({ fontsLoaded: true });
    }

    ponentDidMount() {
        this.loadFontsAsync();
    }

    render() {
        if (this.state.fontsLoaded) {
         return (
                <ReduxProvider store={store}>
                    <PaperProvider theme={theme}>
                        <AppNavigator/>
                    </PaperProvider>
                </ReduxProvider>
            );
        }
        else {
            return <AppLoading/>;
        }
    }
}

I am using react-native 0.63.3 and Expo.

• javascript
• reactjs
• react-native
• fonts
• react-native-paper

Share Follow edited Oct 25, 2020 at 0:22 Meisam Sabaghi 82622 gold badges99 silver badges2525 bronze badges asked Oct 24, 2020 at 1:40 Griffin ReichertGriffin Reichert 6311 silver badge66 bronze badges 1

• I have looked at this post on Loading custom fonts in react native as well as this one on fonts not working in react-native-paper – Griffin Reichert Commented Oct 24, 2020 at 1:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I know this is from a while ago but I ran into the same problem today and found this related issue in their repository on GitHub: https://github./callstack/react-native-paper/issues/1502#issuement-576534682

TL;DR the solution is you have to specify fontConfig.ios and probably fontConfig.android for it to work, instead of just having fontConfig.default.

for your case, you can probably adapt to something like

const _fontConfig = {
        regular: {
            fontFamily: 'Rubik-Regular',
            fontWeight: 'normal',
        },
        medium: {
            fontFamily: 'Rubik-Black',
            fontWeight: 'normal',
        },
        light: {
            fontFamily: 'Rubik-Light',
            fontWeight: 'normal',
        },
        thin: {
            fontFamily: 'Rubik-LightItalic',
            fontWeight: 'normal',
        },
};

const fontConfig = {
    ios: _fontConfig,
    android: _fontConfig,
};