Official Way to Use Custom Font with Expo

[karrettgelley]

What is the official way to use a custom font in an expo project, in terms of the theme?

I noticed that the rnp documentation and the xpo documentation have very different instructions on how to implement a custom font, and I'm just wondering what the best practices are.

I have found some success with the following code:

import React from 'react';
import { AppLoading } from 'expo';
import { useFonts, Inter_900Black } from '@expo-google-fonts/inter';
import RootStack from '../navigation/RootStack';
import { DefaultTheme, configureFonts } from 'react-native-paper';
import { Provider as PaperProvider } from 'react-native-paper';

const AppWithTheme: React.FC<{}> = () => {
  let [fontsLoaded] = useFonts({
    Inter_900Black,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    const fontConfig = {
      default: {
        regular: {
          fontFamily: 'Inter_900Black',
          fontWeight: '900' as '900',
        },
        medium: {
          fontFamily: 'Inter_900Black',
          fontWeight: '900' as '900',
        },
        light: {
          fontFamily: 'Inter_900Black',
          fontWeight: '900' as '900',
        },
        thin: {
          fontFamily: 'Inter_900Black',
          fontWeight: '900' as '900',
        },
      },
    };
    // @ts-ignore
    fontConfig.ios = fontConfig.default;
    // @ts-ignore
    fontConfig.android = fontConfig.default;

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

    return (
      <PaperProvider theme={theme}>
        <MyComponent />
      </PaperProvider>
    );
  }
};

export default AppWithTheme;

But something tells me that it's inefficient. I guess what I'm really curious about is how configureFonts() works and what a typical implementation looks like in an expo project. If anyone could enlighten me that'd be great

expo version: 37.0.3
react-native-paper version: 3.10.1

EDIT: Added expo and rnp version

[github-actions]

Found the following packages mentioned in the issue, but couldn't find version numbers for them:

• expo

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

[tevonsb]

+1 to this, would love to use Google Fonts through Expo along with RNP. Is the above method the right way to go about it?

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on 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 the issue.

[Sbrjt]

Another way:

import { Poppins_400Regular, Poppins_700Bold, useFonts } from '@expo-google-fonts/poppins'
import { configureFonts, MD3LightTheme, Provider, Text } from 'react-native-paper'

const theme = {
  ...MD3LightTheme,
  fonts: configureFonts({
    config: {
      fontFamily: 'Poppins_400Regular',
      fontSize: 80
    }
  })
}

function App() {
  const [fontsLoaded] = useFonts({
    Poppins_400Regular,
    Poppins_700Bold
  })

  if (!fontsLoaded) return

  return (
    <Provider theme={theme}>
      <Text>Default text</Text>
      <Text style={{ fontFamily: 'Poppins_700Bold' }}>Bold text</Text>
    </Provider>
  )
}

export default App

Docs (See the last eg.)