@@ -18,31 +18,31 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
1818
1919 render ( ) {
2020 return (
21- < ScrollView contentContainerStyle = { { paddingTop : 80 } } >
22- < View style = { { marginBottom : 10 } } >
21+ < ScrollView contentContainerStyle = { styles . container } >
22+ < View style = { styles . segmentContainer } >
2323 < Text style = { styles . text } > Segmented controls can have values</ Text >
2424 < SegmentedControlIOS values = { [ 'One' , 'Two' ] } />
2525 </ View >
2626
27- < View style = { { marginBottom : 25 } } >
27+ < View style = { styles . segmentSection } >
2828 < SegmentedControlIOS
2929 values = { [ 'One' , 'Two' , 'Three' , 'Four' , 'Five' ] }
3030 />
3131 </ View >
3232
33- < View style = { { marginBottom : 25 } } >
33+ < View style = { styles . segmentSection } >
3434 < Text style = { styles . text } >
3535 Segmented controls can have pre-selected values
3636 </ Text >
3737 < SegmentedControlIOS values = { [ 'One' , 'Two' ] } selectedIndex = { 0 } />
3838 </ View >
3939
40- < View style = { { marginBottom : 25 } } >
40+ < View style = { styles . segmentSection } >
4141 < Text style = { styles . text } > Segmented controls can be momentary</ Text >
4242 < SegmentedControlIOS values = { [ 'One' , 'Two' ] } momentary = { true } />
4343 </ View >
4444
45- < View style = { { marginBottom : 25 } } >
45+ < View style = { styles . segmentSection } >
4646 < Text style = { styles . text } > Segmented controls can be disabled</ Text >
4747 < SegmentedControlIOS
4848 enabled = { false }
@@ -51,7 +51,7 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
5151 />
5252 </ View >
5353
54- < View style = { { marginBottom : 10 } } >
54+ < View style = { styles . segmentContainer } >
5555 < Text style = { styles . text } > Custom colors can be provided</ Text >
5656 < SegmentedControlIOS
5757 tintColor = "#ff0000"
@@ -60,14 +60,14 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
6060 backgroundColor = "#0000ff"
6161 />
6262 </ View >
63- < View style = { { marginBottom : 10 } } >
63+ < View style = { styles . segmentContainer } >
6464 < SegmentedControlIOS
6565 tintColor = "#00ff00"
6666 values = { [ 'One' , 'Two' , 'Three' ] }
6767 selectedIndex = { 1 }
6868 />
6969 </ View >
70- < View style = { { marginBottom : 25 } } >
70+ < View style = { styles . segmentSection } >
7171 < SegmentedControlIOS
7272 textColor = "#ff00ff"
7373 values = { [ 'One' , 'Two' ] }
@@ -77,27 +77,29 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
7777
7878 < View >
7979 < Text style = { styles . text } > Custom colors can be provided</ Text >
80- < SegmentedControlIOS
81- values = { this . state . values }
82- selectedIndex = { this . state . selectedIndex }
83- onChange = { this . _onChange }
84- onValueChange = { this . _onValueChange }
85- />
86- < Text style = { [ styles . text , { marginTop : 10 } ] } >
80+ < View style = { styles . segmentContainer } >
81+ < SegmentedControlIOS
82+ values = { this . state . values }
83+ selectedIndex = { this . state . selectedIndex }
84+ onChange = { this . _onChange }
85+ onValueChange = { this . _onValueChange }
86+ />
87+ </ View >
88+ < Text style = { [ styles . text ] } >
8789 Value: { this . state . value } Index: { this . state . selectedIndex }
8890 </ Text >
8991 </ View >
9092 </ ScrollView >
9193 ) ;
9294 }
9395
94- _onChange = event => {
96+ _onChange = ( event ) => {
9597 this . setState ( {
9698 selectedIndex : event . nativeEvent . selectedSegmentIndex ,
9799 } ) ;
98100 } ;
99101
100- _onValueChange = value => {
102+ _onValueChange = ( value ) => {
101103 this . setState ( {
102104 value : value ,
103105 } ) ;
@@ -111,4 +113,13 @@ const styles = StyleSheet.create({
111113 fontWeight : '500' ,
112114 margin : 10 ,
113115 } ,
116+ segmentContainer : {
117+ marginBottom : 10 ,
118+ } ,
119+ segmentSection : {
120+ marginBottom : 25 ,
121+ } ,
122+ container : {
123+ paddingTop : 80 ,
124+ } ,
114125} ) ;
0 commit comments