2

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 = {
  ios: {
    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',
  },

});

DavidZ
  • 41
  • 5
  • did you find an answer for this – Abdulmalek Aug 28 '22 at 10:59
  • For version 5 (MD3Theme) you need to use `typescale` instead of `fonts`, but even then, I am still getting this problem of typography fonts not being applied :( – Umair Sep 01 '22 at 15:36
  • I see you already made an issue for it :) https://github.com/callstack/react-native-paper/issues/3305 – Umair Sep 01 '22 at 15:40

0 Answers0