Skip to main content
Version: Bleeding Edge 🚧

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.

Import

import { ButtonGroup } from "@rneui/themed";

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

NameTypeDefaultDescription
ComponentReact ComponentChoose other button component such as TouchableOpacity.
activeOpacitynumberAdd active opacity to the button in buttonGroup.
buttonobjectButton for the component.
buttonContainerStyleView StyleSpecify styling for button containers.
buttonStyleView StyleSpecify styling for button.
buttons(string | ButtonComponent | ButtonObject)[]Array of buttons for component (required), if returning a component, must be an object with { element: componentName }.
containerStyleView StyleSpecify styling for main button container.
disabledboolean | number[]falseControls if buttons are disabled. Setting true makes all of them disabled, while using an array only makes those indices disabled.
disabledSelectedStyleView StyleStyling for each selected button when disabled.
disabledSelectedTextStyleText StyleStyling for the text of each selected button when disabled.
disabledStyleView StyleStyling for each button when disabled.
disabledTextStyleText StyleStyling for the text of each button when disabled.
innerBorderStyle{ color?: string; width?: number; }Update the styling of the interior border of the list of buttons.
onHideUnderlayFunctionFunction called on hiding underlay.
onLongPressGestureResponderEventHandlerCalled when a long-tap gesture is detected.
onPress(...args: any[]) => voidFunctionMethod to update Button Group Index.
onPressInGestureResponderEventHandlerCalled when a touch is engaged before onPress.
onPressOutGestureResponderEventHandlerCalled when a touch is released before onPress.
onShowUnderlayFunctionFunction called on showing underlay.
pressablePropsPressableProps except click handlersNone
selectMultiplebooleanfalseAllows the user to select multiple buttons.
selectedButtonStyleView StyleSpecify styling for selected button.
selectedIndexnumbernullCurrent selected index of array of buttons.
selectedIndexesnumber[][]Current selected indexes from the array of buttons.
selectedTextStyleText StyleSpecify specific styling for text in the selected state.
setOpacityTo(value: number) => voidFunction to set the opacity.
textStyleText StyleSpecify specific styling for text.
underlayColorstringColor [Primary]Specify underlayColor for TouchableHighlight.
verticalbooleanfalseDisplay the ButtonGroup vertically.

Playground

Loading...