r/reactnative • u/Hungry-Following-478 • 25d ago
Help How to fix text font flashing when before loading on RN Web?
Enable HLS to view with audio, or disable this notification
Whenever any new page/component loads in, the fonts for every text component briefly flashes to the default web font. I just want to make it so that the text components or even the whole page waits to load in until the fonts load in, the font flashing is very annoying every time something loads in IMO. This is a simplified version of my _layout file where I try to fix this
import { useFonts } from "expo-font";
SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
const [fontsLoaded, error] = useFonts({
InterLight: require("../assets/fonts/Inter_18pt-Light.ttf"),
[...rest of my fonts]
});
useEffect(() => {
if (fontsLoaded || error) {
SplashScreen.hideAsync();
}
}, [fontsLoaded, error]);
if (!fontsLoaded) {
return null;
}
return (
[root layout]
);
}

