Migrating View to be a Flow Typed ES6 class

Summary:
The flow type for View using createReactClass was essentially `any`, allowing any Prop to be passed in, only pseudo enforced at run time via propTypes.

This diff converts View away from createReactClass and instead uses ReactNative.NativeComponent. This was previously typed as any as well which didn't buy us much. This change converts View to be an ES6 React class component to ensure proptypechecking, and exposes the methods copied from NativeMethodsMixin.

Reviewed By: yungsters

Differential Revision: D5933888

fbshipit-source-id: eae63b818203e0e86741f9f154ec9cf3498369e2

Author: elicwhite

Libraries/Components/View/View.js

@@ -10,15 +10,13 @@
  */
 'use strict';
 
-const NativeMethodsMixin = require('NativeMethodsMixin');
 const Platform = require('Platform');
 const React = require('React');
+const ReactNative = require('ReactNative');
 const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 const ViewPropTypes = require('ViewPropTypes');
 const {ViewContextTypes} = require('ViewContext');
-
-const createReactClass = require('create-react-class');
 const invariant = require('fbjs/lib/invariant');
 const requireNativeComponent = require('requireNativeComponent');
 
@@ -28,40 +26,26 @@ import type {ViewChildContext} from 'ViewContext';
 export type Props = ViewProps;
 
 /**
- * The most fundamental component for building a UI.
+ * The most fundamental component for building a UI, View is a container that
+ * supports layout with flexbox, style, some touch handling, and accessibility
+ * controls.
  *
- * See http://facebook.github.io/react-native/docs/view.html
+ * @see http://facebook.github.io/react-native/docs/view.html
  */
-const View = createReactClass({
-  displayName: 'View',
-  // TODO: We should probably expose the mixins, viewConfig, and statics publicly. For example,
-  // one of the props is of type AccessibilityComponentType. That is defined as a const[] above,
-  // but it is not rendered by the docs, since `statics` below is not rendered. So its Possible
-  // values had to be hardcoded.
-  mixins: [NativeMethodsMixin],
-
-  // `propTypes` should not be accessed directly on View since this wrapper only
-  // exists for DEV mode. However it's important for them to be declared.
-  // If the object passed to `createClass` specifies `propTypes`, Flow will
-  // create a static type from it.
-  propTypes: ViewPropTypes,
+class View extends ReactNative.NativeComponent<Props> {
+  static propTypes = ViewPropTypes;
+  static childContextTypes = ViewContextTypes;
 
-  /**
-   * `NativeMethodsMixin` will look for this when invoking `setNativeProps`. We
-   * make `this` look like an actual native component class.
-   */
-  viewConfig: {
+  viewConfig = {
     uiViewClassName: 'RCTView',
     validAttributes: ReactNativeViewAttributes.RCTView,
-  },
-
-  childContextTypes: ViewContextTypes,
+  };
 
   getChildContext(): ViewChildContext {
     return {
       isInAParentText: false,
     };
-  },
+  }
 
   render() {
     invariant(
@@ -74,8 +58,8 @@ const View = createReactClass({
     // adding functionality this component that you'd want to be available in both
     // dev and prod modes.
     return <RCTView {...this.props} />;
-  },
-});
+  }
+}
 
 const RCTView = requireNativeComponent('RCTView', View, {
   nativeOnly: {

Libraries/Components/View/View.js.flow

@@ -86,12 +86,27 @@ type SecretInternalsType = {
   // And how much information to fill in for the above types.
 };
 
+declare class ReactNativeComponent<Props, State = void>
+  extends React$Component<Props, State> {
+
+  blur(): void,
+  focus(): void,
+  measure(callback: MeasureOnSuccessCallback): void,
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
+  measureLayout(
+    relativeToNativeNode: number,
+    onSuccess: MeasureLayoutOnSuccessCallback,
+    onFail: () => void,
+  ): void,
+  setNativeProps(nativeProps: Object): void,
+}
+
 /**
  * Flat ReactNative renderer bundles are too big for Flow to parse efficiently.
  * Provide minimal Flow typing for the high-level RN API and call it a day.
  */
 export type ReactNativeType = {
-  NativeComponent: any,
+  NativeComponent: typeof ReactNativeComponent,
   findNodeHandle(componentOrHandle: any): ?number,
   render(
     element: React$Element<any>,