Browse files

Migrating View to be a Flow Typed ES6 class

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
  • Loading branch information...
TheSavior authored and facebook-github-bot committed Mar 10, 2018
1 parent 1ff1e57 commit 26734a8473ac2f5715f2b7a016f0cc8a15c6f073
@@ -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
* @see
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() {
@@ -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: {

This file was deleted.

Oops, something went wrong.
@@ -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,
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,
element: React$Element<any>,

0 comments on commit 26734a8

Please sign in to comment.