@fto-consult/expo-ui 8.46.3 → 8.48.0

package/bin/create-app/App.js

@@ -10,6 +10,8 @@ import TableDataListScreen from "$screens/TableData/TableDataListScreen";
 import TableDataScreen from "$screens/TableData/TableDataScreen";
 import Notifications from "$components/Notifications";
 import auth from "$src/auth";
+import tablesData, { getTable as getTableData } from "$database/tables";
+import {defaultStr} from "$cutils";
 
 export default function AppMainEntry(){
     return <ExpoUIProvider    
@@ -22,8 +24,8 @@ export default function AppMainEntry(){
             screens,
             /** {object}, les options du composant Stack.Navigator, voir https://reactnavigation.org/docs/native-stack-navigator */
             screenOptions : {},
-            drawerItems, //application main drawer items,
-            drawerSections,
+            drawerItems,  //application main drawer items,
+            drawerSections, //les différentes sections du drawer principal de l'application
             /***** mutate drawerItems before rendering
                 @param {object : {[drawerSection1]:{ label:section1Label,items:<Array>},[drawerSection2]:{}, ...[drawerSectionN]:{}}} drawerItems
                 @return {object}
@@ -34,6 +36,8 @@ export default function AppMainEntry(){
             screenOptions : {},//les options du composant Stack.Navigator de react-navigation, voir https://reactnavigation.org/docs/native-stack-navigator/
         }}
         auth = {auth}
+        tablesData={tablesData}
+        getTableData={getTableData}
         components = {{
             /*** utilisé pour le renu du contenu des écran de type liste sur les tables de données */
             TableDataListScreen,
@@ -63,16 +67,64 @@ export default function AppMainEntry(){
             MainProvider : function({children,isLoaded,isLoading,isInitialized,hasGedStarted,...props}){
                 return children;
             },
-            /*** logo : ReactNode|ReactElement | ReactComponent | object {
-               image{ReactComponent} :,text {ReactComponent}
+            /*** 
+                le composant en charge du rendu du logo de l'application
+                logo | Logo :  ReactNode | ReactComponent | object {
+                   image{ReactComponent} :,
+                   text {ReactComponent}
+                },
             },*/
-            logo : Logo,//logo component's properties
-            /**** les form fields personnalisés doivent être définis ici */
-            customFormFields : {},//custom form fields
-            /*** la fonction permettant de muter les props du composant TableLink, permetant de lier les tables entre elles */
+            logo : Logo,
+            /****
+                custom form fields
+                les form fields personnalisés doivent être définis ici 
+                de la forme : {
+                    [typeCustomField1] : <ReactComponent>,
+                    ...
+                    [typeCustomFieldn] : <ReactComponent>
+                }
+                par exemple, si l'on souhaite définir un form field de type test, la déclaration sera de la forme : 
+                {
+                    test : Test, //ou test est le fom field associé au type test, ie le composant qui sera rendu pour ce type de Champ,
+                }
+            */
+            customFormFields : {},
+            /*** 
+                la fonction permettant de muter les props du composant TableLink, permetant de lier les tables entre elles
+                Le composant TableLink permet de lier les données d'une tableData, L'usage dudit composant est définit dans la documentation de l'application
+            */
             tableLinkPropsMutator : (props)=>{ 
-                return props;
-            }
+                return {
+                    ...props,
+                    /***
+                        la fonction fetchForeignData est appelée lorsqu'on clique sur un élément du composant TableLink, permetant de lier un objet de la table table Data
+                        foreignKeyTable {string} represente la table lié à la donnée
+                        foreignKeyColumn {string} represenet le nom de la colonne qu'on souhaite récupérer la données
+                        id {any}, represente la valeur actuelle sur laquelle on a cliqué
+                    */
+                    fetchForeignData : ({foreignKeyTable,foreignKeyColumn,tableName,table,id,...args})=>{
+                        const tableName = defaultStr(foreignKeyTable,table,tableName);
+                        const tableObj = getTableData(tableName); //table object represente l'objet table, lié à la liste des tables data déclaré dans l'application
+                        if (!tableObj) {
+                            return Promise.reject({
+                              message: `Impossible de récupérer la données associée à la table ${tableName}. Rassurez vous qu'elle figure dans la liste des tables supportées par l'application`,
+                            });
+                        }
+                        //Vous pouvez dès cet instant accédes aux props de l'objet tableObj, notemment queryPath, qui permet de récupérer les données liés à la table data
+                        const fieldName = defaultStr(foreignKeyColumn);
+                        /*
+                            implémenter votre logique pour récupérer l'objet associé à la table tableName, dont la colonne est fieldName, et la valeur est id.
+                            //ajouter l'instruction d'importation de la fonction fetch : import fetch from "$capi/fetch";
+                            exemple : return fetch(`${table.queryPath}/${id}${fieldName ? `?fieldName=${fieldName}`:""}`).then((resp) => resp.data);
+                        */
+                        return Promise.resolve(null);
+                    },
+                };
+            },
+            /***
+                ({object})=><{object}>, la fonction permettant de muter les props du composant Fab, affiché dans les écrans par défaut
+            */
+            fabPropsMutator : (props)=>props,
         }}
         /*** //for application initialization
             @param {

package/bin/create-app/babel.config.js

@@ -7,6 +7,7 @@ module.exports = function(api) {
       $components : path.resolve($src,"components"),
       $navigation : path.resolve($src,"navigation"),
       $screens : path.resolve($src,"screens"),
+      $database: path.resolve($src, "database"), //le repertoire dédié au données d'accès à la base de données
       //...your custom module resolver alias, @see : https://www.npmjs.com/package/babel-plugin-module-resolver
     }
     return require("@fto-consult/expo-ui/babel.config")(api,{

package/bin/create-app/dependencies.js

@@ -31,6 +31,7 @@
 	"react-native-gesture-handler": "~2.14.0",
 	"react-native-reanimated": "~3.6.2",
 	"react-native-view-shot": "3.8.0",
-	"expo-intent-launcher": "~10.11.0"
+	"expo-intent-launcher": "~10.11.0",
+	"expo-image-manipulator": "~11.8.0"
 };
                             

package/bin/create-app/src/auth/index.js

@@ -1,6 +1,5 @@
 export default {
     enabled : false,//la gestion de l'authentification est désactivée par défaut
-    loginPropsMutator : (props)=>props,//({object})=><{object}>, la fonction permettant de muter les props du composant Login,
     profilePropsMutator : ({fields,...props})=>({fields,...props}),//la fonction permettant de muter les champs liés à l'écran de mise à jour d'un profil utilisateur
     signIn : ({user})=>Promise.resolve({message:"Connecté avec success"}), //la fonction permettant de connecter un utilisateur
     signOut : ({user})=>Promise.resolve({message:"Déconnecté avec success"}),//la fonction permettant de déconnecter un utilisateur
@@ -24,5 +23,65 @@ export default {
     getUserPseudo: (user) => user.pseudo,
 	getUserFirstName : (user)=>user.firstName,
 	getUserLastName : (user)=>user.lastName,
-	getUserFullName : (user)=> user.fullName || `${user.firstName && user.firstName ||''}${user.lastName && ` ${user.lastName}` ||''}`
+	getUserFullName : (user)=> user.fullName || `${user.firstName && user.firstName ||''}${user.lastName && ` ${user.lastName}` ||''}`,
+	
+	/****
+	    Le composant à définir pour override le composant Login par défaut de l'application. example : Login : (porps)=><React.Component {...props}/>
+        Pour override l'interface de connexion par défaut, vous dévez définir le contenu de cette propriété comme étant un composant React qui sera rendu 
+        rendu en lieu et place du composant de connexion par défaut : Ce composant aura comme props : 
+        {
+            withPortal : {boolean}, //si le contenu de l'écran doit être rendu dans un portal
+            onSuccess <function> : (data)=><any>, la fonction appelée en cas de success
+            appBarProps <object>, les props à passer au composant ApppBar de l'écran de connexion, lorsque withPortal est à true
+            auth <object>, //le composant auth récupérer à l'aide du hook useAuth de $cauth. définit les fonctions suivantes : 
+            {
+                signIn : (data)=><Promise>, la fonction permettant de connecter l'utilisateur
+                signOut : ()=><Promise>, la fonction permettant de déconnecter l'utilisateur, /
+                ...rest,
+            }
+        }
+    */
+    Login : null,
+    /*
+        la fonction loginPropsMutator de muter les props du composant Login par défaut, prise en compte lorsque le composant de connexion n'est pas remplacer par celui définit dans la prop login,
+        @param {object} props : les props de la fonction login, les props ont des propriétés suivantes : 
+        {
+            onSuccess : ({object})=><Any>, la fonction appelée en cas de success
+            setState : (newState)=>(...newState),//la fonction utilisée pour update le state du composant. elle doit remplacer le state du composant
+            state : <Object: data,...rest>, le state actuel à l'instant t du composant
+            nextButton : <Object : 
+                {
+                    ref : nextButtonRef, //la référence vers le bouton next (le boutn Suivant)
+                    isDisabled : x=> typeof buttonRef?.current?.isDisabled ==="function" && buttonRef.current?.isDisabled(),
+                    enable : x=>typeof buttonRef?.current?.enable =="function" && buttonRef.current.enable(),
+                    disable : x=> typeof buttonRef?.current?.disable =="function" && buttonRef?.current.disable(),
+                }
+            >,
+            prevButton : <Object : 
+                {
+                    ref : prevButtonRef, //la référence react ver le buton previous (le bouton Précédent)
+                    isDisabled : x=> typeof buttonRef?.current?.isDisabled ==="function" && buttonRef.current?.isDisabled(),
+                    enable : x=>typeof buttonRef?.current?.enable =="function" && buttonRef.current.enable(),
+                    disable : x=> typeof buttonRef?.current?.disable =="function" && buttonRef?.current.disable(),
+                }
+            >,
+            showError <function> : (message,title)=><void>, la fonction permettant de notifier l'utilisateur en cas d'erreur
+            getData <function> : ()=><Object>, la fonction permettant de récupérer les données en cours de modification du formulaire de connextion à l'instant t
+            focusField <function> : (fieldName)=><void>, la fonction permettant d'activer le focus sur le champ fieldName à l'instant t
+            formName <string>, //le nom du formulaire Form, passé à la formData
+            nextButtonRef <{current:<any>}>, la référence vers le bouton next
+            previousButtonRef <{current:<any>}, la référence vers le bouton previous
+        }   
+        @return <{object}>, l'objet a retourné doit être de la forme : 
+        {
+            headerTopContent : <ReactComponent | ReactNode, le contenu a afficher au headerTop de l'interface de connexion
+            header : <ReactComponent| ReactNode>, le contenu du qui sera rendu immédiatement après le composant Header, par défaut, le texte "Connectez vous svp est affiché". Ce contenu doit être rendu si l'on souhaite override le texte "Connectez vous SVP" 
+            containerProps : <object>, les props du composant <Surface/>, le composant qui est le wrapper du composant FormData en charge de récupérer les données de l'interface de connexion
+            withHeaderAvatar : <boolean>, si l'avatar ou l'iconne de connexion sera afficher à l'interface de connexion par défaut
+            ...loginProps {object}, les composant Supplémentaires à passer au composant FormData utilisé pour le rendu du formulaire de connexion
+        }
+    */
+    loginPropsMutator : (props)=>{
+        return props;
+    },
 }

