How to implement Dark Mode in React Native App
Introduction
With the last major release of macOS Mojave, we’ve got one breathtaking feature. This is Dark Mode 🌚. And this is a really cool feature. I’m a Macbook user, and it gives me a new user experience. So what’s next, Apple?
The Press Release of iOS 13 we have been announced with the same feature on mobile devices. And being a mobile developer I’m going to ask my colleagues a single question:
Are you ready to support Dark Mode in your App?
In this tutorial, I’ll tell you How to implement Dark mode in your React Native App in the quickest way.
Let’s say we have an example app with following Home screen:
Which is styled with the following styles created within StyleSheet:
And also rendered inside Application Root:
Now we should only modify toggleTheme. What we are going to do here is to modify container, text and both buttons to use colors provided by light or dark theme. Of course, we can implement both themes, chose some pretty colors, implement a theme switching functionality and finally modify our StyleSheetobject.
But what if I say that you don’t need to do anything of this?
Have you ever heard of UI Kitten? UI Kitten is a framework of UI components powered by Eva Design System. This library provides you a really easy-to-use API for this feature. In a few words, the key feature of using it is that it is bundled with both Light and Dark themes and we can switch theme in the runtime.
Here are the simple steps we need to take.
Step 1: Install UI Kitten and Eva Design System
npm i react-native-ui-kitten @eva-design/evaStep 2: Wrap Application Root into ApplicationProvider
What we have done here is that we simply imported ApplicationProvider component, Design System configuration, and a theme. We’re going to use the light theme by default.
Step 3: Use UI Kitten components
Now we’re going to replace components rendered on a Home screen with similar components provided by UI Kitten. Don’t worry, we don’t need to follow any migration steps.
Why do we need this? That’s because UI Kitten components support theming out of the box!
This means we also can remove StyleSheetstyling
Step 4: Switch theme
Next step — modify toggleTheme function:
The snippet above demonstrates the simplest way of how we can use both light and dark themes and swap them when needed. To do that — we import both light and dark themes and set them into a themes object. Then — we pass the name of the initial theme into theuseState hook. This will allow us saving the current theme in the application state. And when toggleTheme is called — we call thesetTheme function returned from that hook to apply a dark or light theme depending on the current theme. Notice that in this example we don’t store any theme object, but just it’s key.
And that’s it! Following these simple four steps, you can add Dark Mode support into your React Native app.
Conclusion:
- There is no need to write huge boilerplates to support themes in your application. UI Kitten supports it out of the box.
- In a similar way using UI Kitten components you can build an application of any complexity which will also support Dark Mode. Furthermore, you can build your own themes to make your application more branded.
Hope you find it useful and looking forward to your feedback!
Useful Links:
