Add the dependency:
npm i react-native-rounded-checkbox-group"react-native-rounded-checkbox": ">= 0.3.3",import RoundedCheckboxGroup, { ICheckboxButton, } from "react-native-rounded-checkbox-group";<RoundedCheckboxGroup data={staticData} initial={0} onChange={(selectedItem: ICheckboxButton) => { setSelectedItem(selectedItem); }} /><RoundedCheckboxGroup data={staticData} initial={2} onChange={(selectedItem: ICheckboxButton) => { setSelectedItem(selectedItem); }} component={(isActive: boolean) => isActive && <Icon name="check" type="Entypo" color="#fff" /> } />You MUST follow this data format as ICheckboxButton
[ { id: 0, }, { id: 1, }, { id: 2, }, { id: 3, }, ];You can find the working/running example on the example project
const staticData: ICheckboxButton[] = [ { id: 0, text: "", checkedColor: "#ff7473", uncheckedColor: "#fbbfbb", outerStyle: _outerStyle("#fbbfbb"), innerStyle: styles.innerStyle, }, { id: 1, text: "", checkedColor: "#5567e9", uncheckedColor: "#afb5f5", outerStyle: _outerStyle("#afb5f5"), innerStyle: styles.innerStyle, }, { id: 2, text: "", checkedColor: "#a98ae7", uncheckedColor: "#cab6f4", outerStyle: _outerStyle("#cab6f4"), innerStyle: styles.innerStyle, }, { id: 3, text: "", checkedColor: "#fcb779", uncheckedColor: "#ffd1a7", outerStyle: _outerStyle("#ffd1a7"), innerStyle: styles.innerStyle, }, ];You can checkout the example project 🥰
Simply run
npm ireact-native run-ios/android
should work of the example project.
You can use any customization on the react-native-rounded-checkbox component.
-
LICENSE - Write an article about the lib on Medium
FreakyCoder, kurayogun@gmail.com
React Native Rounded Checkbox Group is available under the MIT license. See the LICENSE file for more info.