@teamnhz/rn-ui-toolkit 1.1.7 → 1.1.8

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

@@ -1,17 +1,2 @@
-type AppHeaderProps = {
-    navigation: any;
-    headerTitle?: string;
-    titleStyle?: object;
-    leftImage?: any;
-    onPressLeft?: () => void;
-    leftIconStyle?: object;
-    rightImageOne?: any;
-    onPressRightOne?: () => void;
-    rightImageOneStyle?: object;
-    rightImageTwo?: any;
-    onPressRightTwo?: () => void;
-    rightImageTwoStyle?: object;
-    headerStyle?: object;
-};
-declare const AppHeader: (props: AppHeaderProps) => void;
+declare const AppHeader: (props: any) => any;
 export default AppHeader;

package/dist/components/AppHeader/index.js

@@ -1,45 +1,66 @@
-import { View, TouchableOpacity, StyleSheet } from "react-native";
 import React from "react";
+import { View, TouchableOpacity, StyleSheet, Platform, StatusBar, } from "react-native";
 import { Colors } from "../../styles";
 import { Image, T } from "../index";
+const getSafeAreaTop = () => {
+    if (Platform.OS === "android") {
+        return StatusBar.currentHeight || 0;
+    }
+    return 20; // iOS safe area fallback
+};
 const AppHeader = (props) => {
     const { navigation, headerTitle, titleStyle, leftImage, onPressLeft, leftIconStyle, rightImageOne, onPressRightOne, rightImageOneStyle, rightImageTwo, onPressRightTwo, rightImageTwoStyle, headerStyle, } = props;
+    const safeTop = getSafeAreaTop();
     navigation.setOptions({
+        headerLeftContainerStyle: {
+            paddingLeft: 12,
+            paddingBottom: Platform.OS === "ios" ? 4 : 0,
+        },
+        headerRightContainerStyle: {
+            paddingRight: 12,
+            paddingBottom: Platform.OS === "ios" ? 4 : 0,
+        },
+        headerTitleContainerStyle: {
+            paddingBottom: Platform.OS === "ios" ? 4 : 0,
+        },
+        headerStyle: [
+            styles.headerBase,
+            { paddingTop: safeTop },
+            headerStyle,
+        ],
         headerLeft: () => leftImage ? (React.createElement(TouchableOpacity, { onPress: onPressLeft, activeOpacity: 0.8 },
-            React.createElement(Image, { source: leftImage, resizeMode: "contain", style: [styles.leftImage, leftIconStyle] }))) : null,
+            React.createElement(Image, { source: leftImage, resizeMode: "contain", style: [styles.icon, leftIconStyle] }))) : null,
         headerTitle: () => headerTitle ? (React.createElement(T, { title: headerTitle, style: [styles.headerTitleText, titleStyle] })) : null,
         headerRight: () => (React.createElement(View, { style: styles.headerRightWrapper },
             rightImageOne ? (React.createElement(TouchableOpacity, { onPress: onPressRightOne, activeOpacity: 0.8 },
-                React.createElement(Image, { source: rightImageOne, resizeMode: "contain", style: [
-                        styles.rightImage,
-                        rightImageOneStyle,
-                        { marginRight: 10 },
-                    ] }))) : null,
+                React.createElement(Image, { source: rightImageOne, resizeMode: "contain", style: [styles.icon, rightImageOneStyle] }))) : null,
             rightImageTwo ? (React.createElement(TouchableOpacity, { onPress: onPressRightTwo, activeOpacity: 0.8 },
-                React.createElement(Image, { source: rightImageTwo, resizeMode: "contain", style: [styles.rightImage, rightImageTwoStyle] }))) : null)),
-        headerStyle: [styles.headerBase, headerStyle],
+                React.createElement(Image, { source: rightImageTwo, resizeMode: "contain", style: [styles.icon, rightImageTwoStyle] }))) : null)),
     });
