I am trying to change the default font that my project uses so I dont have to go and specifically add styles font-family to all my components to change the font. But I cannot find and documentation on how to change the default font for whole project.
This is my code and i have set up to load a custom font, but how can i change the font for all the components of my project, I have some components from react-native, some form react-native-paper, i have looked up and tried to change the font of the rnpaper components fonts using paperprovider, and it worked, but i was wondering if i have different components from different libraries is it possible to change all of them without specifically making a custom component, or do i have to use each ones themeprovider and add a custom theme to each one in order to change the whole project's font, or there is one way that will affect all of them?
please provide code example if there is.
app/_layout.ts
...
import { Urbanist_400Regular, useFonts } from "@expo-google-fonts/urbanist";
...
export default function RootLayout() {
const [loaded, error] = useFonts({
Urbanist_400Regular,
});
// Expo Router uses Error Boundaries to catch errors in the navigation tree.
useEffect(() => {
if (error) throw error;
}, [error]);
useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
}
}, [loaded]);
if (!loaded) {
return null;
}
return <RootLayoutNav />;
}
function RootLayoutNav() {
return (
<Stack>
<Stack.Screen name="index" options={{ headerShown: false }} />
<Stack.Screen name="(auth)" options={{ headerShown: false }} />
{/* <Stack.Screen name="(tabs)" options={{ headerShown: false }} /> */}
</Stack>
);
}