@teamnhz/rn-ui-toolkit 1.1.6 → 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,9 +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;
 };
 declare const ImagePicker: React.FC<Props>;
 export default ImagePicker;

package/dist/components/ImagePicker/index.js

@@ -6,38 +6,49 @@
 //   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 {
+//   Image as ImageCompressor,
+//   Video as VideoCompressor,
+// } from "react-native-compressor";
+// import RNFS from "react-native-fs";
 // import { Colors, Images, Scale, Typography } from "../../styles";
-// type StyleProps = {
-//   containerStyle?: ViewStyle;
-//   rowStyle?: ViewStyle;
-//   textStyle?: TextStyle;
-//   iconStyle?: ImageStyle;
-// };
+// // 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;
-// } & StyleProps;
+//   // Compression options
+//   enableCompression?: boolean;
+//   imageCompressionOptions?: {
+//     maxWidth?: number;
+//     quality?: number;
+//   };
+//   videoCompressionOptions?: {
+//     compressionMethod?: "auto" | "manual";
+//   };
+// };
 // const ImagePicker: React.FC<Props> = ({
 //   mediaType,
 //   isMultiSelect = false,
 //   onSuccess,
 //   visible,
 //   onClose,
-//   containerStyle,
-//   rowStyle,
-//   textStyle,
-//   iconStyle,
+//   enableCompression = true,
+//   imageCompressionOptions = { maxWidth: 1080, quality: 0.7 },
+//   videoCompressionOptions = { compressionMethod: "auto" },
 // }) => {
+//   // Success handler
 //   const onComplete = useCallback(
 //     (data: any) => {
 //       onSuccess(data);
@@ -45,98 +56,184 @@
 //     },
 //     [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({
+//   // 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,
-//             }).then(onComplete)
-//           )
-//           .catch(() => {});
-//       }
-//     } else {
-//       launchCamera({ mediaType: "video" }, (response) => {
-//         if (response?.assets) {
-//           onComplete({
-//             path: response.assets[0]?.uri,
-//             duration: response.assets[0]?.duration,
-//           });
+//             });
+//             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,
+//               });
+//             }
+//           }
+//         );
+//       }
+//     });
 //   };
-//   const onGallery = () => {
-//     if (mediaType === "photo") {
-//       if (isMultiSelect) {
-//         ImageCropPicker.openPicker({
-//           mediaType: "photo",
-//           multiple: true,
-//           maxFiles: 5,
-//         })
-//           .then((images) => {
+//   // 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."
 //               );
-//             } else {
-//               onComplete(images);
+//               return;
 //             }
-//           })
-//           .catch(() => {});
-//       } else {
-//         ImageCropPicker.openPicker({ mediaType: "photo" })
-//           .then((response) =>
-//             ImageCropPicker.openCropper({
+//             // 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,
-//             }).then(onComplete)
-//           )
-//           .catch(() => {});
-//       }
-//     } else {
-//       launchImageLibrary({ mediaType: "video" }, (result) => {
-//         if (result?.assets) {
-//           onComplete({
-//             path: result.assets[0]?.uri,
-//             duration: result.assets[0]?.duration,
-//           });
+//             });
+//             const compressedPath = await compressImage(cropped.path);
+//             onComplete({ ...cropped, path: compressedPath });
+//           }
+//         } catch (error) {
+//           console.log("Gallery cancelled or error:", error);
 //         }
-//       });
-//     }
+//       } else {
+//         // VIDEO FROM GALLERY
+//         launchImageLibrary(
+//           {
+//             mediaType: "video",
+//             assetRepresentationMode: "current",
+//           },
+//           async (result) => {
+//             if (result?.assets?.length) {
+//               const videoUri = result.assets[0]?.uri;
+//               const compressedPath = await compressVideo(videoUri);
+//               onComplete({
+//                 path: compressedPath,
+//                 duration: result.assets[0]?.duration,
+//               });
+//             }
+//           }
+//         );
+//       }
+//     });
 //   };
 //   return (
 //     <BottomSheet visible={visible} onClose={onClose} height={230}>
-//       <View style={[styles.container, containerStyle]}>
+//       <View style={styles.container}>
 //         {/* 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 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>
+//         <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>
+//         <TouchableOpacity style={styles.row} onPress={onClose}>
+//           <Image source={Images.cancel} style={styles.icon} />
+//           <Text style={styles.text}>Cancel</Text>
 //         </TouchableOpacity>
 //       </View>
 //     </BottomSheet>
@@ -157,100 +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 { 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
-    const onComplete = useCallback((data) => {
-        onSuccess(data);
+import { cameraPermissions, galleryPermissions, checkMicroPhonePermission, } from "../../utils/permissions";
+const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onClose, enableCompression = true, }) => {
+    // Close modal + start loader in parent
+    const sendRawAndClose = (rawData) => {
         onClose();
-    }, [onSuccess, onClose]);
-    // ✅ CAMERA HANDLER with permission check
+        onSuccess({ loading: true, data: rawData });
+    };
+    // After compression finished
+    const sendFinalCompressed = (compressed) => {
+        onSuccess({ loading: false, data: compressed });
+    };
+    const compressImage = async (path) => {
+        try {
+            const compressed = await ImageCompressor.compress(path, {
+                maxWidth: 1080,
+                quality: 0.7,
+            });
+            return compressed;
+        }
+        catch (e) {
+            return path;
+        }
+    };
+    const compressVideo = async (uri) => {
+        try {
+            const compressed = await VideoCompressor.compress(uri, {
+                compressionMethod: "auto",
+            });
+            return compressed;
+        }
+        catch (e) {
+            return uri;
+        }
+    };
+    // ---------- CAMERA ----------
     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 picked = await ImageCropPicker.openCamera({
                         mediaType: "photo",
-                        freeStyleCropEnabled: true,
-                    }).then(onComplete))
-                        .catch(() => { });
+                    });
+                    sendRawAndClose(picked); // CLOSE MODAL + START LOADER
+                    setTimeout(async () => {
+                        const compressedPath = await compressImage(picked.path);
+                        sendFinalCompressed({ ...picked, path: compressedPath });
+                    }, 10);
+                }
+                catch (err) {
+                    console.log(err);
                 }
             }
             else {
-                // 🎥 VIDEO CAPTURE
-                launchCamera({ mediaType: "video" }, (response) => {
-                    if (response?.assets?.length) {
-                        onComplete({
-                            path: response.assets[0]?.uri,
-                            duration: response.assets[0]?.duration,
+                // VIDEO
+                const mic = await checkMicroPhonePermission();
+                if (!mic)
+                    return;
+                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
+    // ---------- GALLERY ----------
     const handleGallery = async () => {
         await galleryPermissions(async (granted) => {
             if (!granted)
-                return; // ❌ Permission denied, handled by your alert
+                return;
             if (mediaType === "photo") {
-                if (isMultiSelect) {
-                    ImageCropPicker.openPicker({
+                try {
+                    const picked = await 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(() => { });
+                    });
+                    sendRawAndClose(picked);
+                    setTimeout(async () => {
+                        const compressed = await compressImage(picked.path);
+                        sendFinalCompressed({ ...picked, path: compressed });
+                    }, 10);
                 }
-                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 (e) {
+                    console.log(e);
                 }
             }
             else {
-                // 🎥 VIDEO FROM GALLERY
-                launchImageLibrary({ mediaType: "video" }, (result) => {
-                    if (result?.assets?.length) {
-                        onComplete({
-                            path: result.assets[0]?.uri,
-                            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);
                 });
             }
         });
@@ -272,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.6",
+  "version": "1.1.8",
   "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",