package/bin/create-app/src/database/tables/getTable.js

@@ -0,0 +1,10 @@
+/*****
+    le contenu de cette fonction peut être généré automatiquement via les commandes suivantes (étant dans le repertoire de l'application)
+        npm run generate-getTable | npx @fto-consult/expo-ui generate-getTable
+        Notons que le script generate-getTable est définit comme étant l'un des scripts du package.json de l'application
+    @param {string} tableName, le nom de la table data
+    @return {object | null}, table, l'objet table associé 
+*/
+export default function(tableName){
+    return null;
+}

package/bin/create-app/src/database/tables/index.js

@@ -0,0 +1,57 @@
+/****
+    la liste des tables de donnéees à exporter, de la forme : 
+    [tableName1] : {
+       fields : { //la liste des champs liés à la table de données
+            [field1] : {
+                label | text : <string | ReactComponent>, le texte ou libelé lié au champ
+                type : <string>, le type de field  par exemple : text,password, email, switch, checkbox, tel, select, et bien d'autres
+                
+                //cette fonction est appelée à chaque fois que les premiers règles de validations ont été conclus lors de la validation du champ. Elle doit retourner soit un boolean, une chaine de caractère, un objet ou une promesse
+                    //si une chaine de caractère est retournée, alors la validation du champ considère qu'il s'agit d'une erreur et le message est affiché comme erreur de validation du champ
+                    //si un objet est retourné et cet objet contient un champ message | msg de type string, alors le validateur considère qu'il s'agit d'une erreur et le champ en question est affiché comme message de l'erreur 
+                    //si une promese est retournée, alors la fonction attendra que la promesse soit résolue 
+                        1. si la promesse resoud une chaine de caractère ou un objet idem au cas précédent, ladite chaine est condisérée comme une erreur
+                        2. si la promesse renvoie une erreur, alors le validateur considère comme un échec de validation et le message lié à l'erreur est affiché comme message d'erreur de validation
+                    //si false est retournée, alors rien n'est fait et le status de ce champ reste toujours à invalide. il sera donc impossible d'enregistrer le formulaire form data
+                    //si true est retourneé, alors la formField est valide 
+                onValidatorValid : ({value,context,....rest}) => <boolean | object {} | string | Promise <boolean | object : {} | string>>,
+                
+                //Cette fonction est appélée à chaque échec de validation du form field
+                onValidatorNoValid : ({value,context,...rest}) => <any>
+            }
+       },
+       tableName <string>, le nom de la table name
+       label | text <string>, le titre à donner à la table data
+       icon : <string | ReactComponent>, l'icon de la table data,
+       queryPath <string>, //le chemin lié à l'api REST utilisée pour effectuer un query sur les données liés à la table Data en question
+       perms <object>, //l'objet perms définissant les permissions pouvant être assignés à l'utilisateur pour la table de donénes
+       showInFab <boolean | function()=><boolean>, //si la table de données sera affiché dans le layout Fab, le composant Fab qui est rendu pour les écrans dont la propriété withFab est à true
+       showInDrawer <boolean | function()=><boolean>, //détermine si la table data sera affichée dans le drawer principal de l'application
+       datagrid <object>, //les props à passer au composant datagrid lié à la table de données
+       drawerSection <string>, //le nom de la section associé au drawer dans lequel figurera le table data
+       print <function ({data,...settings})>=> <Promise<{content:[],...rest}>, //la fonction utile pour l'impression de la tabel de données suivant les recommandation de la libraririe pdfmake
+       printOptions <object>, //les options à passer à la fonction print,
+       
+       databaseStatistics <function ()=> <boolean> | boolean>, //si la table data figurera dans les Statistiques en BD, validable si le composant DatabaseStatistics est appélé dans l'application
+       
+       showInFab <boolean | function()=><boolean>, //spécifie si un bouton lié à la table sera affiché dans le composant Fab
+       
+       //le champ fabProps doit retourner les props à appliquer au composant fab lié à la table data,si elle définit une propriété nomée actions de types tableau, alors, ces actions seront utilisées commes actions personnalisées du fab
+           // il doit s'agit d'un objet de la forme : {
+                actions : <array<Item> | object <Item>>. Item doit être un objet avec les propriétés suivantes : 
+                    Item : {
+                        text | label <string> : "le texte à afficher au bouton fab",
+                        icon <string | ReactComponent>, l'icone du bouton de fab,
+                        backgroundColor <string, //la couleur d'arrière plan du bouton
+                        color <string>, //la couleur du bouton de fab
+                        onPress <func ()=>void>, //la fonction appelée lorsqu'on clique sur le bouton
+                    }
+           }  
+       fabProps { boolean<false> | object|function({tableName})}, //si fabProps vaux false ou retourne false, alors le table data ne s'affichera pas dans le composant Fab
+    }
+*/
+export default {
+
+}
+
+export {default as getTable} from "./getTable";

