From 7b3c91ef163eb6172da44b8c2c340adef0d5a44b Mon Sep 17 00:00:00 2001
From: Ignacio Olaciregui <ignacioola@gmail.com>
Date: Thu, 8 Nov 2018 17:17:26 -0800
Subject: [PATCH] Fix inline styles eslint warnings for examples (#22123)

Summary:
Fixes `react-native/no-inline-styles` warning for several examples. I'm limiting the size of this PR to make it simpler to review.
Pull Request resolved: https://github.com/facebook/react-native/pull/22123

Reviewed By: RSNara

Differential Revision: D12929701

Pulled By: TheSavior

fbshipit-source-id: 7a976f2208b557fcfda46d5b586b30652c550eb2
---
 RNTester/js/ActivityIndicatorExample.js       |  4 +-
 RNTester/js/AlertIOSExample.js                | 10 ++++-
 RNTester/js/AnimatedExample.js                |  6 ++-
 RNTester/js/BorderExample.js                  | 25 ++++++++---
 RNTester/js/BoxShadowExample.js               | 45 +++++++++----------
 RNTester/js/ButtonExample.js                  | 11 ++++-
 RNTester/js/CheckBoxExample.js                | 27 +++++++----
 RNTester/js/ClipboardExample.js               | 16 +++++--
 RNTester/js/ToolbarAndroidExample.android.js  |  8 +++-
 RNTester/js/TouchableExample.js               | 11 +++--
 RNTester/js/TransformExample.js               |  9 ++--
 .../androidTest/js/ProgressBarTestModule.js   | 10 ++++-
 12 files changed, 124 insertions(+), 58 deletions(-)

diff --git a/RNTester/js/ActivityIndicatorExample.js b/RNTester/js/ActivityIndicatorExample.js
index a9bd7ff062a0f9..937b368a443b10 100644
--- a/RNTester/js/ActivityIndicatorExample.js
+++ b/RNTester/js/ActivityIndicatorExample.js
@@ -90,9 +90,7 @@ exports.examples = [
       return (
         <View>
           <ActivityIndicator style={[styles.centering]} />
-          <ActivityIndicator
-            style={[styles.centering, {backgroundColor: '#eeeeee'}]}
-          />
+          <ActivityIndicator style={[styles.centering, styles.gray]} />
         </View>
       );
     },
diff --git a/RNTester/js/AlertIOSExample.js b/RNTester/js/AlertIOSExample.js
index 87f9e2f6f13e5f..16868ce504a15b 100644
--- a/RNTester/js/AlertIOSExample.js
+++ b/RNTester/js/AlertIOSExample.js
@@ -96,8 +96,8 @@ class PromptOptions extends React.Component<$FlowFixMeProps, any> {
   render() {
     return (
       <View>
-        <Text style={{marginBottom: 10}}>
-          <Text style={{fontWeight: 'bold'}}>Prompt value:</Text>{' '}
+        <Text style={styles.promptValue}>
+          <Text style={styles.promptValueLabel}>Prompt value:</Text>{' '}
           {this.state.promptValue}
         </Text>
 
@@ -189,4 +189,10 @@ const styles = StyleSheet.create({
     backgroundColor: '#eeeeee',
     padding: 10,
   },
+  promptValue: {
+    marginBottom: 10,
+  },
+  promptValueLabel: {
+    fontWeight: 'bold',
+  },
 });
diff --git a/RNTester/js/AnimatedExample.js b/RNTester/js/AnimatedExample.js
index 51b335700d812f..1802d03a2719bc 100644
--- a/RNTester/js/AnimatedExample.js
+++ b/RNTester/js/AnimatedExample.js
@@ -246,7 +246,7 @@ exports.examples = [
           <Animated.Image
             source={require('./bunny.png')}
             style={[
-              {width: 70, height: 70},
+              styles.rotatingImage,
               {
                 transform: [
                   {
@@ -298,4 +298,8 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     alignItems: 'center',
   },
+  rotatingImage: {
+    width: 70,
+    height: 70,
+  },
 });
diff --git a/RNTester/js/BorderExample.js b/RNTester/js/BorderExample.js
index f70ffcb0b6bfaa..36c75a5a5d5005 100644
--- a/RNTester/js/BorderExample.js
+++ b/RNTester/js/BorderExample.js
@@ -18,6 +18,9 @@ const styles = StyleSheet.create({
     width: 100,
     height: 100,
   },
+  wrapper: {
+    flexDirection: 'row',
+  },
   border1: {
     borderWidth: 10,
     borderColor: 'brown',
@@ -92,6 +95,18 @@ const styles = StyleSheet.create({
     marginRight: 10,
     backgroundColor: 'lightgrey',
   },
+  border8Top: {
+    borderTopWidth: 5,
+  },
+  border8Left: {
+    borderLeftWidth: 5,
+  },
+  border8Bottom: {
+    borderBottomWidth: 5,
+  },
+  border8Right: {
+    borderRightWidth: 5,
+  },
   border9: {
     borderWidth: 10,
     borderTopLeftRadius: 10,
@@ -232,11 +247,11 @@ exports.examples = [
     description: 'top, left, bottom right',
     render() {
       return (
-        <View style={{flexDirection: 'row'}}>
-          <View style={[styles.box, styles.border8, {borderTopWidth: 5}]} />
-          <View style={[styles.box, styles.border8, {borderLeftWidth: 5}]} />
-          <View style={[styles.box, styles.border8, {borderBottomWidth: 5}]} />
-          <View style={[styles.box, styles.border8, {borderRightWidth: 5}]} />
+        <View style={styles.wrapper}>
+          <View style={[styles.box, styles.border8, styles.border8Top]} />
+          <View style={[styles.box, styles.border8, styles.border8Left]} />
+          <View style={[styles.box, styles.border8, styles.border8Bottom]} />
+          <View style={[styles.box, styles.border8, styles.border8Right]} />
         </View>
       );
     },
diff --git a/RNTester/js/BoxShadowExample.js b/RNTester/js/BoxShadowExample.js
index 5c94582e1b18fe..2996d063e73d5c 100644
--- a/RNTester/js/BoxShadowExample.js
+++ b/RNTester/js/BoxShadowExample.js
@@ -30,6 +30,23 @@ const styles = StyleSheet.create({
     shadowRadius: 0,
     shadowOffset: {width: 3, height: 3},
   },
+  shadowShaped: {
+    borderRadius: 50,
+  },
+  shadowImage: {
+    borderWidth: 0,
+    overflow: 'visible',
+  },
+  shadowChild: {
+    backgroundColor: 'transparent',
+  },
+  shadowChildBox: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    margin: 8,
+    backgroundColor: 'red',
+  },
 });
 
 exports.title = 'Box Shadow';
@@ -54,7 +71,7 @@ exports.examples = [
     title: 'Shaped shadow',
     description: 'borderRadius: 50',
     render() {
-      return <View style={[styles.box, styles.shadow1, {borderRadius: 50}]} />;
+      return <View style={[styles.box, styles.shadow1, styles.shadowShaped]} />;
     },
   },
   {
@@ -64,11 +81,7 @@ exports.examples = [
       return (
         <Image
           source={require('./hawk.png')}
-          style={[
-            styles.box,
-            styles.shadow1,
-            {borderWidth: 0, overflow: 'visible'},
-          ]}
+          style={[styles.box, styles.shadow1, styles.shadowImage]}
         />
       );
     },
@@ -79,24 +92,8 @@ exports.examples = [
       'For views without an opaque background color, shadow will be derived from the subviews.',
     render() {
       return (
-        <View
-          style={[
-            styles.box,
-            styles.shadow1,
-            {backgroundColor: 'transparent'},
-          ]}>
-          <View
-            style={[
-              styles.box,
-              {
-                width: 80,
-                height: 80,
-                borderRadius: 40,
-                margin: 8,
-                backgroundColor: 'red',
-              },
-            ]}
-          />
+        <View style={[styles.box, styles.shadow1, styles.shadowChild]}>
+          <View style={[styles.box, styles.shadowChildBox]} />
         </View>
       );
     },
diff --git a/RNTester/js/ButtonExample.js b/RNTester/js/ButtonExample.js
index 361913960c8773..4892947c4844d1 100644
--- a/RNTester/js/ButtonExample.js
+++ b/RNTester/js/ButtonExample.js
@@ -12,7 +12,7 @@
 
 const React = require('react');
 const ReactNative = require('react-native');
-const {Alert, Button, View} = ReactNative;
+const {Alert, Button, View, StyleSheet} = ReactNative;
 
 function onButtonPress(buttonName) {
   Alert.alert(`${buttonName} has been pressed!`);
@@ -63,7 +63,7 @@ exports.examples = [
       'This layout strategy lets the title define the width of ' + 'the button',
     render: function() {
       return (
-        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+        <View style={styles.container}>
           <Button
             onPress={() => onButtonPress('Left')}
             title="This looks great!"
@@ -94,3 +94,10 @@ exports.examples = [
     },
   },
 ];
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});
diff --git a/RNTester/js/CheckBoxExample.js b/RNTester/js/CheckBoxExample.js
index 867df34469a9db..1b16231ef3331e 100644
--- a/RNTester/js/CheckBoxExample.js
+++ b/RNTester/js/CheckBoxExample.js
@@ -7,11 +7,12 @@
  * @flow
  * @format
  */
+
 'use strict';
 
 const React = require('react');
 const ReactNative = require('react-native');
-const {CheckBox, Text, View} = ReactNative;
+const {CheckBox, Text, View, StyleSheet} = ReactNative;
 
 class BasicCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
   state = {
@@ -24,7 +25,7 @@ class BasicCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
       <View>
         <CheckBox
           onValueChange={value => this.setState({falseCheckBoxIsOn: value})}
-          style={{marginBottom: 10}}
+          style={styles.checkbox}
           value={this.state.falseCheckBoxIsOn}
         />
         <CheckBox
@@ -40,7 +41,7 @@ class DisabledCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
   render() {
     return (
       <View>
-        <CheckBox disabled={true} style={{marginBottom: 10}} value={true} />
+        <CheckBox disabled={true} style={styles.checkbox} value={true} />
         <CheckBox disabled={true} value={false} />
       </View>
     );
@@ -55,16 +56,16 @@ class EventCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
 
   render() {
     return (
-      <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
+      <View style={styles.container}>
         <View>
           <CheckBox
             onValueChange={value => this.setState({eventCheckBoxIsOn: value})}
-            style={{marginBottom: 10}}
+            style={styles.checkbox}
             value={this.state.eventCheckBoxIsOn}
           />
           <CheckBox
             onValueChange={value => this.setState({eventCheckBoxIsOn: value})}
-            style={{marginBottom: 10}}
+            style={styles.checkbox}
             value={this.state.eventCheckBoxIsOn}
           />
           <Text>{this.state.eventCheckBoxIsOn ? 'On' : 'Off'}</Text>
@@ -74,14 +75,14 @@ class EventCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
             onValueChange={value =>
               this.setState({eventCheckBoxRegressionIsOn: value})
             }
-            style={{marginBottom: 10}}
+            style={styles.checkbox}
             value={this.state.eventCheckBoxRegressionIsOn}
           />
           <CheckBox
             onValueChange={value =>
               this.setState({eventCheckBoxRegressionIsOn: value})
             }
-            style={{marginBottom: 10}}
+            style={styles.checkbox}
             value={this.state.eventCheckBoxRegressionIsOn}
           />
           <Text>{this.state.eventCheckBoxRegressionIsOn ? 'On' : 'Off'}</Text>
@@ -122,3 +123,13 @@ exports.title = '<CheckBox>';
 exports.displayName = 'CheckBoxExample';
 exports.description = 'Native boolean input';
 exports.examples = examples;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  checkbox: {
+    marginBottom: 10,
+  },
+});
diff --git a/RNTester/js/ClipboardExample.js b/RNTester/js/ClipboardExample.js
index 4f6c5d0ea0ce97..adc6f40a1dbb6c 100644
--- a/RNTester/js/ClipboardExample.js
+++ b/RNTester/js/ClipboardExample.js
@@ -12,7 +12,7 @@
 
 const React = require('react');
 const ReactNative = require('react-native');
-const {Clipboard, View, Text} = ReactNative;
+const {Clipboard, View, Text, StyleSheet} = ReactNative;
 
 class ClipboardExample extends React.Component<{}, $FlowFixMeState> {
   state = {
@@ -32,10 +32,10 @@ class ClipboardExample extends React.Component<{}, $FlowFixMeState> {
   render() {
     return (
       <View>
-        <Text onPress={this._setClipboardContent} style={{color: 'blue'}}>
+        <Text onPress={this._setClipboardContent} style={styles.label}>
           Tap to put "Hello World" in the clipboard
         </Text>
-        <Text style={{color: 'red', marginTop: 20}}>{this.state.content}</Text>
+        <Text style={styles.content}>{this.state.content}</Text>
       </View>
     );
   }
@@ -51,3 +51,13 @@ exports.examples = [
     },
   },
 ];
+
+const styles = StyleSheet.create({
+  label: {
+    color: 'blue',
+  },
+  content: {
+    color: 'red',
+    marginTop: 20,
+  },
+});
diff --git a/RNTester/js/ToolbarAndroidExample.android.js b/RNTester/js/ToolbarAndroidExample.android.js
index 4e1c5338ecf1b2..84144fa5e901de 100644
--- a/RNTester/js/ToolbarAndroidExample.android.js
+++ b/RNTester/js/ToolbarAndroidExample.android.js
@@ -61,8 +61,7 @@ class ToolbarAndroidExample extends React.Component<{}, $FlowFixMeState> {
               height: 144,
             })}
             style={styles.toolbar}>
-            <View
-              style={{height: 56, flexDirection: 'row', alignItems: 'center'}}>
+            <View style={styles.switchWrapper}>
               <Switch
                 value={this.state.toolbarSwitch}
                 onValueChange={value => this.setState({toolbarSwitch: value})}
@@ -168,6 +167,11 @@ const styles = StyleSheet.create({
     backgroundColor: '#e9eaed',
     height: 56,
   },
+  switchWrapper: {
+    height: 56,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
 });
 
 module.exports = ToolbarAndroidExample;
diff --git a/RNTester/js/TouchableExample.js b/RNTester/js/TouchableExample.js
index 34ddd72dec55fc..7e662612629aa7 100644
--- a/RNTester/js/TouchableExample.js
+++ b/RNTester/js/TouchableExample.js
@@ -231,7 +231,7 @@ class TouchableFeedbackEvents extends React.Component<{}, $FlowFixMeState> {
   render() {
     return (
       <View testID="touchable_feedback_events">
-        <View style={[styles.row, {justifyContent: 'center'}]}>
+        <View style={[styles.row, styles.centered]}>
           <TouchableOpacity
             style={styles.wrapper}
             testID="touchable_feedback_events_button"
@@ -269,7 +269,7 @@ class TouchableDelayEvents extends React.Component<{}, $FlowFixMeState> {
   render() {
     return (
       <View testID="touchable_delay_events">
-        <View style={[styles.row, {justifyContent: 'center'}]}>
+        <View style={[styles.row, styles.centered]}>
           <TouchableOpacity
             style={styles.wrapper}
             testID="touchable_delay_events_button"
@@ -317,7 +317,7 @@ class ForceTouchExample extends React.Component<{}, $FlowFixMeState> {
         <View style={styles.forceTouchBox} testID="touchable_3dtouch_output">
           <Text>{this._renderConsoleText()}</Text>
         </View>
-        <View style={[styles.row, {justifyContent: 'center'}]}>
+        <View style={[styles.row, styles.centered]}>
           <View
             style={styles.wrapper}
             testID="touchable_3dtouch_button"
@@ -355,7 +355,7 @@ class TouchableHitSlop extends React.Component<{}, $FlowFixMeState> {
 
     return (
       <View testID="touchable_hit_slop">
-        <View style={[styles.row, {justifyContent: 'center'}]}>
+        <View style={[styles.row, styles.centered]}>
           <TouchableOpacity
             onPress={this.onPress}
             style={styles.hitSlopWrapper}
@@ -467,6 +467,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row',
   },
+  centered: {
+    justifyContent: 'center',
+  },
   image: {
     width: 50,
     height: 50,
diff --git a/RNTester/js/TransformExample.js b/RNTester/js/TransformExample.js
index 90737e8e33255e..32a1c7f9fe749e 100644
--- a/RNTester/js/TransformExample.js
+++ b/RNTester/js/TransformExample.js
@@ -54,10 +54,8 @@ class Flip extends React.Component<{}, $FlowFixMeState> {
         <Animated.View
           style={[
             styles.flipCard,
+            styles.flipCard1,
             {
-              position: 'absolute',
-              top: 0,
-              backgroundColor: 'red',
               transform: [
                 {perspective: 850},
                 {
@@ -178,6 +176,11 @@ const styles = StyleSheet.create({
     backgroundColor: 'blue',
     backfaceVisibility: 'hidden',
   },
+  flipCard1: {
+    position: 'absolute',
+    top: 0,
+    backgroundColor: 'red',
+  },
   flipText: {
     width: 90,
     fontSize: 20,
diff --git a/ReactAndroid/src/androidTest/js/ProgressBarTestModule.js b/ReactAndroid/src/androidTest/js/ProgressBarTestModule.js
index 3f4fb138c251d9..b50ba788c30c23 100644
--- a/ReactAndroid/src/androidTest/js/ProgressBarTestModule.js
+++ b/ReactAndroid/src/androidTest/js/ProgressBarTestModule.js
@@ -11,6 +11,8 @@
 
 const BatchedBridge = require('BatchedBridge');
 const React = require('React');
+const ReactNative = require('react-native');
+const {StyleSheet} = ReactNative;
 const ProgressBar = require('ProgressBarAndroid');
 const View = require('View');
 
@@ -29,7 +31,7 @@ class ProgressBarSampleApp extends React.Component {
         <ProgressBar styleAttr="Inverse" testID="Inverse" />
         <ProgressBar styleAttr="SmallInverse" testID="SmallInverse" />
         <ProgressBar styleAttr="LargeInverse" testID="LargeInverse" />
-        <View style={{width: 200}}>
+        <View style={styles.wrapper}>
           <ProgressBar styleAttr="Horizontal" testID="Horizontal200" />
         </View>
       </View>
@@ -48,4 +50,10 @@ BatchedBridge.registerCallableModule(
   ProgressBarTestModule,
 );
 
+const styles = StyleSheet.create({
+  wrapper: {
+    width: 200,
+  },
+});
+
 module.exports = ProgressBarTestModule;