React Native Paper - Font Family not take effect in theme

Viewed 161

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',
  },

});

0 Answers
Related