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.