@teamnhz/rn-ui-toolkit 1.2.8 → 1.2.9

package/dist/components/BottomSheet/index.d.ts

@@ -5,6 +5,7 @@ interface AppBottomSheetProps {
     onClose: () => void;
     children: React.ReactNode;
     height?: number;
+    sheetBackground?: string;
 }
 declare const BottomSheet: React.FC<AppBottomSheetProps>;
 export default BottomSheet;

package/dist/components/BottomSheet/index.js

@@ -1,10 +1,13 @@
 import React from "react";
 import { Modal, View, StyleSheet, TouchableOpacity } from "react-native";
 import { Colors } from "../../styles";
-const BottomSheet = ({ ref, visible, onClose, children, height = 300, }) => {
+const BottomSheet = ({ ref, visible, onClose, children, height = 300, sheetBackground = Colors.appThemeColor, }) => {
     return (React.createElement(Modal, { ref: ref, transparent: true, visible: visible, animationType: "slide" },
         React.createElement(TouchableOpacity, { style: styles.overlay, activeOpacity: 1, onPress: onClose }),
-        React.createElement(View, { style: [styles.sheet, { height }] },
+        React.createElement(View, { style: [
+                styles.sheet,
+                { height, backgroundColor: sheetBackground }, // 🔥 dynamic bg color
+            ] },
             React.createElement(View, { style: styles.dragIndicator }),
             children)));
 };
@@ -15,7 +18,6 @@ const styles = StyleSheet.create({
         backgroundColor: "rgba(0,0,0,0.4)",
     },
     sheet: {
-        backgroundColor: Colors.appThemeColor,
         borderTopLeftRadius: 16,
         borderTopRightRadius: 16,
         padding: 16,

package/dist/components/ImagePicker/index.d.ts

@@ -1,10 +1,40 @@
 import React from "react";
+import { ViewStyle, TextStyle, ImageStyle } from "react-native";
+import { cameraPermissions, galleryPermissions, checkMicroPhonePermission } from "../../utils/permissions";
+type CustomStyles = {
+    container?: ViewStyle;
+    row?: ViewStyle;
+    text?: TextStyle;
+    icon?: ImageStyle;
+    backgroundColor?: any;
+};
 type Props = {
+    visible: boolean;
+    onClose: () => void;
     mediaType: "photo" | "video";
     isMultiSelect?: boolean;
     onSuccess: (data: any) => void;
-    visible: boolean;
-    onClose: () => void;
+    labels?: {
+        camera?: string;
+        gallery?: string;
+        cancel?: string;
+    };
+    icons?: {
+        camera?: any;
+        gallery?: any;
+        cancel?: any;
+    };
+    styles?: CustomStyles;
+    permissionHandlers?: {
+        camera?: typeof cameraPermissions;
+        gallery?: typeof galleryPermissions;
+        microphone?: typeof checkMicroPhonePermission;
+    };
+    pickerOptions?: {
+        camera?: object;
+        gallery?: object;
+        cropper?: object;
+    };
     enableCompression?: boolean;
     imageCompressionOptions?: {
         maxWidth?: number;

package/dist/components/ImagePicker/index.js

@@ -320,205 +320,425 @@
 //     tintColor: Colors.white,
 //   },
 // });
+// import React, { useCallback } from "react";
+// import {
+//   View,
+//   Text,
+//   TouchableOpacity,
+//   StyleSheet,
+//   Image,
+//   Alert,
+// } from "react-native";
+// import { BottomSheet, Dividers } from "../index";
+// import { launchCamera, launchImageLibrary } from "react-native-image-picker";
+// import ImageCropPicker from "react-native-image-crop-picker";
+// import {
+//   Image as ImageCompressor,
+//   Video as VideoCompressor,
+// } from "react-native-compressor";
+// import RNFS from "react-native-fs";
+// import { Colors, Images, Scale, Typography } from "../../styles";
+// // Import your permission utilities
+// import {
+//   cameraPermissions,
+//   galleryPermissions,
+//   checkMicroPhonePermission,
+// } from "../../utils/permissions";
+// type Props = {
+//   mediaType: "photo" | "video";
+//   isMultiSelect?: boolean;
+//   onSuccess: (data: any) => void;
+//   visible: boolean;
+//   onClose: () => void;
+//   // Compression options
+//   enableCompression?: boolean;
+//   imageCompressionOptions?: {
+//     maxWidth?: number;
+//     quality?: number;
+//   };
+//   videoCompressionOptions?: {
+//     compressionMethod?: "auto" | "manual";
+//   };
+// };
+// const ImagePicker: React.FC<Props> = ({
+//   mediaType,
+//   isMultiSelect = false,
+//   onSuccess,
+//   visible,
+//   onClose,
+//   enableCompression = true,
+//   imageCompressionOptions = { maxWidth: 1080, quality: 0.7 },
+//   videoCompressionOptions = { compressionMethod: "auto" },
+// }) => {
+//   // Success handler
+//   const onComplete = useCallback(
+//     (data: any) => {
+//       onSuccess(data);
+//       onClose();
+//     },
+//     [onSuccess, onClose]
+//   );
+//   // Helper: Compress Image
+//   const compressImage = async (imagePath: string) => {
+//     if (!enableCompression) return imagePath;
+//     try {
+//       const compressedImage = await ImageCompressor.compress(imagePath, {
+//         maxWidth: imageCompressionOptions.maxWidth,
+//         quality: imageCompressionOptions.quality,
+//       });
+//       // Log compressed size (optional)
+//       const stats = await RNFS.stat(compressedImage.replace("file://", ""));
+//       const sizeInMB = stats.size / (1024 * 1024);
+//       console.log("Compressed Image Size (MB):", sizeInMB);
+//       return compressedImage;
+//     } catch (error) {
+//       console.error("Image compression error:", error);
+//       return imagePath; // Return original if compression fails
+//     }
+//   };
+//   // Helper: Compress Video
+//   const compressVideo = async (videoUri: string) => {
+//     if (!enableCompression) return videoUri;
+//     try {
+//       const compressedVideo = await VideoCompressor.compress(videoUri, {
+//         compressionMethod: videoCompressionOptions.compressionMethod,
+//       });
+//       // Log compressed size (optional)
+//       const stats = await RNFS.stat(compressedVideo.replace("file://", ""));
+//       const sizeInMB = stats.size / (1024 * 1024);
+//       console.log("Compressed Video Size (MB):", sizeInMB);
+//       return compressedVideo;
+//     } catch (error) {
+//       console.error("Video compression error:", error);
+//       return videoUri; // Return original if compression fails
+//     }
+//   };
+//   // CAMERA HANDLER with permission check and compression
+//   const handleCamera = async () => {
+//     await cameraPermissions(async (granted: boolean) => {
+//       if (!granted) return;
+//       if (mediaType === "photo") {
+//         try {
+//           const response = await ImageCropPicker.openCamera({
+//             mediaType: "photo",
+//           });
+//           if (isMultiSelect) {
+//             // Single capture for multi-select mode
+//             const compressedPath = await compressImage(response.path);
+//             onComplete([{ ...response, path: compressedPath }]);
+//           } else {
+//             // Crop and compress single image
+//             const cropped = await ImageCropPicker.openCropper({
+//               path: response?.path,
+//               width: response?.width,
+//               height: response?.height,
+//               mediaType: "photo",
+//               freeStyleCropEnabled: true,
+//             });
+//             const compressedPath = await compressImage(cropped.path);
+//             onComplete({ ...cropped, path: compressedPath });
+//           }
+//         } catch (error) {
+//           console.log("Camera cancelled or error:", error);
+//         }
+//       } else {
+//         // VIDEO CAPTURE - check microphone permission first
+//         const micPermission = await checkMicroPhonePermission();
+//         if (!micPermission) {
+//           Alert.alert(
+//             "Microphone Permission Required",
+//             "Please enable microphone access to record videos."
+//           );
+//           return;
+//         }
+//         launchCamera(
+//           {
+//             mediaType: "video",
+//             durationLimit: 60,
+//             videoQuality: "high",
+//           },
+//           async (response) => {
+//             if (response?.assets?.length) {
+//               const videoUri = response.assets[0]?.uri;
+//               const compressedPath = await compressVideo(videoUri);
+//               onComplete({
+//                 path: compressedPath,
+//                 duration: response.assets[0]?.duration,
+//               });
+//             }
+//           }
+//         );
+//       }
+//     });
+//   };
+//   // GALLERY HANDLER with permission check and compression
+//   const handleGallery = async () => {
+//     await galleryPermissions(async (granted: boolean) => {
+//       if (!granted) return;
+//       if (mediaType === "photo") {
+//         try {
+//           if (isMultiSelect) {
+//             const images = await ImageCropPicker.openPicker({
+//               mediaType: "photo",
+//               multiple: true,
+//               maxFiles: 5,
+//             });
+//             if (images.length > 5) {
+//               Alert.alert(
+//                 "Limit Exceeded",
+//                 "You can only select up to 5 images."
+//               );
+//               return;
+//             }
+//             // Compress multiple images
+//             const compressedImages = await Promise.all(
+//               images.map(async (img) => ({
+//                 ...img,
+//                 path: await compressImage(img.path),
+//               }))
+//             );
+//             onComplete(compressedImages);
+//           } else {
+//             // Single image with crop
+//             const response = await ImageCropPicker.openPicker({
+//               mediaType: "photo",
+//             });
+//             const cropped = await ImageCropPicker.openCropper({
+//               path: response?.path,
+//               width: response?.width,
+//               height: response?.height,
+//               mediaType: "photo",
+//               freeStyleCropEnabled: true,
+//             });
+//             const compressedPath = await compressImage(cropped.path);
+//             onComplete({ ...cropped, path: compressedPath });
+//           }
+//         } catch (error) {
+//           console.log("Gallery cancelled or error:", error);
+//         }
+//       } else {
+//         // VIDEO FROM GALLERY
+//         launchImageLibrary(
+//           {
+//             mediaType: "video",
+//             assetRepresentationMode: "current",
+//           },
+//           async (result) => {
+//             if (result?.assets?.length) {
+//               const videoUri = result.assets[0]?.uri;
+//               const compressedPath = await compressVideo(videoUri);
+//               onComplete({
+//                 path: compressedPath,
+//                 duration: result.assets[0]?.duration,
+//               });
+//             }
+//           }
+//         );
+//       }
+//     });
+//   };
+//   return (
+//     <BottomSheet visible={visible} onClose={onClose} height={230}>
+//       <View style={styles.container}>
+//         {/* Camera */}
+//         <TouchableOpacity style={styles.row} onPress={handleCamera}>
+//           <Image source={Images.video_icon} style={styles.icon} />
+//           <Text style={styles.text}>Camera</Text>
+//         </TouchableOpacity>
+//         <Dividers small />
+//         {/* Gallery */}
+//         <TouchableOpacity style={styles.row} onPress={handleGallery}>
+//           <Image source={Images.image_icon} style={styles.icon} />
+//           <Text style={styles.text}>Gallery</Text>
+//         </TouchableOpacity>
+//         <Dividers small />
+//         {/* Cancel */}
+//         <TouchableOpacity style={styles.row} onPress={onClose}>
+//           <Image source={Images.cancel} style={styles.icon} />
+//           <Text style={styles.text}>Cancel</Text>
+//         </TouchableOpacity>
+//       </View>
+//     </BottomSheet>
+//   );
+// };
+// export default ImagePicker;
+// const styles = StyleSheet.create({
+//   container: { flex: 1, padding: 16 },
+//   row: {
+//     flexDirection: "row",
+//     alignItems: "center",
+//   },
+//   text: { ...Typography.style.standardU(), color: Colors.white },
+//   icon: {
+//     width: Scale.moderateScale(20),
+//     height: Scale.moderateScale(20),
+//     marginRight: 10,
+//     tintColor: Colors.white,
+//   },
+// });
 import React, { useCallback } from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Image, Alert, } from "react-native";
-import { BottomSheet, Dividers } from "../index";
+import { View, Text, TouchableOpacity, StyleSheet, Image, } from "react-native";
+import { BottomSheet, Dividers } from "../index"; // ✅ YOUR ORIGINAL BOTTOMSHEET
 import { launchCamera, launchImageLibrary } from "react-native-image-picker";
 import ImageCropPicker from "react-native-image-crop-picker";
 import { Image as ImageCompressor, Video as VideoCompressor, } from "react-native-compressor";
-import RNFS from "react-native-fs";
-import { Colors, Images, Scale, Typography } from "../../styles";
-// Import your permission utilities
+// Permission functions (user can override)
 import { cameraPermissions, galleryPermissions, checkMicroPhonePermission, } from "../../utils/permissions";
-const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onClose, enableCompression = true, imageCompressionOptions = { maxWidth: 1080, quality: 0.7 }, videoCompressionOptions = { compressionMethod: "auto" }, }) => {
-    // Success handler
+const ImagePicker = ({ visible, onClose, mediaType, isMultiSelect = false, onSuccess, labels = {
+    camera: "Camera",
+    gallery: "Gallery",
+    cancel: "Cancel",
+}, icons = {
+    camera: null,
+    gallery: null,
+    cancel: null,
+}, styles: customStyle = {}, permissionHandlers = {
+    camera: cameraPermissions,
+    gallery: galleryPermissions,
+    microphone: checkMicroPhonePermission,
+}, pickerOptions = {
+    camera: {},
+    gallery: {},
+    cropper: {},
+}, enableCompression = true, imageCompressionOptions = { maxWidth: 1080, quality: 0.7 }, videoCompressionOptions = { compressionMethod: "auto" }, }) => {
+    const s = { ...defaultStyles, ...customStyle };
     const onComplete = useCallback((data) => {
         onSuccess(data);
         onClose();
     }, [onSuccess, onClose]);
-    // Helper: Compress Image
-    const compressImage = async (imagePath) => {
+    const compressImage = async (path) => {
         if (!enableCompression)
-            return imagePath;
+            return path;
         try {
-            const compressedImage = await ImageCompressor.compress(imagePath, {
-                maxWidth: imageCompressionOptions.maxWidth,
-                quality: imageCompressionOptions.quality,
-            });
-            // Log compressed size (optional)
-            const stats = await RNFS.stat(compressedImage.replace("file://", ""));
-            const sizeInMB = stats.size / (1024 * 1024);
-            console.log("Compressed Image Size (MB):", sizeInMB);
-            return compressedImage;
+            return await ImageCompressor.compress(path, imageCompressionOptions);
         }
-        catch (error) {
-            console.error("Image compression error:", error);
-            return imagePath; // Return original if compression fails
+        catch {
+            return path;
         }
     };
-    // Helper: Compress Video
-    const compressVideo = async (videoUri) => {
+    const compressVideo = async (uri) => {
         if (!enableCompression)
-            return videoUri;
+            return uri;
         try {
-            const compressedVideo = await VideoCompressor.compress(videoUri, {
-                compressionMethod: videoCompressionOptions.compressionMethod,
-            });
-            // Log compressed size (optional)
-            const stats = await RNFS.stat(compressedVideo.replace("file://", ""));
-            const sizeInMB = stats.size / (1024 * 1024);
-            console.log("Compressed Video Size (MB):", sizeInMB);
-            return compressedVideo;
+            return await VideoCompressor.compress(uri, videoCompressionOptions);
         }
-        catch (error) {
-            console.error("Video compression error:", error);
-            return videoUri; // Return original if compression fails
+        catch {
+            return uri;
         }
     };
-    // CAMERA HANDLER with permission check and compression
     const handleCamera = async () => {
-        await cameraPermissions(async (granted) => {
+        await permissionHandlers.camera?.(async (granted) => {
             if (!granted)
                 return;
             if (mediaType === "photo") {
                 try {
-                    const response = await ImageCropPicker.openCamera({
+                    const img = await ImageCropPicker.openCamera({
                         mediaType: "photo",
+                        ...pickerOptions.camera,
                     });
-                    if (isMultiSelect) {
-                        // Single capture for multi-select mode
-                        const compressedPath = await compressImage(response.path);
-                        onComplete([{ ...response, path: compressedPath }]);
-                    }
-                    else {
-                        // Crop and compress single image
-                        const cropped = await ImageCropPicker.openCropper({
-                            path: response?.path,
-                            width: response?.width,
-                            height: response?.height,
+                    let cropped = img;
+                    if (!isMultiSelect) {
+                        cropped = await ImageCropPicker.openCropper({
+                            path: img.path,
                             mediaType: "photo",
                             freeStyleCropEnabled: true,
+                            ...pickerOptions.cropper,
                         });
-                        const compressedPath = await compressImage(cropped.path);
-                        onComplete({ ...cropped, path: compressedPath });
                     }
+                    const compressed = await compressImage(cropped.path);
+                    onComplete({ ...cropped, path: compressed });
                 }
-                catch (error) {
-                    console.log("Camera cancelled or error:", error);
-                }
+                catch { }
             }
             else {
-                // VIDEO CAPTURE - check microphone permission first
-                const micPermission = await checkMicroPhonePermission();
-                if (!micPermission) {
-                    Alert.alert("Microphone Permission Required", "Please enable microphone access to record videos.");
+                const micGranted = await permissionHandlers.microphone?.();
+                if (!micGranted)
                     return;
-                }
-                launchCamera({
-                    mediaType: "video",
-                    durationLimit: 60,
-                    videoQuality: "high",
-                }, async (response) => {
-                    if (response?.assets?.length) {
-                        const videoUri = response.assets[0]?.uri;
-                        const compressedPath = await compressVideo(videoUri);
-                        onComplete({
-                            path: compressedPath,
-                            duration: response.assets[0]?.duration,
-                        });
+                launchCamera({ mediaType: "video", ...pickerOptions.camera }, async (res) => {
+                    if (res?.assets?.length) {
+                        const compressed = await compressVideo(res.assets[0].uri);
+                        onComplete({ path: compressed });
                     }
                 });
             }
         });
     };
-    // GALLERY HANDLER with permission check and compression
     const handleGallery = async () => {
-        await galleryPermissions(async (granted) => {
+        await permissionHandlers.gallery?.(async (granted) => {
             if (!granted)
                 return;
             if (mediaType === "photo") {
                 try {
-                    if (isMultiSelect) {
-                        const images = await ImageCropPicker.openPicker({
+                    let result = await ImageCropPicker.openPicker({
+                        mediaType: "photo",
+                        multiple: isMultiSelect,
+                        ...pickerOptions.gallery,
+                    });
+                    if (!isMultiSelect) {
+                        result = await ImageCropPicker.openCropper({
+                            path: result.path,
                             mediaType: "photo",
-                            multiple: true,
-                            maxFiles: 5,
+                            freeStyleCropEnabled: true,
+                            ...pickerOptions.cropper,
                         });
-                        if (images.length > 5) {
-                            Alert.alert("Limit Exceeded", "You can only select up to 5 images.");
-                            return;
-                        }
-                        // Compress multiple images
-                        const compressedImages = await Promise.all(images.map(async (img) => ({
+                    }
+                    if (isMultiSelect) {
+                        const compressed = await Promise.all(result.map(async (img) => ({
                             ...img,
                             path: await compressImage(img.path),
                         })));
-                        onComplete(compressedImages);
+                        onComplete(compressed);
                     }
                     else {
-                        // Single image with crop
-                        const response = await ImageCropPicker.openPicker({
-                            mediaType: "photo",
-                        });
-                        const cropped = await ImageCropPicker.openCropper({
-                            path: response?.path,
-                            width: response?.width,
-                            height: response?.height,
-                            mediaType: "photo",
-                            freeStyleCropEnabled: true,
-                        });
-                        const compressedPath = await compressImage(cropped.path);
-                        onComplete({ ...cropped, path: compressedPath });
+                        const compressed = await compressImage(result.path);
+                        onComplete({ ...result, path: compressed });
                     }
                 }
-                catch (error) {
-                    console.log("Gallery cancelled or error:", error);
-                }
+                catch { }
             }
             else {
-                // VIDEO FROM GALLERY
-                launchImageLibrary({
-                    mediaType: "video",
-                    assetRepresentationMode: "current",
-                }, async (result) => {
-                    if (result?.assets?.length) {
-                        const videoUri = result.assets[0]?.uri;
-                        const compressedPath = await compressVideo(videoUri);
-                        onComplete({
-                            path: compressedPath,
-                            duration: result.assets[0]?.duration,
-                        });
+                launchImageLibrary({ mediaType: "video", ...pickerOptions.gallery }, async (res) => {
+                    if (res?.assets?.length) {
+                        const compressed = await compressVideo(res.assets[0].uri);
+                        onComplete({ path: compressed });
                     }
                 });
             }
         });
     };
-    return (React.createElement(BottomSheet, { visible: visible, onClose: onClose, height: 230 },
-        React.createElement(View, { style: styles.container },
-            React.createElement(TouchableOpacity, { style: styles.row, onPress: handleCamera },
-                React.createElement(Image, { source: Images.video_icon, style: styles.icon }),
-                React.createElement(Text, { style: styles.text }, "Camera")),
+    return (React.createElement(BottomSheet, { visible: visible, onClose: onClose, height: 230, sheetBackground: customStyle?.backgroundColor },
+        React.createElement(View, { style: s.container },
+            React.createElement(TouchableOpacity, { style: s.row, onPress: handleCamera },
+                icons.camera && React.createElement(Image, { source: icons.camera, style: s.icon }),
+                React.createElement(Text, { style: s.text }, labels.camera)),
             React.createElement(Dividers, { small: true }),
-            React.createElement(TouchableOpacity, { style: styles.row, onPress: handleGallery },
-                React.createElement(Image, { source: Images.image_icon, style: styles.icon }),
-                React.createElement(Text, { style: styles.text }, "Gallery")),
+            React.createElement(TouchableOpacity, { style: s.row, onPress: handleGallery },
+                icons.gallery && React.createElement(Image, { source: icons.gallery, style: s.icon }),
+                React.createElement(Text, { style: s.text }, labels.gallery)),
             React.createElement(Dividers, { small: true }),
-            React.createElement(TouchableOpacity, { style: styles.row, onPress: onClose },
-                React.createElement(Image, { source: Images.cancel, style: styles.icon }),
-                React.createElement(Text, { style: styles.text }, "Cancel")))));
+            React.createElement(TouchableOpacity, { style: s.row, onPress: onClose },
+                icons.cancel && React.createElement(Image, { source: icons.cancel, style: s.icon }),
+                React.createElement(Text, { style: s.text }, labels.cancel)))));
 };
 export default ImagePicker;
-const styles = StyleSheet.create({
-    container: { flex: 1, padding: 16 },
+const defaultStyles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 16,
+    },
     row: {
         flexDirection: "row",
         alignItems: "center",
+        paddingVertical: 10,
+    },
+    text: {
+        fontSize: 16,
+        color: "white",
     },
-    text: { ...Typography.style.standardU(), color: Colors.white },
     icon: {
-        width: Scale.moderateScale(20),
-        height: Scale.moderateScale(20),
+        width: 20,
+        height: 20,
         marginRight: 10,
-        tintColor: Colors.white,
+        tintColor: "white",
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnhz/rn-ui-toolkit",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [