Skip to content

Commit 7d6c048

Browse files
ignacioolafacebook-github-bot
ignacioola
authored and
facebook-github-bot
committed
Fix inline styles eslint warnings for examples (facebook#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: facebook#22123 Reviewed By: RSNara Differential Revision: D12929701 Pulled By: TheSavior fbshipit-source-id: 7a976f2208b557fcfda46d5b586b30652c550eb2
1 parent dd8258f commit 7d6c048

12 files changed

+124
-58
lines changed

‎RNTester/js/ActivityIndicatorExample.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,7 @@ exports.examples = [
9090
return (
9191
<View>
9292
<ActivityIndicator style={[styles.centering]} />
93-
<ActivityIndicator
94-
style={[styles.centering, {backgroundColor: '#eeeeee'}]}
95-
/>
93+
<ActivityIndicator style={[styles.centering, styles.gray]} />
9694
</View>
9795
);
9896
},

‎RNTester/js/AlertIOSExample.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,8 @@ class PromptOptions extends React.Component<$FlowFixMeProps, any> {
9696
render() {
9797
return (
9898
<View>
99-
<Text style={{marginBottom: 10}}>
100-
<Text style={{fontWeight: 'bold'}}>Prompt value:</Text>{' '}
99+
<Text style={styles.promptValue}>
100+
<Text style={styles.promptValueLabel}>Prompt value:</Text>{' '}
101101
{this.state.promptValue}
102102
</Text>
103103

@@ -189,4 +189,10 @@ const styles = StyleSheet.create({
189189
backgroundColor: '#eeeeee',
190190
padding: 10,
191191
},
192+
promptValue: {
193+
marginBottom: 10,
194+
},
195+
promptValueLabel: {
196+
fontWeight: 'bold',
197+
},
192198
});

‎RNTester/js/AnimatedExample.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ exports.examples = [
246246
<Animated.Image
247247
source={require('./bunny.png')}
248248
style={[
249-
{width: 70, height: 70},
249+
styles.rotatingImage,
250250
{
251251
transform: [
252252
{
@@ -298,4 +298,8 @@ const styles = StyleSheet.create({
298298
borderRadius: 10,
299299
alignItems: 'center',
300300
},
301+
rotatingImage: {
302+
width: 70,
303+
height: 70,
304+
},
301305
});

‎RNTester/js/BorderExample.js‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ const styles = StyleSheet.create({
1818
width: 100,
1919
height: 100,
2020
},
21+
wrapper: {
22+
flexDirection: 'row',
23+
},
2124
border1: {
2225
borderWidth: 10,
2326
borderColor: 'brown',
@@ -92,6 +95,18 @@ const styles = StyleSheet.create({
9295
marginRight: 10,
9396
backgroundColor: 'lightgrey',
9497
},
98+
border8Top: {
99+
borderTopWidth: 5,
100+
},
101+
border8Left: {
102+
borderLeftWidth: 5,
103+
},
104+
border8Bottom: {
105+
borderBottomWidth: 5,
106+
},
107+
border8Right: {
108+
borderRightWidth: 5,
109+
},
95110
border9: {
96111
borderWidth: 10,
97112
borderTopLeftRadius: 10,
@@ -232,11 +247,11 @@ exports.examples = [
232247
description: 'top, left, bottom right',
233248
render() {
234249
return (
235-
<View style={{flexDirection: 'row'}}>
236-
<View style={[styles.box, styles.border8, {borderTopWidth: 5}]} />
237-
<View style={[styles.box, styles.border8, {borderLeftWidth: 5}]} />
238-
<View style={[styles.box, styles.border8, {borderBottomWidth: 5}]} />
239-
<View style={[styles.box, styles.border8, {borderRightWidth: 5}]} />
250+
<View style={styles.wrapper}>
251+
<View style={[styles.box, styles.border8, styles.border8Top]} />
252+
<View style={[styles.box, styles.border8, styles.border8Left]} />
253+
<View style={[styles.box, styles.border8, styles.border8Bottom]} />
254+
<View style={[styles.box, styles.border8, styles.border8Right]} />
240255
</View>
241256
);
242257
},

‎RNTester/js/BoxShadowExample.js‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,23 @@ const styles = StyleSheet.create({
3030
shadowRadius: 0,
3131
shadowOffset: {width: 3, height: 3},
3232
},
33+
shadowShaped: {
34+
borderRadius: 50,
35+
},
36+
shadowImage: {
37+
borderWidth: 0,
38+
overflow: 'visible',
39+
},
40+
shadowChild: {
41+
backgroundColor: 'transparent',
42+
},
43+
shadowChildBox: {
44+
width: 80,
45+
height: 80,
46+
borderRadius: 40,
47+
margin: 8,
48+
backgroundColor: 'red',
49+
},
3350
});
3451

3552
exports.title = 'Box Shadow';
@@ -54,7 +71,7 @@ exports.examples = [
5471
title: 'Shaped shadow',
5572
description: 'borderRadius: 50',
5673
render() {
57-
return <View style={[styles.box, styles.shadow1, {borderRadius: 50}]} />;
74+
return <View style={[styles.box, styles.shadow1, styles.shadowShaped]} />;
5875
},
5976
},
6077
{
@@ -64,11 +81,7 @@ exports.examples = [
6481
return (
6582
<Image
6683
source={require('./hawk.png')}
67-
style={[
68-
styles.box,
69-
styles.shadow1,
70-
{borderWidth: 0, overflow: 'visible'},
71-
]}
84+
style={[styles.box, styles.shadow1, styles.shadowImage]}
7285
/>
7386
);
7487
},
@@ -79,24 +92,8 @@ exports.examples = [
7992
'For views without an opaque background color, shadow will be derived from the subviews.',
8093
render() {
8194
return (
82-
<View
83-
style={[
84-
styles.box,
85-
styles.shadow1,
86-
{backgroundColor: 'transparent'},
87-
]}>
88-
<View
89-
style={[
90-
styles.box,
91-
{
92-
width: 80,
93-
height: 80,
94-
borderRadius: 40,
95-
margin: 8,
96-
backgroundColor: 'red',
97-
},
98-
]}
99-
/>
95+
<View style={[styles.box, styles.shadow1, styles.shadowChild]}>
96+
<View style={[styles.box, styles.shadowChildBox]} />
10097
</View>
10198
);
10299
},

‎RNTester/js/ButtonExample.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
const React = require('react');
1414
const ReactNative = require('react-native');
15-
const {Alert, Button, View} = ReactNative;
15+
const {Alert, Button, View, StyleSheet} = ReactNative;
1616

1717
function onButtonPress(buttonName) {
1818
Alert.alert(`${buttonName} has been pressed!`);
@@ -63,7 +63,7 @@ exports.examples = [
6363
'This layout strategy lets the title define the width of ' + 'the button',
6464
render: function() {
6565
return (
66-
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
66+
<View style={styles.container}>
6767
<Button
6868
onPress={() => onButtonPress('Left')}
6969
title="This looks great!"
@@ -94,3 +94,10 @@ exports.examples = [
9494
},
9595
},
9696
];
97+
98+
const styles = StyleSheet.create({
99+
container: {
100+
flexDirection: 'row',
101+
justifyContent: 'space-between',
102+
},
103+
});

‎RNTester/js/CheckBoxExample.js‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@
77
* @flow
88
* @format
99
*/
10+
1011
'use strict';
1112

1213
const React = require('react');
1314
const ReactNative = require('react-native');
14-
const {CheckBox, Text, View} = ReactNative;
15+
const {CheckBox, Text, View, StyleSheet} = ReactNative;
1516

1617
class BasicCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
1718
state = {
@@ -24,7 +25,7 @@ class BasicCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
2425
<View>
2526
<CheckBox
2627
onValueChange={value => this.setState({falseCheckBoxIsOn: value})}
27-
style={{marginBottom: 10}}
28+
style={styles.checkbox}
2829
value={this.state.falseCheckBoxIsOn}
2930
/>
3031
<CheckBox
@@ -40,7 +41,7 @@ class DisabledCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
4041
render() {
4142
return (
4243
<View>
43-
<CheckBox disabled={true} style={{marginBottom: 10}} value={true} />
44+
<CheckBox disabled={true} style={styles.checkbox} value={true} />
4445
<CheckBox disabled={true} value={false} />
4546
</View>
4647
);
@@ -55,16 +56,16 @@ class EventCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
5556

5657
render() {
5758
return (
58-
<View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
59+
<View style={styles.container}>
5960
<View>
6061
<CheckBox
6162
onValueChange={value => this.setState({eventCheckBoxIsOn: value})}
62-
style={{marginBottom: 10}}
63+
style={styles.checkbox}
6364
value={this.state.eventCheckBoxIsOn}
6465
/>
6566
<CheckBox
6667
onValueChange={value => this.setState({eventCheckBoxIsOn: value})}
67-
style={{marginBottom: 10}}
68+
style={styles.checkbox}
6869
value={this.state.eventCheckBoxIsOn}
6970
/>
7071
<Text>{this.state.eventCheckBoxIsOn ? 'On' : 'Off'}</Text>
@@ -74,14 +75,14 @@ class EventCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
7475
onValueChange={value =>
7576
this.setState({eventCheckBoxRegressionIsOn: value})
7677
}
77-
style={{marginBottom: 10}}
78+
style={styles.checkbox}
7879
value={this.state.eventCheckBoxRegressionIsOn}
7980
/>
8081
<CheckBox
8182
onValueChange={value =>
8283
this.setState({eventCheckBoxRegressionIsOn: value})
8384
}
84-
style={{marginBottom: 10}}
85+
style={styles.checkbox}
8586
value={this.state.eventCheckBoxRegressionIsOn}
8687
/>
8788
<Text>{this.state.eventCheckBoxRegressionIsOn ? 'On' : 'Off'}</Text>
@@ -122,3 +123,13 @@ exports.title = '<CheckBox>';
122123
exports.displayName = 'CheckBoxExample';
123124
exports.description = 'Native boolean input';
124125
exports.examples = examples;
126+
127+
const styles = StyleSheet.create({
128+
container: {
129+
flexDirection: 'row',
130+
justifyContent: 'space-around',
131+
},
132+
checkbox: {
133+
marginBottom: 10,
134+
},
135+
});

‎RNTester/js/ClipboardExample.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
const React = require('react');
1414
const ReactNative = require('react-native');
15-
const {Clipboard, View, Text} = ReactNative;
15+
const {Clipboard, View, Text, StyleSheet} = ReactNative;
1616

1717
class ClipboardExample extends React.Component<{}, $FlowFixMeState> {
1818
state = {
@@ -32,10 +32,10 @@ class ClipboardExample extends React.Component<{}, $FlowFixMeState> {
3232
render() {
3333
return (
3434
<View>
35-
<Text onPress={this._setClipboardContent} style={{color: 'blue'}}>
35+
<Text onPress={this._setClipboardContent} style={styles.label}>
3636
Tap to put "Hello World" in the clipboard
3737
</Text>
38-
<Text style={{color: 'red', marginTop: 20}}>{this.state.content}</Text>
38+
<Text style={styles.content}>{this.state.content}</Text>
3939
</View>
4040
);
4141
}
@@ -51,3 +51,13 @@ exports.examples = [
5151
},
5252
},
5353
];
54+
55+
const styles = StyleSheet.create({
56+
label: {
57+
color: 'blue',
58+
},
59+
content: {
60+
color: 'red',
61+
marginTop: 20,
62+
},
63+
});

‎RNTester/js/ToolbarAndroidExample.android.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,7 @@ class ToolbarAndroidExample extends React.Component<{}, $FlowFixMeState> {
6161
height: 144,
6262
})}
6363
style={styles.toolbar}>
64-
<View
65-
style={{height: 56, flexDirection: 'row', alignItems: 'center'}}>
64+
<View style={styles.switchWrapper}>
6665
<Switch
6766
value={this.state.toolbarSwitch}
6867
onValueChange={value => this.setState({toolbarSwitch: value})}
@@ -168,6 +167,11 @@ const styles = StyleSheet.create({
168167
backgroundColor: '#e9eaed',
169168
height: 56,
170169
},
170+
switchWrapper: {
171+
height: 56,
172+
flexDirection: 'row',
173+
alignItems: 'center',
174+
},
171175
});
172176

173177
module.exports = ToolbarAndroidExample;

‎RNTester/js/TouchableExample.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ class TouchableFeedbackEvents extends React.Component<{}, $FlowFixMeState> {
231231
render() {
232232
return (
233233
<View testID="touchable_feedback_events">
234-
<View style={[styles.row, {justifyContent: 'center'}]}>
234+
<View style={[styles.row, styles.centered]}>
235235
<TouchableOpacity
236236
style={styles.wrapper}
237237
testID="touchable_feedback_events_button"
@@ -269,7 +269,7 @@ class TouchableDelayEvents extends React.Component<{}, $FlowFixMeState> {
269269
render() {
270270
return (
271271
<View testID="touchable_delay_events">
272-
<View style={[styles.row, {justifyContent: 'center'}]}>
272+
<View style={[styles.row, styles.centered]}>
273273
<TouchableOpacity
274274
style={styles.wrapper}
275275
testID="touchable_delay_events_button"
@@ -317,7 +317,7 @@ class ForceTouchExample extends React.Component<{}, $FlowFixMeState> {
317317
<View style={styles.forceTouchBox} testID="touchable_3dtouch_output">
318318
<Text>{this._renderConsoleText()}</Text>
319319
</View>
320-
<View style={[styles.row, {justifyContent: 'center'}]}>
320+
<View style={[styles.row, styles.centered]}>
321321
<View
322322
style={styles.wrapper}
323323
testID="touchable_3dtouch_button"
@@ -355,7 +355,7 @@ class TouchableHitSlop extends React.Component<{}, $FlowFixMeState> {
355355

356356
return (
357357
<View testID="touchable_hit_slop">
358-
<View style={[styles.row, {justifyContent: 'center'}]}>
358+
<View style={[styles.row, styles.centered]}>
359359
<TouchableOpacity
360360
onPress={this.onPress}
361361
style={styles.hitSlopWrapper}
@@ -467,6 +467,9 @@ const styles = StyleSheet.create({
467467
justifyContent: 'center',
468468
flexDirection: 'row',
469469
},
470+
centered: {
471+
justifyContent: 'center',
472+
},
470473
image: {
471474
width: 50,
472475
height: 50,

0 commit comments

Comments
 (0)