Zero to Dark Mode in React Native
With the releases of Android 10 and iOS 13, mobile users and developers of these platforms gained a new system-wide feature: dark mode. I prefer dark UIs so I was stoked for this feature! Echobind designer Michael Dang recently outlined some of the advantages of dark theme user interfaces.
For now, the user’s preference for dark mode isn’t available in React Native out-of-the-box ☹️ Although, it appears a new Appearance API providing access to the user’s preference for dark mode should be available in React Native sometime in the future since iOS support has already landed on master.
Fortunately, there are several packages available on npm that provide this functionality 😊 . Two popular packages are react-native-appearance and react-native-dark-mode. I prefer react-native-appearance because I like that it’s maintained by the Expo organization and is officially supported in managed Expo projects.
To detect the user’s preference for dark mode on supported platforms (Android 10+, iOS 13+) just add react-native-appearance to your React Native project, import the useColorScheme hook, and you’re off to the races! 🏇
Let’s look at a minimal example:
The example provided is intentionally minimal. It’s just enough to determine if dark mode is enabled and modify styles accordingly. You may choose to pull the userColorScheme hook into individual components as we’ve shown in the example, or you may wish to take things a step further and integrate dark mode into your app-wide theme. The power is yours, but it’s up to you how you use it. Now go forth and dark mode all the things! 😎
See also:
Contributor’s Bio
Josh lives near Portland, Oregon with his wife and two daughters. He is a Software Engineer at Echobind and has been building software for the last 6 years.
