button_group
Props
This component inherits all native TouchableHighlight and TouchableOpacity props that come with React Native TouchableHighlight or TouchableOpacity elements, along with the following:
buttonContainerStylebuttonsbuttonStyleComponentcontainerStyledisableddisabledSelectedStyledisabledSelectedTextStyledisabledStyledisabledTextStyleinnerBorderStyleonPressselectedButtonStyleselectedIndexselectedIndexesselectedTextStyleselectMultipletextStyleunderlayColorvertical
Reference
buttonContainerStyle
specify styling for button containers (optional)
| Type | Default |
|---|---|
| object (style) | inherited styling |
buttons
array of buttons for component (required), if returning a component, must be an object with { element: componentName }
| Type | Default |
|---|---|
| array | none |
buttonStyle
specify styling for button (optional)
| Type | Default |
|---|---|
| object (style) | inherited styling |
Component
Choose other button component such as TouchableOpacity (optional)
| Type | Default |
|---|---|
| React Native Component | TouchableOpacity (ios) or TouchableNativeFeedback (android) |
containerStyle
specify styling for main button container (optional)
| Type | Default |
|---|---|
| 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.
| Type | Default |
|---|---|
| boolean OR number[] | false |
disabledSelectedStyle
Styling for each selected button when disabled.
| Type | Default |
|---|---|
| View style (object) | Internal Style |
disabledSelectedTextStyle
Styling for the text of each selected button when disabled.
| Type | Default |
|---|---|
| Text style (object) | Internal Style |
disabledStyle
Styling for each button when disabled.
| Type | Default |
|---|---|
| View style (object) | Internal Style |
disabledTextStyle
Styling for the text of each button when disabled.
| Type | Default |
|---|---|
| Text style (object) | Internal Style |
innerBorderStyle
update the styling of the interior border of the list of buttons (optional)
| Type | Default |
|---|---|
| object { width, color } | inherited styling |
onPress
method to update Button Group Index (required)
| Type | Default |
|---|---|
| function | none |
selectedButtonStyle
specify styling for selected button (optional)
| Type | Default |
|---|---|
| object (style) | inherited styling |
selectedIndex
current selected index of array of buttons (required)
| Type | Default |
|---|---|
| number | none |
selectedIndexes
current selected indexes from the array of buttons
| Type | Default |
|---|---|
| array (number) | [] |
selectedTextStyle
specify specific styling for text in the selected state (optional)
| Type | Default |
|---|---|
| object (style) | inherited styling |
selectMultiple
allows the user to select multiple buttons
| Type | Default |
|---|---|
| boolean | false |
textStyle
specify specific styling for text (optional)
| Type | Default |
|---|---|
| object (style) | inherited styling |
underlayColor
specify underlayColor for TouchableHighlight (optional)
| Type | Default |
|---|---|
| string | white |
vertical
Display the ButtonGroup vertically
| Type | Default |
|---|---|
| boolean | false |