@teamnhz/rn-ui-toolkit 1.3.3 → 1.3.4

package/dist/components/ImagePicker/index.js

@@ -1,584 +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,
-//   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
-// type Props = {
-//   mediaType: "photo" | "video";
-//   isMultiSelect?: boolean;
-//   onSuccess: (data: any) => void;
-//   visible: boolean;
-//   onClose: () => void;
-// };
-// const ImagePicker: React.FC<Props> = ({
-//   mediaType,
-//   isMultiSelect = false,
-//   onSuccess,
-//   visible,
-//   onClose,
-// }) => {
-//   // ✅ Success handler
-//   const onComplete = useCallback(
-//     (data: any) => {
-//       onSuccess(data);
-//       onClose();
-//     },
-//     [onSuccess, onClose]
-//   );
-//   // ✅ CAMERA HANDLER with permission check
-//   const handleCamera = async () => {
-//     await cameraPermissions(async (granted: boolean) => {
-//       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: boolean) => {
-//       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 (
-//     <BottomSheet visible={visible} onClose={onClose} height={230}>
-//       <View style={styles.container}>
-//         {/* 📸 Camera */}
-//         <TouchableOpacity style={styles.row} onPress={handleCamera}>
-//           <Image source={Images.video_icon} style={styles.icon} />
-//           <Text style={styles.text}>Camera</Text>
-//         </TouchableOpacity>
-//         <Dividers small />
-//         {/* 🖼️ Gallery */}
-//         <TouchableOpacity style={styles.row} onPress={handleGallery}>
-//           <Image source={Images.image_icon} style={styles.icon} />
-//           <Text style={styles.text}>Gallery</Text>
-//         </TouchableOpacity>
-//         <Dividers small />
-//         {/* ❌ Cancel */}
-//         <TouchableOpacity style={styles.row} onPress={onClose}>
-//           <Image source={Images.cancel} style={styles.icon} />
-//           <Text style={styles.text}>Cancel</Text>
-//         </TouchableOpacity>
-//       </View>
-//     </BottomSheet>
-//   );
-// };
-// export default ImagePicker;
-// const styles = StyleSheet.create({
-//   container: { flex: 1, padding: 16 },
-//   row: {
-//     flexDirection: "row",
-//     alignItems: "center",
-//   },
-//   text: { ...Typography.style.standardU(), color: Colors.white },
-//   icon: {
-//     width: Scale.moderateScale(20),
-//     height: Scale.moderateScale(20),
-//     marginRight: 10,
-//     tintColor: Colors.white,
-//   },
-// });
-// import React, { useCallback } from "react";
-// import {
-//   View,
-//   Text,
-//   TouchableOpacity,
-//   StyleSheet,
-//   Image,
-//   Alert,
-//   ViewStyle,
-// } from "react-native";
-// import { BottomSheet, Dividers } from "../index";
-// import { launchCamera, launchImageLibrary } from "react-native-image-picker";
-// import ImageCropPicker from "react-native-image-crop-picker";
-// import {
-//   Image as ImageCompressor,
-//   Video as VideoCompressor,
-// } from "react-native-compressor";
-// import RNFS from "react-native-fs";
-// import { Colors, Images, Scale, Typography } from "../../styles";
-// // Import your permission utilities
-// import {
-//   cameraPermissions,
-//   galleryPermissions,
-//   checkMicroPhonePermission,
-// } from "../../utils/permissions";
-// type Props = {
-//   mediaType: "photo" | "video";
-//   isMultiSelect?: boolean;
-//   onSuccess: (data: any) => void;
-//   visible: boolean;
-//   onClose: () => void;
-//   // Compression options
-//   enableCompression?: boolean;
-//   imageCompressionOptions?: {
-//     maxWidth?: number;
-//     quality?: number;
-//   };
-//   videoCompressionOptions?: {
-//     compressionMethod?: "auto" | "manual";
-//   };
-//   customStyle?:ViewStyle
-// };
-// const ImagePicker: React.FC<Props> = ({
-//   mediaType,
-//   isMultiSelect = false,
-//   onSuccess,
-//   visible,
-//   onClose,
-//   enableCompression = true,
-//   imageCompressionOptions = { maxWidth: 1080, quality: 0.7 },
-//   videoCompressionOptions = { compressionMethod: "auto" },
-//   customStyle
-// }) => {
-//   // Success handler
-//   const onComplete = useCallback(
-//     (data: any) => {
-//       onSuccess(data);
-//       onClose();
-//     },
-//     [onSuccess, onClose]
-//   );
-//   // Helper: Compress Image
-//   const compressImage = async (imagePath: string) => {
-//     if (!enableCompression) return imagePath;
-//     try {
-//       const compressedImage = await ImageCompressor.compress(imagePath, {
-//         maxWidth: imageCompressionOptions.maxWidth,
-//         quality: imageCompressionOptions.quality,
-//       });
-//       // Log compressed size (optional)
-//       const stats = await RNFS.stat(compressedImage.replace("file://", ""));
-//       const sizeInMB = stats.size / (1024 * 1024);
-//       console.log("Compressed Image Size (MB):", sizeInMB);
-//       return compressedImage;
-//     } catch (error) {
-//       console.error("Image compression error:", error);
-//       return imagePath; // Return original if compression fails
-//     }
-//   };
-//   // Helper: Compress Video
-//   const compressVideo = async (videoUri: string) => {
-//     if (!enableCompression) return videoUri;
-//     try {
-//       const compressedVideo = await VideoCompressor.compress(videoUri, {
-//         compressionMethod: videoCompressionOptions.compressionMethod,
-//       });
-//       // Log compressed size (optional)
-//       const stats = await RNFS.stat(compressedVideo.replace("file://", ""));
-//       const sizeInMB = stats.size / (1024 * 1024);
-//       console.log("Compressed Video Size (MB):", sizeInMB);
-//       return compressedVideo;
-//     } catch (error) {
-//       console.error("Video compression error:", error);
-//       return videoUri; // Return original if compression fails
-//     }
-//   };
-//   // CAMERA HANDLER with permission check and compression
-//   const handleCamera = async () => {
-//     await cameraPermissions(async (granted: boolean) => {
-//       if (!granted) return;
-//       if (mediaType === "photo") {
-//         try {
-//           const response = await ImageCropPicker.openCamera({
-//             mediaType: "photo",
-//           });
-//           if (isMultiSelect) {
-//             // Single capture for multi-select mode
-//             const compressedPath = await compressImage(response.path);
-//             onComplete([{ ...response, path: compressedPath }]);
-//           } else {
-//             // Crop and compress single image
-//             const cropped = await ImageCropPicker.openCropper({
-//               path: response?.path,
-//               width: response?.width,
-//               height: response?.height,
-//               mediaType: "photo",
-//               freeStyleCropEnabled: true,
-//             });
-//             const compressedPath = await compressImage(cropped.path);
-//             onComplete({ ...cropped, path: compressedPath });
-//           }
-//         } catch (error) {
-//           console.log("Camera cancelled or error:", error);
-//         }
-//       } else {
-//         // VIDEO CAPTURE - check microphone permission first
-//         const micPermission = await checkMicroPhonePermission();
-//         if (!micPermission) {
-//           Alert.alert(
-//             "Microphone Permission Required",
-//             "Please enable microphone access to record videos."
-//           );
-//           return;
-//         }
-//         launchCamera(
-//           {
-//             mediaType: "video",
-//             durationLimit: 60,
-//             videoQuality: "high",
-//           },
-//           async (response) => {
-//             if (response?.assets?.length) {
-//               const videoUri = response.assets[0]?.uri;
-//               const compressedPath = await compressVideo(videoUri);
-//               onComplete({
-//                 path: compressedPath,
-//                 duration: response.assets[0]?.duration,
-//               });
-//             }
-//           }
-//         );
-//       }
-//     });
-//   };
-//   // GALLERY HANDLER with permission check and compression
-//   const handleGallery = async () => {
-//     await galleryPermissions(async (granted: boolean) => {
-//       if (!granted) return;
-//       if (mediaType === "photo") {
-//         try {
-//           if (isMultiSelect) {
-//             const images = await ImageCropPicker.openPicker({
-//               mediaType: "photo",
-//               multiple: true,
-//               maxFiles: 5,
-//             });
-//             if (images.length > 5) {
-//               Alert.alert(
-//                 "Limit Exceeded",
-//                 "You can only select up to 5 images."
-//               );
-//               return;
-//             }
-//             // Compress multiple images
-//             const compressedImages = await Promise.all(
-//               images.map(async (img) => ({
-//                 ...img,
-//                 path: await compressImage(img.path),
-//               }))
-//             );
-//             onComplete(compressedImages);
-//           } else {
-//             // Single image with crop
-//             const response = await ImageCropPicker.openPicker({
-//               mediaType: "photo",
-//             });
-//             const cropped = await ImageCropPicker.openCropper({
-//               path: response?.path,
-//               width: response?.width,
-//               height: response?.height,
-//               mediaType: "photo",
-//               freeStyleCropEnabled: true,
-//             });
-//             const compressedPath = await compressImage(cropped.path);
-//             onComplete({ ...cropped, path: compressedPath });
-//           }
-//         } catch (error) {
-//           console.log("Gallery cancelled or error:", error);
-//         }
-//       } else {
-//         // VIDEO FROM GALLERY
-//         launchImageLibrary(
-//           {
-//             mediaType: "video",
-//             assetRepresentationMode: "current",
-//           },
-//           async (result) => {
-//             if (result?.assets?.length) {
-//               const videoUri = result.assets[0]?.uri;
-//               const compressedPath = await compressVideo(videoUri);
-//               onComplete({
-//                 path: compressedPath,
-//                 duration: result.assets[0]?.duration,
-//               });
-//             }
-//           }
-//         );
-//       }
-//     });
-//   };
-//   return (
-//     <BottomSheet visible={visible} onClose={onClose} height={230} sheetBackground={customStyle?.backgroundColor}>
-//       <View style={styles.container}>
-//         {/* Camera */}
-//         <TouchableOpacity style={styles.row} onPress={handleCamera}>
-//           <Image source={Images.video_icon} style={styles.icon} />
-//           <Text style={styles.text}>Camera</Text>
-//         </TouchableOpacity>
-//         <Dividers small />
-//         {/* Gallery */}
-//         <TouchableOpacity style={styles.row} onPress={handleGallery}>
-//           <Image source={Images.image_icon} style={styles.icon} />
-//           <Text style={styles.text}>Gallery</Text>
-//         </TouchableOpacity>
-//         <Dividers small />
-//         {/* Cancel */}
-//         <TouchableOpacity style={styles.row} onPress={onClose}>
-//           <Image source={Images.cancel} style={styles.icon} />
-//           <Text style={styles.text}>Cancel</Text>
-//         </TouchableOpacity>
-//       </View>
-//     </BottomSheet>
-//   );
-// };
-// export default ImagePicker;
-// const styles = StyleSheet.create({
-//   container: { flex: 1, padding: 16 },
-//   row: {
-//     flexDirection: "row",
-//     alignItems: "center",
-//   },
-//   text: { ...Typography.style.standardU(), color: Colors.white },
-//   icon: {
-//     width: Scale.moderateScale(20),
-//     height: Scale.moderateScale(20),
-//     marginRight: 10,
-//     tintColor: Colors.white,
-//   },
-// });
 import React, { useCallback } from "react";
 import { View, Text, TouchableOpacity, StyleSheet, Image, Alert, } from "react-native";
 import { BottomSheet, Dividers } from "../index";

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { ViewStyle, TextStyle } from "react-native";
+interface LinearGradientButtonProps {
+    title: string;
+    onPress: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+    colors?: string[];
+    start?: {
+        x: number;
+        y: number;
+    };
+    end?: {
+        x: number;
+        y: number;
+    };
+    containerStyle?: ViewStyle;
+    textStyle?: TextStyle;
+    height?: number;
+    borderRadius?: number;
+}
+declare const LinearGradientButton: React.FC<LinearGradientButtonProps>;
+export default LinearGradientButton;