package/bin/create-app.js

@@ -31,8 +31,8 @@ module.exports = function(appName,{projectRoot:root}){
           name,
           version : "1.0.0",
           "description": "",
-          "main": "index.js",
           "main": "App.js",
+          "tablesDataPath": "./src/database/tables",
           "scripts" : {
             start : "npx expo start -c",
             "dev" : "npx expo start --no-dev --minify -c",
@@ -40,6 +40,7 @@ module.exports = function(appName,{projectRoot:root}){
             "build-web" : "npx expo export:web",
             "build-android" : "npx eas build --platform android --profile preview",
             "build-ios" : "eas build --platform ios",
+            "generate-getTable" : "nxp @fto-consult/expo-ui generate-getTable"
           },
           "dependencies" : {
             [euModule] : packageObj.version,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.46.3",
+  "version": "8.48.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "react-native-paper-doc": "https://github.com/callstack/react-native-paper/tree/main/docs/docs/guides",
   "scripts": {

package/src/auth/Login.js

@@ -27,7 +27,7 @@ const WIDTH = 400;
 
 export default function LoginComponent(props){
     let {formName,step,appBarProps,onSuccess,withPortal,testID} = props;
-    const {auth:{loginPropsMutator}} = useContext();
+    const {auth:{loginPropsMutator,Login}} = useContext();
     const loginTitle = getTitle();
     testID = defaultStr(testID,"RN_Auth.LoginComponent");
     formName = React.useRef(uniqid(defaultStr(formName,"login-formname"))).current;
@@ -74,7 +74,6 @@ export default function LoginComponent(props){
         }
     }
     
-    
     if(withPortal){
         appBarProps = defaultObj(appBarProps);
         appBarProps.backAction = false;
@@ -86,6 +85,27 @@ export default function LoginComponent(props){
             },1000)
         }
     },[withPortal]);
+    React.useEffect(()=>{
+        Preloader.closeAll();
+        /*** pour initializer les cordonnées du composant login */
+        if(typeof initialize =='function'){
+            initialize();
+        }
+    },[]);
+    const prevStep = React.usePrevious(state.step);
+    React.useEffect(()=>{
+        /*** lorsque le state du composant change */
+        if(typeof onStepChange =='function'){
+            return onStepChange({...state,previousStep:prevStep,focusField,nextButtonRef})
+        }
+    },[state.step]);
+    if(React.isComponent(Login)) return <Login
+        {...props}
+        withPortal = {withPortal}
+        appBarProps = {appBarProps}
+        onSuccess = {onSuccess}
+        auth = {auth}
+    />
     const getButtonAction = (buttonRef)=>{
         return {
             ref : buttonRef,
@@ -122,20 +142,6 @@ export default function LoginComponent(props){
     const containerProps = defaultObj(customContainerProps);
     const contentProps = defaultObj(customContentProps);
 
-    React.useEffect(()=>{
-        Preloader.closeAll();
-        /*** pour initializer les cordonnées du composant login */
-        if(typeof initialize =='function'){
-            initialize();
-        }
-    },[]);
-    const prevStep = React.usePrevious(state.step);
-    React.useEffect(()=>{
-        /*** lorsque le state du composant change */
-        if(typeof onStepChange =='function'){
-            return onStepChange({...state,previousStep:prevStep,focusField,nextButtonRef})
-        }
-    },[state.step]);
     /****la fonction à utiliser pour vérifier si l'on peut envoyer les données pour connextion
      * par défaut, on envoie les données lorssqu'on est à l'étappe 2
      * **/

package/src/components/Image/Cropper/ExpoImageManipulator.js

@@ -0,0 +1,311 @@
+import React, { Component } from 'react'
+import {
+    Dimensions,
+    Image,
+    ScrollView,
+    Modal,
+    View,
+    Text,
+    SafeAreaView,
+    TouchableOpacity,
+} from 'react-native'
+import * as ImageManipulator from 'expo-image-manipulator'
+import PropTypes from 'prop-types'
+import AutoHeightImage from '../../Avatar/AutoHeightImage'
+import Icon from "$ecomponents/Icon";
+import {isIphoneX } from 'react-native-iphone-x-helper'
+import ImageCropOverlay from './ImageCropOverlay'
+
+const { width, height } = Dimensions.get('window')
+
+
+class ExpoImageManipulator extends Component {
+    constructor(props) {
+        super(props)
+        const { squareAspect } = this.props
+        this.state = {
+            cropMode: true,
+            processing: false,
+            zoomScale: 1,
+            squareAspect,
+        }
+
+        this.scrollOffset = 0
+
+        this.currentPos = {
+            left: 0,
+            top: 0,
+        }
+
+        this.currentSize = {
+            width: 0,
+            height: 0,
+        }
+
+        this.maxSizes = {
+            width: 0,
+            height: 0,
+        }
+
+        this.actualSize = {
+            width: 0,
+            height: 0
+        }
+    }
+
+    async componentDidMount() {
+        await this.onConvertImageToEditableSize()
+    }
+
+    async onConvertImageToEditableSize() {
+        const { photo: { uri: rawUri } } = this.props
+        const { uri, width, height } = await ImageManipulator.manipulateAsync(rawUri,
+            [
+                {
+                    resize: {
+                        width: 1080,
+                    },
+                },
+            ])
+        this.setState({
+            uri,
+        })
+        this.actualSize.width = width
+        this.actualSize.height = height
+    }
+    onCropImage = () => {
+        this.setState({ processing: true })
+        const { uri } = this.state
+        Image.getSize(uri, async (actualWidth, actualHeight) => {
+            let cropObj = this.getCropBounds(actualWidth, actualHeight);
+            if (cropObj.height > 0 && cropObj.width > 0) {
+                let uriToCrop = uri
+                const { uri: uriCroped, base64, width: croppedWidth, height: croppedHeight } = await this.crop(cropObj, uriToCrop)
+
+                this.actualSize.width = croppedWidth
+                this.actualSize.height = croppedHeight
+
+                this.setState({
+                    uri: uriCroped, base64, cropMode: false, processing: false,
+                })
+            } else {
+                this.setState({cropMode: false, processing: false})
+            }
+        })
+    }
+
+    onRotateImage = async () => {
+        const { uri } = this.state
+        let uriToCrop = uri
+        Image.getSize(uri, async (width2, height2) => {
+            const { uri: rotUri, base64 } = await this.rotate(uriToCrop, width2, height2)
+            this.setState({ uri: rotUri, base64 })
+        })
+    }
+
+    onFlipImage = async (orientation) => {
+        const { uri } = this.state
+        let uriToCrop = uri
+        Image.getSize(uri, async (width2, height2) => {
+            const { uri: rotUri, base64 } = await this.filp(uriToCrop, orientation)
+            this.setState({ uri: rotUri, base64 })
+        })
+    }   
+
+    onHandleScroll = (event) => {
+        this.scrollOffset = event.nativeEvent.contentOffset.y
+    }
+
+    getCropBounds = (actualWidth, actualHeight) => {
+        let imageRatio = actualHeight / actualWidth
+        var originalHeight = Dimensions.get('window').height - 64
+        if (isIphoneX()) {
+            originalHeight = Dimensions.get('window').height - 122
+        }
+        let renderedImageWidth = imageRatio < (originalHeight / width) ? width : originalHeight / imageRatio
+        let renderedImageHeight = imageRatio < (originalHeight / width) ? width * imageRatio : originalHeight
+
+        let renderedImageY = (originalHeight - renderedImageHeight) / 2.0
+        let renderedImageX = (width - renderedImageWidth) / 2.0
+
+        const renderImageObj = {
+            left: renderedImageX,
+            top: renderedImageY,
+            width: renderedImageWidth,
+            height: renderedImageHeight,
+        }
+        const cropOverlayObj = {
+            left: this.currentPos.left,
+            top: this.currentPos.top,
+            width: this.currentSize.width,
+            height: this.currentSize.height,
+        }
+
+        var intersectAreaObj = {}
+
+        let x = Math.max(renderImageObj.left, cropOverlayObj.left);
+        let num1 = Math.min(renderImageObj.left + renderImageObj.width, cropOverlayObj.left + cropOverlayObj.width);
+        let y = Math.max(renderImageObj.top, cropOverlayObj.top);
+        let num2 = Math.min(renderImageObj.top + renderImageObj.height, cropOverlayObj.top + cropOverlayObj.height);
+        if (num1 >= x && num2 >= y)
+            intersectAreaObj = {
+                originX: (x - renderedImageX) * (actualWidth / renderedImageWidth) ,
+                originY: (y - renderedImageY) * (actualWidth / renderedImageWidth),
+                width: (num1 - x) * (actualWidth / renderedImageWidth),
+                height: (num2 - y) * (actualWidth / renderedImageWidth)
+            }
+        else {
+            intersectAreaObj = {
+                originX: x - renderedImageX,
+                originY: y - renderedImageY,
+                width: 0,
+                height: 0
+            }
+        }
+        return intersectAreaObj
+    }
+
+    filp = async (uri, orientation) => {
+        const { saveOptions } = this.props
+        const manipResult = await ImageManipulator.manipulateAsync(uri, [{ 
+              flip: orientation == 'vertical' ? ImageManipulator.FlipType.Vertical : ImageManipulator.FlipType.Horizontal
+            }],
+            saveOptions
+        );
+        return manipResult;
+    };
+
+    rotate = async (uri, width2, height2) => {
+        const { saveOptions } = this.props
+        const manipResult = await ImageManipulator.manipulateAsync(uri, [{
+            rotate: -90,
+        }, {
+            resize: {
+                width: this.trueWidth || width2,
+                // height: this.trueHeight || height2,
+            },
+        }], saveOptions)
+        return manipResult
+    }
+
+    crop = async (cropObj, uri) => {
+        const { saveOptions } = this.props
+        if (cropObj.height > 0 && cropObj.width > 0) {
+            const manipResult = await ImageManipulator.manipulateAsync(
+                uri,
+                [{
+                    crop: cropObj,
+                }],
+                saveOptions,
+            )
+            return manipResult
+        }
+        return {
+            uri: null,
+            base64: null,
+        }
+    };
+
+    calculateMaxSizes = (event) => {
+        let w1 = event.nativeEvent.layout.width || 100
+        let h1 = event.nativeEvent.layout.height || 100
+        if (this.state.squareAspect) {
+            if (w1 < h1) h1 = w1
+            else w1 = h1
+        }
+        this.maxSizes.width = w1
+        this.maxSizes.height = h1
+    };
+
+    // eslint-disable-next-line camelcase
+    async UNSAFE_componentWillReceiveProps() {
+        await this.onConvertImageToEditableSize()
+    }
+
+    zoomImage() {
+        // this.refs.imageScrollView.zoomScale = 5
+        // this.setState({width: width})
+        // this.setState({zoomScale: 5})
+
+        // this.setState(curHeight)
+    }
+    
+    render() {
+        const {
+            uri,
+            base64,
+            cropMode,
+            processing,
+            zoomScale
+        } = this.state
+
+        let imageRatio = this.actualSize.height / this.actualSize.width
+        var originalHeight = Dimensions.get('window').height - 64
+        if (isIphoneX()) {
+            originalHeight = Dimensions.get('window').height - 122
+        }
+
+        let cropRatio = originalHeight / width
+
+        let cropWidth = imageRatio < cropRatio ? width : originalHeight / imageRatio
+        let cropHeight = imageRatio < cropRatio ? width * imageRatio : originalHeight
+
+        let cropInitialTop = (originalHeight - cropHeight) / 2.0
+        let cropInitialLeft = (width - cropWidth) / 2.0
+
+
+        if (this.currentSize.width == 0 && cropMode) {
+            this.currentSize.width = cropWidth;
+            this.currentSize.height = cropHeight;
+
+            this.currentPos.top = cropInitialTop;
+            this.currentPos.left = cropInitialLeft;
+        }
+        return <>
+            <AutoHeightImage
+                style={{ backgroundColor: 'black' }}
+                source={{ uri }}
+                resizeMode={imageRatio >= 1 ? "contain" : 'contain'}
+                width={width}
+                height={originalHeight}
+                onLayout={this.calculateMaxSizes}
+            />
+            {!!cropMode && (
+                <ImageCropOverlay onLayoutChanged={(top, left, width, height) => {                                
+                    this.currentSize.width = width;
+                    this.currentSize.height = height;
+                    this.currentPos.top = top
+                    this.currentPos.left = left
+                }} initialWidth={cropWidth} initialHeight={cropHeight} initialTop={cropInitialTop} initialLeft={cropInitialLeft} minHeight={100} minWidth={100} />
+            )}
+        </>
+    }
+}
+
+export default ExpoImageManipulator
+
+ExpoImageManipulator.defaultProps = {
+    onPictureChoosed: ({ uri, base64 }) => console.log('URI:', uri, base64),
+    btnTexts: {
+        crop: 'Crop',
+        rotate: 'Rotate',
+        done: 'Done',
+        processing: 'Processing',
+    },
+    dragVelocity: 100,
+    resizeVelocity: 50,
+    saveOptions: {
+        compress: 1,
+        format: ImageManipulator.SaveFormat.PNG,
+        base64: false,
+    },
+}
+
+ExpoImageManipulator.propTypes = {
+    onPictureChoosed: PropTypes.func,
+    btnTexts: PropTypes.object,
+    saveOptions: PropTypes.object,
+    photo: PropTypes.object.isRequired,
+    dragVelocity: PropTypes.number,
+    resizeVelocity: PropTypes.number,
+}

package/src/components/Image/Cropper/ImageCropOverlay.js

@@ -0,0 +1,219 @@
+import React, { Component } from 'react'
+import { View, PanResponder, Dimensions } from 'react-native';
+
+class ImageCropOverlay extends React.Component {
+
+    state = {
+        draggingTL: false,
+        draggingTM: false,
+        draggingTR: false,
+        draggingML: false,
+        draggingMM: false,
+        draggingMR: false,
+        draggingBL: false,
+        draggingBM: false,
+        draggingBR: false,
+        initialTop: this.props.initialTop,
+        initialLeft: this.props.initialLeft,
+        initialWidth: this.props.initialWidth,
+        initialHeight: this.props.initialHeight,
+
+        offsetTop: 0,
+        offsetLeft: 0,
+    }
+
+    panResponder = {}
+
+    UNSAFE_componentWillMount() {
+        this.panResponder = PanResponder.create({
+            onStartShouldSetPanResponder: this.handleStartShouldSetPanResponder,
+            onPanResponderGrant: this.handlePanResponderGrant,
+            onPanResponderMove: this.handlePanResponderMove,
+            onPanResponderRelease: this.handlePanResponderEnd,
+            onPanResponderTerminate: this.handlePanResponderEnd,
+        })
+    }
+
+    render() {
+        const { draggingTL, draggingTM, draggingTR, draggingML, draggingMM, draggingMR, draggingBL, draggingBM, draggingBR, initialTop, initialLeft, initialHeight, initialWidth, offsetTop, offsetLeft}  = this.state
+        const style = {}
+
+        style.top = initialTop + ((draggingTL || draggingTM || draggingTR || draggingMM) ? offsetTop : 0)
+        style.left = initialLeft + ((draggingTL || draggingML || draggingBL || draggingMM) ? offsetLeft : 0)
+        style.width = initialWidth + ((draggingTL || draggingML || draggingBL) ? - offsetLeft : (draggingTM || draggingMM || draggingBM) ? 0 : offsetLeft)
+        style.height = initialHeight + ((draggingTL || draggingTM || draggingTR) ? - offsetTop : (draggingML || draggingMM || draggingMR) ? 0 : offsetTop)
+
+        if (style.width > this.props.initialWidth) {
+            style.width = this.props.initialWidth
+        }
+        if (style.width < this.props.minWidth) {
+            style.width = this.props.minWidth
+        }
+        if (style.height > this.props.initialHeight) {
+            style.height = this.props.initialHeight
+        }
+        if (style.height < this.props.minHeight) {
+            style.height = this.props.minHeight
+        }
+        return (
+            <View {...this.panResponder.panHandlers} style={[{flex: 1, justifyContent: 'center', alignItems: 'center', position: 'absolute', borderStyle: 'solid', borderWidth: 2, borderColor: '#a4a4a4', backgroundColor: 'rgb(0,0,0,0.5)'}, style]}>
+                <View style={{flexDirection: 'row', width: '100%', flex: 1/3, backgroundColor: 'transparent'}}>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingTL ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingTM ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingTR ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                </View>
+                <View style={{flexDirection: 'row', width: '100%', flex: 1/3, backgroundColor: 'transparent'}}>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingML ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingMM ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingMR ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                </View>
+                <View style={{flexDirection: 'row', width: '100%', flex: 1/3, backgroundColor: 'transparent'}}>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingBL ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingBM ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                    <View style={{borderWidth: '#a4a4a4', borderWidth: 0, backgroundColor: draggingBR ? 'transparent' : 'transparent', flex: 1/3, height: '100%'}}></View>
+                </View>
+                <View style={{top: 0, left: 0, width: '100%', height: '100%', position: 'absolute', backgroundColor: 'rgba(0, 0, 0, 0.5)'}}>
+                    <View style={{flex: 1/3, flexDirection: 'row'}}>
+                        <View style={{ flex: 3, borderRightWidth: 1, borderBottomWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid' }}>
+                            <View style={{ position: 'absolute', left: 5, top: 5, borderLeftWidth: 2, borderTopWidth: 2, height: 48, width: 48, borderColor: '#f4f4f4', borderStyle: 'solid' }}/>
+                        </View>
+                        <View style={{ flex: 3, borderRightWidth: 1, borderBottomWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid' }}>
+                        </View>
+                        <View style={{ flex: 3,  borderBottomWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid' }}>
+                            <View style={{ position: 'absolute', right: 5, top: 5, borderRightWidth: 2, borderTopWidth: 2, height: 48, width: 48, borderColor: '#f4f4f4', borderStyle: 'solid' }}/>
+                        </View>
+                    </View>
+                    <View style={{flex: 1/3, flexDirection: 'row'}}>
+                        <View style={{ flex: 3, borderRightWidth: 1, borderBottomWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid' }}>
+                        </View>
+                        <View style={{ flex: 3, borderRightWidth: 1, borderBottomWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid' }}>
+                        </View>
+                        <View style={{ flex: 3,  borderBottomWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid' }}>
+                        </View>
+                    </View>
+                    <View style={{flex: 1/3, flexDirection: 'row'}}>
+                        <View style={{ flex: 3, borderRightWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid', position: 'relative', }}>
+                            <View style={{ position: 'absolute', left: 5, bottom: 5, borderLeftWidth: 2, borderBottomWidth: 2, height: 48, width: 48, borderColor: '#f4f4f4', borderStyle: 'solid' }}/>
+                        </View>
+                        <View style={{ flex: 3, borderRightWidth: 1, borderColor: '#c9c9c9', borderStyle: 'solid' }}>
+                        </View>
+                        <View style={{ flex: 3,  position: 'relative'  }}>
+                            <View style={{ position: 'absolute', right: 5, bottom: 5, borderRightWidth: 2, borderBottomWidth: 2, height: 48, width: 48, borderColor: '#f4f4f4', borderStyle: 'solid' }}/>
+                        </View>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+
+    getTappedItem(x, y) {
+        const { initialLeft, initialTop, initialWidth, initialHeight } = this.state
+        let xPos = parseInt((x - initialLeft) / (initialWidth / 3))
+        let yPos = parseInt((y - initialTop - 64) / (initialHeight / 3))
+
+        let index = yPos * 3 + xPos
+        if (index == 0) {
+            return 'tl';
+        } else if (index == 1) {
+            return 'tm';
+        } else if (index == 2) {
+            return 'tr';
+        } else if (index == 3) {
+            return 'ml';
+        } else if (index == 4) {
+            return 'mm';
+        } else if (index == 5) {
+            return 'mr';
+        } else if (index == 6) {
+            return 'bl';
+        } else if (index == 7) {
+            return 'bm';
+        } else if (index == 8) {
+            return 'br';
+        } else {
+            return '';
+        }
+    }
+
+    // Should we become active when the user presses down on the square?
+    handleStartShouldSetPanResponder = (event) => {
+        return true
+    }
+
+  // We were granted responder status! Let's update the UI
+    handlePanResponderGrant = (event) => {
+        // console.log(event.nativeEvent.locationX + ', ' + event.nativeEvent.locationY)
+
+        let selectedItem = this.getTappedItem(event.nativeEvent.pageX, event.nativeEvent.pageY)
+        if (selectedItem == 'tl') {
+            this.setState({draggingTL: true})
+        } else if (selectedItem == 'tm') {
+            this.setState({draggingTM: true})
+        } else if (selectedItem == 'tr') {
+            this.setState({draggingTR: true})
+        } else if (selectedItem == 'ml') {
+            this.setState({draggingML: true})
+        } else if (selectedItem == 'mm') {
+            this.setState({draggingMM: true})
+        } else if (selectedItem == 'mr') {
+            this.setState({draggingMR: true})
+        } else if (selectedItem == 'bl') {
+            this.setState({draggingBL: true})
+        } else if (selectedItem == 'bm') {
+            this.setState({draggingBM: true})
+        } else if (selectedItem == 'br') {
+            this.setState({draggingBR: true})
+        }
+    }
+
+    // Every time the touch/mouse moves
+    handlePanResponderMove = (e, gestureState) => {
+        // Keep track of how far we've moved in total (dx and dy)
+        this.setState({
+            offsetTop: gestureState.dy,
+            offsetLeft: gestureState.dx,
+        })
+    }
+
+    // When the touch/mouse is lifted
+    handlePanResponderEnd = (e, gestureState) => {
+        const {initialTop, initialLeft, initialWidth, initialHeight, draggingTL, draggingTM, draggingTR, draggingML, draggingMM, draggingMR, draggingBL, draggingBM, draggingBR } = this.state
+
+        const state = {
+            draggingTL: false,
+            draggingTM: false,
+            draggingTR: false,
+            draggingML: false,
+            draggingMM: false,
+            draggingMR: false,
+            draggingBL: false,
+            draggingBM: false,
+            draggingBR: false,
+            offsetTop: 0,
+            offsetLeft: 0,
+        }
+
+        state.initialTop = initialTop + ((draggingTL || draggingTM || draggingTR || draggingMM) ? gestureState.dy : 0)
+        state.initialLeft = initialLeft + ((draggingTL || draggingML || draggingBL || draggingMM) ? gestureState.dx : 0)
+        state.initialWidth = initialWidth + ((draggingTL || draggingML || draggingBL) ? - gestureState.dx : (draggingTM || draggingMM || draggingBM) ? 0 : gestureState.dx)
+        state.initialHeight = initialHeight + ((draggingTL || draggingTM || draggingTR) ? - gestureState.dy : (draggingML || draggingMM || draggingMR) ? 0 : gestureState.dy)
+
+        if (state.initialWidth > this.props.initialWidth) {
+            state.initialWidth = this.props.initialWidth
+        }
+        if (state.initialWidth < this.props.minWidth) {
+            state.initialWidth = this.props.minWidth
+        }
+        if (state.initialHeight > this.props.initialHeight) {
+            state.initialHeight = this.props.initialHeight
+        }
+        if (state.initialHeight < this.props.minHeight) {
+            state.initialHeight = this.props.minHeight
+        }
+
+        this.setState(state)
+        this.props.onLayoutChanged(state.initialTop, state.initialLeft, state.initialWidth, state.initialHeight)
+    }
+}
+
+export default ImageCropOverlay;

package/src/components/Image/Cropper/index.js

@@ -0,0 +1,83 @@
+import React, { useState, useEffect,useMemo,useRef } from '$react';
+import { View, StyleSheet,ImageBackground} from 'react-native';
+import theme from "$theme";
+import ActivityIndicator from "$ecomponents/ActivityIndicator";
+import Label from "$ecomponents/Label";
+import PropTypes from "prop-types";
+import { isNonNullString,defaultStr,defaultObj } from '$cutils';
+import Button from "$ecomponents/Button";
+import Dialog from "$ecomponents/Dialog";
+import ExpoImageManipulator from './ExpoImageManipulator';
+import ImageCropOverlay from './ImageCropOverlay';
+
+
+/***@see : https://docs.expo.dev/versions/latest/sdk/bar-code-scanner/ */
+export default function ImageCropperComponent({src,testID,onCancel,dialogProps}) {
+  testID = defaultStr(testID,"RN_ImageCropperComponent");
+  const [visible,setVisible] = useState(true);
+  dialogProps = Object.assign({},dialogProps);
+  const prevVisible = React.usePrevious(visible);
+  const cancelRef = React.useRef(false);
+  const cancel = ()=>{
+    cancelRef.current = true;
+    setVisible(false);
+  }
+  useEffect(()=>{
+    if(prevVisible === visible) return;
+    if(prevVisible && !visible && cancelRef.current && typeof onCancel =="function"){
+        onCancel();
+    }
+    cancelRef.current = false;
+  },[visible]);
+  return <Dialog 
+    fullPage 
+    actions={[]} 
+    title = {`Rogner l'image`}
+    {...dialogProps}
+    onBackActionPress={cancel}
+    visible = {visible}
+  >
+    <ImageBackground
+        resizeMode="contain"
+        style={styles.imageBackground}
+        source={{ uri : src }}
+    >
+        <ImageCropOverlay onLayoutChanged={(top, left, width, height) => {                                
+                console.log(top,lef,width,height," is to lefff")
+        }} initialWidth={50} initialHeight={50} 
+            initialTop={0} initialLeft={0} 
+            minHeight={100} minWidth={100}
+        />
+    </ImageBackground>  
+  </Dialog>;
+}
+const styles = StyleSheet.create({
+  center : {
+    justifyContent : "center",
+    alignItems  : "center",
+    flexDirection : "column",
+    flex : 1,
+  },
+  row : {
+    flexDirection : "row",
+    justifyContent : "center",
+    alignItems : "center",
+    flexWrap :"wrap",
+  },
+  imageBackground : {
+    flex : 1,
+    width : "100%",
+    height : "100%",
+    justifyContent: 'center', 
+    padding: 20, alignItems: 'center',
+  }
+});
+
+/***
+  @see : https://docs.expo.dev/versions/latest/sdk/camera-next
+*/
+ImageCropperComponent.propTypes = {
+    onScan : PropTypes.func,
+    onGrantAccess : PropTypes.func, //lorsque la permission est allouée
+    onDenyAccess : PropTypes.func, //lorsque la permission est refusée
+}

package/src/components/Image/Editor/index.js

@@ -6,7 +6,6 @@ import {defaultObj} from "$cutils";
 
 const ImageEditorComponent = React.forwardRef((props,ref)=>{
     let {source,uri,onSuccess,imageUri,lockAspectRatio,dialogProps,onDismiss,visible,imageProps,...rest} = props;
-    const isMounted = React.useIsMounted();
     const [context] = React.useState({});
     imageProps = defaultObj(imageProps);
     dialogProps = defaultObj(dialogProps);

package/src/components/Image/index.js

@@ -3,15 +3,15 @@ import Menu from "$ecomponents/Menu";
 import Avatar from "$ecomponents/Avatar";
 import {isDecimal,setQueryParams,isValidURL,defaultDecimal,defaultStr as defaultString,isDataURL,isPromise,defaultBool,isObj,isNonNullString} from "$cutils";
 import notify from "$enotify";
-let maxWidthDiff = 150, maxHeightDiff = 150;
+let maxWidthDiff = 100, maxHeightDiff = 100;
 import {StyleSheet} from "react-native";
 import React from "$react";
 import PropTypes from "prop-types";
 import {isMobileNative} from "$cplatform";
+import {uniqid} from "$cutils";
 //import Signature from "$ecomponents/Signature";
 import Label from "$ecomponents/Label";
-//import Editor from "./Editor";
-import {Component as CameraComponent} from "$emedia/camera";
+//import Cropper from "./Cropper";
 
 import {pickImage,nonZeroMin,canTakePhoto,takePhoto} from "$emedia";
 import addPhoto from "$eassets/add_photo.png";
@@ -48,11 +48,8 @@ export const getUri = (src,onlySting)=>{
 
 export default function ImageComponent(props){
     const [src,setSrc] = React.useState(defaultVal(props.src));
+    const [cropWindowProp,setCropWindowProp] = React.useState(null);
     const prevSrc = React.usePrevious(src);
-    /*const [editorProps,setEditorProps] = React.useState({
-        visible : false,
-        options : {}
-    })*/ 
     const [isDrawing,setIsDrawing] = React.useState(false);
     let {disabled,onMount,defaultSource,editable,onUnmount,label,text,labelProps,readOnly,beforeRemove,
         onChange,draw,round,drawText,drawLabel,rounded,defaultSrc,
@@ -114,8 +111,8 @@ export default function ImageComponent(props){
     if(!imageWidth && !imageHeight){
         imageWidth = imageHeight = rest.size;
     }
-    let cropWidth = nonZeroMin(cropProps.width,width)
-    let cropHeight = nonZeroMin(cropProps.height,height);
+    let cropWidth = nonZeroMin(cropProps.width,imageWidth,width,size)
+    let cropHeight = nonZeroMin(cropProps.height,imageHeight,height,size);
     if(!cropWidth) cropWidth = undefined;
     if(!cropHeight) cropHeight = undefined; 
 
@@ -125,24 +122,26 @@ export default function ImageComponent(props){
         if(cropWidth || cropHeight){
             canCrop = true;
             if(cropWidth) opts.width = cropWidth;
-            else if(cropHeight) opts.height = cropHeight;
+            if(cropHeight) opts.height = cropHeight;
         }
         opts.allowsEditing = canCrop;
-        return opts;
+        return {...cropProps,...opts};
     }
     const handlePickedImage = (image,opts)=>{
         opts = defaultObj(opts);
         if(!isDataURL(image.dataURL)){
             return notify.error(`Le fichier sélectionné est une image non valide`);
         }
-        let diffWidth = image.width - cropWidth - maxWidthDiff,
-        diffHeight = image.height - cropHeight - maxHeightDiff;
-        let canCrop = isMobileNative()? false : ((width && diffWidth > 0) || (height && diffHeight > 0)? true : false);
         const imageSrc = pickUri ? image.uri : image.dataURL;
-        if(canCrop){
-            return context.cropImage({source:image,uri:image.dataURL,...opts}).then((props)=>{
-                setSrc(imageSrc)
-            });
+        if(imageSrc){
+            const diffWidth = image.width - cropWidth - maxWidthDiff,diffHeight = image.height - cropHeight - maxHeightDiff;
+            const canCrop = isMobileNative()? false : ((diffWidth > 0) || (diffHeight > 0)? true : false);
+            if(canCrop){
+                const cProps = getCropProps(opts);
+                return context.cropImage({...cProps,source:image,uri:image.dataURL,src:imageSrc}).then((props)=>{
+                    setSrc(imageSrc)
+                });
+            }
         }
         pickedImageRef.current = image;
         setSrc(imageSrc);
@@ -170,6 +169,11 @@ export default function ImageComponent(props){
         },[src]),
         cropImage : (props)=>{
             return Promise.resolve(props);
+            if(!isMobileNative()){
+                return new Promise((resolve,reject)=>{
+                    setCropWindowProp(props);
+                });
+            }
             return new Promise((resolve,reject)=>{
                 console.log({...editorProps,visible:true,...props},"is editor props");
                 setEditorProps({...editorProps,visible:true,...props})
@@ -263,6 +267,11 @@ export default function ImageComponent(props){
     const _label = withLabel !== false ? defaultString(label) : "";
     const isDisabled = menuItems.length > 0 ? true : false; 
     return <View testID={testID+"_FagmentContainer"}>
+        {false && src && !isMobileNative() && isObj(cropWindowProp) && Object.size(cropWindowProp,true) ? <Cropper
+            src={src}
+            {...cropWindowProp}
+            key = {uniqid("crop-image")}
+        /> : null}
         {!createSignatureOnly ? (<Menu
                 {...menuProps}
                 disabled = {isDisabled}

package/src/screens/Help/openLibraries.js

@@ -1,7 +1,7 @@
 module.exports = {
 	"@fto-consult/expo-ui": {
 		"name": "@fto-consult/expo-ui",
-		"version": "8.46.2",
+		"version": "8.48.0",
 		"repository": {
 			"type": "git",
 			"url": "git+https://github.com/borispipo/expo-ui.git"