new: Fundamental library is here and tested on example project

Author: WrathChaos

lib/BouncyCheckboxGroup.style.ts

@@ -0,0 +1,11 @@
+import { ViewStyle, StyleSheet } from "react-native";
+
+interface Style {
+  container: ViewStyle;
+}
+
+export default StyleSheet.create<Style>({
+  container: {
+    flexDirection: "row",
+  },
+});

lib/BouncyCheckboxGroup.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { View, StyleProp, ViewStyle } from "react-native";
+import BouncyCheckbox, {
+  IBouncyCheckboxProps,
+} from "react-native-bouncy-checkbox";
+/**
+ * ? Local Imports
+ */
+import styles from "./BouncyCheckboxGroup.style";
+import useStateWithCallback from "./helpers/useStateWithCallback";
+
+type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
+
+export interface ICheckboxButton extends IBouncyCheckboxProps {
+  id: number;
+}
+
+interface IBouncyCheckboxGroupProps {
+  style?: CustomStyleProp;
+  initial?: number;
+  data: ICheckboxButton[];
+  onChange: (selectedItem: ICheckboxButton) => void;
+}
+
+const BouncyCheckboxGroup: React.FC<IBouncyCheckboxGroupProps> = ({
+  style,
+  initial,
+  data,
+  onChange,
+}) => {
+  const [selectedItem, setSelectedItem] = useStateWithCallback<
+    ICheckboxButton | undefined
+  >(undefined);
+
+  const handleItemPress = (item: ICheckboxButton) => {
+    setSelectedItem(item, (newItem) => onChange && onChange(newItem));
+  };
+
+  return (
+    <View style={[styles.container, style]}>
+      {data &&
+        data.map((item: ICheckboxButton) => {
+          const isActive =
+            item.id === (selectedItem ? selectedItem?.id : initial);
+          return (
+            <BouncyCheckbox
+              {...item}
+              key={item.id}
+              disableBuiltInState
+              isChecked={isActive}
+              onPress={() => handleItemPress(item)}
+            />
+          );
+        })}
+    </View>
+  );
+};
+
+export default BouncyCheckboxGroup;

lib/FunctionalComponent/Size.ts

@@ -0,0 +1,33 @@
+import {useRef, useState, useEffect, useCallback, SetStateAction} from 'react';
+
+type Callback<T> = (value?: any) => void;
+type DispatchWithCallback<T> = (value: any, callback?: Callback<any>) => void;
+
+function useStateWithCallback<T>(
+  initialState: any | (() => any),
+): [any, DispatchWithCallback<SetStateAction<any>>] {
+  const [state, _setState] = useState(initialState);
+
+  const callbackRef = useRef<Callback<any>>();
+  const isFirstCallbackCall = useRef<boolean>(true);
+
+  const setState = useCallback(
+    (setStateAction: SetStateAction<any>, callback?: Callback<any>): void => {
+      callbackRef.current = callback;
+      _setState(setStateAction);
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (isFirstCallbackCall.current) {
+      isFirstCallbackCall.current = false;
+      return;
+    }
+    callbackRef.current?.(state);
+  }, [state]);
+
+  return [state, setState];
+}
+
+export default useStateWithCallback;