package/dist/components/LinearGradientButton/index.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { TouchableOpacity, Text, StyleSheet, ActivityIndicator, } from "react-native";
+import LinearGradient from "react-native-linear-gradient";
+const LinearGradientButton = ({ title, onPress, loading = false, disabled = false, colors = ["#4c669f", "#3b5998", "#192f6a"], start = { x: 0, y: 0 }, end = { x: 1, y: 1 }, containerStyle, textStyle, height = 50, borderRadius = 12, }) => {
+    const isDisabled = loading || disabled;
+    return (React.createElement(TouchableOpacity, { activeOpacity: 0.8, onPress: onPress, disabled: isDisabled, style: { opacity: isDisabled ? 0.6 : 1 } },
+        React.createElement(LinearGradient, { colors: colors, start: start, end: end, style: [
+                styles.button,
+                { height, borderRadius },
+                containerStyle,
+            ] }, loading ? (React.createElement(ActivityIndicator, { color: "#fff", size: "small" })) : (React.createElement(Text, { style: [styles.text, textStyle] }, title)))));
+};
+const styles = StyleSheet.create({
+    button: {
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: 12,
+    },
+    text: {
+        color: "#fff",
+        fontSize: 16,
+        fontWeight: "600",
+    },
+});
+export default LinearGradientButton;

