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: #22123 Reviewed By: RSNara Differential Revision: D12929701 Pulled By: TheSavior fbshipit-source-id: 7a976f2208b557fcfda46d5b586b30652c550eb2
facebook · Nov 9, 2018 · 7b3c91e · 7b3c91e
1 parent bf2500e
commit 7b3c91e
Show file tree

Hide file tree

Showing 12 changed files with 124 additions and 58 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,