feat(android): date picker startOnYearSelection (#1004)

* add option to show year selection view first.

* add showYearPickerFirst option to example.

* add readme.

* Add a gourd clause.

#1004 (comment)

* Merge variables.

#1004 (comment)

* Fix year section display logic.

- Remove no force unwrap
- Add a guard clause
- Add observer cleanup

#1004 (comment)

* rename showYearPickerFirst to startOnYearSelection

#1004 (comment)

* review

---------

Co-authored-by: TatsunoriMorita <114038079+TatsunoriMorita@users.noreply.github.com>
Co-authored-by: Vojtech Novak <vonovak@gmail.com>

Author: 3 people

README.md

@@ -85,6 +85,7 @@ React Native date & time picker component for iOS, Android and Windows (please n
     - [`initialInputMode` (`optional`, `Android only`)](#initialinputmode-optional-android-only)
     - [`title` (`optional`, `Android only`)](#title-optional-android-only)
     - [`fullscreen` (`optional`, `Android only`)](#fullscreen-optional-android-only)
+    - [`startOnYearSelection` (`optional`, `Android only`)](#startOnYearSelection-optional-android-only)
     - [`onChange` (`optional`)](#onchange-optional)
     - [`value` (`required`)](#value-required)
     - [`maximumDate` (`optional`)](#maximumdate-optional)
@@ -534,6 +535,14 @@ List of possible values:
 <RNDateTimePicker fullscreen={true} />
 ```
 
+#### `startOnYearSelection` (`optional`, `Android only`)
+
+If true, the date picker will open with the year selector first. Not applicable for material picker.
+
+```js
+<RNDateTimePicker startOnYearSelection={true} />
+```
+
 #### `positiveButton` (`optional`, `Android only`)
 
 Set the positive button label and text color.

android/src/main/java/com/reactcommunity/rndatetimepicker/Common.java

@@ -1,13 +1,16 @@
 package com.reactcommunity.rndatetimepicker;
 
 import android.app.AlertDialog;
+import android.app.DatePickerDialog;
 import android.content.Context;
 import android.content.DialogInterface;
 import android.content.res.Resources;
 import android.graphics.Color;
 import android.os.Bundle;
 import android.util.TypedValue;
+import android.view.View;
 import android.widget.Button;
+import android.widget.DatePicker;
 
 import androidx.annotation.ColorInt;
 import androidx.annotation.ColorRes;
@@ -92,6 +95,31 @@ public static DialogInterface.OnShowListener setButtonTextColor(@NonNull final C
     };
 	}
 
+  @NonNull
+  public static DialogInterface.OnShowListener openYearDialog(final AlertDialog dialog, final boolean shouldOpenYearDialog) {
+    return dialogInterface -> {
+      if (shouldOpenYearDialog && dialog instanceof DatePickerDialog datePickerDialog) {
+        DatePicker datePicker = datePickerDialog.getDatePicker();
+
+        int yearId = Resources.getSystem().getIdentifier("date_picker_header_year", "id", "android");
+        if (yearId == 0) return;
+        View yearView = datePicker.findViewById(yearId);
+        if (yearView != null) {
+          yearView.performClick();
+        }
+      }
+    };
+  }
+
+  @NonNull
+  public static DialogInterface.OnShowListener combine(@NonNull DialogInterface.OnShowListener... listeners) {
+    return dialogInterface -> {
+      for (DialogInterface.OnShowListener l : listeners) {
+        if (l != null) l.onShow(dialogInterface);
+      }
+    };
+  }
+
   private static void setTextColor(Button button, String buttonKey, final Bundle args, final boolean needsColorOverride, int textColorPrimary) {
     if (button == null) return;
 
@@ -245,6 +273,9 @@ public static Bundle createDatePickerArguments(ReadableMap options) {
       // Android DatePicker uses 1-indexed values, SUNDAY being 1 and SATURDAY being 7, so the +1 is necessary in this case
       args.putInt(RNConstants.FIRST_DAY_OF_WEEK, options.getInt(RNConstants.FIRST_DAY_OF_WEEK)+1);
     }
+    if (options.hasKey(RNConstants.ARG_START_ON_YEAR_SELECTION) && !options.isNull(RNConstants.ARG_START_ON_YEAR_SELECTION)) {
+      args.putBoolean(RNConstants.ARG_START_ON_YEAR_SELECTION, options.getBoolean(RNConstants.ARG_START_ON_YEAR_SELECTION));
+    }
     return args;
   }
 

android/src/main/java/com/reactcommunity/rndatetimepicker/RNConstants.java

@@ -22,6 +22,7 @@ public final class RNConstants {
   public static final String ACTION_DISMISSED = "dismissedAction";
   public static final String ACTION_NEUTRAL_BUTTON = "neutralButtonAction";
   public static final String FIRST_DAY_OF_WEEK = "firstDayOfWeek";
+  public static final String ARG_START_ON_YEAR_SELECTION = "startOnYearSelection";
 
   /**
    * Minimum date supported by {@link TimePickerDialog}, 01 Jan 1900

android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogFragment.java

@@ -7,7 +7,9 @@
 
 package com.reactcommunity.rndatetimepicker;
 
+import static com.reactcommunity.rndatetimepicker.Common.combine;
 import static com.reactcommunity.rndatetimepicker.Common.getDisplayDate;
+import static com.reactcommunity.rndatetimepicker.Common.openYearDialog;
 import static com.reactcommunity.rndatetimepicker.Common.setButtonTextColor;
 import static com.reactcommunity.rndatetimepicker.Common.setButtonTitles;
 
@@ -101,7 +103,13 @@ private DatePickerDialog createDialog(Bundle args) {
       if (activityContext != null) {
         RNDatePickerDisplay display = getDisplayDate(args);
         boolean needsColorOverride = display == RNDatePickerDisplay.SPINNER;
-        dialog.setOnShowListener(setButtonTextColor(activityContext, dialog, args, needsColorOverride));
+        boolean shouldOpenYearDialog = display == RNDatePickerDisplay.DEFAULT && args.getBoolean(RNConstants.ARG_START_ON_YEAR_SELECTION);
+        dialog.setOnShowListener(
+          combine(
+            openYearDialog(dialog, shouldOpenYearDialog),
+            setButtonTextColor(activityContext, dialog, args, needsColorOverride)
+          )
+        );
       }
     }
 

android/src/main/java/com/reactcommunity/rndatetimepicker/RNMaterialDatePicker.kt

@@ -3,6 +3,10 @@ package com.reactcommunity.rndatetimepicker
 import android.content.DialogInterface
 import android.os.Bundle
 import android.util.TypedValue
+import android.view.View
+import android.view.ViewGroup
+import android.widget.TextView
+import androidx.appcompat.app.AppCompatActivity
 import androidx.fragment.app.FragmentManager
 import com.facebook.react.bridge.Promise
 import com.facebook.react.bridge.ReactApplicationContext
@@ -42,6 +46,8 @@ class RNMaterialDatePicker(
     setFullscreen()
 
     datePicker = builder.build()
+
+    setYearPickerFirst()
   }
 
   private fun setInitialDate() {
@@ -108,6 +114,45 @@ class RNMaterialDatePicker(
     }
   }
 
+  private fun setYearPickerFirst() {
+    val startOnYearSelection = args.getBoolean(RNConstants.ARG_START_ON_YEAR_SELECTION)
+    if (!startOnYearSelection) return
+    val initialDate = RNDate(args)
+    val activity = reactContext.currentActivity as? AppCompatActivity
+    activity?.let { lifecycleOwner ->
+        val picker = datePicker ?: return@let
+        val liveData = picker.viewLifecycleOwnerLiveData
+        liveData.observe(lifecycleOwner) { owner ->
+          if (owner == null) return@observe
+          picker.requireDialog().window?.decorView?.post {
+            val root = picker.dialog?.window?.decorView ?: return@post
+
+            val yearText = initialDate.year().toString()
+            val hit = findViewBy(root) { v ->
+              v is TextView && v.isShown && v.isClickable && v.text?.toString()
+                ?.contains(yearText) == true
+            }
+            if (hit != null) {
+              hit.performClick()
+              return@post
+            }
+            liveData.removeObservers(lifecycleOwner)
+          }
+        }
+    }
+  }
+
+  private fun findViewBy(root: View, pred: (View) -> Boolean): View? {
+    if (pred(root)) return root
+
+    if (root is ViewGroup) {
+      for (i in 0 until root.childCount) {
+        findViewBy(root.getChildAt(i), pred)?.let { return it }
+      }
+    }
+    return null
+  }
+
   private fun obtainMaterialThemeOverlayId(resId: Int): Int {
     val theme = reactContext.currentActivity?.theme ?: run {
       return resId

example/App.js

@@ -105,8 +105,8 @@ export const App = () => {
   const [display, setDisplay] = useState(DISPLAY_VALUES[0]);
   const [interval, setMinInterval] = useState(1);
   const [neutralButtonLabel, setNeutralButtonLabel] = useState(undefined);
-  const [disabled, setDisabled] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [startOnYearSelection, setStartOnYearSelection] = useState(false);
   const [minimumDate, setMinimumDate] = useState();
   const [maximumDate, setMaximumDate] = useState();
   const [design, setDesign] = useState(DESIGNS[0]);
@@ -371,20 +371,21 @@ export const App = () => {
               placeholder="accentColor"
             />
           </View>
+
           <View style={styles.header}>
             <ThemedText style={styles.textLabel}>
-              disabled (iOS only)
+              fullscreen (android only)
             </ThemedText>
             <View style={{flex: 1, alignItems: 'flex-start'}}>
-              <Switch value={disabled} onValueChange={setDisabled} />
+              <Switch value={isFullscreen} onValueChange={setIsFullscreen} />
             </View>
           </View>
           <View style={styles.header}>
             <ThemedText style={styles.textLabel}>
-              fullscreen (android only)
+              startOnYearSelection (android only)
             </ThemedText>
             <View style={{flex: 1, alignItems: 'flex-start'}}>
-              <Switch value={isFullscreen} onValueChange={setIsFullscreen} />
+              <Switch value={startOnYearSelection} onValueChange={setStartOnYearSelection} />
             </View>
           </View>
           <View style={styles.header}>
@@ -480,7 +481,7 @@ export const App = () => {
                   setMinimumDate(undefined);
                   setMaximumDate(undefined);
                   setShow(false);
-                } else {  
+                } else {
                   setMinimumDate(new Date('2025-09-05'));
                   setMaximumDate(new Date('2025-09-01'));
                   setShow(true);
@@ -514,12 +515,12 @@ export const App = () => {
                 accentColor={accentColor || undefined}
                 neutralButton={{label: neutralButtonLabel}}
                 negativeButton={{label: 'Cancel', textColor: 'red'}}
-                disabled={disabled}
                 firstDayOfWeek={firstDayOfWeek}
                 title={isMaterialDesign ? title : undefined}
                 initialInputMode={isMaterialDesign ? inputMode : undefined}
                 design={design}
                 fullscreen={isMaterialDesign ? isFullscreen : undefined}
+                startOnYearSelection={startOnYearSelection}
               />
             )}
           </View>

src/DateTimePickerAndroid.android.js

@@ -51,6 +51,7 @@ function open(props: AndroidNativeProps) {
     initialInputMode,
     design,
     fullscreen,
+    startOnYearSelection,
   } = props;
   validateAndroidProps(props);
   invariant(originalValue, 'A date or time must be specified as `value` prop.');
@@ -97,6 +98,7 @@ function open(props: AndroidNativeProps) {
         title,
         initialInputMode,
         fullscreen,
+        startOnYearSelection,
       });
 
       switch (action) {

src/androidUtils.js

@@ -38,6 +38,7 @@ type OpenParams = {
   title: AndroidNativeProps['title'],
   design: AndroidNativeProps['design'],
   fullscreen: AndroidNativeProps['fullscreen'],
+  startOnYearSelection: AndroidNativeProps['startOnYearSelection'],
 };
 
 export type PresentPickerCallback =
@@ -88,6 +89,7 @@ function getOpenPicker(
         title,
         initialInputMode,
         fullscreen,
+        startOnYearSelection,
       }: OpenParams) =>
         // $FlowFixMe - `AbstractComponent` [1] is not an instance type.
         pickers[ANDROID_MODE.date].open({
@@ -103,6 +105,7 @@ function getOpenPicker(
           title,
           initialInputMode,
           fullscreen,
+          startOnYearSelection,
         });
   }
 }

src/datetimepicker.android.js

@@ -37,6 +37,7 @@ export default function RNDateTimePickerAndroid(
     initialInputMode,
     design,
     fullscreen,
+    startOnYearSelection,
   } = props;
   const valueTimestamp = value.getTime();
 
@@ -72,6 +73,7 @@ export default function RNDateTimePickerAndroid(
         initialInputMode,
         design,
         fullscreen,
+        startOnYearSelection,
       };
       DateTimePickerAndroid.open(params);
     },

src/index.d.ts

@@ -203,6 +203,10 @@ export type AndroidNativeProps = Readonly<
        * Use Material 3 pickers or the default ones
        */
       design?: Design;
+      /**
+       * Show the year picker first when opening the calendar dialog.
+       */
+      startOnYearSelection?: boolean;
     }
 >;