react-native-button-toggle-group

An animated button toggle group for React Native

Showing:

Popularity

Downloads/wk

121

GitHub Stars

26

Maintenance

Last Commit

4mos ago

Contributors

2

Package

Dependencies

2

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

React Native Button Toggle Group

Our npm path

Install

npm i --save react-native-button-toggle-group

Or

yarn add react-native-button-toggle-group

Usage

A preview of the component in use

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

PropertyTypeDescription
valuesstring[]The list of strings to render as options for the button group
valuestringThe string to render as the selected option
onSelect(val: string) => voidA function that's called whenever one of the values is selected
highlightBackgroundColorstringThe color that the selected background will be. In the above GIF, it's blue.
highlightTextColorstringThe color that the selected text will be. In the above GIF, it's white.
inactiveBackgroundColorstringThe color that the inactive background will be. In the above GIF, it's white.
inactiveTextColorstringThe color that the inactive text will be. In the above GIF, it's a light blue grey.
styleStylePropOverwrite 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.
textStyleStylePropOverwrite 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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100