December 13, 2019
Josh Buchea
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.
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.
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! 😎
