> Snack Demo

##
Usage

###
Using strings

    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}}
        />
      )
    }

###
Using components

    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:

##
Props

- `buttons`
- `buttonStyle`
- `component`
- `containerStyle`
- `containerBorderRadius`
- `disableSelected`
- `innerBorderStyle`
- `onPress`
- `selectedButtonStyle`
- `selectedIndex`
- `selectedTextStyle`
- `textStyle`
- `underlayColor`

##
Reference

###
`buttons`

Array of buttons for component (required).

If returning a component, must be an object with { element: componentName }

Type | Default
--- | ---
array | none

###
`buttonStyle`

Additional styling for button component (optional)

Type | Default
--- | ---
Object (style) | none

###
`component`

Choose another button component such as TouchableOpacity (optional)

Type | Default
--- | ---
React Native Component | TouchableHighlight

###
`containerStyle`

Styling for main button container (optional)

Type | Default
--- | ---
inherited styling | inherited styling

###
`containerBorderRadius`

Set the border radius for the first and last button in the button group

Type | Default
--- | ---
number | 3

###
`disableSelected`

Disables the currently selected button if true

Type | Default
--- | ---
boolean | false

###
`innerBorderStyle`

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

Type | Default
--- | ---
object | object {width, color}

###
`onPress`

Callback fired when user presses and index.

Method used to update Button Group Index (required)

Type | Default
--- | ---
function | none

###
`selectedIndex`

Current selected index of array of buttons (required)

Type | Default
--- | ---
number | none

###
`selectedButtonStyle`

Styling for selected button (optional)

Type | Default
--- | ---
object (style) | inherited styling

###
`selectedTextStyle`

Styling for text in the selected state (optional)

Type | Default
--- | ---
object (style) | inherited styling

###
`textStyle`

Styling for text (unselected index) (optional)

Type | Default
--- | ---
object (style) | none

###
`underlayColor`

Specify underlayColor for TouchableHighlight (optional)

Type | Default
--- | ---
string | white

← Button Card →