Custom Fonts with Expo

[sidnetopia]

Hello,

I'm trying to load my custom fonts via Expo according to their documentation (please see code below).

import * as Font from 'expo-font';

await Font.loadAsync({
    ...Ionicons.font,
    inter: require('../../assets/fonts/Inter-Regular.ttf'),
    'inter-medium': require('../../assets/fonts/Inter-Medium.ttf'),
    'inter-light': require('../../assets/fonts/Inter-Light.ttf'),
    'inter-thin': require('../../assets/fonts/Inter-Thin.ttf'),
});

Then I tried to used it as custom fonts as stated here.

import { Theme } from 'react-native-paper/lib/typescript/types';
import { configureFonts, DarkTheme, DefaultTheme } from 'react-native-paper';

import useColorScheme from 'hooks/useColorScheme';
import Colors from 'constants/Colors';

const fontConfig = {
    web: {
        regular: {
            fontFamily: 'inter',
            fontWeight: 'normal',
        },
        medium: {
            fontFamily: 'inter-medium',
            fontWeight: 'normal',
        },
        light: {
            fontFamily: 'inter-light',
            fontWeight: 'normal',
        },
        thin: {
            fontFamily: 'inter-thin',
            fontWeight: 'normal',
        },
    },
    ios: {
        regular: {
            fontFamily: 'inter',
            fontWeight: 'normal',
        },
        medium: {
            fontFamily: 'inter-medium',
            fontWeight: 'normal',
        },
        light: {
            fontFamily: 'inter-light',
            fontWeight: 'normal',
        },
        thin: {
            fontFamily: 'inter-thin',
            fontWeight: 'normal',
        },
    },
    android: {
        regular: {
            fontFamily: 'inter',
            fontWeight: 'normal',
        },
        medium: {
            fontFamily: 'inter-medium',
            fontWeight: 'normal',
        },
        light: {
            fontFamily: 'inter-light',
            fontWeight: 'normal',
        },
        thin: {
            fontFamily: 'inter-thin',
            fontWeight: 'normal',
        },
    },
};

export function setupTheme(): Theme {
    const colorScheme = useColorScheme();
    let theme = colorScheme === 'dark' ? DarkTheme : DefaultTheme;
    const colors = colorScheme === 'dark' ? Colors.dark : Colors.light;

    theme = {
        ...theme,
        roundness: 5,
        colors: {
            ...theme.colors,
            ...colors,
        },
        fonts: configureFonts(fontConfig),
    };

    return theme;
}

When I tried to load a sample component, the text doesn't show up. As an example, below is a supposed to be text input with email and password placeholders.

I tried loading the fonts as stated in the documentation, with all the react native link and matching of filenames but nothing works out.

What should be my implementation in using custom fonts with React Native Paper and Expo side-by-side?

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[sidnetopia]

Maybe it's because expo project doesn't have this folder (android/app/src/main/assets/fonts)?

[lukewalczak]

The first thing you need is a font file. For the purpose of a working example, we are going to use Inter Black from the free and open source Inter font family by Rasmus Anderson. A common convention in Expo apps is to put your fonts in an ./assets/fonts directory, but you can put them anywhere you like.

Did you follow that part and put fonts into the appropriate directory?

[sidnetopia]

Yes, I followed what's in the documentation but still it doesn't work.

[lukewalczak]

Is it related to the react-native-paper library itself? Are you able to display custom fonts in another component from react-native e.g. Text or TextInput?

[sidnetopia]

Are you able to display custom fonts in another component from react-native e.g. Text or TextInput?

Yes

[lukewalczak]

Could you please share the snack, presenting the issue?

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

[R4Y-R4Y]

i got the same issue but for "react-native-paper": "4.12.4" @lukewalczak there's no documentation that explains how to do the setup for expo apps

[kdowswell]

I'm having issues with an Expo project as well. the PaperProvider using MD3DarkTheme does not change component backgroundColor to dark. Any suggestions on using PaperProvider with custom theming options with Expo project would be greatly appreciated!

[mkhoussid]

There's an example on how to do this properly with Typescript here: https://snack.expo.dev/@react-native-paper/font-styles-variants

[Harsh-Tuwar]

@mkhoussid you are a life saver dude ❤️

[TaylorFoster-Informulate]

@mkhoussid Followed that example and it seemed way too easy (nothing is react native is ever easy), got fonts working perfect. Whats the catch? lol