remove createReactClass from ScrollViewTestModule.js (#21627)

Summary:
Related to issue #21581
Removed createReactClass from ReactAndroid/src/androidTest/js/ScrollViewTestModule.js
Pull Request resolved: #21627

Reviewed By: TheSavior

Differential Revision: D10363828

Pulled By: RSNara

fbshipit-source-id: 08c9776060cfdfde3b69f310bca0353d393b67c4

ReactAndroid/src/androidTest/js/ScrollViewTestModule.js

@@ -5,27 +5,36 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow
  */
 
 'use strict';
 
-var BatchedBridge = require('BatchedBridge');
-var React = require('React');
-var createReactClass = require('create-react-class');
-var View = require('View');
-var ScrollView = require('ScrollView');
-var Text = require('Text');
-var StyleSheet = require('StyleSheet');
-var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
-var ScrollListener = require('NativeModules').ScrollListener;
+const BatchedBridge = require('BatchedBridge');
+const React = require('React');
+const View = require('View');
+const ScrollView = require('ScrollView');
+const Text = require('Text');
+const StyleSheet = require('StyleSheet');
+const TouchableWithoutFeedback = require('TouchableWithoutFeedback');
+const ScrollListener = require('NativeModules').ScrollListener;
 
-var NUM_ITEMS = 100;
+const NUM_ITEMS = 100;
+
+import type {PressEvent} from 'CoreEventTypes';
 
 // Shared by integration tests for ScrollView and HorizontalScrollView
 
-var scrollViewApp;
+let scrollViewApp;
+
+type ItemProps = $ReadOnly<{|
+  onPress: (event: PressEvent) => void,
+  text: string,
+|}>;
+
+type ItemState = {||};
 
-class Item extends React.Component {
+class Item extends React.Component<ItemProps, ItemState> {
   render() {
     return (
       <TouchableWithoutFeedback onPress={this.props.onPress}>
@@ -37,7 +46,7 @@ class Item extends React.Component {
   }
 }
 
-var getInitialState = function() {
+const getInitialState = function() {
   var data = [];
   for (var i = 0; i < NUM_ITEMS; i++) {
     data[i] = {text: 'Item ' + i + '!'};
@@ -47,90 +56,99 @@ var getInitialState = function() {
   };
 };
 
-var onScroll = function(e) {
+const onScroll = function(e) {
   ScrollListener.onScroll(
     e.nativeEvent.contentOffset.x,
     e.nativeEvent.contentOffset.y,
   );
 };
 
-var onScrollBeginDrag = function(e) {
+const onScrollBeginDrag = function(e) {
   ScrollListener.onScrollBeginDrag(
     e.nativeEvent.contentOffset.x,
     e.nativeEvent.contentOffset.y,
   );
 };
 
-var onScrollEndDrag = function(e) {
+const onScrollEndDrag = function(e) {
   ScrollListener.onScrollEndDrag(
     e.nativeEvent.contentOffset.x,
     e.nativeEvent.contentOffset.y,
   );
 };
 
-var onItemPress = function(itemNumber) {
+const onItemPress = function(itemNumber) {
   ScrollListener.onItemPress(itemNumber);
 };
 
-var ScrollViewTestApp = createReactClass({
-  displayName: 'ScrollViewTestApp',
-  getInitialState: getInitialState,
-  onScroll: onScroll,
-  onItemPress: onItemPress,
-  onScrollBeginDrag: onScrollBeginDrag,
-  onScrollEndDrag: onScrollEndDrag,
+type Props = $ReadOnly<{||}>;
+type State = {|
+  data: $ReadOnlyArray<{|text: string|}>,
+|};
 
-  scrollTo: function(destX, destY) {
-    this.refs.scrollView.scrollTo(destY, destX);
-  },
+class ScrollViewTestApp extends React.Component<Props, State> {
+  scrollView = React.createRef();
+  state = getInitialState();
+
+  scrollTo(destX: number, destY: number) {
+    const scrollView = this.scrollView.current;
+    if (scrollView == null) {
+      return;
+    }
 
-  render: function() {
+    scrollView.scrollTo(destY, destX);
+  }
+
+  render() {
     scrollViewApp = this;
     var children = this.state.data.map((item, index) => (
       <Item
         key={index}
         text={item.text}
-        onPress={this.onItemPress.bind(this, index)}
+        onPress={onItemPress.bind(this, index)}
       />
     ));
     return (
       <ScrollView
-        onScroll={this.onScroll}
-        onScrollBeginDrag={this.onScrollBeginDrag}
-        onScrollEndDrag={this.onScrollEndDrag}
-        ref="scrollView">
+        onScroll={onScroll}
+        onScrollBeginDrag={onScrollBeginDrag}
+        onScrollEndDrag={onScrollEndDrag}
+        ref={this.scrollView}>
         {children}
       </ScrollView>
     );
-  },
-});
+  }
+}
 
-var HorizontalScrollViewTestApp = createReactClass({
-  displayName: 'HorizontalScrollViewTestApp',
-  getInitialState: getInitialState,
-  onScroll: onScroll,
-  onItemPress: onItemPress,
+class HorizontalScrollViewTestApp extends React.Component<Props, State> {
+  scrollView = React.createRef();
+  state = getInitialState();
 
-  scrollTo: function(destX, destY) {
-    this.refs.scrollView.scrollTo(destY, destX);
-  },
+  scrollTo(destX: number, destY: number) {
+    const scrollView = this.scrollView.current;
+    if (scrollView == null) {
+      return;
+    }
+
+    scrollView.scrollTo(destY, destX);
+  }
 
-  render: function() {
+  render() {
     scrollViewApp = this;
     var children = this.state.data.map((item, index) => (
       <Item
         key={index}
         text={item.text}
-        onPress={this.onItemPress.bind(this, index)}
+        onPress={onItemPress.bind(this, index)}
       />
     ));
     return (
-      <ScrollView horizontal={true} onScroll={this.onScroll} ref="scrollView">
+      <ScrollView horizontal={true} onScroll={onScroll} ref={this.scrollView}>
         {children}
       </ScrollView>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   item_container: {
@@ -147,7 +165,7 @@ var styles = StyleSheet.create({
 var ScrollViewTestModule = {
   ScrollViewTestApp: ScrollViewTestApp,
   HorizontalScrollViewTestApp: HorizontalScrollViewTestApp,
-  scrollTo: function(destX, destY) {
+  scrollTo(destX: number, destY: number) {
     scrollViewApp.scrollTo(destX, destY);
   },
 };