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