@teamnhz/rn-ui-toolkit 1.2.9 → 1.3.0

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

@@ -1,40 +1,11 @@
 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;
-};
+import { ViewStyle } from "react-native";
 type Props = {
-    visible: boolean;
-    onClose: () => void;
     mediaType: "photo" | "video";
     isMultiSelect?: boolean;
     onSuccess: (data: any) => 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;
-    };
+    visible: boolean;
+    onClose: () => void;
     enableCompression?: boolean;
     imageCompressionOptions?: {
         maxWidth?: number;
@@ -43,6 +14,10 @@ type Props = {
     videoCompressionOptions?: {
         compressionMethod?: "auto" | "manual";
     };
+    customStyle?: ViewStyle;
+    sheetBackgroundColor?: string;
+    textColor?: string;
+    iconTintColor?: string;
 };
 declare const ImagePicker: React.FC<Props>;
 export default ImagePicker;

package/dist/components/ImagePicker/index.js

@@ -328,6 +328,7 @@
 //   StyleSheet,
 //   Image,
 //   Alert,
+//   ViewStyle,
 // } from "react-native";
 // import { BottomSheet, Dividers } from "../index";
 // import { launchCamera, launchImageLibrary } from "react-native-image-picker";
@@ -359,6 +360,7 @@
 //   videoCompressionOptions?: {
 //     compressionMethod?: "auto" | "manual";
 //   };
+//   customStyle?:ViewStyle
 // };
 // const ImagePicker: React.FC<Props> = ({
 //   mediaType,
@@ -369,6 +371,7 @@
 //   enableCompression = true,
 //   imageCompressionOptions = { maxWidth: 1080, quality: 0.7 },
 //   videoCompressionOptions = { compressionMethod: "auto" },
+//   customStyle
 // }) => {
 //   // Success handler
 //   const onComplete = useCallback(
@@ -538,7 +541,7 @@
 //     });
 //   };
 //   return (
-//     <BottomSheet visible={visible} onClose={onClose} height={230}>
+//     <BottomSheet visible={visible} onClose={onClose} height={230} sheetBackground={customStyle?.backgroundColor}>
 //       <View style={styles.container}>
 //         {/* Camera */}
 //         <TouchableOpacity style={styles.row} onPress={handleCamera}>
@@ -577,168 +580,177 @@
 //   },
 // });
 import React, { useCallback } from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Image, } from "react-native";
-import { BottomSheet, Dividers } from "../index"; // ✅ YOUR ORIGINAL BOTTOMSHEET
+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";
-// Permission functions (user can override)
+import { Colors, Images, Scale, Typography } from "../../styles";
+// Permissions
 import { cameraPermissions, galleryPermissions, checkMicroPhonePermission, } from "../../utils/permissions";
