Skip to content
This repository has been archived by the owner on Apr 25, 2023. It is now read-only.

An animated button toggle group for React Native

Notifications You must be signed in to change notification settings

oceanbit/react-native-button-toggle-group

Repository files navigation

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

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.