react-native/website/versioned_docs/0.45/segmentedcontrolios.md

id, title, original_id

id	title	original_id
version-0.45-segmentedcontrolios	segmentedcontrolios	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.

You can edit the content above on GitHub and send us a pull request!

← PrevNext →