Font Family cannot be recognised in theme

[DavidZhongSyd]

Version: "react-native": "0.68.2", "react-native-paper": "5.0.0-rc.3", "react-native-vector-icons": "^9.2.0",

Problem: the fontFamily in the <Text variant="displayLarge" theme={{ typescale: { displayLarge: { fontSize: 30, fontFamily: 'HelveticaNeue-Thin' },},}}> does not take effect while the <Text style={theme.fonts.thin}> does works as expected.

https://snack.expo.dev/@wztrustgrid/fontfamilyintheme

import { StyleSheet, View } from 'react-native';
import {
  configureFonts,
  Provider as PaperProvider,
  MD3LightTheme as DefaultTheme,
  Text,
} from 'react-native-paper';

const fontConfig = {
  web: {
    thin: {
      fontFamily: 'HelveticaNeue-Thin',
      fontSize: 30,
    },
  },
  ios: {
    thin: {
      fontFamily: 'HelveticaNeue-Thin',
      fontSize: 30,
    },
  },
  android: {
    thin: {
      fontFamily: 'HelveticaNeue-Thin',
      fontSize: 30,
    },
  },
};

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

export default function App() {
  return (
    <PaperProvider
      theme={theme}
    >
      <View style={styles.container}>
        {/* Display correct font */}
        <Text style={theme.fonts.thin}>
          ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 1234567890
        </Text>

        {/* Display incorrect font */}
        <Text
          variant="displayLarge"
          theme={{
            typescale: {
              displayLarge: { fontSize: 30, fontFamily: 'HelveticaNeue-Thin' },
            },
          }}
        >
          ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 1234567890
        </Text>
      </View>
    </PaperProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

});

[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.

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.68.2, latest: 0.69.4)
• react-native-paper (found: 5.0.0-rc.3, latest: 4.12.4)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[lukewalczak]

Hey @DavidZhongSyd, could you please check if it doesn't work on both mobile platforms or only on iOS?

[DavidZhongSyd]

Please see the snack expo

https://snack.expo.dev/@wztrustgrid/fontfamilyintheme

[DavidZhongSyd]

Hi @lukewalczak, the font difference are obvious in Web and IOS. The first line is in HelveticaNeue-Thin. The second line is wrong font

However, in android, the fonts in both lines are all wrong.

[DavidZhongSyd]

@lukewalczak, why the fontFamily only apply in android?

in react-native-paper source code src/component/Typography/Text.tsx (Line 102)

            ...(Platform.OS === 'android' && { fontFamily }),
            fontSize,
            fontWeight,
            lineHeight,
            letterSpacing,
            color: theme.colors.onSurface,
          },

[bombillazo]

I'm trying out V5 as well and the Components are riddled with this type of conditionals (in addition to that weird conditional to only apply custom fonts on android):

const font = !isV3 ? theme.fonts.regular : {};
...(!isV3 && theme.fonts.regular),

So all TextInputs that don't directly use RNP Text component will also not be using custom fonts.

I believe the simplest solution is to keep the M2 fonts prop available for use to override the theme-wide font family since at the moment for V5, custom fonts are only being applied to the Text component with variant classes.

[lukewalczak]

I will be investigating that issue in the nearest future, and will update you here about the result.

[bombillazo]

Thanks Luke!

AppBarContent seems to be doing something more sensible, leveraging the existing variants:

 ...(isV3
    ? theme.typescale[variant]
    : Platform.OS === 'ios'
    ? theme.fonts.regular
    : theme.fonts.medium),
},

So potentially those conditionals could do:

...(theme.isV3 ? theme.typescale.bodyMedium : theme.fonts.regular),

[lukewalczak]

Provided a PR which hopefully will fix that issue: https://github.com/callstack/react-native-paper/pull/3351