@teamnhz/rn-ui-toolkit 1.1.5 → 1.1.7

package/dist/components/Image/index.js

@@ -1,19 +1,11 @@
-import React from "react";
-import { Image as RNImage, ActivityIndicator, View, StyleSheet } from "react-native";
+import React, { useState } from "react";
+import { ActivityIndicator } from "react-native";
+import FastImage from "react-native-fast-image";
 const Image = (props) => {
-    const { isLoading, loaderSize = "small", loaderColor = "#919191", style, ...rest } = props;
-    return (React.createElement(View, { style: [styles.container, style] },
-        React.createElement(RNImage, { ...rest, style: [StyleSheet.absoluteFill, style], resizeMode: props.resizeMode || "cover" }),
-        isLoading && (React.createElement(ActivityIndicator, { style: styles.loader, size: loaderSize, color: loaderColor }))));
+    const [isLoading, setIsLoading] = useState(props?.isLoading || false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FastImage, { ...props, resizeMode: props.resizeMode }, isLoading ?
+            (React.createElement(ActivityIndicator, { style: { position: "absolute", alignSelf: "center", top: 0, bottom: 0, }, size: props.loaderSize || "small", color: props.loaderColor || "#919191" }))
+            : null)));
 };
-const styles = StyleSheet.create({
-    container: {
-        justifyContent: "center",
-        alignItems: "center",
-        overflow: "hidden",
-    },
-    loader: {
-        position: "absolute",
-    },
-});
 export default Image;

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

@@ -5,6 +5,14 @@ type Props = {
     onSuccess: (data: any) => void;
     visible: boolean;
     onClose: () => void;
+    enableCompression?: boolean;
+    imageCompressionOptions?: {
+        maxWidth?: number;
+        quality?: number;
+    };
+    videoCompressionOptions?: {
+        compressionMethod?: "auto" | "manual";
+    };
 };
 declare const ImagePicker: React.FC<Props>;
 export default ImagePicker;

package/dist/components/ImagePicker/index.js

@@ -1,3 +1,162 @@
+// // import React, { useCallback } from "react";
+// // import {
+// //   View,
+// //   Text,
+// //   TouchableOpacity,
+// //   StyleSheet,
+// //   Image,
+// //   Alert,
+// //   ViewStyle,
+// //   TextStyle,
+// //   ImageStyle,
+// // } 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 { Colors, Images, Scale, Typography } from "../../styles";
+// // type StyleProps = {
+// //   containerStyle?: ViewStyle;
+// //   rowStyle?: ViewStyle;
+// //   textStyle?: TextStyle;
+// //   iconStyle?: ImageStyle;
+// // };
+// // type Props = {
+// //   mediaType: "photo" | "video";
+// //   isMultiSelect?: boolean;
+// //   onSuccess: (data: any) => void;
+// //   visible: boolean;
+// //   onClose: () => void;
+// // } & StyleProps;
+// // const ImagePicker: React.FC<Props> = ({
+// //   mediaType,
+// //   isMultiSelect = false,
+// //   onSuccess,
+// //   visible,
+// //   onClose,
+// //   containerStyle,
+// //   rowStyle,
+// //   textStyle,
+// //   iconStyle,
+// // }) => {
+// //   const onComplete = useCallback(
+// //     (data: any) => {
+// //       onSuccess(data);
+// //       onClose();
+// //     },
+// //     [onSuccess, onClose]
+// //   );
+// //   const onCamera = () => {
+// //     if (mediaType === "photo") {
+// //       if (isMultiSelect) {
+// //         ImageCropPicker.openCamera({ mediaType: "photo" })
+// //           .then((response) => onComplete([response]))
+// //           .catch(() => {});
+// //       } else {
+// //         ImageCropPicker.openCamera({ mediaType: "photo" })
+// //           .then((response) =>
+// //             ImageCropPicker.openCropper({
+// //               path: response?.path,
+// //               width: response?.width,
+// //               height: response?.height,
+// //               mediaType: "photo",
+// //               freeStyleCropEnabled: true,
+// //             }).then(onComplete)
+// //           )
+// //           .catch(() => {});
+// //       }
+// //     } else {
+// //       launchCamera({ mediaType: "video" }, (response) => {
+// //         if (response?.assets) {
+// //           onComplete({
+// //             path: response.assets[0]?.uri,
+// //             duration: response.assets[0]?.duration,
+// //           });
+// //         }
+// //       });
+// //     }
+// //   };
+// //   const onGallery = () => {
+// //     if (mediaType === "photo") {
+// //       if (isMultiSelect) {
+// //         ImageCropPicker.openPicker({
+// //           mediaType: "photo",
+// //           multiple: true,
+// //           maxFiles: 5,
+// //         })
+// //           .then((images) => {
+// //             if (images.length > 5) {
+// //               Alert.alert(
+// //                 "Limit Exceeded",
+// //                 "You can only select up to 5 images."
+// //               );
+// //             } else {
+// //               onComplete(images);
+// //             }
+// //           })
+// //           .catch(() => {});
+// //       } else {
+// //         ImageCropPicker.openPicker({ mediaType: "photo" })
+// //           .then((response) =>
+// //             ImageCropPicker.openCropper({
+// //               path: response?.path,
+// //               width: response?.width,
+// //               height: response?.height,
+// //               mediaType: "photo",
+// //               freeStyleCropEnabled: true,
+// //             }).then(onComplete)
+// //           )
+// //           .catch(() => {});
+// //       }
+// //     } else {
+// //       launchImageLibrary({ mediaType: "video" }, (result) => {
+// //         if (result?.assets) {
+// //           onComplete({
+// //             path: result.assets[0]?.uri,
+// //             duration: result.assets[0]?.duration,
+// //           });
+// //         }
+// //       });
+// //     }
+// //   };
+// //   return (
+// //     <BottomSheet visible={visible} onClose={onClose} height={230}>
+// //       <View style={[styles.container, containerStyle]}>
+// //         {/* Camera */}
+// //         <TouchableOpacity style={[styles.row, rowStyle]} onPress={onCamera}>
+// //           <Image source={Images.video_icon} style={[styles.icon, iconStyle]} />
+// //           <Text style={[styles.text, textStyle]}>Camera</Text>
+// //         </TouchableOpacity>
+// //         <Dividers small />
+// //         {/* Gallery */}
+// //         <TouchableOpacity style={[styles.row, rowStyle]} onPress={onGallery}>
+// //           <Image source={Images.image_icon} style={[styles.icon, iconStyle]} />
+// //           <Text style={[styles.text, textStyle]}>Gallery</Text>
+// //         </TouchableOpacity>
+// //         <Dividers small />
+// //         {/* Cancel */}
+// //         <TouchableOpacity style={[styles.row, rowStyle]} onPress={onClose}>
+// //           <Image source={Images.cancel} style={[styles.icon, iconStyle]} />
+// //           <Text style={[styles.text, textStyle]}>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,
@@ -6,38 +165,31 @@
 //   StyleSheet,
 //   Image,
 //   Alert,
