diff --git a/Libraries/Components/TimePickerAndroid/TimePickerAndroid.android.js b/Libraries/Components/TimePickerAndroid/TimePickerAndroid.android.js
index e1e3f7550d4823..e837075ded13b4 100644
--- a/Libraries/Components/TimePickerAndroid/TimePickerAndroid.android.js
+++ b/Libraries/Components/TimePickerAndroid/TimePickerAndroid.android.js
@@ -44,6 +44,10 @@ class TimePickerAndroid {
* * `is24Hour` (boolean) - If `true`, the picker uses the 24-hour format. If `false`,
* the picker shows an AM/PM chooser. If undefined, the default for the current locale
* is used.
+ * * `mode` (`enum('clock', 'spinner', 'default')`) - set the time picker mode
+ * - 'clock': Show a time picker in clock mode.
+ * - 'spinner': Show a time picker in spinner mode.
+ * - 'default': Show a default time picker based on Android versions.
*
* Returns a Promise which will be invoked an object containing `action`, `hour` (0-23),
* `minute` (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will
diff --git a/RNTester/js/TimePickerAndroidExample.js b/RNTester/js/TimePickerAndroidExample.js
index a5b243b5ea249a..b16a8d16c7b3e1 100644
--- a/RNTester/js/TimePickerAndroidExample.js
+++ b/RNTester/js/TimePickerAndroidExample.js
@@ -32,6 +32,9 @@ class TimePickerAndroidExample extends React.Component {
presetMinute: 4,
presetText: 'pick a time, default: 4:04AM',
simpleText: 'pick a time',
+ clockText: 'pick a time',
+ spinnerText: 'pick a time',
+ defaultText: 'pick a time',
};
showPicker = async (stateKey, options) => {
@@ -60,6 +63,24 @@ class TimePickerAndroidExample extends React.Component {
{this.state.simpleText}
+
+
+ {this.state.clockText}
+
+
+
+
+ {this.state.spinnerText}
+
+
+
+
+ {this.state.defaultText}
+
+
{this.state.presetText}
-
= Build.VERSION_CODES.LOLLIPOP) {
+ if (mode == TimePickerMode.CLOCK) {
+ dialog = new DismissableTimePickerDialog(
+ activityContext,
+ activityContext.getResources().getIdentifier(
+ "ClockTimePickerDialog",
+ "style",
+ activityContext.getPackageName()
+ ),
+ onTimeSetListener,
+ hour,
+ minute,
+ is24hour
+ );
+ } else if (mode == TimePickerMode.SPINNER) {
+ dialog = new DismissableTimePickerDialog(
+ activityContext,
+ activityContext.getResources().getIdentifier(
+ "SpinnerTimePickerDialog",
+ "style",
+ activityContext.getPackageName()
+ ),
+ onTimeSetListener,
+ hour,
+ minute,
+ is24hour
+ );
+ }
+ }
+ return dialog;
}
@Override
diff --git a/ReactAndroid/src/main/java/com/facebook/react/modules/timepicker/TimePickerDialogModule.java b/ReactAndroid/src/main/java/com/facebook/react/modules/timepicker/TimePickerDialogModule.java
index 6150cf24fa45ee..178d50fd843ee5 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/modules/timepicker/TimePickerDialogModule.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/modules/timepicker/TimePickerDialogModule.java
@@ -9,8 +9,6 @@
package com.facebook.react.modules.timepicker;
-import javax.annotation.Nullable;
-
import android.app.Activity;
import android.app.DialogFragment;
import android.app.FragmentManager;
@@ -31,6 +29,8 @@
import com.facebook.react.common.annotations.VisibleForTesting;
import com.facebook.react.module.annotations.ReactModule;
+import javax.annotation.Nullable;
+
/**
* {@link NativeModule} that allows JS to show a native time picker dialog and get called back when
* the user selects a time.
@@ -46,6 +46,7 @@ public class TimePickerDialogModule extends ReactContextBaseJavaModule {
/* package */ static final String ARG_HOUR = "hour";
/* package */ static final String ARG_MINUTE = "minute";
/* package */ static final String ARG_IS24HOUR = "is24Hour";
+ /* package */ static final String ARG_MODE = "mode";
/* package */ static final String ACTION_TIME_SET = "timeSetAction";
/* package */ static final String ACTION_DISMISSED = "dismissedAction";
@@ -148,6 +149,9 @@ private Bundle createFragmentArguments(ReadableMap options) {
if (options.hasKey(ARG_IS24HOUR) && !options.isNull(ARG_IS24HOUR)) {
args.putBoolean(ARG_IS24HOUR, options.getBoolean(ARG_IS24HOUR));
}
+ if (options.hasKey(ARG_MODE) && !options.isNull(ARG_MODE)) {
+ args.putString(ARG_MODE, options.getString(ARG_MODE));
+ }
return args;
}
}
diff --git a/ReactAndroid/src/main/java/com/facebook/react/modules/timepicker/TimePickerMode.java b/ReactAndroid/src/main/java/com/facebook/react/modules/timepicker/TimePickerMode.java
new file mode 100644
index 00000000000000..1dd547f7069f6d
--- /dev/null
+++ b/ReactAndroid/src/main/java/com/facebook/react/modules/timepicker/TimePickerMode.java
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+package com.facebook.react.modules.timepicker;
+
+
+public enum TimePickerMode {
+ CLOCK,
+ SPINNER,
+ DEFAULT
+}
diff --git a/ReactAndroid/src/main/res/shell/values/styles.xml b/ReactAndroid/src/main/res/shell/values/styles.xml
index 75a4c2c5e1e8b1..b53a21ea4f4d34 100644
--- a/ReactAndroid/src/main/res/shell/values/styles.xml
+++ b/ReactAndroid/src/main/res/shell/values/styles.xml
@@ -19,7 +19,6 @@
- spinner
-
@@ -28,4 +27,21 @@
- calendar
+
+
+
+
+
+
+
+
+