The best and easiest way to add a custom theme to Expo app with Expo Router (V3) and NativeWind (V4)

In this video I show you what is the best and easiest way to add a custom theme (light, dark and system) to your Expo application. We take advantage of React Navigation theme as well as options provided by NativeWind to easily apply styles based on the selected theme to different elements in a React Native application.

Link to GitHub Code: https://github.com/AkbarBakhshi/RN-Jo...
Expo Color Themes: https://docs.expo.dev/develop/user-in...
React Navigation Themes: https://reactnavigation.org/docs/themes/
React Native Elements: https://reactnativeelements.com/docs/...
NativeWind Themes: https://www.nativewind.dev/v4/guides/...
AsyncStorage: https://docs.expo.dev/versions/latest...
Laggy color scheme switching: https://github.com/marklawlor/nativew...

Video Timestamps:
00:00 Introduction
01:08 Expo Color Themes
04:22 React Navigation Themes
14:41 Allow Users to Change Themes
23:57 NativeWind Variables for Theming
36:34 AsyncStorage to Store User Theme Preference
45:06 Recap and Outro