react-native-expo-cropper 1.0.0

package/.babelrc

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

package/App.js

@@ -0,0 +1,27 @@
+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/README.MD

@@ -0,0 +1,135 @@
+# react-native-expo-cropper
+
+Un composant React Native basé sur Expo pour recadrer une image de manière polygonale à partir de la galerie ou de la caméra.
+
+## 🔧 Installation
+
+```bash
+npm install react-native-expo-cropper
+
+Ou
+
+yarn add react-native-expo-cropper
+
+
+EXPO SDK 53 -------------------------------------------------------------
+
+"peerDependencies": {
+    "expo": "53.0.9",
+    "react": "19.0.0",
+    "react-native": "0.79.2"
+  },
+  "dependencies": {
+    "expo": "53.0.9",
+    "expo-camera": "16.1.6",
+    "expo-image-manipulator": "13.1.6",
+    "expo-image-picker": "16.1.4",
+    "expo-media-library": "17.1.6",
+    "expo-screen-orientation": "8.1.6",
+    "@expo/vector-icons": "14.1.0",
+    "react-native-svg": "15.11.2",
+    "react-native-view-shot": "4.0.3"
+  },
+
+
+------------------------------ DO THIS IN YOUR APP SCREEN CODE !!!!!!!!!! :-------------------------------
+
+import ImageCropper from 'react-native-expo-cropper/src/ImageCropper';
+
+
+  const [crop, setCrop] = useState(false);
+  const [useCameraInCropper, setUseCameraInCropper] = useState(false);
+  const [initialImageForCropper, setInitialImageForCropper] = useState(null);
+
+
+
+
+ TO OPEN THE GALERIE BEFORE THE CROPPER YOU NEED TO ADD THIS IN YOU APP SCREEN CODE TOO :
+ 
+ const handlePickAndCropImage = async () => {
+  try {
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: false,
+      quality: 1,
+    });
+
+    if (!result.canceled && result.assets.length > 0) {
+      setInitialImageForCropper(result.assets[0].uri);
+      setUseCameraInCropper(false); // sécurité
+      setCrop(true);
+    }
+  } catch (error) {
+    console.log("Erreur lors du choix de l'image :", error);
+  }
+}; 
+
+
+
+
+YOUR CAMERA AND GALERY Bottons :
+
+
+        <TouchableOpacity
+              style={styles.buttonOutline}
+              onPress={() => {
+                setUseCameraInCropper(true);
+                setCrop(true);
+              }}
+            >
+              <Text style={styles.buttonTextB}>Take A photo</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={styles.buttonOutline}
+              onPress={handlePickAndCropImage}
+            >
+              <Text style={styles.buttonTextB}>Chose image From the phone Galerie</Text>
+            </TouchableOpacity>
+
+
+
+
+condition:
+
+{crop ? (
+  <View style={{ flex: 1 }}>
+    <TouchableOpacity
+      onPress={() => {
+        setCrop(false);
+        setUseCameraInCropper(false);
+      }}
+      style={{
+        position: 'absolute',
+        top: 40,
+        right: 5,
+        zIndex: 9999,
+        backgroundColor: '#ffffffaa',
+        padding: 10,
+        borderRadius: 3,
+      }}
+    >
+      <Text style={{ fontSize: 20, fontWeight: 'bold' }}> X </Text>
+    </TouchableOpacity>
+
+    <ImageCropper
+        initialImage={initialImageForCropper}
+        openCameraFirst={useCameraInCropper}
+        onConfirm={(uri, name) => {
+          setImage(uri);
+          setURi(uri);
+          setImageName(name);
+          setCrop(false);
+          setUseCameraInCropper(false);
+          setInitialImageForCropper(null);
+          setIsReady(true);
+        }}
+        onCancel={() => {
+          setCrop(false);
+          setUseCameraInCropper(false);
+          setInitialImageForCropper(null);
+        }}
+      />
+
+  </View>
+)}

package/index.js

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

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "react-native-expo-cropper",
+  "version": "1.0.0",
+  "description": "Recadrage polygonal d'images.",
+  "main": "index.js",
+  "author": "PCS AGRI",
+  "license": "MIT",
+  "keywords": [
+    "react-native",
+    "expo",
+    "image-cropper",
+    "camera",
+    "polygonal",
+    "image",
+    "react-native-component"
+  ],
+  "peerDependencies": {
+    "expo": "53.0.9",
+    "react": "19.0.0",
+    "react-native": "0.79.2"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "14.1.0",
+    "expo": "53.0.9",
+    "expo-camera": "16.1.6",
+    "expo-image-manipulator": "13.1.6",
+    "expo-image-picker": "16.1.4",
+    "expo-media-library": "17.1.6",
+    "expo-screen-orientation": "8.1.6",
+    "react-native-svg": "15.11.2",
+    "react-native-view-shot": "4.0.3"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pcsagri/react-native-expo-cropper.git"
+  },
+  "bugs": {
+    "url": "https://github.com/pcsagri/react-native-expo-cropper/issues"
+  },
+  "homepage": "https://github.com/pcsagri/react-native-expo-cropper#readme",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "babel src --out-dir dist"
+  }
+}

package/src/CustomCamera.js

@@ -0,0 +1,185 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  Alert,
+  SafeAreaView,
+  Dimensions,
+  Image,
+} from 'react-native';
+import { Camera, CameraView } from 'expo-camera';
+const { width } = Dimensions.get('window');
+
+export default function CustomCamera({ onPhotoCaptured}) {
+  const [isReady, setIsReady] = useState(false);
+  const [loadingBeforeCapture, setLoadingBeforeCapture] = useState(false);
+  const [setHasPermission] = useState(null);
+  const cameraRef = useRef(null);
+
+ 
+
+useEffect(() => {
+  (async () => {
+    const { status } = await Camera.requestCameraPermissionsAsync();
+    setHasPermission(status === 'granted');
+  })();
+}, []);
+
+
+
+  const takePicture = async () => {
+    if (cameraRef.current) {
+      try {
+
+        setTimeout(() => {
+          setLoadingBeforeCapture(true);
+        }, 1000);
+  
+        await new Promise(resolve => setTimeout(resolve, 100));
+  
+        const photo = await cameraRef.current.takePictureAsync({
+        quality: 1,
+      });
+
+  
+        onPhotoCaptured(photo.uri);
+  
+        setLoadingBeforeCapture(false);
+      } catch (error) {
+        setLoadingBeforeCapture(false);
+        Alert.alert("Erreur");
+      }
+    }
+  };
+  
+
+  return (
+    <SafeAreaView style={styles.outerContainer}>
+      <View style={styles.cameraWrapper}>
+        <CameraView
+          style={styles.camera}
+          facing="back"
+          ref={cameraRef}
+          onCameraReady={() => setIsReady(true)}
+        />
+
+        {/* Loading overlay */}
+        {loadingBeforeCapture && (
+          <>
+            <View style={styles.loadingOverlay}>
+              <Image
+                source={require('../src/assets/loadingCamera.gif')}
+                style={styles.loadingGif}
+                resizeMode="contain"
+              />
+            </View>
+            <View style={styles.touchBlocker} pointerEvents="auto" />
+          </>
+        )}
+
+        {/* Cadre de scan */}
+        <View style={styles.scanFrame} />
+      </View>
+
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={takePicture}
+          disabled={!isReady || loadingBeforeCapture}
+        />
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const PRIMARY_GREEN = '#198754';
+const DEEP_BLACK = '#0B0B0B';
+const GLOW_WHITE = 'rgba(255, 255, 255, 0.85)';
+
+const styles = StyleSheet.create({
+  outerContainer: {
+    flex: 1,
+    backgroundColor: DEEP_BLACK,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cameraWrapper: {
+    width: width,
+    aspectRatio: 9 / 16,
+    borderRadius: 30,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  camera: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  scanFrame: {
+    position: 'absolute',
+    width: '95%',
+    height: '80%',
+    borderWidth: 4,
+    borderColor: PRIMARY_GREEN,
+    borderRadius: 5,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+  },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    zIndex: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingGif: {
+    width: 100,
+    height: 100,
+  },
+  touchBlocker: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 21,
+    backgroundColor: 'transparent',
+  },
+  cancelIcon: {
+    position: 'absolute',
+    top: 20,
+    left: 20,
+    backgroundColor: PRIMARY_GREEN,
+    borderRadius: 5,
+    padding: 8,
+  },
+  buttonContainer: {
+    marginTop: 25,
+    marginBottom: 40,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  button: {
+    width: 80,
+    height: 80,
+    borderRadius: 50,
+    backgroundColor: GLOW_WHITE,
+    borderWidth: 5,
+    borderColor: PRIMARY_GREEN,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 18,
+    color: GLOW_WHITE,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: DEEP_BLACK,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  iconText: {
+    fontSize: 18,
+    color: GLOW_WHITE,
+    fontWeight: '600',
+  },
+});

package/src/ImageCropper.js

@@ -0,0 +1,228 @@
+import styles from './ImageCropperStyles';
+import React, { useState, useRef, useEffect } from 'react';
+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';
+import { enhanceImage } from './ImageProcessor';
+
+const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) => {
+
+
+  const [image, setImage] = useState(null);
+  const [points, setPoints] = useState([]);
+  const [showResult, setShowResult] = useState(false);
+  const [showCustomCamera, setShowCustomCamera] = useState(false);
+  const viewRef = useRef(null);
+  const imageMeasure = useRef({ x: 0, y: 0, width: 0, height: 0 });
+  const selectedPointIndex = useRef(null);
+  const lastTap = useRef(null);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [showFullScreenCapture, setShowFullScreenCapture] = useState(false);
+  
+
+
+
+
+  useEffect(() => {
+  if (openCameraFirst) {
+  setShowCustomCamera(true);
+} else if (initialImage) {
+  setImage(initialImage);
+}
+}, [openCameraFirst, initialImage]);
+
+
+  useEffect(() => {
+  if (!image) return;
+
+  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 = () => {
+    const { width, height } = imageMeasure.current;
+    if (width === 0 || height === 0 || points.length > 0) return;
+    const boxWidth = width * 0.6;
+    const boxHeight = height * 0.6;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    setPoints([
+      { x: centerX - boxWidth / 2, y: centerY - boxHeight / 2 },
+      { x: centerX + boxWidth / 2, y: centerY - boxHeight / 2 },
+      { x: centerX + boxWidth / 2, y: centerY + boxHeight / 2 },
+      { x: centerX - boxWidth / 2, y: centerY + boxHeight / 2 },
+    ]);
+  };
+
+
+  const onImageLayout = (e) => {
+    const layout = e.nativeEvent.layout;
+    imageMeasure.current = {
+      x: layout.x,
+      y: layout.y,
+      width: layout.width,
+      height: layout.height
+    };
+    initializeCropBox();
+  };
+
+  const createPath = () => {
+    if (points.length < 1) return '';
+    let path = `M ${points[0].x} ${points[0].y} `;
+    points.forEach(point => path += `L ${point.x} ${point.y} `);
+    return path + 'Z';
+  };
+
+  const handleTap = (e) => {
+    if (!image || showResult) return;
+    const now = Date.now();
+    const { locationX: tapX, locationY: tapY } = e.nativeEvent;
+    if (lastTap.current && now - lastTap.current < 300) {
+      const exists = points.some(p => Math.abs(p.x - tapX) < 15 && Math.abs(p.y - tapY) < 15);
+      if (!exists) setPoints([...points, { x: tapX, y: tapY }]);
+      lastTap.current = null;
+    } else {
+      const index = points.findIndex(p => Math.abs(p.x - tapX) < 20 && Math.abs(p.y - tapY) < 20);
+      if (index !== -1) selectedPointIndex.current = index;
+      lastTap.current = now;
+    }
+  };
+
+  const handleMove = (e) => {
+    if (showResult || selectedPointIndex.current === null) return;
+    const { locationX: moveX, locationY: moveY } = e.nativeEvent;
+    const boundedX = Math.max(0, Math.min(moveX, imageMeasure.current.width));
+    const boundedY = Math.max(0, Math.min(moveY, imageMeasure.current.height));
+    setPoints(prev =>
+      prev.map((p, i) => i === selectedPointIndex.current ? { x: boundedX, y: boundedY } : p)
+    );
+  };
+
+  const handleRelease = () => {
+    selectedPointIndex.current = null;
+  };
+
+  const handleReset = () => {
+    setPoints([]);
+    initializeCropBox();
+  };
+
+
+  return (
+    <View style={styles.container}>
+
+      {showCustomCamera ? (
+        <CustomCamera
+          onPhotoCaptured={(uri) => { setImage(uri); setShowCustomCamera(false); }}
+          onCancel={() => setShowCustomCamera(false)}
+        />
+      ) : (
+        <>
+          {!showResult && (
+            <View style={image ? styles.buttonContainer : styles.centerButtonsContainer}>
+ 
+              {image && (
+                <TouchableOpacity style={styles.button} onPress={handleReset}>
+                  <Text style={styles.buttonText}>Reset</Text>
+                </TouchableOpacity>
+              )}
+              {image && (
+              <TouchableOpacity
+                style={styles.button}
+                  onPress={async () => {
+                        setShowFullScreenCapture(true); 
+                        setIsLoading(true);
+                        setShowResult(true);
+                        try {
+                          await new Promise((resolve) => requestAnimationFrame(resolve));
+                          const capturedUri = await captureRef(viewRef, {
+                            format: 'png',
+                            quality: 1,
+                          });
+
+                        
+                        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>
+)}
+
+            </View>
+          )}
+
+
+          {image && (
+            <View
+              ref={viewRef}
+              collapsable={false}
+              style={showFullScreenCapture ? styles.fullscreenImageContainer : styles.imageContainer}
+              onStartShouldSetResponder={() => true}
+              onResponderStart={handleTap}
+              onResponderMove={handleMove}
+              onResponderRelease={handleRelease}
+            >
+              <Image source={{ uri: image }} style={styles.image} onLayout={onImageLayout} />
+              <Svg style={styles.overlay}>
+                <Path
+                  d={`M 0 0 H ${imageMeasure.current.width} V ${imageMeasure.current.height} H 0 Z ${createPath()}`}
+                  fill={showResult ? 'black' : 'rgba(0, 0, 0, 0.7)'}
+                  fillRule="evenodd"
+                />
+                {!showResult && points.length > 0 && (
+                  <Path d={createPath()} fill="transparent" stroke="white" strokeWidth={2} />
+                )}
+                {!showResult && points.map((point, index) => (
+                  <Circle key={index} cx={point.x} cy={point.y} r={10} fill="white" />
+                ))}
+              </Svg>
+            </View>
+          )}
+        </>
+      )}
+
+            <Modal visible={isLoading} transparent animationType="fade">
+        <View style={styles.loadingOverlay}>
+          <Image
+            source={require('../src/assets/loadingCamera.gif')}
+            style={styles.loadingGif}
+            resizeMode="contain"
+          />
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default ImageCropper;

package/src/ImageCropperStyles.js

@@ -0,0 +1,181 @@
+import { StyleSheet, Dimensions } from 'react-native';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+const IMAGE_HEIGHT = SCREEN_HEIGHT;
+const IMAGE_WIDTH = SCREEN_WIDTH;
+
+const PRIMARY_GREEN = '#198754';
+const DEEP_BLACK = '#0B0B0B';
+const GLOW_WHITE = 'rgba(255, 255, 255, 0.85)';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: DEEP_BLACK,
+  },
+  buttonContainer: {
+    position: 'absolute',
+    bottom: 50,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    zIndex: 10,
+  },
+  button: {
+    backgroundColor: PRIMARY_GREEN,
+    paddingVertical: 18,
+    paddingHorizontal: 30,
+    borderRadius: 12,
+    margin: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 0,
+    width: SCREEN_WIDTH * 0.4,
+    height: 60,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  iconText: {
+    color: PRIMARY_GREEN,
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  imageContainer: {
+  width: IMAGE_WIDTH,
+  height: IMAGE_HEIGHT,
+  justifyContent: 'center',
+  alignItems: 'center',
+  overflow: 'hidden',
+  backgroundColor: 'black',
+},
+
+  image: {
+  width: '100%',
+  height: '100%',
+  resizeMode: 'contain',
+},
+
+  overlay: {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  zIndex: 1,
+},
+
+  croppedImage: {
+    width: IMAGE_WIDTH,
+    height: IMAGE_HEIGHT,
+    resizeMode: 'cover',
+    marginTop: 10,
+    borderWidth: 2,
+    borderColor: 'white',
+    borderRadius: 10,
+  },
+  fixedButtonContainer: {
+    position: 'absolute',
+    bottom: 100,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    gap: 10,
+    paddingHorizontal: 10,
+  },
+  fixedButton: {
+    backgroundColor: PRIMARY_GREEN,
+    paddingVertical: 18,
+    paddingHorizontal: 30,
+    borderRadius: 12,
+    margin: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 0,
+    width: SCREEN_WIDTH * 0.4,
+    height: 60,
+  },
+  centerButtonsContainer: {
+    position: 'absolute',
+    bottom: 20,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 10,
+    gap: 10,
+  },
+  welcomeText: {
+    position: 'absolute',
+    top: '40%',
+    left: 20,
+    right: 20,
+    textAlign: 'center',
+    color: GLOW_WHITE,
+    fontSize: 40,
+    fontWeight: '800',
+    zIndex: 10,
+  },
+  startButton: {
+    backgroundColor: PRIMARY_GREEN,
+    paddingVertical: 18,
+    paddingHorizontal: 30,
+    borderRadius: 12,
+    margin: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 0,
+    width: SCREEN_WIDTH * 0.9,
+    height: 70,
+  },
+  startButtonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+
+  loadingOverlay: {
+  flex: 1,
+  backgroundColor: 'rgba(0,0,0,0.5)',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  zIndex: 9999,
+},
+loadingGif: {
+  width: 120,
+  height: 120,
+},
+
+fullscreenImageContainer: {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: SCREEN_WIDTH,
+  height: SCREEN_HEIGHT,
+  backgroundColor: 'black',
+  justifyContent: 'center',
+  alignItems: 'center',
+  zIndex: 9999,
+},
+
+
+});
+
+export default styles;

package/src/ImageProcessor.js

@@ -0,0 +1,28 @@
+import * as ImageManipulator from 'expo-image-manipulator';
+
+export const enhanceImage = async (uri , addheight) => {
+  try {
+    const imageInfo = await ImageManipulator.manipulateAsync(uri, []);
+    const ratio = imageInfo.height / imageInfo.width;
+
+    const maxHeight = addheight;
+    const newWidth = Math.round(maxHeight / ratio);
+    const newHeight = Math.round(newWidth * ratio);
+
+    const result = await ImageManipulator.manipulateAsync(
+      uri,
+      [
+        { resize: { width: newWidth, height: newHeight } },
+      ],
+      {
+        compress: 1,
+        format: ImageManipulator.SaveFormat.PNG
+      }
+    );
+
+    return result.uri;
+  } catch (error) {
+    console.error("Erreur T404K:", error);
+    return uri;
+  }
+};