Removing propTypes from core components

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

[TheSavior]

I wanted to thank the whole React team to give this opportunity for people to contribute to a project they use and believe. Sometimes contributing to a big Open Source project may seem like a distant reality and efforts like this are what motivate developers to overcome that fear or insecurity to submit their first PR.

Props to you, guys. ❤️

@gvarandas I’m glad you have appreciated this and that you felt like this process was welcoming.

To all of you that have contributed to this task so far, thank you so much for your help. I was completely surprised by all of your interest in contributing to the project and support in completing these tasks. @empyrical, @rmcp1g15, @kdastan, @nd-02110114, @peaonunes, @danibonilha, @exced, @ronal2do, @dkaushik95, @gvarandas, @sopranolinist, and @Thomas0c, this work and your excitement has impacted us here at Facebook. We see that the community wants these opportunities, so we’re thinking about how we can do more of this in the future.

This work was a major first step to one of our team’s goals of having our components strictly typed and modernized. We would like to figure out how to continue providing opportunities to all of you as well as others to contribute to this goal.

The next step is removing mixins from the components that are still using createReactClass. I have created a new issue for removing TimerMixin and if you are interested I would love to get your help on fixing up those as well.

Thanks again for all of your contributions so far.

P.S. To those of you who have contributed to this task, we’d like to send you a token of our appreciation. Please email Hector Ramos at hramos at fb dot com with your Github username, full name, and address. We’ve got something for you. 😃

[TheSavior]

This step is all done! Yay!