RNTester: Remove all but one instance of PropTypes (#21321)

Summary:
Part of: https://github.com/react-native-community/discussions-and-proposals/issues/29

This PR removes all but one instance of PropTypes in `RNTester`. The last remaining conversion is `CameraRollView`, which I will do in a separate PR.
Pull Request resolved: https://github.com/facebook/react-native/pull/21321

Differential Revision: D10041809

Pulled By: TheSavior

fbshipit-source-id: c03b1ce5ad640ae59ae6240a3b6c13581345b5a3

RNTester/js/LinkingExample.js

@@ -9,17 +9,22 @@
 
 'use strict';
 
-var React = require('react');
-var PropTypes = require('prop-types');
-var ReactNative = require('react-native');
-var {Linking, StyleSheet, Text, TouchableOpacity, View} = ReactNative;
-var RNTesterBlock = require('./RNTesterBlock');
+const React = require('react');
+const {
+  Linking,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} = require('react-native');
 
-class OpenURLButton extends React.Component {
-  static propTypes = {
-    url: PropTypes.string,
-  };
+const RNTesterBlock = require('./RNTesterBlock');
 
+type Props = $ReadOnly<{|
+  url?: ?string,
+|}>;
+
+class OpenURLButton extends React.Component<Props> {
   handleClick = () => {
     Linking.canOpenURL(this.props.url).then(supported => {
       if (supported) {
@@ -59,7 +64,7 @@ class IntentAndroidExample extends React.Component {
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: 'white',

RNTester/js/RNTesterBlock.js

@@ -10,32 +10,26 @@
 
 'use strict';
 
-var React = require('react');
-var PropTypes = require('prop-types');
-var ReactNative = require('react-native');
-var {StyleSheet, Text, View} = ReactNative;
+const React = require('react');
+const {StyleSheet, Text, View} = require('react-native');
 
-class RNTesterBlock extends React.Component<
-  {
-    title?: string,
-    description?: string,
-  },
-  $FlowFixMeState,
-> {
-  static propTypes = {
-    title: PropTypes.string,
-    description: PropTypes.string,
-  };
+type Props = $ReadOnly<{|
+  children?: React.Node,
+  title?: ?string,
+  description?: ?string,
+|}>;
 
-  state = {description: (null: ?string)};
+type State = {|
+  description: ?string,
+|};
+
+class RNTesterBlock extends React.Component<Props, State> {
+  state = {description: null};
 
   render() {
-    var description;
-    if (this.props.description) {
-      description = (
-        <Text style={styles.descriptionText}>{this.props.description}</Text>
-      );
-    }
+    const description = this.props.description ? (
+      <Text style={styles.descriptionText}>{this.props.description}</Text>
+    ) : null;
 
     return (
       <View style={styles.container}>
@@ -43,18 +37,13 @@ class RNTesterBlock extends React.Component<
           <Text style={styles.titleText}>{this.props.title}</Text>
           {description}
         </View>
-        <View style={styles.children}>
-          {
-            // $FlowFixMe found when converting React.createClass to ES6
-            this.props.children
-          }
-        </View>
+        <View style={styles.children}>{this.props.children}</View>
       </View>
     );
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     borderRadius: 3,
     borderWidth: 0.5,

RNTester/js/RNTesterButton.js

@@ -10,34 +10,30 @@
 
 'use strict';
 
-var React = require('react');
-var PropTypes = require('prop-types');
-var ReactNative = require('react-native');
-var {StyleSheet, Text, TouchableHighlight} = ReactNative;
+const React = require('react');
+const {StyleSheet, Text, TouchableHighlight} = require('react-native');
 
-class RNTesterButton extends React.Component<{onPress?: Function}> {
-  static propTypes = {
-    onPress: PropTypes.func,
-  };
+import type {PressEvent} from 'CoreEventTypes';
 
+type Props = $ReadOnly<{|
+  children?: React.Node,
+  onPress?: ?(event: PressEvent) => mixed,
+|}>;
+
+class RNTesterButton extends React.Component<Props> {
   render() {
     return (
       <TouchableHighlight
         onPress={this.props.onPress}
         style={styles.button}
         underlayColor="grey">
-        <Text>
-          {
-            // $FlowFixMe found when converting React.createClass to ES6
-            this.props.children
-          }
-        </Text>
+        <Text>{this.props.children}</Text>
       </TouchableHighlight>
     );
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   button: {
     borderColor: '#696969',
     borderRadius: 8,

RNTester/js/RNTesterPage.js

@@ -10,49 +10,39 @@
 
 'use strict';
 
-var PropTypes = require('prop-types');
-var React = require('react');
-var ReactNative = require('react-native');
-var {ScrollView, StyleSheet, View} = ReactNative;
+const React = require('react');
+const {ScrollView, StyleSheet, View} = require('react-native');
 
-var RNTesterTitle = require('./RNTesterTitle');
+const RNTesterTitle = require('./RNTesterTitle');
 
-class RNTesterPage extends React.Component<{
-  noScroll?: boolean,
-  noSpacer?: boolean,
-}> {
-  static propTypes = {
-    noScroll: PropTypes.bool,
-    noSpacer: PropTypes.bool,
-  };
+type Props = $ReadOnly<{|
+  children?: React.Node,
+  title?: ?string,
+  noScroll?: ?boolean,
+  noSpacer?: ?boolean,
+|}>;
 
+class RNTesterPage extends React.Component<Props> {
   render() {
-    var ContentWrapper;
-    var wrapperProps = {};
+    let ContentWrapper;
+    let wrapperProps = {};
     if (this.props.noScroll) {
       ContentWrapper = ((View: any): React.ComponentType<any>);
     } else {
       ContentWrapper = (ScrollView: React.ComponentType<any>);
-      // $FlowFixMe found when converting React.createClass to ES6
       wrapperProps.automaticallyAdjustContentInsets = !this.props.title;
       wrapperProps.keyboardShouldPersistTaps = 'handled';
       wrapperProps.keyboardDismissMode = 'interactive';
     }
-    /* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an
-     * error found when Flow v0.68 was deployed. To see the error delete this
-     * comment and run Flow. */
-    var title = this.props.title ? (
+    const title = this.props.title ? (
       <RNTesterTitle title={this.props.title} />
     ) : null;
-    var spacer = this.props.noSpacer ? null : <View style={styles.spacer} />;
+    const spacer = this.props.noSpacer ? null : <View style={styles.spacer} />;
     return (
       <View style={styles.container}>
         {title}
         <ContentWrapper style={styles.wrapper} {...wrapperProps}>
-          {
-            // $FlowFixMe found when converting React.createClass to ES6
-            this.props.children
-          }
+          {this.props.children}
           {spacer}
         </ContentWrapper>
       </View>
@@ -60,7 +50,7 @@ class RNTesterPage extends React.Component<{
   }
 }
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     backgroundColor: '#e9eaed',
     flex: 1,