Skip to main content
Version: 1.2.0

ButtonGroup

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.

ButtonGroup

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

Props

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


Reference

buttonStyle

specify styling for button (optional)

TypeDefault
object (style)inherited styling

buttons

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

TypeDefault
arraynone

Component

Choose other button component such as TouchableOpacity (optional)

TypeDefault
React Native ComponentTouchableHighlight

containerBorderRadius

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

TypeDefault
number3

containerStyle

specify styling for main button container (optional)

TypeDefault
object (style)inherited styling

disabled

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

TypeDefault
boolean OR number[]false

disabledStyle

Styling for each button when disabled.

TypeDefault
View style (object)Internal Style

disabledTextStyle

Styling for the text of each button when disabled.

TypeDefault
Text style (object)Internal Style

disabledSelectedStyle

Styling for each selected button when disabled.

TypeDefault
View style (object)Internal Style

disabledSelectedTextStyle

Styling for the text of each selected button when disabled.

TypeDefault
Text style (object)Internal Style

innerBorderStyle

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

TypeDefault
object { width, color }inherited styling

onPress

method to update Button Group Index (required)

TypeDefault
functionnone

selectMultiple

allows the user to select multiple buttons

TypeDefault
booleanfalse

selectedButtonStyle

specify styling for selected button (optional)

TypeDefault
object (style)inherited styling

selectedIndex

current selected index of array of buttons (required)

TypeDefault
numbernone

selectedIndexes

current selected indexes from the array of buttons

TypeDefault
array (number)[]

selectedTextStyle

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

TypeDefault
object (style)inherited styling

textStyle

specify specific styling for text (optional)

TypeDefault
object (style)inherited styling

underlayColor

specify underlayColor for TouchableHighlight (optional)

TypeDefault
stringwhite