react native paper custom font weight not working

Question

I am trying to install custom fonts to a react native paper theme. Looked at the example mentioned on https://github.com/callstack/react-native-paper/issues/3325 on the snack expo https://snack.expo.dev/@react-native-paper/font-styles-variants

i have implemented the below code after which the components picks up the fontFamily but the fontWeight does not change unless I specify the font family in the StyleSheet.

Can someone suggest what is wrong here.

import React from 'react';
import Toast, { BaseToast } from 'react-native-toast-message';
import { McIcon } from '@repo/mobile-ui';
import { Provider as PaperProvider, configureFonts } from 'react-native-paper';

import { Text } from 'react-native';
import { ThemeStatus, srgb } from '@repo/shared/utils';
import { DefaultTheme } from 'react-native-paper';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import AppNavigationShell from '../navigation/AppNavgationShell';
import { useFonts } from 'expo-font';

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    
  },
};



export const App = () => {
  const [fontsLoaded] = useFonts({
    nsr: require('../../assets/fonts/NunitoSans_10pt-Regular.ttf'),
    nsrBold: require('../../assets/fonts/NunitoSans_10pt-Bold.ttf'),
    nsrItalic: require('../../assets/fonts/NunitoSans_10pt-Italic.ttf'),
    nsrBoldItalic: require('../../assets/fonts/NunitoSans_10pt-BoldItalic.ttf'),
  });

  const baseFont = {
    fontFamily: 'nsr',
  } as const;

  const baseVariants = configureFonts({ config: baseFont });
  const customVariants = {
    displayMedium: {
      ...baseVariants.displayMedium,
      fontFamily: 'nsr',
      fontWeight: 'normal',
    },

    bold: {
      ...baseVariants.bodyMedium,
      fontFamily: 'nsrBold',
      fontWeight: 'bold',
    },
    italic: {
      ...baseVariants.bodyMedium,
      fontFamily: 'nsrItalic',
      fontWeight: 'normal',
    },
    boldItalic: {
      ...baseVariants.bodyMedium,
      fontFamily: 'nsrBoldItalic',
      fontWeight: 'bold',
    },
  } as const;

  const mergedFonts = configureFonts({
    config: {
      ...baseVariants,
      ...customVariants,
    },
  });

  if (!fontsLoaded) {
    return <Text>Loading...</Text>;
  }
  return (
    <PaperProvider theme={{ ...theme, fonts: mergedFonts }}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <AppNavigationShell />
        <Toast config={toastConfig} />
      </GestureHandlerRootView>
    </PaperProvider>
  );
};

export default App;

Answer 1

I cried a lot when doing these font related stuff too. The problem in your code is that, the font you are importing is single weight font :

nsr: require('../../assets/fonts/NunitoSans_10pt-Regular.ttf'),

This NunitoSans_10pt-Regular.ttf is a regular weight font, so if you set font weight differently, it won't take any effect. So what I did was :

You will have 2 conditions -

Either the text will have constant weight, or variable weight. For constant weight, you can just define fontFamily like nsrBold or nsr according to your fontWeight need. For variable fonts, you can have :

fontFamily: weight == 'bold' ? 'nsr' + 'Bold' :
                weight == 'regular' ? 'nsr':
                   'nsrItalic'

where weight is a useState or variable which defines condition weather text will be bold or regular or whatever you want ( you can add more conditions according to your need )

Don't worry about performance, I have a note app where I used it, and even with 50+ Notes with Title and Content Texts with different fonts and weight, it dosen't lag at all.

That's the way it worked for me, believe me, I spent lot of time figuring out simpler way, but I found nothing. Just use it for now. Hope this works !

( Tip : It can be even better if you would just define a fontFamily variable itself, and change it whenever you want to change fontFamily or fontWeight, for example if my current font is NotoSans-Regular and I wanna make it NotoSans-Bold, if will change setFontFamily('NotoSans-Bold'), So like changing whole font-family instead of having separate variable for Weight )