Fix inline styles in ReactAndroid (#22166)

Summary:
Fix `react-native/no-inline-styles` eslint warning for ReactAndroid module.
Pull Request resolved: https://github.com/facebook/react-native/pull/22166

Differential Revision: D12946925

Pulled By: TheSavior

fbshipit-source-id: f4bc0653bd2971e551bc46d89455c006003947c7

ReactAndroid/src/androidTest/js/CatalystRootViewTestModule.js

@@ -11,6 +11,7 @@
 
 const React = require('React');
 const Recording = require('NativeModules').Recording;
+const StyleSheet = require('StyleSheet');
 const View = require('View');
 
 class CatalystRootViewTestApp extends React.Component {
@@ -19,10 +20,16 @@ class CatalystRootViewTestApp extends React.Component {
   }
 
   render() {
-    return <View collapsable={false} style={{alignSelf: 'stretch'}} />;
+    return <View collapsable={false} style={styles.container} />;
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'stretch',
+  },
+});
+
 module.exports = {
   CatalystRootViewTestApp: CatalystRootViewTestApp,
 };

ReactAndroid/src/androidTest/js/LayoutEventsTestApp.js

@@ -11,6 +11,7 @@
 
 const React = require('React');
 const View = require('View');
+const StyleSheet = require('StyleSheet');
 
 const RecordingModule = require('NativeModules').Recording;
 
@@ -61,7 +62,7 @@ class LayoutEventsTestApp extends React.Component {
       <View
         onLayout={this.handleParentOnLayout}
         testID="parent"
-        style={{left: 0, top: 0, width: 500, height: 500}}>
+        style={styles.container}>
         <View
           onLayout={this.handleOnLayout}
           testID="container"
@@ -77,4 +78,13 @@ class LayoutEventsTestApp extends React.Component {
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+    left: 0,
+    top: 0,
+    width: 500,
+    height: 500,
+  },
+});
+
 module.exports = LayoutEventsTestApp;

ReactAndroid/src/androidTest/js/SwipeRefreshLayoutTestModule.js

@@ -14,6 +14,7 @@ const React = require('React');
 const RecordingModule = require('NativeModules')
   .SwipeRefreshLayoutRecordingModule;
 const ScrollView = require('ScrollView');
+const StyleSheet = require('StyleSheet');
 const RefreshControl = require('RefreshControl');
 const Text = require('Text');
 const TouchableWithoutFeedback = require('TouchableWithoutFeedback');
@@ -57,10 +58,10 @@ class SwipeRefreshLayoutTestApp extends React.Component {
     }
     return (
       <ScrollView
-        style={{flex: 1}}
+        style={styles.container}
         refreshControl={
           <RefreshControl
-            style={{flex: 1}}
+            style={styles.content}
             refreshing={false}
             onRefresh={() => RecordingModule.onRefresh()}
           />
@@ -85,4 +86,13 @@ BatchedBridge.registerCallableModule(
   SwipeRefreshLayoutTestModule,
 );
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+  },
+});
+
 module.exports = SwipeRefreshLayoutTestModule;

ReactAndroid/src/androidTest/js/TextInputTestModule.js

@@ -122,18 +122,18 @@ class TextInputTestApp extends React.Component {
         />
         <TextInput
           ref="textInput4"
-          style={[styles.textInput, {color: '#00ff00'}]}
+          style={[styles.textInput, styles.textInputColor]}
           testID="textInput4"
         />
         <TextInput
           ref="textInput5"
-          style={[styles.textInput, {color: '#00ff00'}]}
+          style={[styles.textInput, styles.textInputColor]}
           defaultValue=""
           testID="textInput5"
         />
         <TextInput
           ref="textInput6"
-          style={[styles.textInput, {color: '#00ff00'}]}
+          style={[styles.textInput, styles.textInputColor]}
           defaultValue="Text"
           testID="textInput6"
         />
@@ -166,6 +166,9 @@ const styles = StyleSheet.create({
     color: 'blue',
     fontWeight: 'bold',
   },
+  textInputColor: {
+    marginLeft: 20,
+  },
 });
 
 const TextInputTestModule = {

ReactAndroid/src/androidTest/js/ViewRenderingTestModule.js

@@ -15,14 +15,6 @@ const View = require('View');
 const StyleSheet = require('StyleSheet');
 
 const renderApplication = require('renderApplication');
-
-const styles = StyleSheet.create({
-  view: {
-    opacity: 0.75,
-    backgroundColor: 'rgb(255, 0, 0)',
-  },
-});
-
 class ViewSampleApp extends React.Component {
   state = {};
 
@@ -40,7 +32,7 @@ class MarginSampleApp extends React.Component {
     updateMargins = this.setState.bind(this, {margin: 15});
     return (
       <View
-        style={{margin: this.state.margin, marginLeft: 20}}
+        style={[{margin: this.state.margin}, styles.marginSample]}
         collapsable={false}
       />
     );
@@ -50,13 +42,8 @@ class MarginSampleApp extends React.Component {
 class BorderSampleApp extends React.Component {
   render() {
     return (
-      <View
-        style={{borderLeftWidth: 20, borderWidth: 5, backgroundColor: 'blue'}}
-        collapsable={false}>
-        <View
-          style={{backgroundColor: 'red', width: 20, height: 20}}
-          collapsable={false}
-        />
+      <View style={styles.borderSample} collapsable={false}>
+        <View style={styles.borderSampleContent} collapsable={false} />
       </View>
     );
   }
@@ -100,4 +87,24 @@ BatchedBridge.registerCallableModule(
   ViewRenderingTestModule,
 );
 
+const styles = StyleSheet.create({
+  view: {
+    opacity: 0.75,
+    backgroundColor: 'rgb(255, 0, 0)',
+  },
+  borderSample: {
+    borderLeftWidth: 20,
+    borderWidth: 5,
+    backgroundColor: 'blue',
+  },
+  borderSampleContent: {
+    backgroundColor: 'red',
+    width: 20,
+    height: 20,
+  },
+  marginSample: {
+    marginLeft: 20,
+  },
+});
+
 module.exports = ViewRenderingTestModule;