Step by step guide on how to Change background and text color of Android date time Picker in React Native

In the previous tutorial

Quickly Change background and text color of Android date time Picker in React Native

, we saw how we can quickly change the background color of the date time picker. This tutorial is for a more practical hands-on step by step tutorial on how to achieve the same result.

The full code can be found in this repo

dexiouz/ReactNativeTutuorial

Step 1

This tutorial is based on

The first step is to set up a react native project vis:

$ npx react-native init reactNativeTutorial

Once set up, cd into the project,

$ cd reactNativeTutorial

build and run the project

$ yarn android && yarn start

We will be using react-native-modal-datetime-picker which is based off of @react-native-community/react-native-datetimepicker.

We’ll install it

  # using yarn 
$ yarn add react-native-modal-datetime-picker -native-community/datetimepicker
 # using  npm
$ npm i react-native-modal-datetime-picker -native-community/datetimepicker

Rebuild and run the project.

Now go to your react native project, create a “src” folder. Create another “components” folder inside the src folder, next, insde the components folder create a file and call it “DateTimePicker.js”.

reactNativeTutorial/src/components/DateTimePicker.js

We’ll copy the example implementation from the offficial react-native-modal-datetime-picker docs and paste it inside DateTimePicker.js like so

Go to App.js and paste this code

Reload the App and you should have this on your screen

When you click on the button, you should see the dateTimeModal but with a greenish color.

Step 2

What we want to do is to change that greenish color to blue. To achieve this, go to

/android/app/src/main/res/values/styles.xml

and replace the contents with the following code

Rebuild and start your App with

$ yarn android && yarn start

Check and you should see the color change.

Note

Be careful not to override the other styles that may have been added there by team mates if you’re scaling a project. Such as styles for splash screen which you can find like so

...
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@drawable/background_splash</item>
<item name="android:statusBarColor">@color/white</item>
</style>

If you have such styles, please don’t override them but merge them together like this.

Originally published at https://hashnode.com.