@jakeortega/react-native-button-toggle-group
v1.2.0
Published
An animated button toggle group for string selection
Downloads
4
Maintainers
Readme
Install
npm i --save react-native-button-toggle-group
Or
yarn add react-native-button-toggle-group
Usage
import ButtonToggleGroup from 'react-native-button-toggle-group';
// ...
const [value, setValue] = React.useState('Light');
return (
<ButtonToggleGroup
highlightBackgroundColor={'blue'}
highlightTextColor={'white'}
inactiveBackgroundColor={'transparent'}
inactiveTextColor={'grey'}
values={['Auto', 'Light', 'Dark']}
value={value}
onSelect={val => setValue(val)}
/>
)
Props
| Property | Type | Description |
| -------- | ---- | ----------- |
| values
| string[]
| The list of strings to render as options for the button group |
| value
| string
| The string to render as the selected option |
| onSelect
| (val: string) => void
| A function that's called whenever one of the values is selected |
| highlightBackgroundColor
| string
| The color that the selected background will be. In the above GIF, it's blue. |
| highlightTextColor
| string
| The color that the selected text will be. In the above GIF, it's white. |
| inactiveBackgroundColor
| string
| The color that the inactive background will be. In the above GIF, it's white. |
| inactiveTextColor
| string
| The color that the inactive text will be. In the above GIF, it's a light blue grey. |
| style
| StyleProp | Overwrite styling that can be applied to the container of the button toggle group. In the above GIF, we've added a border, border radius, and some padding. |
| textStyle
| StyleProp | Overwrite styling that can be applied to the text of the button toggle group. In the above GIF, we've changed the font family and font size. |