ButtonGroup is a linear set of segments, each of which function as a button that can display a different view. Use a ButtonGroup to offer choices that are closely related but mutually exclusive.

constructor () {
  super()
  this.state = {
    selectedIndex: 2
  }
  this.updateIndex = this.updateIndex.bind(this)
}

updateIndex (selectedIndex) {
  this.setState({selectedIndex})
}

render () {
  const buttons = ['Hello', 'World', 'Buttons']
  const { selectedIndex } = this.state

  return (
    <ButtonGroup
      onPress={this.updateIndex}
      selectedIndex={selectedIndex}
      buttons={buttons}
      containerStyle={{height: 100}}
    />
  )
}

constructor () {
  super()
  this.state = {
    selectedIndex: 2
  }
  this.updateIndex = this.updateIndex.bind(this)
}
updateIndex (selectedIndex) {
  this.setState({selectedIndex})
}

const component1 = () => <Text>Hello</Text>
const component2 = () => <Text>World</Text>
const component3 = () => <Text>ButtonGroup</Text>

render () {
  const buttons = [{ element: component1 }, { element: component2 }, { element: component3 }]
  const { selectedIndex } = this.state
  return (
    <ButtonGroup
      onPress={this.updateIndex}
      selectedIndex={selectedIndex}
      buttons={buttons}
      containerStyle={{height: 100}} />
  )
}

This component inherits all native TouchableHighlight and TouchableOpacity props that come with React Native TouchableHighlight or TouchableOpacity elements, along with the following:

• buttonStyle
• buttons
• Component
• containerStyle
• disabled
• disabledStyle
• disabledTextStyle
• disabledSelectedStyle
• disabledSelectedTextStyle
• innerBorderStyle
• onPress
• selectMultiple
• selectedButtonStyle
• selectedIndex
• selectedIndexes
• selectedTextStyle
• textStyle
• underlayColor

specify styling for button (optional)

array of buttons for component (required), if returning a component, must be an object with { element: componentName }

Choose other button component such as TouchableOpacity (optional)

specify styling for main button container (optional)

Controls if buttons are disabled. Setting true makes all of them disabled, while using an array only makes those indices disabled.

Styling for each button when disabled.

Styling for the text of each button when disabled.

Styling for each selected button when disabled.

Styling for the text of each selected button when disabled.

update the styling of the interior border of the list of buttons (optional)

method to update Button Group Index (required)

allows the user to select multiple buttons

specify styling for selected button (optional)

current selected index of array of buttons (required)

current selected indexes from the array of buttons

specify specific styling for text in the selected state (optional)

specify specific styling for text (optional)

specify underlayColor for TouchableHighlight (optional)