🎉 new: Helper util is here to handle useState async handling

Author: WrathChaos

example/App.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { ViewStyle, SafeAreaView } from "react-native";
+import { ViewStyle, SafeAreaView, Alert } from "react-native";
 import Icon from "react-native-dynamic-vector-icons";
 import RoundedCheckboxGroup, {
   ICheckboxButton,
-} from "react-native-rounded-checkbox-group";
+} from "./lib/RoundedCheckboxGroup";
 
 const styles = {
   innerStyle: { height: 45, width: 45, borderRadius: 75 },

example/lib/RoundedCheckboxGroup.style.ts

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

example/lib/RoundedCheckboxGroup.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { View, StyleProp, ViewStyle } from "react-native";
+import { PureRoundedCheckbox } from "react-native-rounded-checkbox";
+import { IRoundedCheckboxProps } from "react-native-rounded-checkbox/build/dist/functional/RoundedCheckbox";
+import useStateWithCallback from "./helpers/useStateWithCallback";
+/**
+ * ? Local Imports
+ */
+import styles from "./RoundedCheckboxGroup.style";
+
+type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
+
+export interface ICheckboxButton extends IRoundedCheckboxProps {
+  id: number;
+}
+
+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] = 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 (
+            <PureRoundedCheckbox
+              {...item}
+              key={item.id}
+              active={isActive}
+              onPress={() => handleItemPress(item)}
+            >
+              {component ? component(isActive) : children}
+            </PureRoundedCheckbox>
+          );
+        })}
+    </View>
+  );
+};
+
+export default RoundedCheckboxGroup;

example/lib/helpers/useStateWithCallback.ts

@@ -0,0 +1,39 @@
+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;

lib/RoundedCheckboxGroup.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { View, StyleProp, ViewStyle } from "react-native";
 import { PureRoundedCheckbox } from "react-native-rounded-checkbox";
 import { IRoundedCheckboxProps } from "react-native-rounded-checkbox/build/dist/functional/RoundedCheckbox";
+import useStateWithCallback from "./helpers/useStateWithCallback";
 /**
  * ? Local Imports
  */
@@ -30,16 +31,12 @@ const RoundedCheckboxGroup: React.FC<IRoundedCheckboxGroupProps> = ({
   component,
   onChange,
 }) => {
-  const [selectedItem, setSelectedItem] = React.useState<
+  const [selectedItem, setSelectedItem] = useStateWithCallback<
     ICheckboxButton | undefined
   >(undefined);
 
-  React.useEffect(() => {
-    onChange && onChange(selectedItem!);
-  }, [selectedItem]);
-
   const handleItemPress = (item: ICheckboxButton) => {
-    setSelectedItem(item);
+    setSelectedItem(item, (newItem) => onChange && onChange(newItem));
   };
 
   return (

lib/helpers/useStateWithCallback.ts

@@ -0,0 +1,39 @@
+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;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rounded-checkbox-group",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Fully customizable react native checkbox group for React Native",
   "main": "./build/dist/RoundedCheckboxGroup.js",
   "repository": "git@github.com:WrathChaos/react-native-rounded-checkbox-group.git",