Upgrade @rnc/datetimepicker@6.2.0 ➡️ @rnc/datetimepicker@6.5.0

CHANGELOG.md

@@ -15,6 +15,7 @@ Package-specific changes not released in any SDK will be added here just before
 - Updated `@react-native-picker/picker` from `2.4.2` to `2.4.6`. ([#19390](https://github.com/expo/expo/pull/19390) by [@aleqsio](https://github.com/aleqsio))
 - Updated `react-native-screens` from `3.15.0` to `3.18.0`. ([#19383](https://github.com/expo/expo/pull/19383) by [@tsapeta](https://github.com/tsapeta))
 - Updated `@shopify/react-native-skia` from `0.1.136` to `0.1.153`. ([#19360](https://github.com/expo/expo/pull/19360) by [@kudo](https://github.com/kudo))
+- Updated `@react-native-community/datetimepicker` from `6.2.0` to `6.5.0`. ([#19419](https://github.com/expo/expo/pull/19419) by [@byCedric](https://github.com/byCedric))
 
 ### 🛠 Breaking changes
 

android/expoview/src/main/java/versioned/host/exp/exponent/modules/api/components/datetimepicker/MinuteIntervalSnappableTimePickerDialog.java

@@ -76,7 +76,7 @@ private boolean isSpinner() {
      * @return returns 'real' minutes (0-59)
      */
     private int getRealMinutes(int minutesOrSpinnerIndex) {
-        if (mDisplay == RNTimePickerDisplay.SPINNER) {
+        if (isSpinner()) {
             return minutesOrSpinnerIndex * mTimePickerInterval;
         }
 
@@ -147,27 +147,42 @@ private void correctEnteredMinutes(final TimePicker view, final int hourOfDay, f
         runnable = new Runnable() {
             @Override
             public void run() {
-                // set valid hour & minutes
-                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
-                    view.setHour(hourOfDay);
-                    view.setMinute(correctedMinutes);
-                } else {
-                    view.setCurrentHour(hourOfDay);
-                    // we need to set minutes to 0 for this to work on older android devices
-                    view.setCurrentMinute(0);
-                    view.setCurrentMinute(correctedMinutes);
-                }
-                if (pickerIsInTextInputMode()) {
-                    // move caret to the end of input
-                    View maybeTextInput = view.findFocus();
-                    if (maybeTextInput instanceof EditText) {
-                        final EditText textInput = (EditText) maybeTextInput;
-                        textInput.setSelection(textInput.getText().length());
-                    } else {
-                        Log.e("RN-datetimepicker", "could not set selection on time picker, this is a known issue on some Huawei devices");
-                    }
-                }
+				if (pickerIsInTextInputMode()) {
+					// only rewrite input when the value makes sense to be corrected
+					// eg. given interval 3, when user wants to enter 53
+					// we don't rewrite the first number "5" to 6, because it would be confusing
+					// but the value will be corrected in onTimeChanged()
+					// however, when they enter 10, we rewrite it to 9
+					boolean canRewriteTextInput = correctedMinutes > 5;
+					if (!canRewriteTextInput) {
+						return;
+					}
+					fixTime();
+					moveCursorToEnd();
+				} else {
+					fixTime();
+				}
             }
+			private void fixTime() {
+				if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+					view.setHour(hourOfDay);
+					view.setMinute(correctedMinutes);
+				} else {
+					view.setCurrentHour(hourOfDay);
+					// we need to set minutes to 0 first for this to work on older android devices
+					view.setCurrentMinute(0);
+					view.setCurrentMinute(correctedMinutes);
+				}
+			}
+			private void moveCursorToEnd() {
+				View maybeTextInput = view.findFocus();
+				if (maybeTextInput instanceof EditText) {
+					final EditText textInput = (EditText) maybeTextInput;
+					textInput.setSelection(textInput.getText().length());
+				} else {
+					Log.e("RN-datetimepicker", "could not set selection on time picker, this is a known issue on some Huawei devices");
+				}
+			}
         };
 
         handler.postDelayed(runnable, 500);
@@ -191,15 +206,17 @@ public void onTimeChanged(final TimePicker view, final int hourOfDay, final int
 
     @Override
     public void onClick(DialogInterface dialog, int which) {
-        if (mTimePicker != null && which == BUTTON_POSITIVE && timePickerHasCustomMinuteInterval()) {
-            final int hours = mTimePicker.getCurrentHour();
-
-            final int realMinutes = getRealMinutes();
-            int validMinutes = isSpinner() ? realMinutes : snapRealMinutesToInterval(realMinutes);
-
-            if (mTimeSetListener != null) {
-                mTimeSetListener.onTimeSet(mTimePicker, hours, validMinutes);
-            }
+		boolean needsCustomHandling = timePickerHasCustomMinuteInterval() || isSpinner();
+        if (mTimePicker != null && which == BUTTON_POSITIVE && needsCustomHandling) {
+			mTimePicker.clearFocus();
+			final int hours = mTimePicker.getCurrentHour();
+			int realMinutes = getRealMinutes();
+			int reportedMinutes = timePickerHasCustomMinuteInterval()
+					? snapRealMinutesToInterval(realMinutes)
+					: realMinutes;
+			if (mTimeSetListener != null) {
+				mTimeSetListener.onTimeSet(mTimePicker, hours, reportedMinutes);
+			}
         } else {
             super.onClick(dialog, which);
         }
@@ -228,15 +245,19 @@ public void updateTime(int hourOfDay, int minuteOfHour) {
     public void onAttachedToWindow() {
         super.onAttachedToWindow();
 
+		int timePickerId = mContext.getResources().getIdentifier("timePicker", "id", "android");
+		mTimePicker = this.findViewById(timePickerId);
+
         if (timePickerHasCustomMinuteInterval()) {
             setupPickerDialog();
         }
     }
 
     private void setupPickerDialog() {
-        int timePickerId = mContext.getResources().getIdentifier("timePicker", "id", "android");
-        mTimePicker = this.findViewById(timePickerId);
-
+		if (mTimePicker == null) {
+			Log.e("RN-datetimepicker", "time picker was null");
+			return;
+		}
         int realMinuteBackup = mTimePicker.getCurrentMinute();
 
         if (isSpinner()) {

android/expoview/src/main/java/versioned/host/exp/exponent/modules/api/components/datetimepicker/RNDatePickerDialogModule.java

@@ -54,7 +54,7 @@ public DatePickerDialogListener(final Promise promise) {
 
     @Override
     public void onDateSet(DatePicker view, int year, int month, int day) {
-      if (!mPromiseResolved && getReactApplicationContext().hasActiveCatalystInstance()) {
+      if (!mPromiseResolved && getReactApplicationContext().hasActiveReactInstance()) {
         WritableMap result = new WritableNativeMap();
         result.putString("action", RNConstants.ACTION_DATE_SET);
         result.putInt("year", year);
@@ -67,7 +67,7 @@ public void onDateSet(DatePicker view, int year, int month, int day) {
 
     @Override
     public void onDismiss(DialogInterface dialog) {
-      if (!mPromiseResolved && getReactApplicationContext().hasActiveCatalystInstance()) {
+      if (!mPromiseResolved && getReactApplicationContext().hasActiveReactInstance()) {
         WritableMap result = new WritableNativeMap();
         result.putString("action", RNConstants.ACTION_DISMISSED);
         mPromise.resolve(result);
@@ -77,7 +77,7 @@ public void onDismiss(DialogInterface dialog) {
 
     @Override
     public void onClick(DialogInterface dialog, int which) {
-      if (!mPromiseResolved && getReactApplicationContext().hasActiveCatalystInstance()) {
+      if (!mPromiseResolved && getReactApplicationContext().hasActiveReactInstance()) {
         WritableMap result = new WritableNativeMap();
         result.putString("action", RNConstants.ACTION_NEUTRAL_BUTTON);
         mPromise.resolve(result);

android/expoview/src/main/java/versioned/host/exp/exponent/modules/api/components/datetimepicker/RNDismissableDatePickerDialog.java

@@ -106,5 +106,9 @@ private void fixSpinner(Context context, int year, int month, int dayOfMonth, RN
         throw new RuntimeException(e);
       }
     }
+    if (display == RNDatePickerDisplay.SPINNER){
+      if(this.getDatePicker() != null)
+        this.getDatePicker().setCalendarViewShown(false);
+    }
   }
 }

android/expoview/src/main/java/versioned/host/exp/exponent/modules/api/components/datetimepicker/RNTimePickerDialogFragment.java

@@ -17,10 +17,10 @@
 import android.content.DialogInterface;
 import android.content.DialogInterface.OnDismissListener;
 import android.content.DialogInterface.OnClickListener;
-import android.os.Build;
 import android.os.Bundle;
 import android.text.format.DateFormat;
 
+import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.fragment.app.DialogFragment;
 
@@ -37,6 +37,7 @@ public class RNTimePickerDialogFragment extends DialogFragment {
   @Nullable
   private static OnClickListener mOnNeutralButtonActionListener;
 
+  @NonNull
   @Override
   public Dialog onCreateDialog(Bundle savedInstanceState) {
     final Bundle args = getArguments();
@@ -118,7 +119,7 @@ static TimePickerDialog createDialog(
   }
 
   @Override
-  public void onDismiss(DialogInterface dialog) {
+  public void onDismiss(@NonNull DialogInterface dialog) {
     super.onDismiss(dialog);
     if (mOnDismissListener != null) {
       mOnDismissListener.onDismiss(dialog);

android/expoview/src/main/java/versioned/host/exp/exponent/modules/api/components/datetimepicker/RNTimePickerDialogModule.java

@@ -19,6 +19,7 @@
 import android.os.Bundle;
 import android.widget.TimePicker;
 
+import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.fragment.app.FragmentActivity;
 import androidx.fragment.app.FragmentManager;
@@ -39,6 +40,7 @@ public RNTimePickerDialogModule(ReactApplicationContext reactContext) {
     super(reactContext);
   }
 
+  @NonNull
   @Override
   public String getName() {
     return FRAGMENT_TAG;
@@ -54,7 +56,7 @@ public TimePickerDialogListener(Promise promise) {
 
     @Override
     public void onTimeSet(TimePicker view, int hour, int minute) {
-      if (!mPromiseResolved && getReactApplicationContext().hasActiveCatalystInstance()) {
+      if (!mPromiseResolved && getReactApplicationContext().hasActiveReactInstance()) {
         WritableMap result = new WritableNativeMap();
         result.putString("action", RNConstants.ACTION_TIME_SET);
         result.putInt("hour", hour);
@@ -66,7 +68,7 @@ public void onTimeSet(TimePicker view, int hour, int minute) {
 
     @Override
     public void onDismiss(DialogInterface dialog) {
-      if (!mPromiseResolved && getReactApplicationContext().hasActiveCatalystInstance()) {
+      if (!mPromiseResolved && getReactApplicationContext().hasActiveReactInstance()) {
         WritableMap result = new WritableNativeMap();
         result.putString("action", RNConstants.ACTION_DISMISSED);
         mPromise.resolve(result);
@@ -76,7 +78,7 @@ public void onDismiss(DialogInterface dialog) {
 
     @Override
     public void onClick(DialogInterface dialog, int which) {
-      if (!mPromiseResolved && getReactApplicationContext().hasActiveCatalystInstance()) {
+      if (!mPromiseResolved && getReactApplicationContext().hasActiveReactInstance()) {
         WritableMap result = new WritableNativeMap();
         result.putString("action", RNConstants.ACTION_NEUTRAL_BUTTON);
         mPromise.resolve(result);

apps/bare-expo/package.json

@@ -92,7 +92,7 @@
   "dependencies": {
     "@babel/runtime": "^7.14.0",
     "@react-native-async-storage/async-storage": "~1.17.3",
-    "@react-native-community/datetimepicker": "6.2.0",
+    "@react-native-community/datetimepicker": "6.5.0",
     "@react-native-community/netinfo": "9.3.3",
     "@react-native-community/slider": "4.2.3",
     "@react-native-community/viewpager": "5.0.11",

apps/native-component-list/package.json

@@ -42,7 +42,7 @@
   "dependencies": {
     "@expo/react-native-action-sheet": "^3.8.0",
     "@react-native-async-storage/async-storage": "~1.17.3",
-    "@react-native-community/datetimepicker": "6.2.0",
+    "@react-native-community/datetimepicker": "6.5.0",
     "@react-native-community/netinfo": "9.3.3",
     "@react-native-community/slider": "4.2.3",
     "@react-native-masked-view/masked-view": "0.2.6",

ios/Exponent/Versioned/Core/Api/Components/DateTimePicker/RNDateTimePicker.m

@@ -13,6 +13,7 @@
 @interface RNDateTimePicker ()
 
 @property (nonatomic, copy) RCTBubblingEventBlock onChange;
+@property (nonatomic, copy) RCTBubblingEventBlock onPickerDismiss;
 @property (nonatomic, assign) NSInteger reactMinuteInterval;
 
 @end
@@ -22,8 +23,14 @@ @implementation RNDateTimePicker
 - (instancetype)initWithFrame:(CGRect)frame
 {
   if ((self = [super initWithFrame:frame])) {
-    [self addTarget:self action:@selector(didChange)
+    #ifndef RCT_NEW_ARCH_ENABLED
+      // somehow, with Fabric, the callbacks are executed here as well as in RNDateTimePickerComponentView
+      // so do not register it with Fabric, to avoid potential problems
+      [self addTarget:self action:@selector(didChange)
                forControlEvents:UIControlEventValueChanged];
+      [self addTarget:self action:@selector(onDismiss:) forControlEvents:UIControlEventEditingDidEnd];
+    #endif
+
     _reactMinuteInterval = 1;
   }
   return self;
@@ -38,6 +45,13 @@ - (void)didChange
   }
 }
 
+- (void)onDismiss:(RNDateTimePicker *)sender
+{
+  if (_onPickerDismiss) {
+    _onPickerDismiss(@{});
+  }
+}
+
 - (void)setDatePickerMode:(UIDatePickerMode)datePickerMode
 {
   [super setDatePickerMode:datePickerMode];