Resolve "Add Category Modal"

components/budget/customColorPicker.tsx

@@ -0,0 +1,51 @@
+import { StyleSheet } from "react-native";
+import ColorPicker, { BrightnessSlider, HueSlider, Preview, SaturationSlider, } from "reanimated-color-picker";
+
+export type CustomColorPickerProperties = {
+    currentColor?: string | null,
+    handleColorChange: (color: string) => void | undefined,
+}
+
+const CustomColorPicker = (properties: CustomColorPickerProperties) => {
+    return (
+        <ColorPicker
+        value={properties.currentColor ?? generateRandomColor()}
+        onChange={(color) => {
+            properties.handleColorChange(color["hex"])
+        }}
+        style={styles.colorPickerStyle}
+        sliderThickness={30}
+        thumbSize={40}
+        thumbShape= "circle">
+            <Preview
+                style={[styles.previewStyle]}
+                textStyle={{ fontSize: 18 }}
+                colorFormat="hex"
+                hideInitialColor/>
+
+            <HueSlider style={[styles.sliderStyle]}/>
+            <BrightnessSlider style={[styles.sliderStyle]}/>
+            <SaturationSlider style={[styles.sliderStyle]}/>
+      </ColorPicker>
+    );
+}
+
+const generateRandomColor = (): string => {
+    return '#' + Math.floor(Math.random()*16777215).toString(16);
+}
+
+export default CustomColorPicker;
+
+const styles = StyleSheet.create({
+    colorPickerStyle: {
+        justifyContent: 'center',
+    },
+    sliderStyle: {
+        margin: 10,
+    },
+    previewStyle: {
+        margin: 10,
+        height: 50,
+        borderRadius: 10,
+    }
+  });