Removing propTypes from core components

[elicwhite]

We have been using Flow for our components for a long while and have enjoyed much stricter type safety, enabling us to validate our code at compile time instead of with propTypes at runtime. We want to replace the remaining callsites of propTypes with Flow and deprecate the propType shapes exposed by React Native core. To do this, we need your help!

This is step 1 of our multi step goal. Step 2 can be found here.

There are two classes of things that need to happen to complete this work. The first step is removing references from propTypes in our core components. The following are the individual files that need to be converted / updated. Each file should be converted in its own PR and each file is about the size of a good first issue to learn and get familiar with a part of the React Native codebase. If you’d like to convert one, pick one from the list, comment on this issue that you are interested in converting it, and follow the tips in @empyrical's comment for help successfully updating that file.

Remove callsites from components:

• Libraries/Components/Button.js -> Delete PropTypes
• MaskedViewIOS.ios.js -> Delete PropTypes
• Picker/Picker.js -> Delete PropTypes
• PickerAndroid.android.js -> Delete PropTypes
• StaticRenderer.js -> Delete PropTypes
• StatusBar/StatusBar.js -> Delete PropTypes
• TabBarIOS/TabBarIOS.ios.js -> Delete PropTypes
• TabBarIOS/TabBarItemIOS.ios.js -> Convert to Flow Types
• ViewPagerAndroid.android.js -> Delete PropTypes
• IncrementalPresenter.js -> Delete PropTypes, leave contextTypes
• SwipeableFlatList.js -> Delete PropTypes
• SwipeableListView.js -> Delete PropTypes
• SwipeableQuickActions.js -> DeletePropTypes (style changed to ViewStyleProp)
• ElementProperties.js -> Delete PropTypes
• InspectorPanel -> Delete PropTypes
• InspectorOverlay.js -> Delete PropTypes
• SnapshotViewIOS.ios.js -> Delete PropTypes
• LinkingExample.js -> Convert to Flow Types
• RNTesterBlock.js -> Delete PropTypes, strengthen Flow Types
• RNTesterButton.js -> Delete PropTypes
• RNTesterPage.js -> Delete PropTypes
• Modal.js -> Convert to Flow Types, slightly bigger task
• IntegrationTestHarnessTest
• InputAccessoryView -> no propTypes, but flow types need to get cleaned up

Move and Rename custom propType definitions

For these, I think we should create a new folder, react-native/Libraries/DeprecatedPropTypes. Many of these files have both the Flow definition and the propTypes definition. "Split" means split these into two files, in the example of EdgeInsetsPropType it would mean having an EdgeInsetsPropType.js file that contains the commented flow types, and a DeprecatedEdgeInsetsPropType.js file inside the DeprecatedPropTypes folder. Eventually that folder will become the source for the new repo that we move out.

• Create a new folder at react-native/Libraries/DeprecatedPropTypes (should be done as part of one of the other tasks)
• DeprecatedViewPropTypes -> Move, comments to ViewPropTypes
• EdgeInsetsPropType -> Split
• PlatformViewPropTypes -> Move
• TVViewPropTypes -> Split
• StyleSheetPropType -> Move
• createStrictShapeTypeChecker -> Move
• ViewAccessibility -> Split (in progress)
• ViewStylePropTypes -> Move
• ImageProps -> Split (in progress)
• ImageSourcePropType -> Move
• ImageStylePropTypes -> Move
• TextPropTypes -> Move
• ColorPropType -> Move
• LayoutPropTypes -> Move, comments to StyleSheetTypes
• ShadowPropTypesIOS -> Move, comments to StyleSheetTypes
• TransformPropTypes -> Move, comments to StyleSheetTypes
• PointPropType -> Split

[empyrical]

Tips for removing propTypes from components

To best demonstrate what needs to be done, I'll walk through a component that I converted over (Modal)

Here's before it was converted: https://github.com/facebook/react-native/blob/1151c096dab17e5d9a6ac05b61aacecd4305f3db/Libraries/Modal/Modal.js

And after:

https://github.com/facebook/react-native/blob/master/Libraries/Modal/Modal.js

Before, you can see that it had no flow types for its props at all:

class Modal extends React.Component<Object> {

Its props type was just Object, so it would accept any props as valid. Not very precise!

So we will need to create a flow type to work with:

type Props = $ReadOnly<{|
 //...
|}>;

The pipe operator in the brackets mean this type is exact, and the $ReadOnly utility type helps ensure that the values of the props are not manipulated inside of the components.

Then add it to the component like so:

class Modal extends React.Component<Props> {

If the component has state, the syntax is like so:

class Foo extends React.Component<Props, State> {

Before we get to the propTypes, I'd like to point out this part of Modal:

 static contextTypes = {
   rootTag: PropTypes.number,
 };

 // ...

 static childContextTypes = {
   virtualizedList: PropTypes.object,
 };

These usages of the 'prop-types' module aren't being removed yet - so leave them in for now.

For a proptype like an enum:

