feat: add disabled prop support for iOS (#412)

* add disabled support for iOS

* type updates and readme

* update tests and default for disabled

* Update README.md

Co-authored-by: Vojtech Novak <[email protected]>

Co-authored-by: Vojtech Novak <[email protected]>

Author: chrisdrackett

README.md

@@ -63,6 +63,7 @@ React Native date & time picker component for iOS, Android and Windows.
     - [`neutralButtonLabel` (`optional`, `Android only`)](#neutralbuttonlabel-optional-android-only)
     - [`minuteInterval` (`optional`)](#minuteinterval-optional)
     - [`style` (`optional`, `iOS only`)](#style-optional-ios-only)
+    - [`disabled` (`optional`, `iOS only`)](#disabled-optional-ios-only)
   - [Migration from the older components](#migration-from-the-older-components)
     - [DatePickerIOS](#datepickerios)
     - [DatePickerAndroid](#datepickerandroid)
@@ -360,6 +361,10 @@ This means that eg. if the device has dark mode turned on, and your screen backg
 <RNDateTimePicker style={{flex: 1}} />
 ```
 
+#### `disabled` (`optional`, `iOS only`)
+
+If true, the user won't be able to interact with the view.
+
 ## Migration from the older components
 
 `RNDateTimePicker` is the new common name used to represent the old versions of iOS and Android.

example/App.js

@@ -9,6 +9,7 @@ import {
   Platform,
   TextInput,
   useColorScheme,
+  Switch,
 } from 'react-native';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import SegmentedControl from '@react-native-community/segmented-control';
@@ -67,6 +68,7 @@ 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);
 
   // Windows-specific
   const [time, setTime] = useState(undefined);
@@ -169,6 +171,12 @@ export const App = () => {
                 placeholder="color"
               />
             </View>
+            <View style={styles.header}>
+              <ThemedText style={{margin: 10, flex: 1}}>
+                disabled (iOS only)
+              </ThemedText>
+              <Switch value={disabled} onValueChange={setDisabled} />
+            </View>
             <View style={styles.header}>
               <ThemedText style={{margin: 10, flex: 1}}>
                 neutralButtonLabel (android only)
@@ -257,6 +265,7 @@ export const App = () => {
                 style={styles.iOsPicker}
                 textColor={color || undefined}
                 neutralButtonLabel={neutralButtonLabel}
+                disabled={disabled}
               />
             )}
           </View>

ios/RNDateTimePickerManager.m

@@ -118,4 +118,13 @@ + (NSString*) datepickerStyleToString: (UIDatePickerStyle) style {
     }
 }
 
+RCT_CUSTOM_VIEW_PROPERTY(disabled, BOOL, RNDateTimePicker)
+{
+  if (json) {
+    view.enabled = !([RCTConvert BOOL:json]);
+  } else {
+    view.enabled = defaultView.enabled;
+  }
+}
+
 @end

src/datetimepicker.ios.js

@@ -53,6 +53,7 @@ export default function Picker({
   timeZoneOffsetInMinutes,
   textColor,
   onChange,
+  disabled = false,
   ...otherProps
 }: IOSNativeProps) {
   const [heightStyle, setHeightStyle] = useState(undefined);
@@ -123,6 +124,7 @@ export default function Picker({
       onStartShouldSetResponder={() => true}
       onResponderTerminationRequest={() => false}
       displayIOS={display}
+      disabled={disabled === true}
     />
   );
 }

src/index.d.ts

@@ -100,6 +100,11 @@ export type IOSNativeProps = Readonly<
      * Sets the preferredDatePickerStyle for picker
      */
     display?: IOSDisplay;
+
+    /**
+     * Is this picker disabled?
+     */
+    disabled?: boolean;
   }
 >;
 

src/types.js

@@ -119,6 +119,11 @@ export type IOSNativeProps = $ReadOnly<{|
    * Sets the preferredDatePickerStyle for picker
    */
   display?: IOSDisplay,
+
+  /**
+   * Is this picker disabled?
+   */
+  disabled?: boolean,
 |}>;
 
 export type AndroidNativeProps = $ReadOnly<{|

test/__snapshots__/index.test.js.snap

@@ -3,6 +3,7 @@
 exports[`DatePicker applies styling to DatePicker 1`] = `
 <RNDateTimePicker
   date={1376949600000}
+  disabled={false}
   displayIOS="default"
   mode="date"
   onChange={[Function]}
@@ -24,6 +25,7 @@ exports[`DatePicker applies styling to DatePicker 1`] = `
 exports[`DatePicker renders a native Component 1`] = `
 <RNDateTimePicker
   date={1376949600000}
+  disabled={false}
   displayIOS="default"
   mode="date"
   onChange={[Function]}
@@ -40,6 +42,7 @@ exports[`DatePicker renders a native Component 1`] = `
 exports[`DatePicker renders with mode countdown 1`] = `
 <RNDateTimePicker
   date={1376949600000}
+  disabled={false}
   displayIOS="default"
   mode="countdown"
   onChange={[Function]}
@@ -56,6 +59,7 @@ exports[`DatePicker renders with mode countdown 1`] = `
 exports[`DatePicker renders with mode datetime 1`] = `
 <RNDateTimePicker
   date={1376949600000}
+  disabled={false}
   displayIOS="default"
   mode="datetime"
   onChange={[Function]}
@@ -72,6 +76,7 @@ exports[`DatePicker renders with mode datetime 1`] = `
 exports[`DatePicker renders with mode time 1`] = `
 <RNDateTimePicker
   date={1376949600000}
+  disabled={false}
   displayIOS="default"
   mode="time"
   onChange={[Function]}