package/dist/components/index.d.ts

@@ -27,3 +27,4 @@ export { default as ProgressBar } from "./ProgressBar";
 export { default as DocumentPicker } from "./DocumentPicker";
 export { default as ImagePicker } from "./ImagePicker";
 export { default as AppHeader } from "./AppHeader";
+export { default as LinearGradientButton } from "./LinearGradientButton";

package/dist/components/index.js

@@ -27,3 +27,4 @@ export { default as ProgressBar } from "./ProgressBar";
 export { default as DocumentPicker } from "./DocumentPicker";
 export { default as ImagePicker } from "./ImagePicker";
 export { default as AppHeader } from "./AppHeader";
+export { default as LinearGradientButton } from "./LinearGradientButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnhz/rn-ui-toolkit",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -21,7 +21,7 @@
     "react-native-element-dropdown": "^2.12.4",
     "react-native-elements": "^3.4.3",
     "react-native-gesture-handler": "^2.26.0",
-    "react-native-image-crop-picker": "^0.42.0",
+    "react-native-image-crop-picker": "^0.51.1",
     "react-native-image-picker": "^8.2.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modal": "^14.0.0-rc.1",
@@ -32,7 +32,8 @@
     "react-native-vector-icons": "^10.3.0",
     "react-native-video-trim": "^3.0.9",
     "react-native-compressor": "^1.13.0",
-    "react-native-fs": "^2.20.0"
+    "react-native-fs": "^2.20.0",
+    "react-native-linear-gradient": "^2.8.3"
   },
   "devDependencies": {
     "@react-native-documents/picker": "^10.1.5",