-//   ViewStyle,
-//   TextStyle,
-//   ImageStyle,
 // } 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 { Colors, Images, Scale, Typography } from "../../styles";
-// type StyleProps = {
-//   containerStyle?: ViewStyle;
-//   rowStyle?: ViewStyle;
-//   textStyle?: TextStyle;
-//   iconStyle?: ImageStyle;
-// };
+// // 👇 Import your permission utilities
+// import {
+//   cameraPermissions,
+//   galleryPermissions,
+// } from "../../utils/permissions"; // ✅ Make sure path is correct
 // type Props = {
 //   mediaType: "photo" | "video";
 //   isMultiSelect?: boolean;
 //   onSuccess: (data: any) => void;
 //   visible: boolean;
 //   onClose: () => void;
-// } & StyleProps;
+// };
 // const ImagePicker: React.FC<Props> = ({
 //   mediaType,
 //   isMultiSelect = false,
 //   onSuccess,
 //   visible,
 //   onClose,
-//   containerStyle,
-//   rowStyle,
-//   textStyle,
-//   iconStyle,
 // }) => {
+//   // ✅ Success handler
 //   const onComplete = useCallback(
 //     (data: any) => {
 //       onSuccess(data);
@@ -45,98 +197,109 @@
 //     },
 //     [onSuccess, onClose]
 //   );
-//   const onCamera = () => {
-//     if (mediaType === "photo") {
-//       if (isMultiSelect) {
-//         ImageCropPicker.openCamera({ mediaType: "photo" })
-//           .then((response) => onComplete([response]))
-//           .catch(() => {});
+//   // ✅ CAMERA HANDLER with permission check
+//   const handleCamera = async () => {
+//     await cameraPermissions(async (granted: boolean) => {
+//       if (!granted) return; // ❌ Permission denied, handled by your alert
+//       if (mediaType === "photo") {
+//         if (isMultiSelect) {
+//           // single capture, multiple not supported directly from camera
+//           ImageCropPicker.openCamera({ mediaType: "photo" })
+//             .then((response) => onComplete([response]))
+//             .catch(() => {});
+//         } else {
+//           ImageCropPicker.openCamera({ mediaType: "photo" })
+//             .then((response) =>
+//               ImageCropPicker.openCropper({
+//                 path: response?.path,
+//                 width: response?.width,
+//                 height: response?.height,
+//                 mediaType: "photo",
+//                 freeStyleCropEnabled: true,
+//               }).then(onComplete)
+//             )
+//             .catch(() => {});
+//         }
 //       } else {
