In this video, we see how Expo Google Fonts can be added to your React Native Application. We show a splash screen (dark or light based on the app theme) while fonts are being loaded, and also, we see how app icons can be added to your application.
GitHub repo: https://github.com/AkbarBakhshi/RN-Journey/tree/Features/Splash_Icon_Fonts
Useful links:
Expo Splash Screen: https://docs.expo.dev/develop/user-interface/splash-screen/
Expo Google Fonts: https://docs.expo.dev/develop/user-interface/fonts/#use-a-google-font
Splash Screen and font loading: https://docs.expo.dev/router/appearance/
GitHub issue for Splash Screen white flash: https://github.com/expo/router/issues/726#issuecomment-1635313859
Video timeline:
00:00 Intro
01:19 Expo Splash Screen Docs
04:45 Adding Splash Screen and Icon Files
06:01 Update app.json File
09:14 Adding Expo Google Fonts
12:06 Display Splash Screen While Fonts Load
17:00 Development Builds for iOS and Android
19:07 Testing iOS Simulator (light and dark modes)
21:21 Creating a Custom Text Component with a Google Font Applied
25:11 Testing Android (light mode)
26:19 Problem with Dark Theme on Android and How to Resolve it
28:59 Outro