react-native-expo-cropper 1.0.26 → 1.0.28

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "react-native-expo-cropper",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "Recadrage polygonal d'images.",
-  "main": "index.js",
+  "main": "src/index.js",
   "author": "PCS AGRI",
   "license": "MIT",
   "keywords": [
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.2",
-    "expo": "^54.0.0",
+    "expo": "54.0.0",
     "expo-camera": "~17.0.8",
     "expo-image-manipulator": "~14.0.7",
     "expo-image-picker": "~17.0.8",
@@ -44,5 +44,18 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "babel src --out-dir dist"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5"
+  },
+  "files": [
+    "src",
+    "README.MD"
+  ],
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/CustomCamera.js

@@ -8,7 +8,6 @@ import {
   SafeAreaView,
   Dimensions,
   Image,
-  Platform,
 } from 'react-native';
 import { Camera, CameraView } from 'expo-camera';
 const { width } = Dimensions.get('window');
@@ -38,9 +37,7 @@ useEffect(() => {
           setLoadingBeforeCapture(true);
         }, 1000);
   
-        if (Platform.OS === 'android') {
-          await new Promise(resolve => setTimeout(resolve, 100));
-        }
+        await new Promise(resolve => setTimeout(resolve, 100));
   
         const photo = await cameraRef.current.takePictureAsync({
         quality: 1,

package/src/ImageCropper.js

@@ -1,6 +1,6 @@
 import styles from './ImageCropperStyles';
 import React, { useState, useRef, useEffect } from 'react';
-import { Modal,View, Image, Dimensions, TouchableOpacity, Animated, Platform , Text } from 'react-native';
+import { Modal,View, Image, Dimensions, TouchableOpacity, Animated, Text } from 'react-native';
 import Svg, { Path, Circle } from 'react-native-svg';
 import { captureRef } from 'react-native-view-shot';
 import CustomCamera from './CustomCamera';
@@ -21,11 +21,6 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
   const [isLoading, setIsLoading] = useState(false);
   const [showFullScreenCapture, setShowFullScreenCapture] = useState(false);
   const lastValidPosition = useRef(null);
-  const [captureRequested, setCaptureRequested] = useState(false);
-  const [overlayReady, setOverlayReady] = useState(false);
-
-  // Local screen size used for imageMeasure calculation
-  const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
   
 
 
@@ -40,44 +35,26 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
 }, [openCameraFirst, initialImage]);
 
 
