Skip to main content
Version: Next

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 Component(ios),(android),(web),TouchableNativeFeedback(

android),TouchableOpacity( default),undefined( ) |


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#

Method to update Button Group Index.

TypeDefault
(...args: any[]) => voidFunction

onShowUnderlay#

Function called on showing underlay.

TypeDefault
FunctionNone

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#

Funtion 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