React Native Common DatePicker for Android and iOS Example Tutorial

DatePicker dialog is used to pick date in Android and iOS applications. By default react native has two different DatePicker component 1st one is DatePickerIOS and 2nd is DatePickerAndroid, but it is very difficult to configure two component for single task. So after finding a lot on Internet finally i found an immersive library called as react-native-datepicker-dialog . This library comes with an awesome functionality that using a single code developers can create DatePicker for both android and iOS applications. So let’s get started .

Contents in this project React Native Common DatePicker for Android and iOS tutorial :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add react-native-datepicker-dialog library inside your project :

Open Your project in command prompt and execute below command inside your project’s folder.

3. After successfully installed the react-native-datepicker-dialog library we need to install another library known as moment. To install the moment library inside your project execute the below command in project’s folder.

4. Import AppRegistry, StyleSheet, Text, View, TouchableOpacity in your project.

5. Import DatePickerDialog and moment .

6. Create constructor in your main class with props and define two variables DateText and DateHolder using state.

DateText : is used to show date on screen using Text component.

DateHolder : is used to get date from DatePicker dialog.

7. Create a function named as DatePickerMainFunctionCall() . This function would call on Text box onPress event.

8. Create another function named as onDatePickedFunction() with date argument inside it. This function would call after the DatePickerMainFunctionCall(). Using this function we would set the pick date in Text component.

9. Create a Parent View in render’s return block and add Text Component inside it to show the Application name, After that Create a TouchableOpacity component and call the DatePickerMainFunctionCall on the onPress of TouchableOpacity. Now make a View inside the TouchableOpacity and create another Text component inside it, Which would show us the selected date.

10. Create CSS Style sheet for all views.

11. Now call the AppRegistry .

12. Complete source code for index.android.js / index.ios.js file

 

Screenshot in Android device :


Screenshot in iOS device :

DatePicker