Font Family cannot be recognised in theme #3305
Description
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',
},
});