Android datepicker mode configurations added

Summary:
Currently, The **DatePickerAndroid** component opens the native date picker with default mode. We can't able to change the mode via configurations. To support android **[date-picker mode](https://developer.android.com/reference/android/widget/DatePicker.html)**, existing component needs to be changed.

**For Android >= 5.0**, The DatePickerDialog doesn't provide the default method to change the mode of a date picker.  So I have added custom theme which will support two kinds of **mode('spinner','calendar')** ref:https://developer.android.com/reference/android/R.attr.html#datePickerStyle.

**For Android < 5.0,** The DatePickerDialog provides the default method to change the mode of a date picker. ref:https://developer.android.com/reference/android/widget/DatePicker.html#setCalendarViewShown(boolean).

With the help of **Build.VERSION.SDK_INT** I have done the above functionality with limited lines of code changes and also I have added the example to UIExplorer.

Closes react/react-native#10932

Differential Revision: D4176089

Pulled By: ericvicenti

fbshipit-source-id: 7dfa9101214501ac2124bda7ee273a538f04e7cf

Author: pandiaraj44

UIExplorer/js/DatePickerAndroidExample.js

@@ -40,6 +40,9 @@ class DatePickerAndroidExample extends React.Component {
     presetDate: new Date(2020, 4, 5),
     allDate: new Date(2020, 4, 5),
     simpleText: 'pick a date',
+    spinnerText: 'pick a date',
+    calendarText: 'pick a date',
+    defaultText: 'pick a date',
     minText: 'pick a date, no earlier than today',
     maxText: 'pick a date, no later than today',
     presetText: 'pick a date, preset to 2020/5/5',
@@ -72,6 +75,24 @@ class DatePickerAndroidExample extends React.Component {
             <Text style={styles.text}>{this.state.simpleText}</Text>
           </TouchableWithoutFeedback>
         </UIExplorerBlock>
+        <UIExplorerBlock title="Simple spinner date picker">
+          <TouchableWithoutFeedback
+            onPress={this.showPicker.bind(this, 'spinner', {date: this.state.spinnerDate, mode: 'spinner'})}>
+            <Text style={styles.text}>{this.state.spinnerText}</Text>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Simple calendar date picker">
+          <TouchableWithoutFeedback
+            onPress={this.showPicker.bind(this, 'calendar', {date: this.state.calendarDate, mode: 'calendar'})}>
+            <Text style={styles.text}>{this.state.calendarText}</Text>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Simple default date picker">
+          <TouchableWithoutFeedback
+            onPress={this.showPicker.bind(this, 'default', {date: this.state.defaultDate, mode: 'default'})}>
+            <Text style={styles.text}>{this.state.defaultText}</Text>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
         <UIExplorerBlock title="Date picker with pre-set date">
           <TouchableWithoutFeedback
             onPress={this.showPicker.bind(this, 'preset', {date: this.state.presetDate})}>