new: custom component is available with the new library

Author: WrathChaos

example/App.tsx

@@ -1,27 +1,62 @@
 import React from "react";
-import { SafeAreaView, StyleSheet } from "react-native";
+import { ViewStyle, SafeAreaView } from "react-native";
+import Icon from "react-native-dynamic-vector-icons";
 import RoundedCheckboxGroup, {
   ICheckboxButton,
 } from "./lib/RoundedCheckboxGroup";
 
 const styles = {
-  outerStyle: { height: 75, width: 75, borderRadius: 75 },
-  innerStyle: { height: 60, width: 60, borderRadius: 75 },
+  innerStyle: { height: 45, width: 45, borderRadius: 75 },
 };
 
+const _outerStyle = (borderColor: string): ViewStyle => ({
+  width: 55,
+  height: 55,
+  marginLeft: 16,
+  borderRadius: 60,
+  borderColor: borderColor,
+});
+
 const staticData: ICheckboxButton[] = [
   {
     id: 0,
-    checkedColor: "red",
-    outerStyle: styles.outerStyle,
+    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,
   },
-  { id: 1 },
-  { id: 2 },
-  { id: 3 },
 ];
 
 const App = () => {
+  const [selectedItem, setSelectedItem] = React.useState<
+    ICheckboxButton | undefined
+  >(undefined);
+
   return (
     <SafeAreaView
       style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
@@ -30,8 +65,11 @@ const App = () => {
         data={staticData}
         initial={2}
         onChange={(selectedItem: ICheckboxButton) => {
-          console.log(JSON.stringify(selectedItem));
+          setSelectedItem(selectedItem);
         }}
+        component={(isActive: boolean) =>
+          isActive && <Icon name="check" type="Entypo" color="#fff" />
+        }
       />
     </SafeAreaView>
   );

example/ios/Podfile.lock

@@ -337,6 +337,8 @@ PODS:
     - React-jsi (= 0.66.0)
     - React-logger (= 0.66.0)
     - React-perflogger (= 0.66.0)
+  - RNVectorIcons (8.1.0):
+    - React-Core
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -394,6 +396,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -472,6 +475,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNVectorIcons:
+    :path: "../node_modules/react-native-vector-icons"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -518,6 +523,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 53b92d54b923283638cb0186da7a5c2d2b70a49b
   React-runtimeexecutor: 4bb657a97aa74568d9ed634c8bd478299bb8a3a6
   ReactCommon: eb059748e842a1a86025ebbd4ac9d99e74492f88
+  RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   Yoga: c11abbf5809216c91fcd62f5571078b83d9b6720
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 

example/ios/example/Info.plist

@@ -51,5 +51,24 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>UIAppFonts</key>
+<array>
+  <string>AntDesign.ttf</string>
+  <string>Entypo.ttf</string>
+  <string>EvilIcons.ttf</string>
+  <string>Feather.ttf</string>
+  <string>FontAwesome.ttf</string>
+  <string>FontAwesome5_Brands.ttf</string>
+  <string>FontAwesome5_Regular.ttf</string>
+  <string>FontAwesome5_Solid.ttf</string>
+  <string>Foundation.ttf</string>
+  <string>Ionicons.ttf</string>
+  <string>MaterialIcons.ttf</string>
+  <string>MaterialCommunityIcons.ttf</string>
+  <string>SimpleLineIcons.ttf</string>
+  <string>Octicons.ttf</string>
+  <string>Zocial.ttf</string>
+  <string>Fontisto.ttf</string>
+</array>
 </dict>
 </plist>

example/lib/RoundedCheckboxGroup.tsx

@@ -1,11 +1,7 @@
 import * as React from "react";
 import { View, StyleProp, ViewStyle } from "react-native";
-
-import {
-  PureRoundedCheckbox,
-  IRoundedCheckboxProps,
-} from "react-native-rounded-checkbox";
-
+import { PureRoundedCheckbox } from "react-native-rounded-checkbox";
+import { IRoundedCheckboxProps } from "react-native-rounded-checkbox/build/dist/functional/RoundedCheckbox";
 /**
  * ? Local Imports
  */
@@ -20,14 +16,18 @@ export interface ICheckboxButton extends IRoundedCheckboxProps {
 export interface IRoundedCheckboxGroupProps {
   style?: CustomStyleProp;
   initial?: number;
+  children?: React.ReactNode;
   data: ICheckboxButton[];
+  component?: (isActive: boolean) => React.ReactNode;
   onChange: (selectedItem: ICheckboxButton) => void;
 }
 
 const RoundedCheckboxGroup: React.FC<IRoundedCheckboxGroupProps> = ({
   style,
   data,
   initial,
+  children,
+  component,
   onChange,
 }) => {
   const [selectedItem, setSelectedItem] = React.useState<
@@ -54,7 +54,9 @@ const RoundedCheckboxGroup: React.FC<IRoundedCheckboxGroupProps> = ({
               key={item.id}
               active={isActive}
               onPress={() => handleItemPress(item)}
-            />
+            >
+              {component ? component(isActive) : children}
+            </PureRoundedCheckbox>
           );
         })}
     </View>

example/package-lock.json

@@ -13,7 +13,9 @@
     "@freakycoder/react-native-bounceable": "^0.2.5",
     "react": "17.0.2",
     "react-native": "0.66.0",
-    "react-native-rounded-checkbox": "^0.3.3"
+    "react-native-dynamic-vector-icons": "^1.1.6",
+    "react-native-rounded-checkbox": "^0.3.3",
+    "react-native-vector-icons": "^8.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",