SegmentedControlIOS
SegmentedControlIOS
Use SegmentedControlIOS
to render a UISegmentedControl iOS.
Programmatically changing selected index
The selected index can be changed on the fly by assigning the selectIndex prop to a state variable, then changing that variable. Note that the state variable would need to be updated as the user selects a value and changes the index, as shown in the example below.
<SegmentedControlIOS values={['One', 'Two']} selectedIndex={this.state.selectedIndex} onChange={(event) => { this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex}); }} />
Props
ViewPropTypes props...
enabled?: PropTypes.bool
If false the user won't be able to interact with the control. Default value is true.
momentary?: PropTypes.bool
If true, then selecting a segment won't persist visually. The onValueChange
callback will still work as expected.
onChange?: PropTypes.func
Callback that is called when the user taps a segment; passes the event as an argument
onValueChange?: PropTypes.func
Callback that is called when the user taps a segment; passes the segment's value as an argument
selectedIndex?: PropTypes.number
The index in props.values
of the segment to be (pre)selected.
tintColor?: PropTypes.string
Accent color of the control.
values?: PropTypes.arrayOf(PropTypes.string)
The labels for the control's segment buttons, in order.
© 2015–2017 Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://facebook.github.io/react-native/docs/segmentedcontrolios.html