fix(types): include optional nativeEvent.target on picker events

README.md

@@ -335,7 +335,7 @@ List of possible values
 
 #### `onValueChange` (`optional`)
 
-Called when the user selects a date or time. Receives an `event` with `nativeEvent: { timestamp, utcOffset }` and the selected `Date`.
+Called when the user selects a date or time. Receives an `event` with `nativeEvent: { timestamp, utcOffset }` and the selected `Date`. On iOS, `nativeEvent.target` is also present (the React tag of the picker view).
 
 ```js
 <RNDateTimePicker onValueChange={(event, date) => setDate(date)} />
@@ -371,6 +371,7 @@ It is also called when user dismisses the picker, which you can detect by checki
 The values can be: `'set' | 'dismissed' | 'neutralButtonPressed'`. (`neutralButtonPressed` is only available on Android).
 
 The `utcOffset` field is only available on Android and iOS. It is the offset in minutes between the selected date and UTC time.
+On iOS, `nativeEvent.target` is the React tag of the picker view (injected by React Native). It is omitted on Android, where the picker is a dialog rather than a view, and on iOS dismiss events.
 
 ```js
 const setDate = (event: DateTimePickerEvent, date: Date) => {

src/index.d.ts

@@ -23,13 +23,15 @@ export type DateTimePickerEvent = {
   nativeEvent: {
     timestamp: number;
     utcOffset: number;
+    target?: number;
   };
 };
 
 export type DateTimePickerChangeEvent = {
   nativeEvent: {
     timestamp: number;
     utcOffset: number;
+    target?: number;
   };
 };
 

src/types.js

@@ -30,6 +30,7 @@ export type NativeEventIOS = SyntheticEvent<
   $ReadOnly<{|
     timestamp: number,
     utcOffset: number,
+    target?: number,
   |}>,
 >;
 
@@ -38,6 +39,7 @@ export type DateTimePickerEvent = {
   nativeEvent: $ReadOnly<{
     timestamp: number,
     utcOffset: number,
+    target?: number,
     ...
   }>,
   ...
@@ -47,6 +49,7 @@ export type DateTimePickerChangeEvent = {
   nativeEvent: $ReadOnly<{
     timestamp: number,
     utcOffset: number,
+    target?: number,
     ...
   }>,
   ...

test/datetimepickerEvent.types.ts

@@ -0,0 +1,39 @@
+import type {
+  DateTimePickerChangeEvent,
+  DateTimePickerEvent,
+} from '../src/index';
+
+// Android dialogs and iOS dismiss events omit `target`.
+const androidEvent: DateTimePickerEvent = {
+  type: 'set',
+  nativeEvent: {
+    timestamp: 0,
+    utcOffset: 0,
+  },
+};
+
+// iOS native view events include RN's injected react tag.
+const iosEvent: DateTimePickerEvent = {
+  type: 'set',
+  nativeEvent: {
+    timestamp: 0,
+    utcOffset: 0,
+    target: 42,
+  },
+};
+
+declare const event: DateTimePickerEvent;
+declare const changeEvent: DateTimePickerChangeEvent;
+
+const target: number | undefined = event.nativeEvent.target;
+const changeTarget: number | undefined = changeEvent.nativeEvent.target;
+
+if (event.nativeEvent.target) {
+  const reactTag: number = event.nativeEvent.target;
+  void reactTag;
+}
+
+void androidEvent;
+void iosEvent;
+void target;
+void changeTarget;

test/types.test.js

@@ -0,0 +1,30 @@
+import {spawnSync} from 'child_process';
+import path from 'path';
+
+describe('TypeScript declarations', () => {
+  it('allows optional nativeEvent.target on picker events (issue #927)', () => {
+    const result = spawnSync(
+      process.execPath,
+      [
+        require.resolve('typescript/bin/tsc'),
+        '--noEmit',
+        '--strict',
+        '--esModuleInterop',
+        '--skipLibCheck',
+        '--jsx',
+        'react-native',
+        '--moduleResolution',
+        'node',
+        '--module',
+        'commonjs',
+        '--target',
+        'esnext',
+        path.join(__dirname, 'datetimepickerEvent.types.ts'),
+      ],
+      {encoding: 'utf8', cwd: path.join(__dirname, '..')},
+    );
+
+    const output = `${result.stdout}${result.stderr}`;
+    expect({status: result.status, output}).toEqual({status: 0, output: ''});
+  });
+});