-  // Measure based strictly on actual layout, not screen ratio
-  // to avoid mismatches that truncate the selectable bottom area
-  // (onImageLayout handles measurement updates)
-
-  // Perform capture after UI commits (avoids iOS timer/RAF awaits)
-  // iOS capture logic using useEffect with overlay readiness
   useEffect(() => {
-    if (Platform.OS !== 'ios') return;
-    if (!captureRequested || !showResult || !overlayReady || !viewRef.current) return;
+  if (!image) return;
 
-    let cancelled = false;
-    const doCapture = async () => {
-      try {
-        const capturedUri = await captureRef(viewRef.current, {
-          format: 'png',
-          quality: 1,
-        });
-        const enhancedUri = await enhanceImage(capturedUri ,addheight);
-        const name = `IMAGE XTK${Date.now()}.png`;
-        if (!cancelled && onConfirm) {
-          onConfirm(enhancedUri, name);
-        }
-      } catch (error) {
-        console.error("Erreur lors de la capture :", error);
-        alert("Erreur lors de la capture !");
-      } finally {
-        if (!cancelled) {
-          setShowResult(false);
-          setIsLoading(false);
-          setShowFullScreenCapture(false);
-          setCaptureRequested(false);
-          setOverlayReady(false);
-        }
-      }
-    };
-    doCapture();
-    return () => { cancelled = true; };
-  }, [captureRequested, showResult, overlayReady, addheight, onConfirm]);
+  Image.getSize(image, (imgWidth, imgHeight) => {
+    const screenRatio = SCREEN_WIDTH / SCREEN_HEIGHT;
+    const imageRatio = imgWidth / imgHeight;
+
+    if (imageRatio > screenRatio) {
+      imageMeasure.current = {
+        width: SCREEN_WIDTH,
+        height: SCREEN_WIDTH / imageRatio,
+      };
+    } else {
+      imageMeasure.current = {
+        width: SCREEN_HEIGHT * imageRatio,
+        height: SCREEN_HEIGHT,
+      };
+    }
+  });
+}, [image]);
 
 
   const initializeCropBox = () => {
@@ -194,8 +171,8 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
         />
       ) : (
         <>
-          {!showResult && !image && (
-            <View pointerEvents="box-none" style={styles.centerButtonsContainer}>
+          {!showResult && (
+            <View style={image ? styles.buttonContainer : styles.centerButtonsContainer}>
  
               {image && (
                 <TouchableOpacity style={styles.button} onPress={handleReset}>
@@ -206,39 +183,34 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
               <TouchableOpacity
                 style={styles.button}
                   onPress={async () => {
-                    setIsLoading(true);
-                    setShowResult(true);
-                    setOverlayReady(false);
-                    setCaptureRequested(true);
-                    
-                    // Android capture logic using requestAnimationFrame
-                    if (Platform.OS === 'android') {
-                      try {
-                        await new Promise((resolve) => requestAnimationFrame(resolve));
-                        const capturedUri = await captureRef(viewRef.current, {
-                          format: 'png',
-                          quality: 1,
-                        });
-                        const enhancedUri = await enhanceImage(capturedUri, addheight);
-                        const name = `IMAGE XTK${Date.now()}.png`;
-                        
-                        if (onConfirm) {
-                          onConfirm(enhancedUri, name);
-                        }
+                        // setShowFullScreenCapture(true); 
+                        setIsLoading(true);
+                        setShowResult(true);
+                        try {
+                          await new Promise((resolve) => requestAnimationFrame(resolve));
+                          const capturedUri = await captureRef(viewRef, {
+                            format: 'png',
+                            quality: 1,
+                          });
+
                         
-                        setShowResult(false);
-                        setIsLoading(false);
-                        setShowFullScreenCapture(false);
-                        setCaptureRequested(false);
-                        setOverlayReady(false);
-                      } catch (error) {
-                        console.error("Erreur lors de la capture :", error);
-                        alert("Erreur lors de la capture !");
-                        setIsLoading(false);
-                      }
+                        const enhancedUri = await enhanceImage(capturedUri ,addheight);
+                        const name = `IMAGE XTK${Date.now()}.png`;
+
+                    
+                    if (onConfirm) {
+                      onConfirm(enhancedUri, name);
                     }
-                  }}
-              >
+                  } catch (error) {
+                    console.error("Erreur lors de la capture :", error);
+                    alert("Erreur lors de la capture !");
+                  } finally {
+                    setShowResult(false);
+                    setIsLoading(false);
+                    setShowFullScreenCapture(false);
+                  }
+                }}
+  >
     <Text style={styles.buttonText}>Confirm</Text>
   </TouchableOpacity>
 )}
@@ -258,14 +230,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
               onResponderRelease={handleRelease}
             >
               <Image source={{ uri: image }} style={styles.image} onLayout={onImageLayout} />
-              <Svg
-                pointerEvents="none"
-                key={showResult ? 'mask' : 'edit'}
-                style={styles.overlay}
-                onLayout={() => {
-                  if (showResult) setOverlayReady(true);
-                }}
-              >
+              <Svg style={styles.overlay}>
                 <Path
                   d={`M 0 0 H ${imageMeasure.current.width} V ${imageMeasure.current.height} H 0 Z ${createPath()}`}
                   fill={showResult ? 'white' : 'rgba(255, 255, 255, 0.8)'}
@@ -278,50 +243,6 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                   <Circle key={index} cx={point.x} cy={point.y} r={10} fill="white" />
                 ))}
               </Svg>
-           </View>
-          )}
-          {!showResult && image && (
-            <View style={styles.buttonContainer}>
-              <TouchableOpacity style={styles.button} onPress={handleReset}>
-                <Text style={styles.buttonText}>Reset</Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={styles.button}
-                onPress={async () => {
-                  setIsLoading(true);
-                  setShowResult(true);
-                  setOverlayReady(false);
-                  setCaptureRequested(true);
-
-                  if (Platform.OS === 'android') {
-                    try {
-                      await new Promise((resolve) => requestAnimationFrame(resolve));
-                      const capturedUri = await captureRef(viewRef.current, {
-                        format: 'png',
-                        quality: 1,
-                      });
-                      const enhancedUri = await enhanceImage(capturedUri, addheight);
-                      const name = `IMAGE XTK${Date.now()}.png`;
-
-                      if (onConfirm) {
-                        onConfirm(enhancedUri, name);
-                      }
-
-                      setShowResult(false);
-                      setIsLoading(false);
-                      setShowFullScreenCapture(false);
-                      setCaptureRequested(false);
-                      setOverlayReady(false);
-                    } catch (error) {
-                      console.error('Erreur lors de la capture :', error);
-                      alert('Erreur lors de la capture !');
-                      setIsLoading(false);
-                    }
-                  }
-                }}
-              >
-                <Text style={styles.buttonText}>Confirm</Text>
-              </TouchableOpacity>
             </View>
           )}
         </>

package/src/ImageCropperStyles.js

@@ -15,22 +15,27 @@ const styles = StyleSheet.create({
     backgroundColor: DEEP_BLACK,
   },
   buttonContainer: {
+    position: 'absolute',
+    bottom: 50,
+    left: 0,
+    right: 0,
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    width: '100%',
-    backgroundColor: DEEP_BLACK,
-    gap: 10,
+    paddingHorizontal: 10,
+    zIndex: 10,
   },
   button: {
     flex: 1,
-    paddingVertical: 12,
+    width: "100%",
+    padding: 10,
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "#549433",
-    borderRadius: 8,
+    borderRadius: 5,
+    marginBottom: 20,
+    marginRight:5,
   },
   buttonText: {
     color: 'white',
@@ -45,13 +50,13 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
   imageContainer: {
-    width: IMAGE_WIDTH,
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
-    backgroundColor: 'black',
-  },
+  width: IMAGE_WIDTH,
+  height: "80%",
+  justifyContent: 'center',
+  alignItems: 'center',
+  overflow: 'hidden',
+  backgroundColor: 'black',
+},
 
   image: {
   width: '100%',

package/.babelrc

@@ -1,4 +0,0 @@
-{
-    "presets": ["@babel/preset-env"]
-}
-  

package/App.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import { SafeAreaView, StatusBar, StyleSheet } from 'react-native';
-import ImageCropper from './src/ImageCropper';
-
-const App = () => {
-  const handleCrop = (uri) => {
-    console.log('Cropped Image URI:', uri);
-  };
-
-  return (
-    <>
-      <StatusBar backgroundColor="black" barStyle="light-content" />
-      <SafeAreaView style={styles.container}>
-        <ImageCropper onCrop={handleCrop} />
-      </SafeAreaView>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'black', 
-  },
-});
-
-export default App;

package/index.js

@@ -1,6 +0,0 @@
-import { registerRootComponent } from 'expo';
-import App from './App';
-
-registerRootComponent(App);
-
-