@teamnhz/rn-ui-toolkit 1.0.5 → 1.0.7

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

@@ -1,17 +1,10 @@
 import React from "react";
-import { ViewStyle, TextStyle, ImageStyle } from "react-native";
-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;
+};
 declare const ImagePicker: React.FC<Props>;
 export default ImagePicker;

package/dist/components/ImagePicker/index.js

@@ -1,133 +1,42 @@
-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 { Colors, Images, Scale, Typography } from "../../styles";
-const ImagePicker = ({ mediaType, isMultiSelect = false, onSuccess, visible, onClose, containerStyle, rowStyle, textStyle, iconStyle, }) => {
-    const onComplete = useCallback((data) => {
-        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 (React.createElement(BottomSheet, { visible: visible, onClose: onClose, height: 230 },
-        React.createElement(View, { style: [styles.container, containerStyle] },
-            React.createElement(TouchableOpacity, { style: [styles.row, rowStyle], onPress: onCamera },
-                React.createElement(Image, { source: Images.video_icon, style: [styles.icon, iconStyle] }),
-                React.createElement(Text, { style: [styles.text, textStyle] }, "Camera")),
-            React.createElement(Dividers, { small: true }),
-            React.createElement(TouchableOpacity, { style: [styles.row, rowStyle], onPress: onGallery },
-                React.createElement(Image, { source: Images.image_icon, style: [styles.icon, iconStyle] }),
-                React.createElement(Text, { style: [styles.text, textStyle] }, "Gallery")),
-            React.createElement(Dividers, { small: true }),
-            React.createElement(TouchableOpacity, { style: [styles.row, rowStyle], onPress: onClose },
-                React.createElement(Image, { source: Images.cancel, style: [styles.icon, iconStyle] }),
-                React.createElement(Text, { style: [styles.text, textStyle] }, "Cancel")))));
-};
-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 {
+//   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) => {
@@ -169,10 +78,17 @@ const styles = StyleSheet.create({
 //   const onGallery = () => {
 //     if (mediaType === "photo") {
 //       if (isMultiSelect) {
-//         ImageCropPicker.openPicker({ mediaType: "photo", multiple: true, maxFiles: 5 })
+//         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.");
+//               Alert.alert(
+//                 "Limit Exceeded",
+//                 "You can only select up to 5 images."
+//               );
 //             } else {
 //               onComplete(images);
 //             }
@@ -203,24 +119,24 @@ const styles = StyleSheet.create({
 //     }
 //   };
 //   return (
-//     <BottomSheet visible={visible} onClose={onClose} height={210}>
-//       <View style={styles.container}>
+//     <BottomSheet visible={visible} onClose={onClose} height={230}>
+//       <View style={[styles.container, containerStyle]}>
 //         {/* Camera */}
-//         <TouchableOpacity style={styles.row} onPress={onCamera}>
-//           <Image source={Images.video_icon} style={styles.icon} />
-//           <Text style={styles.text}>Camera</Text>
+//         <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/>
+//         <Dividers small />
 //         {/* Gallery */}
-//         <TouchableOpacity style={styles.row} onPress={onGallery}>
-//           <Image source={Images.image_icon} style={styles.icon} />
-//           <Text style={styles.text}>Gallery</Text>
+//         <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/>
+//         <Dividers small />
 //         {/* Cancel */}
-//         <TouchableOpacity style={styles.row} onPress={onClose}>
-//           <Image source={Images.image_icon} style={styles.icon} />
-//           <Text style={styles.text}>Cancel</Text>
+//         <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>
@@ -232,14 +148,139 @@ const styles = StyleSheet.create({
 //   row: {
 //     flexDirection: "row",
 //     alignItems: "center",
-//     // paddingVertical: 12,
 //   },
-//   text: { ...Typography.style.standardU(), color: Colors.black },
-//   separator: { height: 1, backgroundColor: Colors.borderGrey, marginVertical: 8 },
+//   text: { ...Typography.style.standardU(), color: Colors.white },
 //   icon: {
 //     width: Scale.moderateScale(20),
 //     height: Scale.moderateScale(20),
 //     marginRight: 10,
-//     tintColor: Colors.darkBlue,
+//     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 { 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);
+        onClose();
+    }, [onSuccess, onClose]);
+    // ✅ CAMERA HANDLER with permission check
+    const handleCamera = async () => {
+        await cameraPermissions(async (granted) => {
+            if (!granted)
+                return; // ❌ Permission denied, handled by your alert
+            if (mediaType === "photo") {
+                if (isMultiSelect) {
+                    // single capture, multiple not supported directly from camera
+                    ImageCropPicker.openCamera({ mediaType: "photo" })
+                        .then((response) => onComplete([response]))
+                        .catch(() => { });
+                }
+                else {
+                    ImageCropPicker.openCamera({ mediaType: "photo" })
+                        .then((response) => ImageCropPicker.openCropper({
+                        path: response?.path,
+                        width: response?.width,
+                        height: response?.height,
+                        mediaType: "photo",
+                        freeStyleCropEnabled: true,
+                    }).then(onComplete))
+                        .catch(() => { });
+                }
+            }
+            else {
+                // 🎥 VIDEO CAPTURE
+                launchCamera({ mediaType: "video" }, (response) => {
+                    if (response?.assets?.length) {
+                        onComplete({
+                            path: response.assets[0]?.uri,
+                            duration: response.assets[0]?.duration,
+                        });
+                    }
+                });
+            }
+        });
+    };
+    // ✅ GALLERY HANDLER with permission check
+    const handleGallery = async () => {
+        await galleryPermissions(async (granted) => {
+            if (!granted)
+                return; // ❌ Permission denied, handled by your alert
+            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 {
+                // 🎥 VIDEO FROM GALLERY
+                launchImageLibrary({ mediaType: "video" }, (result) => {
+                    if (result?.assets?.length) {
+                        onComplete({
+                            path: result.assets[0]?.uri,
+                            duration: result.assets[0]?.duration,
+                        });
+                    }
+                });
+            }
+        });
+    };
+    return (React.createElement(BottomSheet, { visible: visible, onClose: onClose, height: 230 },
+        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(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(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")))));
+};
+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,
+    },
+});

package/dist/components/Input/index.js

@@ -95,7 +95,7 @@ const Input = ({ intlType, textKey, placeholder, inputPlaceholderTextColor, left
                     ? inputPlaceholderTextColor
                     : Colors.textGrey, editable: editable, secureTextEntry: secureText, keyboardType: keyboardType, value: value, onChangeText: handleChangeText, onFocus: handleFocus, onBlur: handleBlur, multiline: multiline, maxLength: maxLength, returnKeyType: returnKeyType, ...rest }),
             type === "password" ? (React.createElement(TouchableOpacity, { onPress: () => setSecureText(!secureText), style: [styles.iconWrapper, rightIconWrapperStyle] },
-                React.createElement(Image, { source: secureText ? Images.Eyeon : Images.Eyeoff, style: [styles.icon, rightIconStyle], resizeMode: "contain" }))) : (rightIcon && (React.createElement(TouchableOpacity, { onPress: onRightIconPress, disabled: !onRightIconPress, 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))));
 };

package/dist/utils/permissions.d.ts

@@ -4,15 +4,18 @@
  */
 export declare const requestDocumentPermission: () => Promise<boolean>;
 /**
- * ✅ Camera Permission
+ * 📸 CAMERA PERMISSION
  */
 export declare const cameraPermissions: (callback: (status: boolean) => void) => Promise<void>;
 /**
- * 🎤 Microphone Permission (needed for video recording)
+ * 🎤 MICROPHONE PERMISSION
  */
 export declare const checkMicroPhonePermission: () => Promise<boolean>;
 /**
- * 🖼️ Gallery / Storage Permission
- * ✅ Handles Android < 13 and >= 13
+ * 🖼️ GALLERY / STORAGE PERMISSION
  */
 export declare const galleryPermissions: (callback: (status: boolean) => void) => Promise<void>;
+/**
+ * 🔔 Show alert and open Settings if user accepts
+ */
+export declare const settingAlert: (message?: string) => void;

package/dist/utils/permissions.js

@@ -1,4 +1,4 @@
-import { Platform, PermissionsAndroid } from 'react-native';
+import { Platform, PermissionsAndroid, Alert, Linking } from 'react-native';
 import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';
 /**
  * Request storage/doc access permissions cross-platform.
@@ -36,71 +36,108 @@ export const requestDocumentPermission = async () => {
     }
 };
 /**
- * ✅ Camera Permission
+ * 📸 CAMERA PERMISSION
  */
 export const cameraPermissions = async (callback) => {
     try {
-        if (Platform.OS === 'ios') {
+        if (Platform.OS === "ios") {
             const result = await request(PERMISSIONS.IOS.CAMERA);
-            callback(result === RESULTS.GRANTED);
+            if (result === RESULTS.GRANTED)
+                return callback(true);
+            if (result === RESULTS.BLOCKED)
+                settingAlert("Camera access is blocked");
+            callback(false);
         }
         else {
             const result = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);
-            callback(result === PermissionsAndroid.RESULTS.GRANTED);
+            if (result === PermissionsAndroid.RESULTS.GRANTED) {
+                callback(true);
+            }
+            else {
+                settingAlert("Camera permission is required to take photos");
+                callback(false);
+            }
         }
     }
     catch (error) {
-        console.log('Camera Permission Error:', error);
+        console.log("Camera Permission Error:", error);
         callback(false);
     }
 };
 /**
- * 🎤 Microphone Permission (needed for video recording)
+ * 🎤 MICROPHONE PERMISSION
  */
 export const checkMicroPhonePermission = async () => {
     try {
-        if (Platform.OS === 'ios') {
+        if (Platform.OS === "ios") {
             const result = await request(PERMISSIONS.IOS.MICROPHONE);
+            if (result === RESULTS.BLOCKED)
+                settingAlert("Microphone is blocked");
             return result === RESULTS.GRANTED;
         }
         else {
             const result = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO);
+            if (result !== PermissionsAndroid.RESULTS.GRANTED)
+                settingAlert("Microphone permission is required for video recording");
             return result === PermissionsAndroid.RESULTS.GRANTED;
         }
     }
     catch (error) {
-        console.log('Microphone Permission Error:', error);
+        console.log("Microphone Permission Error:", error);
         return false;
     }
 };
 /**
- * 🖼️ Gallery / Storage Permission
- * ✅ Handles Android < 13 and >= 13
+ * 🖼️ GALLERY / STORAGE PERMISSION
  */
 export const galleryPermissions = async (callback) => {
     try {
-        if (Platform.OS === 'ios') {
+        if (Platform.OS === "ios") {
             const result = await request(PERMISSIONS.IOS.PHOTO_LIBRARY);
-            callback(result === RESULTS.GRANTED);
+            if (result === RESULTS.GRANTED)
+                return callback(true);
+            if (result === RESULTS.BLOCKED)
+                settingAlert("Photo library access is blocked");
+            callback(false);
         }
         else {
             const androidVersion = Platform.Version;
             if (androidVersion >= 33) {
-                // 👉 Android 13+ requires READ_MEDIA permissions
                 const imagePermission = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES);
                 const videoPermission = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_MEDIA_VIDEO);
-                callback(imagePermission === PermissionsAndroid.RESULTS.GRANTED ||
-                    videoPermission === PermissionsAndroid.RESULTS.GRANTED);
+                const granted = imagePermission === PermissionsAndroid.RESULTS.GRANTED ||
+                    videoPermission === PermissionsAndroid.RESULTS.GRANTED;
+                if (!granted)
+                    settingAlert("Storage permission is required to select images");
+                callback(granted);
             }
             else {
-                // 👉 Below Android 13 needs old storage permission
                 const storagePermission = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE);
-                callback(storagePermission === PermissionsAndroid.RESULTS.GRANTED);
+                const granted = storagePermission === PermissionsAndroid.RESULTS.GRANTED;
+                if (!granted)
+                    settingAlert("Storage permission is required to select images");
+                callback(granted);
             }
         }
     }
     catch (error) {
-        console.log('Gallery Permission Error:', error);
+        console.log("Gallery Permission Error:", error);
         callback(false);
     }
 };
+/**
+ * 🔔 Show alert and open Settings if user accepts
+ */
+export const settingAlert = (message = "Permission is required") => {
+    Alert.alert("Permission Required", message + "\nPlease enable it from settings to continue.", [
+        { text: "Cancel", style: "cancel" },
+        {
+            text: "Go to Settings",
+            onPress: () => {
+                Linking.openSettings().catch(() => {
+                    Alert.alert("Error", "Unable to open settings");
+                });
+            },
+        },
+    ]);
+};

package/package.json

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