+    return null;
 };
 export default AppHeader;
 const styles = StyleSheet.create({
     headerBase: {
-        height: 100,
-        width: "100%",
-    },
-    leftImage: {
-        height: 44,
-        width: 44,
+        backgroundColor: Colors.white,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.lightGrey,
+        height: Platform.OS === "ios" ? 90 : 70,
+        justifyContent: "center",
     },
-    rightImage: {
-        height: 44,
-        width: 44,
+    icon: {
+        height: 28,
+        width: 28,
     },
     headerRightWrapper: {
         flexDirection: "row",
         alignItems: "center",
+        gap: 12,
     },
     headerTitleText: {
         color: Colors.black,
         textAlign: "center",
+        fontSize: 18,
+        fontWeight: "600",
     },
 });

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

@@ -2,17 +2,10 @@ import React from "react";
 type Props = {
     mediaType: "photo" | "video";
     isMultiSelect?: boolean;
-    onSuccess: (data: any) => void;
+    onSuccess: (response: 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,162 +1,3 @@
-// // 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,
@@ -169,18 +10,33 @@
 // 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 your permission utilities
 // import {
 //   cameraPermissions,
 //   galleryPermissions,
-// } from "../../utils/permissions"; // ✅ Make sure path is correct
+//   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,
@@ -188,8 +44,11 @@
 //   onSuccess,
 //   visible,
 //   onClose,
+//   enableCompression = true,
+//   imageCompressionOptions = { maxWidth: 1080, quality: 0.7 },
+//   videoCompressionOptions = { compressionMethod: "auto" },
 // }) => {
-//   // ✅ Success handler
+//   // Success handler
 //   const onComplete = useCallback(
 //     (data: any) => {
 //       onSuccess(data);
@@ -197,106 +56,181 @@
 //     },
 //     [onSuccess, onClose]
 //   );
-//   // ✅ CAMERA HANDLER with permission check
+//   // 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; // ❌ Permission denied, handled by your alert
+//       if (!granted) 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,
-//                 mediaType: "photo",
-//                 freeStyleCropEnabled: true,
-//               }).then(onComplete)
-//             )
-//             .catch(() => {});
+//         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
-//         launchCamera({ mediaType: "video" }, (response) => {
-//           if (response?.assets?.length) {
-//             onComplete({
-//               path: response.assets[0]?.uri,
-//               duration: response.assets[0]?.duration,
-//             });
+//         // 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
+//   // GALLERY HANDLER with permission check and compression
 //   const handleGallery = async () => {
 //     await galleryPermissions(async (granted: boolean) => {
-//       if (!granted) return; // ❌ Permission denied, handled by your alert
+//       if (!granted) return;
 //       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(() => {});
+//         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" }, (result) => {
-//           if (result?.assets?.length) {
-//             onComplete({
-//               path: result.assets[0]?.uri,
-//               duration: result.assets[0]?.duration,
-//             });
+//         // 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 */}
+//         {/* 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 */}
+//         {/* 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 */}
+//         {/* Cancel */}
 //         <TouchableOpacity style={styles.row} onPress={onClose}>
 //           <Image source={Images.cancel} style={styles.icon} />
 //           <Text style={styles.text}>Cancel</Text>
@@ -320,175 +254,121 @@
 //     tintColor: Colors.white,
 //   },
 // });
-import React, { useCallback } from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Image, Alert, } from "react-native";
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Image, } 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";
-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);
+const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onClose, enableCompression = true, }) => {
+    // Close modal + start loader in parent
+    const sendRawAndClose = (rawData) => {
         onClose();
-    }, [onSuccess, onClose]);
-    // Helper: Compress Image
-    const compressImage = async (imagePath) => {
-        if (!enableCompression)
-            return imagePath;
+        onSuccess({ loading: true, data: rawData });
+    };
+    // After compression finished
+    const sendFinalCompressed = (compressed) => {
+        onSuccess({ loading: false, data: compressed });
+    };
+    const compressImage = async (path) => {
         try {
-            const compressedImage = await ImageCompressor.compress(imagePath, {
-                maxWidth: imageCompressionOptions.maxWidth,
-                quality: imageCompressionOptions.quality,
+            const compressed = await ImageCompressor.compress(path, {
+                maxWidth: 1080,
+                quality: 0.7,
             });
-            // 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 compressed;
         }
-        catch (error) {
-            console.error("Image compression error:", error);
-            return imagePath; // Return original if compression fails
+        catch (e) {
+            return path;
         }
     };
-    // Helper: Compress Video
-    const compressVideo = async (videoUri) => {
-        if (!enableCompression)
-            return videoUri;
+    const compressVideo = async (uri) => {
         try {
-            const compressedVideo = await VideoCompressor.compress(videoUri, {
-                compressionMethod: videoCompressionOptions.compressionMethod,
+            const compressed = await VideoCompressor.compress(uri, {
+                compressionMethod: "auto",
             });
-            // 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 compressed;
         }
-        catch (error) {
-            console.error("Video compression error:", error);
-            return videoUri; // Return original if compression fails
+        catch (e) {
+            return uri;
         }
     };
-    // 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({
+                    const picked = 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 });
-                    }
+                    sendRawAndClose(picked); // CLOSE MODAL + START LOADER
+                    setTimeout(async () => {
+                        const compressedPath = await compressImage(picked.path);
+                        sendFinalCompressed({ ...picked, path: compressedPath });
+                    }, 10);
                 }
-                catch (error) {
-                    console.log("Camera cancelled or error:", error);
+                catch (err) {
+                    console.log(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.");
+                // VIDEO
+                const mic = await checkMicroPhonePermission();
+                if (!mic)
                     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" }, (res) => {
+                    if (!res?.assets?.length)
+                        return;
+                    const raw = res.assets[0];
+                    sendRawAndClose(raw);
+                    setTimeout(async () => {
+                        const compressed = await compressVideo(raw.uri);
+                        sendFinalCompressed({
+                            path: compressed,
+                            duration: raw.duration,
                         });
-                    }
+                    }, 10);
                 });
             }
         });
     };
