Font not passing to components

[griffreichert]

I have tried following the docs and a bunch of posts, but I cannot get my fonts to format any react-native-paper components. I follow the expo example of how to load fonts using loadFontAsync(), and when I pass these fonts to my own components using the style prop fontFamily: 'Rubik-Regular' the font works so I know it is not an issue of the font not existing.

I am using expo 39.0.3, react-native 0.63.3, react-native-paper 4.2.0, and react-native-vector-icons 7.1.0.

Any ideas on how to go about making this font work 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 './components/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',
        },
    },
};

const myTheme = {
    dark: false,
    roundness: 30,
    fonts: configureFonts(fontConfig),
    colors: {
        ...DefaultTheme.colors,
        primary: '#0d80d6',
        accent: '#E68FAE',
        background: '#C6E1F2',
    },
    animation: {
        scale: 1.0,
    },
}

export default class App extends React.Component {
    render() {
        return (
            <ReduxProvider store={store}>
                <PaperProvider theme={myTheme}>
                    <AppNavigator />
                </PaperProvider>
            </ReduxProvider>
        );
    }
}

[github-actions]

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

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

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

[RichardLindhout]

Can you make a reproduction in snack.expo.io? What is the result if you log the theme?

import {useTheme} from 'react-native-paper'
const theme = useTheme()
console.log({ theme })

[shadforth]

I also ran into this issue recently whilst testing in an iOS simulator.

Sharing my workaround below - I had to explicitly set the fontConfig objects for ios and android.

import {
  DefaultTheme as PaperDefaultTheme,
  Provider as PaperProvider,
  configureFonts,
} from "react-native-paper";
import {
  useFonts,
  Nunito_200ExtraLight as NunitoExtraLight,
  Nunito_300Light as NunitoLight,
  Nunito_400Regular as NunitoRegular,
  Nunito_600SemiBold as NunitoSemiBold,
  Nunito_800ExtraBold as NunitoBold,
} from "@expo-google-fonts/nunito";

const fontConfig = {
  default: {
    regular: { fontFamily: "NunitoRegular" },
    medium: { fontFamily: "NunitoSemiBold" },
    light: { fontFamily: "NunitoLight" },
    thin: { fontFamily: "NunitoExtraLight" },
  },
  android: {
    regular: { fontFamily: "NunitoRegular" },
    medium: { fontFamily: "NunitoSemiBold" },
    light: { fontFamily: "NunitoLight" },
    thin: { fontFamily: "NunitoExtraLight" },
  },
  ios: {
    regular: { fontFamily: "NunitoRegular" },
    medium: { fontFamily: "NunitoSemiBold" },
    light: { fontFamily: "NunitoLight" },
    thin: { fontFamily: "NunitoExtraLight" },
  },
};

const CombinedDefaultTheme = {
  ...PaperDefaultTheme,
  colors: {
    ...NavigationDefaultTheme.colors,
  },
  fonts: configureFonts(fontConfig),
};

It appears the default configuration is not passing through to the other platform-specific configurations?

[RichardLindhout]

This is my config.

import { Platform } from 'react-native';

const fonts = Platform.select<any>({
  web: {
    regular: {
      fontFamily: 'Montserrat',
      fontWeight: '500',
    },
    medium: {
      fontFamily: 'Montserrat',
      fontWeight: '600',
    },
    light: {
      fontFamily: 'Montserrat',
      fontWeight: '400',
    },
    thin: {
      fontFamily: 'Montserrat',
      fontWeight: '400',
    },
  },
  ios: {
    regular: {
      fontFamily: 'Montserrat',
      fontWeight: '500',
    },
    medium: {
      fontFamily: 'Montserrat',
      fontWeight: '600',
    },
    light: {
      fontFamily: 'Montserrat',
      fontWeight: '400',
    },
    thin: {
      fontFamily: 'Montserrat',
      fontWeight: '100',
    },
  },
  default: {
    regular: {
      fontFamily: 'Montserrat-Medium',
      fontWeight: 'normal',
    },
    medium: {
      fontFamily: 'Montserrat-SemiBold',
      fontWeight: 'normal',
    },
    light: {
      fontFamily: 'Montserrat-Regular',
      fontWeight: 'normal',
    },
    thin: {
      fontFamily: 'Montserrat-Thin',
      fontWeight: 'normal',
    },
  },
});

export default fonts;

[Trancever]

@griffinreichert22 Sorry for that confusion. You need to pass fonts for android, ios, web explicitly to the configureFonts function to make it work as expected. We are aware of that unfortunate naming of the default key and we will try to fix it in the next major version.

[Trancever]

As an intermediate solution, we are happy to merge a PR to our documentation that explains how this function work. Would be awesome if you could submit such a PR 🙏

[shadforth]

@Trancever opened a PR with updated docs, here: #2437 😃