Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 3.0.3.7 release ready!
Deniel Kerr
Founder. Opencart
Top Partners
In this blog, We are going to implement the dark mode in our react native application. First of all, we have to know the benefits of this Dark mode.
Dark Mode is a very commonly used feature that most commonly used and famous applications have support for dark mode now. iOS and Android added dark mode support to their platforms within the last year, which means that it’s easier than ever to support this feature in your app. It is a great way to enhance the user experience for a mobile app.
So in this blog, we are going to create a demo application that contains a <text> and a <Switch> and some other custom components. We can change the app theme by just switching the Switch to enable or disable dark mode.
So Let’s get started.
10.x.x
npm
yarn
0.60.x
Firstly, We are going to create a new product. You can skip the creation of a project if you already created it.
Open a terminal window and run the above command you can create a new react-native project. In my case, I have named my project “DarkModeDemo” you can change it as per your requirement.
After this, we need to make some changes to our native code.
For Android devices, there is no specific command to bind the native binaries. It is a two-step process.
First, open android/app/src/main/AndroidManifest.xml and add a uiMode flag.
android/app/src/main/AndroidManifest.xml
uiMode
After this, we need to import some third-party libraries by using below mentioned commands.
Open the terminal window and install the react-native-appearance library.
react-native-appearance
or
Now, go back to the terminal window and install the styled-components library.
styled-components
Now our all configuration gets completed.
Firstly we create Two theme classes that will hold our theme are following.
2. light.js
Now we have to create our theme manager class that will be responsible for entire changes.
ThemeManager.js :
I know the code is a little bit complicated for beginners but no issue you will understand this code very soon because my next blog will be on react hooks that we used in this class. I will mention the blog link soon in the description.
Here is our last class App.js :
One thing I have to tell you is that I have placed all those classes in the root path because many of my readers ask me for the files because they don’t get the file at the imported path so I have put all the files on the same path (Root).
Here we got the result :
I hope this blog will help you to implement the dark mode feature in your react native app.
Your email address will not be published. Required fields are marked*
Name*
Email*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies. Learn more about privacy policy
Name
Email
Subject
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.