-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 ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onClose, enableCompression = true, imageCompressionOptions = { maxWidth: 1080, quality: 0.7 }, videoCompressionOptions = { compressionMethod: "auto" }, customStyle, sheetBackgroundColor, textColor, iconTintColor, }) => {
     const onComplete = useCallback((data) => {
         onSuccess(data);
         onClose();
     }, [onSuccess, onClose]);
-    const compressImage = async (path) => {
+    // Compress Image
+    const compressImage = async (imagePath) => {
         if (!enableCompression)
-            return path;
+            return imagePath;
         try {
-            return await ImageCompressor.compress(path, imageCompressionOptions);
+            const compressedImage = await ImageCompressor.compress(imagePath, {
+                maxWidth: imageCompressionOptions.maxWidth,
+                quality: imageCompressionOptions.quality,
+            });
+            return compressedImage;
         }
-        catch {
-            return path;
+        catch (error) {
+            console.error("Image compression error:", error);
+            return imagePath;
         }
     };
-    const compressVideo = async (uri) => {
+    // Compress Video
+    const compressVideo = async (videoUri) => {
         if (!enableCompression)
-            return uri;
+            return videoUri;
         try {
-            return await VideoCompressor.compress(uri, videoCompressionOptions);
+            const compressedVideo = await VideoCompressor.compress(videoUri, {
+                compressionMethod: videoCompressionOptions.compressionMethod,
+            });
+            return compressedVideo;
         }
-        catch {
-            return uri;
+        catch (error) {
+            console.error("Video compression error:", error);
+            return videoUri;
         }
     };
+    // Camera
     const handleCamera = async () => {
-        await permissionHandlers.camera?.(async (granted) => {
+        await cameraPermissions(async (granted) => {
             if (!granted)
                 return;
             if (mediaType === "photo") {
                 try {
-                    const img = await ImageCropPicker.openCamera({
-                        mediaType: "photo",
-                        ...pickerOptions.camera,
-                    });
-                    let cropped = img;
-                    if (!isMultiSelect) {
-                        cropped = await ImageCropPicker.openCropper({
-                            path: img.path,
+                    const response = await ImageCropPicker.openCamera({ mediaType: "photo" });
+                    if (isMultiSelect) {
+                        const comp = await compressImage(response.path);
+                        onComplete([{ ...response, path: comp }]);
+                    }
+                    else {
+                        const cropped = await ImageCropPicker.openCropper({
+                            path: response?.path,
+                            width: response?.width,
+                            height: response?.height,
                             mediaType: "photo",
                             freeStyleCropEnabled: true,
-                            ...pickerOptions.cropper,
                         });
+                        const comp = await compressImage(cropped.path);
+                        onComplete({ ...cropped, path: comp });
                     }
-                    const compressed = await compressImage(cropped.path);
-                    onComplete({ ...cropped, path: compressed });
                 }
-                catch { }
+                catch (err) {
+                    console.log("Camera error:", err);
+                }
             }
             else {
-                const micGranted = await permissionHandlers.microphone?.();
-                if (!micGranted)
+                const micPermission = await checkMicroPhonePermission();
+                if (!micPermission) {
+                    Alert.alert("Microphone Permission Required", "Please enable microphone access to record videos.");
                     return;
-                launchCamera({ mediaType: "video", ...pickerOptions.camera }, async (res) => {
+                }
+                launchCamera({ mediaType: "video", durationLimit: 60, videoQuality: "high" }, async (res) => {
                     if (res?.assets?.length) {
-                        const compressed = await compressVideo(res.assets[0].uri);
-                        onComplete({ path: compressed });
+                        const uri = res.assets[0].uri;
+                        const comp = await compressVideo(uri);
+                        onComplete({ path: comp, duration: res.assets[0].duration });
                     }
                 });
             }
         });
     };
+    // Gallery
     const handleGallery = async () => {
-        await permissionHandlers.gallery?.(async (granted) => {
+        await galleryPermissions(async (granted) => {
             if (!granted)
                 return;
             if (mediaType === "photo") {
                 try {
-                    let result = await ImageCropPicker.openPicker({
-                        mediaType: "photo",
-                        multiple: isMultiSelect,
-                        ...pickerOptions.gallery,
-                    });
-                    if (!isMultiSelect) {
-                        result = await ImageCropPicker.openCropper({
-                            path: result.path,
+                    if (isMultiSelect) {
+                        const images = await ImageCropPicker.openPicker({
                             mediaType: "photo",
-                            freeStyleCropEnabled: true,
-                            ...pickerOptions.cropper,
+                            multiple: true,
+                            maxFiles: 5,
                         });
-                    }
-                    if (isMultiSelect) {
-                        const compressed = await Promise.all(result.map(async (img) => ({
+                        if (images.length > 5) {
+                            Alert.alert("Limit Exceeded", "You can select up to 5 images.");
+                            return;
+                        }
+                        const compressed = await Promise.all(images.map(async (img) => ({
                             ...img,
                             path: await compressImage(img.path),
                         })));
                         onComplete(compressed);
                     }
                     else {
-                        const compressed = await compressImage(result.path);
-                        onComplete({ ...result, path: compressed });
+                        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 comp = await compressImage(cropped.path);
+                        onComplete({ ...cropped, path: comp });
                     }
                 }
-                catch { }
+                catch (err) {
+                    console.log("Gallery error:", err);
+                }
             }
             else {
-                launchImageLibrary({ mediaType: "video", ...pickerOptions.gallery }, async (res) => {
-                    if (res?.assets?.length) {
-                        const compressed = await compressVideo(res.assets[0].uri);
-                        onComplete({ path: compressed });
+                launchImageLibrary({ mediaType: "video" }, async (result) => {
+                    if (result?.assets?.length) {
+                        const uri = result.assets[0].uri;
+                        const comp = await compressVideo(uri);
+                        onComplete({ path: comp, duration: result.assets[0].duration });
                     }
                 });
             }
         });
     };
-    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)),
+    const appliedTextColor = textColor || Colors.white;
+    const appliedIconColor = iconTintColor || textColor || Colors.white;
+    return (React.createElement(BottomSheet, { visible: visible, onClose: onClose, height: 230, sheetBackground: sheetBackgroundColor },
+        React.createElement(View, { style: styles.container },
+            React.createElement(TouchableOpacity, { style: styles.row, onPress: handleCamera },
+                React.createElement(Image, { source: Images.video_icon, style: [styles.icon, { tintColor: appliedIconColor }] }),
+                React.createElement(Text, { style: [styles.text, { color: appliedTextColor }] }, "Camera")),
             React.createElement(Dividers, { small: true }),
-            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(TouchableOpacity, { style: styles.row, onPress: handleGallery },
+                React.createElement(Image, { source: Images.image_icon, style: [styles.icon, { tintColor: appliedIconColor }] }),
+                React.createElement(Text, { style: [styles.text, { color: appliedTextColor }] }, "Gallery")),
             React.createElement(Dividers, { small: true }),
-            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)))));
+            React.createElement(TouchableOpacity, { style: styles.row, onPress: onClose },
+                React.createElement(Image, { source: Images.cancel, style: [styles.icon, { tintColor: appliedIconColor }] }),
+                React.createElement(Text, { style: [styles.text, { color: appliedTextColor }] }, "Cancel")))));
 };
 export default ImagePicker;
-const defaultStyles = StyleSheet.create({
-    container: {
-        flex: 1,
-        padding: 16,
-    },
+const styles = StyleSheet.create({
+    container: { flex: 1, padding: 16 },
     row: {
         flexDirection: "row",
         alignItems: "center",
-        paddingVertical: 10,
+        marginVertical: 6,
     },
     text: {
-        fontSize: 16,
-        color: "white",
+        ...Typography.style.standardU(),
     },
     icon: {
-        width: 20,
-        height: 20,
+        width: Scale.moderateScale(20),
+        height: Scale.moderateScale(20),
         marginRight: 10,
-        tintColor: "white",
     },
 });

package/package.json

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