feat: add deprecation warning for onChange prop

Author: vonovak

example/App.js

@@ -139,6 +139,9 @@ export const App = () => {
   };
 
   const onValueChange = (selectedDate) => {
+    if (Platform.OS === 'android') {
+      setShow(false);
+    }
     setDate(selectedDate);
   };
 

src/DateTimePickerAndroid.android.js

@@ -25,6 +25,7 @@ import {
   createNeutralEvtParams,
 } from './eventCreators';
 import {processColor} from 'react-native';
+import {warnIfOnChangeIsUsed} from './utils';
 
 function open(props: AndroidNativeProps) {
   const {
@@ -54,6 +55,7 @@ function open(props: AndroidNativeProps) {
     startOnYearSelection,
   } = props;
   validateAndroidProps(props);
+  warnIfOnChangeIsUsed(onChange);
   invariant(originalValue, 'A date or time must be specified as `value` prop.');
 
   const valueTimestamp = originalValue.getTime();

src/datetimepicker.android.js

@@ -81,7 +81,14 @@ export default function RNDateTimePickerAndroid(
     // as an alternative, use the DateTimePickerAndroid whose reason for existence is described in
     // https://github.com/react-native-datetimepicker/datetimepicker/pull/327#issuecomment-723160992
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onChange, onValueChange, onDismiss, onNeutralButtonPress, valueTimestamp, mode],
+    [
+      onChange,
+      onValueChange,
+      onDismiss,
+      onNeutralButtonPress,
+      valueTimestamp,
+      mode,
+    ],
   );
 
   return null;

src/datetimepicker.ios.js

@@ -10,7 +10,11 @@
  * @flow strict-local
  */
 import RNDateTimePicker from './picker';
-import {dateToMilliseconds, sharedPropsValidation} from './utils';
+import {
+  dateToMilliseconds,
+  sharedPropsValidation,
+  warnIfOnChangeIsUsed,
+} from './utils';
 import {
   IOS_DISPLAY,
   EVENT_TYPE_SET,
@@ -63,7 +67,14 @@ export default function Picker({
   disabled = false,
   ...other
 }: IOSNativeProps): React.Node {
-  sharedPropsValidation({value, timeZoneOffsetInMinutes, timeZoneName, minimumDate, maximumDate});
+  sharedPropsValidation({
+    value,
+    timeZoneOffsetInMinutes,
+    timeZoneName,
+    minimumDate,
+    maximumDate,
+  });
+  warnIfOnChangeIsUsed(onChange);
 
   const display = getDisplaySafe(providedDisplay);
 

src/datetimepicker.windows.js

@@ -6,18 +6,15 @@
  */
 'use strict';
 
-import {
-  requireNativeComponent,
-  StyleSheet,
-} from 'react-native';
+import {requireNativeComponent, StyleSheet} from 'react-native';
 import type {
   WindowsNativeProps,
   WindowsDatePickerChangeEvent,
   DateTimePickerEvent,
 } from './types';
 import * as React from 'react';
 import {EVENT_TYPE_SET, WINDOWS_MODE} from './constants';
-import {sharedPropsValidation} from './utils';
+import {sharedPropsValidation, warnIfOnChangeIsUsed} from './utils';
 
 const styles = StyleSheet.create({
   rnDatePicker: {
@@ -38,6 +35,7 @@ export default function RNDateTimePickerQWE(
   props: WindowsNativeProps,
 ): React.Node {
   sharedPropsValidation({value: props?.value});
+  warnIfOnChangeIsUsed(props.onChange);
 
   const localProps = {
     accessibilityLabel: props.accessibilityLabel,

src/utils.js

@@ -67,3 +67,13 @@ export function sharedPropsValidation({
     );
   }
 }
+
+let hasWarnedOnChange = false;
+export function warnIfOnChangeIsUsed(onChange: ?Function) {
+  if (__DEV__ && onChange && !hasWarnedOnChange) {
+    hasWarnedOnChange = true;
+    console.warn(
+      'DateTimePicker: `onChange` is deprecated. Use `onValueChange`, `onDismiss`, and `onNeutralButtonPress` instead.',
+    );
+  }
+}