-//         ImageCropPicker.openCamera({ mediaType: "photo" })
-//           .then((response) =>
-//             ImageCropPicker.openCropper({
-//               path: response?.path,
-//               width: response?.width,
-//               height: response?.height,
-//               mediaType: "photo",
-//               freeStyleCropEnabled: true,
-//             }).then(onComplete)
-//           )
-//           .catch(() => {});
+//         // 🎥 VIDEO CAPTURE
+//         launchCamera({ mediaType: "video" }, (response) => {
+//           if (response?.assets?.length) {
+//             onComplete({
+//               path: response.assets[0]?.uri,
+//               duration: response.assets[0]?.duration,
+//             });
+//           }
+//         });
 //       }
-//     } else {
-//       launchCamera({ mediaType: "video" }, (response) => {
-//         if (response?.assets) {
-//           onComplete({
-//             path: response.assets[0]?.uri,
-//             duration: response.assets[0]?.duration,
-//           });
-//         }
-//       });
-//     }
+//     });
 //   };
-//   const onGallery = () => {
-//     if (mediaType === "photo") {
-//       if (isMultiSelect) {
-//         ImageCropPicker.openPicker({
-//           mediaType: "photo",
-//           multiple: true,
-//           maxFiles: 5,
-//         })
-//           .then((images) => {
-//             if (images.length > 5) {
-//               Alert.alert(
-//                 "Limit Exceeded",
-//                 "You can only select up to 5 images."
-//               );
-//             } else {
-//               onComplete(images);
-//             }
+//   // ✅ GALLERY HANDLER with permission check
+//   const handleGallery = async () => {
+//     await galleryPermissions(async (granted: boolean) => {
+//       if (!granted) return; // ❌ Permission denied, handled by your alert
+//       if (mediaType === "photo") {
+//         if (isMultiSelect) {
+//           ImageCropPicker.openPicker({
+//             mediaType: "photo",
+//             multiple: true,
+//             maxFiles: 5,
 //           })
-//           .catch(() => {});
+//             .then((images) => {
+//               if (images.length > 5) {
+//                 Alert.alert(
+//                   "Limit Exceeded",
+//                   "You can only select up to 5 images."
+//                 );
+//               } else {
+//                 onComplete(images);
+//               }
+//             })
+//             .catch(() => {});
+//         } else {
+//           ImageCropPicker.openPicker({ mediaType: "photo" })
+//             .then((response) =>
+//               ImageCropPicker.openCropper({
+//                 path: response?.path,
+//                 width: response?.width,
+//                 height: response?.height,
+//                 mediaType: "photo",
+//                 freeStyleCropEnabled: true,
+//               }).then(onComplete)
+//             )
+//             .catch(() => {});
+//         }
 //       } else {
-//         ImageCropPicker.openPicker({ mediaType: "photo" })
-//           .then((response) =>
-//             ImageCropPicker.openCropper({
-//               path: response?.path,
-//               width: response?.width,
-//               height: response?.height,
-//               mediaType: "photo",
-//               freeStyleCropEnabled: true,
-//             }).then(onComplete)
-//           )
-//           .catch(() => {});
+//         // 🎥 VIDEO FROM GALLERY
+//         launchImageLibrary({ mediaType: "video" }, (result) => {
+//           if (result?.assets?.length) {
+//             onComplete({
+//               path: result.assets[0]?.uri,
+//               duration: result.assets[0]?.duration,
+//             });
+//           }
+//         });
 //       }
-//     } else {
-//       launchImageLibrary({ mediaType: "video" }, (result) => {
-//         if (result?.assets) {
-//           onComplete({
-//             path: result.assets[0]?.uri,
-//             duration: result.assets[0]?.duration,
-//           });
-//         }
-//       });
-//     }
+//     });
 //   };
 //   return (
 //     <BottomSheet visible={visible} onClose={onClose} height={230}>
