Use commands instead of setNativeProps in DatePicker

Summary:
Changelog: DatePicker now uses commands instead of `setNativeProps`

We are moving away from `setNativeProps` in favour of commands API.

Reviewed By: shergin

Differential Revision: D17787870

fbshipit-source-id: aa532cbb7bfb3031c085e5122ab808522c437901

Libraries/Components/DatePicker/DatePickerIOS.ios.js

@@ -12,7 +12,9 @@
 
 'use strict';
 
-const RCTDatePickerNativeComponent = require('./RCTDatePickerNativeComponent');
+import RCTDatePickerNativeComponent, {
+  Commands as DatePickerCommands,
+} from './RCTDatePickerNativeComponent';
 const React = require('react');
 const StyleSheet = require('../../StyleSheet/StyleSheet');
 const View = require('../View/View');
@@ -121,9 +123,7 @@ class DatePickerIOS extends React.Component<Props> {
     if (this.props.date) {
       const propsTimeStamp = this.props.date.getTime();
       if (this._picker) {
-        this._picker.setNativeProps({
-          date: propsTimeStamp,
-        });
+        DatePickerCommands.setNativeDate(this._picker, propsTimeStamp);
       }
     }
   }
@@ -133,6 +133,7 @@ class DatePickerIOS extends React.Component<Props> {
     this.props.onDateChange &&
       this.props.onDateChange(new Date(nativeTimeStamp));
     this.props.onChange && this.props.onChange(event);
+    this.forceUpdate();
   };
 
   render(): React.Node {

Libraries/Components/DatePicker/RCTDatePickerNativeComponent.js

@@ -10,33 +10,52 @@
 
 'use strict';
 
-const requireNativeComponent = require('../../ReactNative/requireNativeComponent');
-
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import * as React from 'react';
+import type {
+  Float,
+  WithDefault,
+  BubblingEventHandler,
+} from 'react-native/Libraries/Types/CodegenTypes';
 
-type Event = SyntheticEvent<
-  $ReadOnly<{|
-    timestamp: number,
-  |}>,
->;
+type Event = $ReadOnly<{|
+  timestamp: Float,
+|}>;
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
-  date?: ?number,
-  initialDate?: ?Date,
+  date?: ?Float,
+  initialDate?: ?Float,
   locale?: ?string,
-  maximumDate?: ?number,
-  minimumDate?: ?number,
-  minuteInterval?: ?(1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30),
-  mode?: ?('date' | 'time' | 'datetime'),
-  onChange?: ?(event: Event) => void,
-  timeZoneOffsetInMinutes?: ?number,
+  maximumDate?: ?Float,
+  minimumDate?: ?Float,
+  minuteInterval?: WithDefault<
+    1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30,
+    1,
+  >,
+  mode?: WithDefault<'date' | 'time' | 'datetime', 'date'>,
+  onChange?: ?BubblingEventHandler<Event>,
+  timeZoneOffsetInMinutes?: ?Float,
 |}>;
 
-const RCTDatePickerNativeComponent: HostComponent<NativeProps> = requireNativeComponent<NativeProps>(
-  'RCTDatePicker',
-);
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  +setNativeDate: (
+    viewRef: React.ElementRef<ComponentType>,
+    date: Float,
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['setNativeDate'],
+});
 
-module.exports = RCTDatePickerNativeComponent;
+export default (codegenNativeComponent<NativeProps>('DatePicker', {
+  paperComponentName: 'RCTDatePicker',
+  excludedPlatform: 'android',
+}): HostComponent<NativeProps>);