I have authentication working with Amplify and withAutenticator using react native and Typescript. Followed the tutorial to override style and it's working but when i add font family it doesn't change and i didn't understand why. any help would be appreciated.https://github.com/aws-amplify/amplify-js/blob/main/packages/aws-amplify-react-native/src/AmplifyTheme.ts
this is my App.tsx
import * as React from 'react';import Amplify, {Auth} from 'aws-amplify'import awsconfig from './src/aws-exports'import Async from "react-async"import {ThemeProvider} from '@mui/material/styles';import {View, Platform, Text} from 'react-native';import {withAuthenticator, AmplifyTheme} from 'aws-amplify-react-native';import Tab from '@mui/material/Tab'import Tabs from '@mui/material/Tabs'import {Box} from "@mui/material";import {clientInstance} from "./src/client";import AppLoading from 'expo-app-loading';import {fetchFonts, rootMUITheme, rootStylesheet} from "./src/style";// avoid this issue https://github.com/aws-amplify/amplify-js/issues/5918const config = awsconfigconfig['Analytics'] = {disabled: true}Amplify.configure(config)const getUnits = async () => { const client = await clientInstance() return await client.listUnits({})}const App = () => { const [fontLoaded, setFontLoaded] = React.useState(false) const [value, setValue] = React.useState(0); function tabProps(index: number) { return { id: `tab-${index}`,'aria-controls': `tab-${index}`, } } const signOut = async () => { try { await Auth.signOut(); } catch (error) { console.log('error signing out: ', error); } } const handleChange = (event: React.SyntheticEvent, newValue: number) => { setValue(newValue); } if (!fontLoaded) { return (<AppLoading startAsync={fetchFonts} onFinish={() => setFontLoaded(true)} onError={console.log} /> ) } return (<Async promiseFn={getUnits}> {({data, error, isPending}) => { if (isPending) return "Loading..." if (error) return `Error ${error.message}` if (data) { console.log(data); return (<ThemeProvider theme={rootMUITheme}><View style={rootStylesheet.container}><Box sx={{ width: "100%" }}><Box sx={{ borderBottom: 1, borderColor: "divider" }}><Tabs value={value} onChange={handleChange} aria-label="tabs"><Tab label="Dashboard" {...tabProps(0)} /><Tab label="Crop Management" {...tabProps(1)} /><Tab label="Sign out" onClick={signOut} /></Tabs></Box></Box></View></ThemeProvider> ) } return null; }}</Async> )}const signUpConfig = { usernameAttributes: 'email', hiddenDefaults:['username'], signUpFields: [ { label:"Email", key:"email", required: true, displayOrder: 1, type: 'email', custom: false }, { label:"Username", key:"name", required: true, displayOrder: 2, type: 'email', custom: false }, { label:"Family Name", key:"family_name", required: true, displayOrder: 3, type: 'string', custom: false }, { label:"Password", key:"password", required: true, displayOrder: 4, type: 'password', custom: false }, { label:"Phone Number", key:"phone_number", required: true, displayOrder: 5, type: 'string', custom: false }, ] }; const button = Object.assign({}, AmplifyTheme.button, { backgroundColor: "#43B02A", alignItems: "center", padding: 16, }); const buttonDisabled = Object.assign({}, AmplifyTheme.buttonDisabled, { backgroundColor: "#97D700", alignItems: "center", padding: 16, }); const picker = Object.assign({}, AmplifyTheme.picker, { flex: 1, height: 50, minWidth: Platform.OS === "android" ? 16 : 0, }); const buttonText = Object.assign({}, AmplifyTheme.buttonText, { color: '#fff', fontSize: 14, fontWeight: '600', fontFamily: 'montserrat-regular', }); const inputLabel = Object.assign({}, AmplifyTheme.inputLabel, { marginBottom: 8, fontFamily: 'montserrat-regular', }); const input = Object.assign({}, AmplifyTheme.input, { padding: 16, borderWidth: 1, borderRadius: 3, borderColor: '#C4C4C4', color: "#000000", fontFamily: 'montserrat-regular', }); const sectionHeaderText = Object.assign({}, AmplifyTheme.sectionHeaderText, { width: '100%', marginBottom: 32, paddingTop: 20, fontFamily: "montserrat-bold", }); const container = Object.assign({}, AmplifyTheme.container, { flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'space-around', paddingTop: 20, width: '100%', backgroundColor: '#FFF', fontFamily: 'montserrat-bold', }); const MyTheme = Object.assign({}, AmplifyTheme, { button: button, buttonDisabled: buttonDisabled, picker: picker, buttonText:buttonText, inputLabel: inputLabel, input: input, sectionHeaderText: sectionHeaderText, container: container }); export default withAuthenticator(App, {signUpConfig}, [], null, MyTheme);this is my src/style.ts
import * as Font from "expo-font";import {createTheme} from "@mui/material/styles";import {StyleSheet} from "react-native";/** * See https://docs.expo.dev/versions/latest/sdk/font/ */export const fetchFonts = () => { return Font.loadAsync({'montserrat-regular': require('../assets/Montserrat-Regular.ttf'),'montserrat-bold': require('../assets/Montserrat-Bold.ttf'),'gotham-rounded-medium': require('../assets/GothamRounded-Medium.otf') });};/** * Create the material design theme * See https://mui.com/material-ui/customization/theming/ */export const rootMUITheme = createTheme({ typography: { fontFamily: ['montserrat-regular', 'Roboto'].join(',') }, palette: { primary: { // primary green main: '#43B02A' }, secondary: { // secondary gray main: '#8D8D8F', }, },});/** * Create the root app stylesheet */export const rootStylesheet = StyleSheet.create({ container: { fontFamily: 'montserrat-regular', flex: 1, backgroundColor: '#fff' },});In assets i have all font family i need so the path is correct i think and this is my final result so far (screenshot)
when i inspect i see a font-family montserrat bold but it doesn't look like montserrat bol so it's not working for example in the header