Skip to main content
Version: 4.0.0-beta.0

ButtonGroup

ButtonGroup is a linear set of segments, each of which function as a button that can display a different view/or perform a different action.

Use a ButtonGroup to offer choices that are closely related but mutually exclusive.

This component inherits all native TouchableHighlight and TouchableOpacity props that come with React Native TouchableHighlight or TouchableOpacity elements.

Usage

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

ButtonGroup

Reference

ButtonGroup

Component

Choose other button component such as TouchableOpacity.

TypeDefault
React ComponentNone

activeOpacity

Add active opacity to the button in buttonGroup.

TypeDefault
numberNone

button

Button for the component.

TypeDefault
objectNone

buttonContainerStyle

Specify styling for button containers.

TypeDefault
View style(Object)None

buttonStyle

Specify styling for button.

TypeDefault
View style(Object)None

buttons

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

TypeDefault
any[]None

containerStyle

Specify styling for main button container.

TypeDefault
View style(Object)None

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

disabledSelectedStyle

Styling for each selected button when disabled.

TypeDefault
View style(Object)None

disabledSelectedTextStyle

Styling for the text of each selected button when disabled.

TypeDefault
Text Style(Object)None

disabledStyle

Styling for each button when disabled.

TypeDefault
View style(Object)None

disabledTextStyle

Styling for the text of each button when disabled.

TypeDefault
Text Style(Object)None

innerBorderStyle

Update the styling of the interior border of the list of buttons.

TypeDefault
{ color?: string; width?: number; }None

onHideUnderlay

Function called on hiding underlay.

TypeDefault
FunctionNone

onPress

Called when a single tap gesture is detected.

Method to update Button Group Index.

TypeDefault
((event: GestureResponderEvent) => void) and ((...args: any[]) => void)Function

onShowUnderlay

Function called on showing underlay.

TypeDefault
FunctionNone

pressableProps

TypeDefault
Omit<PressableProps, "onPress" or "onLongPress" or "onPressIn" or "onPressOut">None

selectMultiple

Allows the user to select multiple buttons.

TypeDefault
booleanfalse

selectedButtonStyle

Specify styling for selected button.

TypeDefault
View style(Object)None

selectedIndex

Current selected index of array of buttons.

TypeDefault
numbernull

selectedIndexes

Current selected indexes from the array of buttons.

TypeDefault
number[][]

selectedTextStyle

Specify specific styling for text in the selected state.

TypeDefault
Text Style(Object)None

setOpacityTo

Function to set the opacity.

TypeDefault
(value: number) => voidNone

textStyle

Specify specific styling for text.

TypeDefault
Text Style(Object)None

underlayColor

Specify underlayColor for TouchableHighlight.

TypeDefault
stringColor(Primary)

vertical

Display the ButtonGroup vertically.

TypeDefault
booleanfalse