@teamnhz/rn-ui-toolkit 1.2.8 → 1.3.0

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,4 +1,5 @@
 import React from "react";
+import { ViewStyle } from "react-native";
 type Props = {
     mediaType: "photo" | "video";
     isMultiSelect?: boolean;
@@ -13,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

@@ -320,23 +320,280 @@
 //     tintColor: Colors.white,
 //   },
 // });
+// import React, { useCallback } from "react";
+// import {
+//   View,
+//   Text,
+//   TouchableOpacity,
+//   StyleSheet,
+//   Image,
+//   Alert,
+//   ViewStyle,
+// } 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";
+//   };
+//   customStyle?:ViewStyle
+// };
+// const ImagePicker: React.FC<Props> = ({
+//   mediaType,
+//   isMultiSelect = false,
+//   onSuccess,
+//   visible,
+//   onClose,
+//   enableCompression = true,
+//   imageCompressionOptions = { maxWidth: 1080, quality: 0.7 },
+//   videoCompressionOptions = { compressionMethod: "auto" },
+//   customStyle
+// }) => {
+//   // 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} sheetBackground={customStyle?.backgroundColor}>
+//       <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 { 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
+// Permissions
 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 = ({ 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]);
-    // Helper: Compress Image
+    // Compress Image
     const compressImage = async (imagePath) => {
         if (!enableCompression)
             return imagePath;
@@ -345,18 +602,14 @@ const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onC
                 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
+            return imagePath;
         }
     };
-    // Helper: Compress Video
+    // Compress Video
     const compressVideo = async (videoUri) => {
         if (!enableCompression)
             return videoUri;
@@ -364,34 +617,26 @@ const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onC
             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
+            return videoUri;
         }
     };
-    // CAMERA HANDLER with permission check and compression
+    // Camera
     const handleCamera = async () => {
         await cameraPermissions(async (granted) => {
             if (!granted)
                 return;
             if (mediaType === "photo") {
                 try {
-                    const response = await ImageCropPicker.openCamera({
-                        mediaType: "photo",
-                    });
+                    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 }]);
+                        const comp = await compressImage(response.path);
+                        onComplete([{ ...response, path: comp }]);
                     }
                     else {
-                        // Crop and compress single image
                         const cropped = await ImageCropPicker.openCropper({
                             path: response?.path,
                             width: response?.width,
@@ -399,39 +644,31 @@ const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onC
                             mediaType: "photo",
                             freeStyleCropEnabled: true,
                         });
-                        const compressedPath = await compressImage(cropped.path);
-                        onComplete({ ...cropped, path: compressedPath });
+                        const comp = await compressImage(cropped.path);
+                        onComplete({ ...cropped, path: comp });
                     }
                 }
-                catch (error) {
-                    console.log("Camera cancelled or error:", error);
+                catch (err) {
+                    console.log("Camera error:", err);
                 }
             }
             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,
-                        });
+                launchCamera({ mediaType: "video", durationLimit: 60, videoQuality: "high" }, async (res) => {
+                    if (res?.assets?.length) {
+                        const uri = res.assets[0].uri;
+                        const comp = await compressVideo(uri);
+                        onComplete({ path: comp, duration: res.assets[0].duration });
                     }
                 });
             }
         });
     };
-    // GALLERY HANDLER with permission check and compression
+    // Gallery
     const handleGallery = async () => {
         await galleryPermissions(async (granted) => {
             if (!granted)
@@ -445,18 +682,16 @@ const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onC
                             maxFiles: 5,
                         });
                         if (images.length > 5) {
-                            Alert.alert("Limit Exceeded", "You can only select up to 5 images.");
+                            Alert.alert("Limit Exceeded", "You can select up to 5 images.");
                             return;
                         }
-                        // Compress multiple images
-                        const compressedImages = await Promise.all(images.map(async (img) => ({
+                        const compressed = await Promise.all(images.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",
                         });
@@ -467,45 +702,40 @@ const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onC
                             mediaType: "photo",
                             freeStyleCropEnabled: true,
                         });
-                        const compressedPath = await compressImage(cropped.path);
-                        onComplete({ ...cropped, path: compressedPath });
+                        const comp = await compressImage(cropped.path);
+                        onComplete({ ...cropped, path: comp });
                     }
                 }
-                catch (error) {
-                    console.log("Gallery cancelled or error:", error);
+                catch (err) {
+                    console.log("Gallery error:", err);
                 }
             }
             else {
-                // VIDEO FROM GALLERY
-                launchImageLibrary({
-                    mediaType: "video",
-                    assetRepresentationMode: "current",
-                }, async (result) => {
+                launchImageLibrary({ mediaType: "video" }, 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,
-                        });
+                        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 },
+    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 }),
-                React.createElement(Text, { style: styles.text }, "Camera")),
+                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: styles.row, onPress: handleGallery },
-                React.createElement(Image, { source: Images.image_icon, style: styles.icon }),
-                React.createElement(Text, { style: styles.text }, "Gallery")),
+                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: styles.row, onPress: onClose },
-                React.createElement(Image, { source: Images.cancel, style: styles.icon }),
-                React.createElement(Text, { style: styles.text }, "Cancel")))));
+                React.createElement(Image, { source: Images.cancel, style: [styles.icon, { tintColor: appliedIconColor }] }),
+                React.createElement(Text, { style: [styles.text, { color: appliedTextColor }] }, "Cancel")))));
 };
 export default ImagePicker;
 const styles = StyleSheet.create({
@@ -513,12 +743,14 @@ const styles = StyleSheet.create({
     row: {
         flexDirection: "row",
         alignItems: "center",
+        marginVertical: 6,
+    },
+    text: {
+        ...Typography.style.standardU(),
     },
-    text: { ...Typography.style.standardU(), color: Colors.white },
     icon: {
         width: Scale.moderateScale(20),
         height: Scale.moderateScale(20),
         marginRight: 10,
-        tintColor: Colors.white,
     },
 });

package/package.json

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