@@ -78,18 +78,10 @@ export default class App extends Component<{}> {
78
78
{ this . invocationEvent ( ) }
79
79
< Text style = { styles . textColor } > Set primary color </ Text >
80
80
< View style = { styles . rowView } >
81
- < TouchableOpacity style = { styles . buttonColor } onPress = { ( ) => this . setPrimaryColor ( '#FF0000' ) } >
82
- < Text style = { styles . text } > RED </ Text >
83
- </ TouchableOpacity >
84
- < TouchableOpacity style = { styles . buttonColor } onPress = { ( ) => this . setPrimaryColor ( '#00FF00' ) } >
85
- < Text style = { styles . text } > GREEN </ Text >
86
- </ TouchableOpacity >
87
- < TouchableOpacity style = { styles . buttonColor } onPress = { ( ) => this . setPrimaryColor ( '#0000FF' ) } >
88
- < Text style = { styles . text } > BLUE </ Text >
89
- </ TouchableOpacity >
90
- < TouchableOpacity style = { styles . buttonColor } onPress = { ( ) => this . setPrimaryColor ( '#FFFF00' ) } >
91
- < Text style = { styles . text } > YELLOW </ Text >
92
- </ TouchableOpacity >
81
+ < TouchableOpacity style = { buttonColor ( '#FF0000' ) } onPress = { ( ) => this . setPrimaryColor ( '#FF0000' ) } />
82
+ < TouchableOpacity style = { buttonColor ( '#00FF00' ) } onPress = { ( ) => this . setPrimaryColor ( '#00FF00' ) } />
83
+ < TouchableOpacity style = { buttonColor ( '#0000FF' ) } onPress = { ( ) => this . setPrimaryColor ( '#0000FF' ) } />
84
+ < TouchableOpacity style = { buttonColor ( '#FFFF00' ) } onPress = { ( ) => this . setPrimaryColor ( '#FFFF00' ) } />
93
85
</ View >
94
86
< View style = { styles . switchView } >
95
87
< Text style = { styles . textSwitchStyle } > Color Theme: { this . state . colorTheme } </ Text >
@@ -203,12 +195,22 @@ export default class App extends Component<{}> {
203
195
} ) ;
204
196
}
205
197
}
206
-
198
+ buttonColor = function ( myColor ) {
199
+ return {
200
+ marginTop : 10 ,
201
+ padding : 20 ,
202
+ paddingRight : 40 ,
203
+ alignItems : 'center' ,
204
+ borderRadius : 5 ,
205
+ marginRight : 5 ,
206
+ backgroundColor : myColor ,
207
+ }
208
+ }
207
209
const styles = StyleSheet . create ( {
208
210
container : {
209
211
flex : 1 ,
210
212
alignItems : 'center' ,
211
- backgroundColor : '#F5FCFF' ,
213
+ backgroundColor : '#F5FCFF'
212
214
} ,
213
215
details : {
214
216
textAlign : 'center' ,
@@ -230,7 +232,10 @@ const styles = StyleSheet.create({
230
232
} ,
231
233
rowView : {
232
234
flexDirection : 'row' ,
233
- marginTop : 10
235
+ marginTop : 10 ,
236
+ maxWidth : '100%' ,
237
+ flexGrow : 1 ,
238
+ flexWrap : 'wrap'
234
239
} ,
235
240
textColor : {
236
241
fontSize : 14 ,
0 commit comments