TIL: How to use DatePickerAndroid and TimePickerAndroid in React Native?

While working with React Native, I always tried to use built-in components instead of "reinventing" the bicycle.

So today the design mockups for my project required me to write the form for a user to pick up date and time. And I went to the React Native docs page and scrolled down the bar looking what they have to offer, which component I may use. That's how I came across DatePickerAndroid and TimePickerAndroid in API's section.

Even thought docs are quite straight forward, it took we a while to figure out how to properly use it.

Part 1. DatePickerAndroid

Let's start with DatePickerAndroid: first thing we need to do is to write "onPress" type of the function. Important step is to declare is as "async" function, otherwise you will get an annoying "await is a reserved word" error message.


Another important step that I forgot about was to import DatePickerAndroid from 'react-native' package.

In this case I have assigned data to directly to the state, if you would like to do the same DO NOT forget to add ".bind(this)", when you are calling your function: "random.datePicker.bind(this)".

You can use this function on any element that supports "onPress" property.

Another big challenge is styling DatePickerAndroid. Currently it cannot be done directly through React Native, but we can mess up a little bit with Android code:
"<project>\android\app\src\main\res\values\styles.xml" file in your React Native project.

Let's change the color scheme of the component!

If you want to use the dark theme simply change Theme.AppCompat.Light.NoActionBar to Theme.AppCompat and Theme.AppCompat.Light.Dialog to Theme.AppCompat.

Final result:

Part 2. TimePickerAndroid

TimePickerAndroid is similar to DatePickerAndroid, so once you figured out how to use one of them, you know how to use both:

As you can see even code and strategy how we are going to use it are the same, timePicker may be used as "onPress" function as well.

Even styling would be similar:

And if you want to have a darker theme you would have to perform all the same modifications as with DatePickerAndroid.

Final result:

Congratulations! Now you know how to make your form more user-friendly and do less validation!