-//       <View style={[styles.container, containerStyle]}>
-//         {/* Camera */}
-//         <TouchableOpacity style={[styles.row, rowStyle]} onPress={onCamera}>
-//           <Image source={Images.video_icon} style={[styles.icon, iconStyle]} />
-//           <Text style={[styles.text, textStyle]}>Camera</Text>
+//       <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, rowStyle]} onPress={onGallery}>
-//           <Image source={Images.image_icon} style={[styles.icon, iconStyle]} />
-//           <Text style={[styles.text, textStyle]}>Gallery</Text>
+//         {/* 🖼️ 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, rowStyle]} onPress={onClose}>
-//           <Image source={Images.cancel} style={[styles.icon, iconStyle]} />
-//           <Text style={[styles.text, textStyle]}>Cancel</Text>
+//         {/* ❌ Cancel */}
+//         <TouchableOpacity style={styles.row} onPress={onClose}>
+//           <Image source={Images.cancel} style={styles.icon} />
+//           <Text style={styles.text}>Cancel</Text>
 //         </TouchableOpacity>
 //       </View>
 //     </BottomSheet>
@@ -162,45 +325,105 @@ import { View, Text, TouchableOpacity, StyleSheet, Image, Alert, } from "react-n
 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, } from "../../utils/permissions"; // ✅ Make sure path is correct
-const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onClose, }) => {
-    // ✅ Success handler
+// Import your permission utilities
+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 onComplete = useCallback((data) => {
         onSuccess(data);
         onClose();
     }, [onSuccess, onClose]);
-    // ✅ CAMERA HANDLER with permission check
+    // Helper: Compress Image
+    const compressImage = async (imagePath) => {
+        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) => {
+        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) => {
             if (!granted)
-                return; // ❌ Permission denied, handled by your alert
+                return;
             if (mediaType === "photo") {
-                if (isMultiSelect) {
-                    // single capture, multiple not supported directly from camera
-                    ImageCropPicker.openCamera({ mediaType: "photo" })
-                        .then((response) => onComplete([response]))
-                        .catch(() => { });
-                }
-                else {
-                    ImageCropPicker.openCamera({ mediaType: "photo" })
-                        .then((response) => ImageCropPicker.openCropper({
-                        path: response?.path,
-                        width: response?.width,
-                        height: response?.height,
+                try {
+                    const response = await ImageCropPicker.openCamera({
                         mediaType: "photo",
-                        freeStyleCropEnabled: true,
-                    }).then(onComplete))
-                        .catch(() => { });
+                    });
+                    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
-                launchCamera({ mediaType: "video" }, (response) => {
+                // 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: response.assets[0]?.uri,
+                            path: compressedPath,
                             duration: response.assets[0]?.duration,
                         });
                     }
@@ -208,46 +431,61 @@ const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onC
             }
         });
     };
-    // ✅ GALLERY HANDLER with permission check
+    // GALLERY HANDLER with permission check and compression
     const handleGallery = async () => {
         await galleryPermissions(async (granted) => {
             if (!granted)
-                return; // ❌ Permission denied, handled by your alert
+                return;
             if (mediaType === "photo") {
-                if (isMultiSelect) {
-                    ImageCropPicker.openPicker({
-                        mediaType: "photo",
-                        multiple: true,
-                        maxFiles: 5,
-                    })
-                        .then((images) => {
+                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;
                         }
-                        else {
-                            onComplete(images);
-                        }
-                    })
-                        .catch(() => { });
+                        // 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 });
+                    }
                 }
-                else {
-                    ImageCropPicker.openPicker({ mediaType: "photo" })
-                        .then((response) => ImageCropPicker.openCropper({
-                        path: response?.path,
-                        width: response?.width,
-                        height: response?.height,
-                        mediaType: "photo",
-                        freeStyleCropEnabled: true,
-                    }).then(onComplete))
-                        .catch(() => { });
+                catch (error) {
+                    console.log("Gallery cancelled or error:", error);
                 }
             }
             else {
-                // 🎥 VIDEO FROM GALLERY
-                launchImageLibrary({ mediaType: "video" }, (result) => {
+                // 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: result.assets[0]?.uri,
+                            path: compressedPath,
                             duration: result.assets[0]?.duration,
                         });
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnhz/rn-ui-toolkit",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -31,7 +31,9 @@
     "react-native-safe-area-context": "^5.6.1",
     "react-native-svg": "^15.12.1",
     "react-native-vector-icons": "^10.3.0",
-    "react-native-video-trim": "^3.0.9"
+    "react-native-video-trim": "^3.0.9",
+    "react-native-compressor": "^1.13.0",
+    "react-native-fs": "^2.20.0"
   },
   "devDependencies": {
     "@react-native-documents/picker": "^10.1.5",