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
2018-11-08 17:17:26 -08:00 · 2018-11-08 17:17:26 -08:00 · 7b3c91ef16
parent bf2500e38e
commit 7b3c91ef16
12 changed files with 124 additions and 58 deletions
--- 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>
      );
    },
--- 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',
+  },
 });
--- 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,
+  },
 });
--- 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>
      );
    },
--- 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>
      );
    },
--- 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',
+  },
+});
--- 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,
+  },
+});
--- 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,
+  },
+});
--- 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;
--- 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,
--- 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,
--- 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;