remove createReactClass from RNTester/js/ImageExample.js (#21602)

Summary:
Related to #21581 .
Removed createReactClass from the RNTester/js/ImageExample.js

The diff of this PR is a little big. If there are any problems, please teach me �
 - [x] npm run prettier
 - [x] npm run flow-check-ios
 - [x] npm run flow-check-android

[GENERAL] [ENHANCEMENT] [RNTester/js/ImageExample.js] - remove createReactClass dependency
Pull Request resolved: https://github.com/facebook/react-native/pull/21602

Reviewed By: TheSavior

Differential Revision: D10304857

Pulled By: RSNara

fbshipit-source-id: 339b1220828c6218cad0d09c7a5034a61e623bc6

RNTester/js/ImageExample.js

@@ -10,47 +10,62 @@
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
-var createReactClass = require('create-react-class');
+const ReactNative = require('react-native');
-var ReactNative = require('react-native');
+const {
-var {
   ActivityIndicator,
   Image,
-  Platform,
   StyleSheet,
   Text,
   View,
   ImageBackground,
 } = ReactNative;
 
-var base64Icon =
+const base64Icon =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
 
-var ImageCapInsetsExample = require('./ImageCapInsetsExample');
+const ImageCapInsetsExample = require('./ImageCapInsetsExample');
 const IMAGE_PREFETCH_URL =
   'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now();
-var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
+const prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
 
-/* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an error
+type ImageSource = $ReadOnly<{|
- * found when Flow v0.63 was deployed. To see the error delete this comment and
+  uri: string,
- * run Flow. */
+|}>;
-var NetworkImageCallbackExample = createReactClass({
+
-  displayName: 'NetworkImageCallbackExample',
+type NetworkImageCallbackExampleState = {|
-  getInitialState: function() {
+  events: Array<string>,
-    return {
+  startLoadPrefetched: boolean,
-      events: [],
+  mountTime: Date,
-      startLoadPrefetched: false,
+|};
-      mountTime: new Date(),
+
-    };
+type NetworkImageCallbackExampleProps = $ReadOnly<{|
-  },
+  source: ImageSource,
+  prefetchedSource: ImageSource,
+|}>;
+
+class NetworkImageCallbackExample extends React.Component<
+  NetworkImageCallbackExampleProps,
+  NetworkImageCallbackExampleState,
+> {
+  state = {
+    events: [],
+    startLoadPrefetched: false,
+    mountTime: new Date(),
+  };
 
   UNSAFE_componentWillMount() {
     this.setState({mountTime: new Date()});
-  },
+  }
 
-  render: function() {
+  _loadEventFired = (event: string) => {
-    var {mountTime} = this.state;
+    this.setState(state => ({
+      events: [...state.events, event],
+    }));
+  };
 
+  render() {
+    const {mountTime} = this.state;
     return (
       <View>
         <Image
@@ -133,24 +148,30 @@ var NetworkImageCallbackExample = createReactClass({
         <Text style={{marginTop: 20}}>{this.state.events.join('\n')}</Text>
       </View>
     );
-  },
+  }
+}
 
-  _loadEventFired(event) {
+type NetworkImageExampleState = {|
-    this.setState(state => {
+  error: boolean,
-      return (state.events = [...state.events, event]);
+  loading: boolean,
-    });
+  progress: number,
-  },
+|};
-});
 
-var NetworkImageExample = createReactClass({
+type NetworkImageExampleProps = $ReadOnly<{|
-  getInitialState: function() {
+  source: ImageSource,
-    return {
+|}>;
-      error: false,
+
-      loading: false,
+class NetworkImageExample extends React.Component<
-      progress: 0,
+  NetworkImageExampleProps,
-    };
+  NetworkImageExampleState,
-  },
+> {
-  render: function() {
+  state = {
+    error: false,
+    loading: false,
+    progress: 0,
+  };
+
+  render() {
     var loader = this.state.loading ? (
       <View style={styles.progress}>
         <Text>{this.state.progress}%</Text>
@@ -178,22 +199,34 @@ var NetworkImageExample = createReactClass({
         {loader}
       </ImageBackground>
     );
-  },
+  }
-});
+}
 
-var ImageSizeExample = createReactClass({
+type ImageSizeExampleState = {|
-  getInitialState: function() {
+  width: number,
-    return {
+  height: number,
-      width: 0,
+|};
-      height: 0,
+
-    };
+type ImageSizeExampleProps = $ReadOnly<{|
-  },
+  source: ImageSource,
-  componentDidMount: function() {
+|}>;
+
+class ImageSizeExample extends React.Component<
+  ImageSizeExampleProps,
+  ImageSizeExampleState,
+> {
+  state = {
+    width: 0,
+    height: 0,
+  };
+
+  componentDidMount() {
     Image.getSize(this.props.source.uri, (width, height) => {
       this.setState({width, height});
     });
-  },
+  }
-  render: function() {
+
+  render() {
     return (
       <View style={{flexDirection: 'row'}}>
         <Image
@@ -211,17 +244,56 @@ var ImageSizeExample = createReactClass({
         </Text>
       </View>
     );
-  },
+  }
-});
+}
 
-var MultipleSourcesExample = createReactClass({
+type MultipleSourcesExampleState = {|
-  getInitialState: function() {
+  width: number,
-    return {
+  height: number,
-      width: 30,
+|};
-      height: 30,
+
-    };
+type MultipleSourcesExampleProps = $ReadOnly<{||}>;
-  },
+
-  render: function() {
+class MultipleSourcesExample extends React.Component<
+  MultipleSourcesExampleProps,
+  MultipleSourcesExampleState,
+> {
+  state = {
+    width: 30,
+    height: 30,
+  };
+
+  increaseImageSize = () => {
+    if (this.state.width >= 100) {
+      return;
+    }
+    this.setState({
+      width: this.state.width + 10,
+      height: this.state.height + 10,
+    });
+  };
+
+  increaseImageSize = () => {
+    if (this.state.width >= 100) {
+      return;
+    }
+    this.setState({
+      width: this.state.width + 10,
+      height: this.state.height + 10,
+    });
+  };
+
+  decreaseImageSize = () => {
+    if (this.state.width <= 10) {
+      return;
+    }
+    this.setState({
+      width: this.state.width - 10,
+      height: this.state.height - 10,
+    });
+  };
+
+  render() {
     return (
       <View>
         <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
@@ -260,26 +332,8 @@ var MultipleSourcesExample = createReactClass({
         </View>
       </View>
     );
-  },
+  }
-  increaseImageSize: function() {
+}
-    if (this.state.width >= 100) {
-      return;
-    }
-    this.setState({
-      width: this.state.width + 10,
-      height: this.state.height + 10,
-    });
-  },
-  decreaseImageSize: function() {
-    if (this.state.width <= 10) {
-      return;
-    }
-    this.setState({
-      width: this.state.width - 10,
-      height: this.state.height - 10,
-    });
-  },
-});
 
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';