-    // GALLERY HANDLER with permission check and compression
+    // ---------- GALLERY ----------
     const handleGallery = async () => {
         await galleryPermissions(async (granted) => {
             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 });
-                    }
+                    const picked = await ImageCropPicker.openPicker({
+                        mediaType: "photo",
+                    });
+                    sendRawAndClose(picked);
+                    setTimeout(async () => {
+                        const compressed = await compressImage(picked.path);
+                        sendFinalCompressed({ ...picked, path: compressed });
+                    }, 10);
                 }
-                catch (error) {
-                    console.log("Gallery cancelled or error:", error);
+                catch (e) {
+                    console.log(e);
                 }
             }
             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" }, (res) => {
+                    if (!res?.assets?.length)
+                        return;
+                    const raw = res.assets[0];
+                    sendRawAndClose(raw);
+                    setTimeout(async () => {
+                        const compressed = await compressVideo(raw.uri);
+                        sendFinalCompressed({
+                            path: compressed,
+                            duration: raw.duration,
                         });
-                    }
+                    }, 10);
                 });
             }
         });
@@ -510,10 +390,7 @@ const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onC
 export default ImagePicker;
 const styles = StyleSheet.create({
     container: { flex: 1, padding: 16 },
-    row: {
-        flexDirection: "row",
-        alignItems: "center",
-    },
+    row: { flexDirection: "row", alignItems: "center" },
     text: { ...Typography.style.standardU(), color: Colors.white },
     icon: {
         width: Scale.moderateScale(20),

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

@@ -35,6 +35,7 @@ interface InputProps extends TextInputProps {
     onPressCountryCode?: () => void;
     countryCodeWrapperStyle?: object;
     countryCodeTextStyle?: object;
+    isError?: boolean;
 }
 declare const Input: React.FC<InputProps>;
 export default Input;

package/dist/components/Input/index.js

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Colors, Typography, Scale, Images } from "../../styles";
 import { defaultRegex } from "../../utils/regex";
 import { messages } from "../../constants/messages";
-const Input = ({ intlType, textKey, placeholder, inputPlaceholderTextColor, leftIcon, rightIcon, onLeftIconPress, onRightIconPress, style, containerStyle, inputStyle, errorTextStyle, leftIconStyle, rightIconStyle, leftIconWrapperStyle, rightIconWrapperStyle, type = "text", editable = true, error, value = "", customRegex, customErrorMessage, onChangeText, onValidation, onBlur: restOnBlur, onFocus: restOnFocus, multiline = false, maxLength, returnKeyType, countryCode, onPressCountryCode, countryCodeTextStyle, countryCodeWrapperStyle, ...rest }) => {
+const Input = ({ intlType, textKey, placeholder, inputPlaceholderTextColor, leftIcon, rightIcon, onLeftIconPress, onRightIconPress, style, containerStyle, inputStyle, errorTextStyle, leftIconStyle, rightIconStyle, leftIconWrapperStyle, rightIconWrapperStyle, type = "text", editable = true, error, value = "", customRegex, customErrorMessage, onChangeText, onValidation, onBlur: restOnBlur, onFocus: restOnFocus, multiline = false, maxLength, returnKeyType, countryCode, onPressCountryCode, countryCodeTextStyle, countryCodeWrapperStyle, isError = true, ...rest }) => {
     const { t } = useTranslation();
     const [secureText, setSecureText] = useState(type === "password");
     const [internalError, setInternalError] = useState(null);
@@ -97,7 +97,7 @@ const Input = ({ intlType, textKey, placeholder, inputPlaceholderTextColor, left
             type === "password" ? (React.createElement(TouchableOpacity, { onPress: () => setSecureText(!secureText), style: [styles.iconWrapper, rightIconWrapperStyle] },
                 React.createElement(Image, { source: secureText ? Images.Eyeoff : Images.Eyeon, style: [styles.icon, rightIconStyle], resizeMode: "contain" }))) : (rightIcon && (React.createElement(TouchableOpacity, { onPress: onRightIconPress, disabled: !onRightIconPress, style: [styles.iconWrapper, rightIconWrapperStyle] },
                 React.createElement(Image, { source: rightIcon, style: [styles.icon, rightIconStyle], resizeMode: "contain" }))))),
-        showError && (React.createElement(Text, { style: [styles.errorText, errorTextStyle] }, showError))));
+        showError && isError && (React.createElement(Text, { style: [styles.errorText, errorTextStyle] }, showError))));
 };
 export default Input;
 const styles = StyleSheet.create({
@@ -167,239 +167,3 @@ const styles = StyleSheet.create({
         color: Colors.textColor,
     },
 });
-// import React, { useState, useCallback, useEffect } from "react";
-// import {
-//   View,
-//   TextInput,
-//   TextInputProps,
-//   StyleSheet,
-//   Image,
-//   ImageSourcePropType,
-//   TouchableOpacity,
-//   Text,
-//   NativeSyntheticEvent,
-//   TextInputFocusEventData,
-// } from "react-native";
-// import { useTranslation } from "react-i18next";
-// import { Colors, Typography, Scale, Images } from "../../styles";
-// import { defaultRegex, InputType } from "../../utils/regex";
-// import { messages } from "../../constants/messages";
-// interface InputProps extends TextInputProps {
-//   intlType?: string;
-//   textKey?: string;
-//   leftIcon?: ImageSourcePropType;
-//   rightIcon?: ImageSourcePropType;
-//   onLeftIconPress?: () => void;
-//   onRightIconPress?: () => void;
-//   type?: InputType;
-//   editable?: boolean;
-//   error?: string | boolean;
-//   value?: string;
-//   customRegex?: RegExp;
-//   customErrorMessage?: string;
-//   onChangeText?: (text: string) => void;
-//   onValidation?: (errorObj: { type: InputType; hasError: boolean; message?: string }) => void;
-//   containerStyle?: object;
-//   inputStyle?: object;
-//   errorTextStyle?: object;
-//   leftIconStyle?: object;
-//   rightIconStyle?: object;
-// }
-// const Input: React.FC<InputProps> = ({
-//   intlType,
-//   textKey,
-//   placeholder,
-//   leftIcon,
-//   rightIcon,
-//   onLeftIconPress,
-//   onRightIconPress,
-//   style,
-//   containerStyle,
-//   inputStyle,
-//   errorTextStyle,
-//   leftIconStyle,
-//   rightIconStyle,
-//   type = "text",
-//   editable = true,
-//   error,
-//   value = "",
-//   customRegex,
-//   customErrorMessage,
-//   onChangeText,
-//   onValidation,
-//   onBlur: restOnBlur,
-//   onFocus: restOnFocus,
-//   multiline = false,
-//   ...rest
-// }) => {
-//   const { t } = useTranslation();
-//   const [secureText, setSecureText] = useState(type === "password");
-//   const [internalError, setInternalError] = useState<string | null>(null);
-//   const [wasBlurred, setWasBlurred] = useState(false);
-//   const [isFocused, setIsFocused] = useState(false);
-//   const translatedPlaceholder =
-//     intlType && textKey ? String(t(textKey, { ns: intlType, value })) : placeholder;
-//   const keyboardType: TextInputProps["keyboardType"] =
-//     type === "email" ? "email-address" : type === "number" ? "numeric" : "default";
-//   const validateInternal = useCallback(
-//     (text: string) => {
-//       if (!wasBlurred || !editable) return;
-//       const regexToUse = customRegex ?? defaultRegex[type];
-//       const fallbackMsg = messages.invalid[type] || "Invalid input";
-//       const msg = customErrorMessage || fallbackMsg;
-//       if (text === "" || !regexToUse.test(text)) {
-//         setInternalError(msg);
-//         onValidation?.({ type, hasError: true, message: msg });
-//       } else {
-//         setInternalError(null);
-//         onValidation?.({ type, hasError: false });
-//       }
-//     },
-//     [wasBlurred, editable, type, customRegex, customErrorMessage, onValidation]
-//   );
-//   useEffect(() => {
-//     if (!customRegex) return;
-//     if (internalError && value && customRegex.test(value)) {
-//       setInternalError(null);
-//       onValidation?.({ type, hasError: false });
-//     }
-//   }, [value]);
-//   const handleChangeText = (text: string) => {
-//     onChangeText?.(text);
-//     if (wasBlurred) validateInternal(text);
-//   };
-//   const handleFocus = (e?: NativeSyntheticEvent<TextInputFocusEventData>) => {
-//     setIsFocused(true);
-//     restOnFocus?.(e as any);
-//   };
-//   const handleBlur = (e?: NativeSyntheticEvent<TextInputFocusEventData>) => {
-//     setIsFocused(false);
-//     if (!wasBlurred) setWasBlurred(true);
-//     if (editable) validateInternal(value || "");
-//     restOnBlur?.(e as any);
-//   };
-//   const rawError = (typeof error === "string" ? error : undefined) ?? internalError ?? null;
-//   const showError = (() => {
-//     if (!rawError || !editable) return null;
-//     return wasBlurred && !isFocused ? rawError : null;
-//   })();
-//   return (
-//     <View style={{ marginBottom: 10 }}>
-//       <View
-//         style={[
-//           styles.container,
-//           !editable && styles.disabled,
-//           !!showError && styles.errorBorder,
-//           isFocused && styles.focusedBorder,
-//           style,
-//           containerStyle,
-//           multiline && styles.multilineContainer,
-//         ]}
-//       >
-//         {leftIcon && (
-//           <TouchableOpacity
-//             onPress={onLeftIconPress}
-//             disabled={!onLeftIconPress}
-//             style={styles.iconWrapper}
-//           >
-//             <Image source={leftIcon} style={[styles.icon, leftIconStyle]} resizeMode="contain" />
-//           </TouchableOpacity>
-//         )}
-//         <TextInput
-//           style={[
-//             styles.input,
-//             !editable && styles.disabledText,
-//             multiline && styles.multilineInput,
-//             inputStyle,
-//           ]}
-//           placeholder={translatedPlaceholder}
-//           placeholderTextColor={Colors.textGrey}
-//           editable={editable}
-//           secureTextEntry={secureText}
-//           keyboardType={keyboardType}
-//           value={value}
-//           onChangeText={handleChangeText}
-//           onFocus={handleFocus}
-//           onBlur={handleBlur}
-//           multiline={multiline}
-//           {...rest}
-//         />
-//         {type === "password" ? (
-//           <TouchableOpacity onPress={() => setSecureText(!secureText)} style={styles.iconWrapper}>
-//             <Image
-//               source={secureText ? Images.Eyeoff : Images.Eyeon}
-//               style={[styles.icon, rightIconStyle]}
-//               resizeMode="contain"
-//             />
-//           </TouchableOpacity>
-//         ) : (
-//           rightIcon && (
-//             <TouchableOpacity
-//               onPress={onRightIconPress}
-//               disabled={!onRightIconPress}
-//               style={styles.iconWrapper}
-//             >
-//               <Image source={rightIcon} style={[styles.icon, rightIconStyle]} resizeMode="contain" />
-//             </TouchableOpacity>
-//           )
-//         )}
-//       </View>
-//       {showError && <Text style={[styles.errorText, errorTextStyle]}>{showError}</Text>}
-//     </View>
-//   );
-// };
-// export default Input;
-// const styles = StyleSheet.create({
-//   container: {
-//     flexDirection: "row",
-//     alignItems: "center",
-//     borderRadius: 5,
-//     borderWidth: 1,
-//     borderColor: Colors.primaryColor,
-//     backgroundColor: Colors.white,
-//     height: Scale.moderateScale(50),
-//     paddingHorizontal: Scale.moderateScale(4),
-//   },
-//   multilineContainer: {
-//     height: "auto",
-//     minHeight: Scale.moderateScale(80),
-//     alignItems: "flex-start",
-//     paddingVertical: Scale.moderateScale(8),
-//   },
-//   focusedBorder: {
-//     borderColor: Colors.primaryColor,
-//   },
-//   input: {
-//     flex: 1,
-//     ...Typography.style.standardU(),
-//     textTransform: "none",
-//     color: Colors.textColor,
-//   },
-//   multilineInput: {
-//     textAlignVertical: "top",
-//     paddingTop: Scale.moderateScale(5),
-//   },
-//   iconWrapper: {
-//     padding: Scale.moderateScale(5),
-//   },
-//   icon: {
-//     width: Scale.moderateScale(20),
-//     height: Scale.moderateScale(20),
-//     tintColor: Colors.primaryColor,
-//   },
-//   disabled: {
-//     backgroundColor: Colors.lightGrey,
-//     borderColor: Colors.borderGrey,
-//   },
-//   disabledText: {
-//     color: Colors.disabledGrey,
-//   },
-//   errorBorder: {
-//     borderColor: Colors.dangerRed,
-//   },
-//   errorText: {
-//     color: Colors.dangerRed,
-//     fontSize: Scale.moderateScale(12),
-//     marginTop: 3,
-//   },
-// });

package/package.json

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