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.

	'use strict';
	import { DatePickerAndroid } from 'react-native';
	const random = {
	async datePicker(){
	try {
	var today = new Date();
	var afterTomorrow = today.setDate(today.getDate()+2);
	const {action, year, month, day} = await DatePickerAndroid.open({
	date: new Date(),
	minDate: new Date(),
	maxDate: afterTomorrow,
	mode: 'calendar'
	});
	if (action !== DatePickerAndroid.dismissedAction) {
	// Selected year, month (0-11), day
	this.setState({
	this.state.time: day+"/"+month+"/"+year
	});
	}
	} catch ({code, message}) {
	alert('Cannot open date picker: '+message);
	}
	}
	}
	export default random;

view raw random.js hosted with ❤ by GitHub

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!

	<resources>
	<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
	<item name="android:datePickerDialogTheme">@style/Date.Theme</item>
	</style>
	<style name="Date.Theme" parent="Theme.AppCompat.Light.Dialog">
	<item name="colorAccent">#379683</item>
	<item name="android:textColorPrimary">#379683</item>
	</style>
	</resources>

view raw <projectName>\android\app\src\main\res\values\styles.xml hosted with ❤ by GitHub

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:

	'use strict';
	import { TimePickerAndroid, DatePickerAndroid } from 'react-native';
	const random = {
	async timePicker(){
	const TimePickerModule = require('NativeModules').TimePickerAndroid;
	try {
	const {action, hour, minute} = await TimePickerAndroid.open({
	hour: 14,
	minute: 0,
	is24Hour: false, // Will display '2 PM'
	});
	if (action !== TimePickerAndroid.dismissedAction) {
	// Selected hour (0-23), minute (0-59)
	//Applying extra 0 before the hour/minute for better visibility
	// 9 minutes => 09 minutes
	var m=(minute<10)?"0"+minute:minute;
	var h=(hour<10)?"0"+hour:hour;
	this.setState({ time:h+":"+m})
	}
	} catch ({code, message}) {
	alert('Cannot open time picker'+message);
	}
	}
	}
	export default random;

view raw random.js hosted with ❤ by GitHub

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:

	<resources>
	<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
	<item name="android:timePickerDialogTheme">@style/Time.Theme</item>
	</style>
	<style name="Time.Theme" parent="Theme.AppCompat.Light.Dialog">
	<item name="colorAccent">#379683</item>
	<item name="android:textColorPrimary">#379683</item>
	</style>
	</resources>

view raw <projectName>\MeetHub\android\app\src\main\res\values\styles.xml hosted with ❤ by GitHub

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!