React Native Button Toggle Group

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.