   /**
    * The `animationType` prop controls how the modal animates.
    *
    * See https://facebook.github.io/react-native/docs/modal.html#animationtype
    */
   animationType: PropTypes.oneOf(['none', 'slide', 'fade']),

It can be ported to Flow like so:

 /**
  * The `animationType` prop controls how the modal animates.
  *
  * See https://facebook.github.io/react-native/docs/modal.html#animationtype
  */
 animationType?: ?('none' | 'slide' | 'fade'),

The question marks mean the property is nullable. Ideally, they should be made nullable where possible.

A great deal of the proptypes are primitive types that can be ported over easily, like:

• PropTypes.bool -> boolean

• PropTypes.string -> string

• PropTypes.number -> number

For PropTypes.arrayOf, you'll want to use $ReadOnlyArray<> rather than Array<>, like so:

   supportedOrientations: PropTypes.arrayOf(
     PropTypes.oneOf([
       'portrait',
       // ... snipped
     ]),
   ),
 // Would become
 supportedOrientations?: ?$ReadOnlyArray<
    | 'portrait'
    // ... snipped
 >,

PropTypes.func is a callback - ideally you should try and fully type the arguments they take, but some of these aren't currently documented so it can be hard to find what their proper types should be. The vast majority of cases, they are SyntheticEvents and you can import them from CoreEventTypes using this syntax:

import type {SyntheticEvent} from  'CoreEventTypes';

And you'd type a callback like this:

 /**
  * The `onRequestClose` callback is called when the user taps the hardware
  * back button on Android or the menu button on Apple TV.
  *
  * This is required on Apple TV and Android.
  *
  * See https://facebook.github.io/react-native/docs/modal.html#onrequestclose
  */
 onRequestClose?: ?(event?: SyntheticEvent<null>) => mixed,

Use mixed rather than void as the return type for these.

I found that the value of the event is null by looking at the native code where the event is fired, and seeing that the value is just nil

 dispatch_block_t completionBlock = ^{
   if (modalHostView.onShow) {
     modalHostView.onShow(nil);
   }
 };

If you're unable to find what the value should be, stub it out using ?Function and ask for help in your pull request.

When you're done, run this command to make sure your code is properly formatted:

yarn prettier
# Or if you don't have yarn
npm run prettier

And run Flow to make sure the types are okay:

yarn flow-check-ios # for *.ios.js files
yarn flow-check-android # for *.android.js files
# Or if you don't have yarn
npm run flow-check-ios # for *.ios.js files
npm run flow-check-android # for *.android.js files

Thank you for helping out, and if you have any questions feel free to ask!

[richardcann]

Im taking on the Libraries/Components/Button.js delete PropTypes conversion

[elicwhite]

@rmcp1g15 Thanks for jumping in! It looks like that one is already checked off (completed). Would you be willing to take a different one?

[empyrical]

@rmcp1g15 That was already converted over, though I realize I forgot this import in it:

const ColorPropType = require('ColorPropType');

[richardcann]

@TheSavior Ok! yeah ill take on StaticRenderer.js and deleting propTypes

[kdastan]

@TheSavior I'll take ElementProperties.js, InspectorOverlay.js

[nissy-dev]

@TheSavior
I'll take MaskedViewIOS.ios.js, ViewPagerAndroid.android.js

[peaonunes]

Just noticed that there is no proptypes in PickerAndroid.android.js, can you confirm?I will take ViewPagerAndroid.android.js instead.

[elicwhite]

PickerAndroid

Looks like PickerAndroid.android.js was taken care of in this commit and I forgot to mark it off. Thanks for flagging!

[danibonilha]

@TheSavior Hi, I'll take the creation of DeprecatedPropTypes' folder and split EdgeInsetsPropType

[empyrical]

@danibonilha Just giving you a heads up about this pull request I made:

#21349

[danibonilha]

@empyrical okay, thanks, I'll just split EdgeInsetsPropType then.

[exced]

Should ViewStylePropTypes be splitted as well ? (since there's a dependency with PlatformViewPropTypes).

[empyrical]

Yep, that should get split out too

[douglasjunior]

How to reuse these propTypes now?

In some libraries that I maintain, I do something like this:

import React, { Component } from 'react';
import { Modal } from 'react-native';
import PropTypes from 'prop-types';

class Dialog extends Component {
    ...
} 

Dialog.propTypes = {
   ...Modal.propTypes,
   myCustomProp: PropTypes.string,
}

Any suggestions?

[elicwhite]

We plan to pull these propTypes out into another npm package that the community can maintain but the goal is that we don’t want to support propTypes, we recommend people use Flow or TypeScript instead.

[elicwhite]

It's been a long journey, but @yungsters just landed 23717c6 which removed the remaining prop-types usages and the DeprecatedPropTypes files that you all helped create from React Native.

We are finally free of prop-types!