@fto-consult/expo-ui 6.0.0 → 6.1.0

package/src/components/Date/Time.js

@@ -44,10 +44,10 @@ export const timeToString = (value,withSeconds)=>{
      return value.substring(0,5);
   }
 export default function TimePickerComponent (props){
-    let {right:customRight,upper,anchorProps,dialogProps,withLabel,inputProps,containerProps,mode,onChange,withSeconds,cancelLabel,confirmLabel,label,text,upperCase,defaultValue,disabled,editable,withModal,readOnly,...rest} = props;
+    let {right:customRight,upper,anchorProps,dialogProps,withLabel,inputProps,containerProps,mode,onChange,withSeconds,cancelLabel,confirmLabel,label,text,upperCase,defaultValue,disabled,withModal,readOnly,...rest} = props;
     rest = defaultObj(rest);
     inputProps = defaultObj(inputProps);
-    const isEditable = disabled !== true && readOnly !== true && editable !== false?true : false;
+    const isEditable = disabled !== true && readOnly !== true?true : false;
     withModal = defaultBool(withModal,true);
     if(!isEditable){
        withModal = false;
@@ -127,7 +127,7 @@ export default function TimePickerComponent (props){
           label = {label}
           right = {right}
           disabled = {disabled}
-          editable = {false}
+          readOnly = {true}
           handleOpacity = {false}
           style = {[rest.style,!disabled && {opacity:1,color:theme.colors.text}]}
           contentContainerProps = {{...defaultObj(rest.contentContainerProps),pointerEvents:'auto'}}

package/src/components/Dialog/confirm/showConfirmOrAlertOrPrompt.js

@@ -23,7 +23,7 @@ export default function showConfirm (p,cb){
         confirm,
         no,
         type,
-        keyboardType,
+        inputMode,
         alertType,
         actions,
         testID,

package/src/components/DragResize/DragResizeBlock.js

@@ -8,7 +8,7 @@ import React, {Component} from 'react';
 import {
   Dimensions,
   View,
-  TouchableWithoutFeedback,
+  Pressable,
 } from 'react-native';
 import PropTypes from 'prop-types';
 
@@ -713,7 +713,7 @@ export class DragResizeBlock extends Component {
           },containerProps.style]}
         testID = {testID}
       >
-        <TouchableWithoutFeedback
+        <Pressable
           onPress={this.onPress}
           testID = {testID+"_TouchableFeedBack"}
         >
@@ -727,7 +727,7 @@ export class DragResizeBlock extends Component {
           >
             {children}
           </View>
-        </TouchableWithoutFeedback>
+        </Pressable>
 
         {isDisabled ? null : this.renderConnectors()}
 

package/src/components/Drawer/DrawerItems/_DrawerItem.js

@@ -81,7 +81,7 @@ const DrawerItem = ({icon,iconProps,borderRadius,color,minimized,contentContaine
         // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
         accessibilityTraits={active ? ['button', 'selected'] : 'button'}
         accessibilityComponentType="button"
-        accessibilityRole="button"
+        role="button"
         accessibilityState={{ selected: active }}
         accessibilityLabel={accessibilityLabel}
       >

package/src/components/Dropdown/index.js

@@ -506,7 +506,7 @@ class DropdownComponent extends AppComponent {
             }
         }
         force = typeof force !== 'boolean'? false : force;
-        if(this.props.disabled === true || this.props.editable ===false || this.props.readOnly === true || (force !== true && this.isLoading())) return;
+        if(this.props.disabled === true || this.props.readOnly === true || (force !== true && this.isLoading())) return;
         if(!this.state.visible){
             if(this.props.withBottomSheet){
                 getContentHeight(this.anchorRef).then(({height})=>{
@@ -548,7 +548,7 @@ class DropdownComponent extends AppComponent {
         return this.hide(cb);
     }
     canHandleFilter(){
-        return this.props.disabled !== true && this.props.readOnly !==true && this.props.editable !== false && this.state.visible ? true : false;
+        return this.props.disabled !== true && this.props.readOnly !==true && this.state.visible ? true : false;
     }
     focus = ()=>{
         if(this.canHandleFilter() && this.inputRef && this.inputRef.current){
@@ -659,7 +659,6 @@ class DropdownComponent extends AppComponent {
             visible: _visible,
             itemProps,
             disabled,
-            editable,
             readOnly,
             defaultValue,
             selectedColor,
@@ -722,13 +721,7 @@ class DropdownComponent extends AppComponent {
         itemProps = defaultObj(itemProps);
         disabled = defaultBool(disabled,false);
         readOnly = defaultBool(readOnly,false);
-        editable = defaultBool(editable,true);
-
-        if(!readOnly){
-            readOnly = editable === false ? true : false;
-            editable = !readOnly;
-        }
-
+        
         listProps = defaultObj(listProps);
         selectedColor = (Colors.isValid(selectedColor)? selectedColor : theme.colors.primaryOnSurface);
         this.selectedColor = selectedColor;
@@ -736,19 +729,19 @@ class DropdownComponent extends AppComponent {
         const {layout:inputLayout,selectedText,visible,isFiltering,filterText} = this.state;
         const self = this,state = this.state;
         const canHandle = !this.isLoading();
-        const canFilter = !disabled && !readOnly && editable && visible;
+        const canFilter = !disabled && !readOnly && visible;
         const isMob = isMobileOrTabletMedia();
         inputProps = defaultObj(inputProps);
         const contentContainerProps = Object.assign({},inputProps.contentContainerProps);
         const containerProps = Object.assign({},inputProps.containerProps);
-        const inputRest = {disabled,editable,label,error}
+        const inputRest = {disabled,readOnly,label,error}
         clearTimeout(this.doSearchFilter);
         this.doSearchFilter = null;
         mode = defaultStr(mode,inputProps.mode);
         const textInputProps = {
             ...inputRest,
             mode,
-            editable,disabled,
+            disabled,
             style : StyleSheet.flatten([styles.input,inputProps.style])
         }
         const dimensions = Dimensions.get("window");
@@ -757,11 +750,11 @@ class DropdownComponent extends AppComponent {
         if(isMob){
             contentContainerHeight = '95%';
         }
-        const iconDisabled = !canHandle || disabled || readOnly ||!editable?true : false;
+        const iconDisabled = !canHandle || disabled || readOnly ?true : false;
         const pointerEvents = iconDisabled?"none":"auto";
         addIconTooltip = defaultStr(addIconTooltip,'Ajouter un élément');
         addIconProps = defaultObj(addIconProps);
-        if(disabled || readOnly || editable === false){
+        if(disabled || readOnly){
             showAdd = false;
         }
         if(typeof showAdd ==='function'){
@@ -912,7 +905,6 @@ class DropdownComponent extends AppComponent {
                         readOnly = {readOnly}
                         //divider = {canHandle}
                         alwaysUseLabel = {renderTag?true : false}
-                        editable = {false}
                         contentContainerProps = {{
                             ...contentContainerProps,
                             pointerEvents:iconDisabled && (!enableCopy && disabled)?'none':'auto',
@@ -975,7 +967,7 @@ class DropdownComponent extends AppComponent {
             restProps.pointerEvents = "auto";
         }
         const renderingItems = this.getItems();
-        const isDisabled = !editable || readOnly || disabled?true:false;
+        const isDisabled = readOnly || disabled?true:false;
         const isBigList = this.isBigList;
         const ListComponent = isBigList ? BigList : List;
         const autoFocus = canAutoFocusSearchField({visible,items:renderingItems});

package/src/components/Expandable/index.js

@@ -110,7 +110,7 @@ const ExpandableComponent = React.forwardRef(({
             borderless = {false}  
             accessibilityTraits="button"
             accessibilityComponentType="button"
-            accessibilityRole="button"
+            role="button"
             style={[styles.container,props.style]}
             onPress={handlePressAction}
             onLongPress={onLongPress}

package/src/components/Fab/GroupComponent.js

@@ -3,8 +3,7 @@ import {
   StyleSheet,
   Animated,
   SafeAreaView,
-  Pressable,
-  TouchableWithoutFeedback,
+  TouchableWithoutFeedback
 } from 'react-native';
 import View from "$ecomponents/View";
 import {FAB,Text,Card,withTheme} from "react-native-paper";
@@ -175,7 +174,7 @@ const FABGroup = ({
           // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
           accessibilityTraits="button"
           accessibilityComponentType="button"
-          accessibilityRole="button"
+          role="button"
           accessibilityState={{ expanded: open }}
           style={StyleSheet.flatten([styles.fab, fabStyle])}
           visible={visible}
@@ -311,7 +310,7 @@ const _FabItem = function({children,label,disabled:customDisabled,pointerEvents,
                  }
                  accessibilityTraits="button"
                  accessibilityComponentType="button"
-                 accessibilityRole="button"
+                 role="button"
                >
                  <Text testID={testID+"_Label"} style={StyleSheet.flatten([{ color},cursorStyle])}>
                    {label}
@@ -346,7 +345,7 @@ const _FabItem = function({children,label,disabled:customDisabled,pointerEvents,
              // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
              accessibilityTraits="button"
              accessibilityComponentType="button"
-             accessibilityRole="button"
+             role="button"
              testID={testID}
              visible={open}
         />

package/src/components/Filter/BetweenComponent.js

@@ -12,7 +12,7 @@ const FilterBetweenComponent = React.forwardRef(({inputProps,contentContainerPro
         ref = {ref}
         {...props}
         contentContainerProps={contentContainerProps}
-        inputProps = {{...defaultObj(inputProps),pointerEvents:"none",editable:false}}
+        inputProps = {{...defaultObj(inputProps),style : [inputProps?.style,{pointerEvents:"none"}],readOnly:true}}
         type ="text"
         format = {undefined}
         onChange = {(e)=>false}

package/src/components/Filter/index.js

@@ -506,7 +506,7 @@ export default class Filter extends AppComponent {
      const ignoreDefaultValue = (isPeriodAction||isBetweenAction) && isNonNullString(defaultValue) && defaultValue.contains("=>");
      rest.defaultValue = defaultValue;
      rest.disabled = rest.readOnly = rest.affix = false;
-     rest.editable = true;
+     rest.readOnly = false;
      rest.style = [style];
      rest.type = type;
      const isMob = isMobileMedia() || withBottomSheet;

package/src/components/Form/Fields/Field.js

@@ -860,7 +860,6 @@ export default class Field extends AppComponent {
             disabled,
             visible,
             readOnly,
-            editable,
             beforeValidate,
             footer,
             archived,
@@ -898,12 +897,12 @@ export default class Field extends AppComponent {
             disabled = true;
             readOnly = true;
             rest.disabled = rest.readOnly = true;
-            rest.editable = false;
+            rest.readOnly = true;
         } else if(this.isEnabledBySymbol()){
             disabled = readOnly = false;
-            editable = true;
+            readOnly = false;
             rest.disabled = rest.readOnly = false;
-            rest.editable = true;
+            rest.readOnly = false;
         } else {    
             const callArgs = {context:this,field:this.name,name:this.name,value:this.validatingValue,validValue:this.state.validValue,...rest,data,props:this.props};
             readOnly = defaultVal(readOnly);
@@ -911,11 +910,7 @@ export default class Field extends AppComponent {
                 readOnly = readOnly.call(this,callArgs);
             } 
             if(!isUndefined(readOnly)) readOnly = readOnly?true:false;
-            if(isFunction(editable)){
-                editable = editable.call(this,callArgs);
-            } 
-            if(isBool(editable)) editable = editable;
-            else rest.editable = readOnly ? false : true;
+            else rest.readOnly = readOnly ? true : false;
             if(isFunction(disabled)){
                 disabled = disabled.call(this,callArgs);
             } 
@@ -925,16 +920,12 @@ export default class Field extends AppComponent {
                 archived = archived.call(this,callArgs);
             }
             if(archived === true){
-                editable = false;
+                readOnly = false;
                 disabled = true;
             }
-            if(readOnly || disabled){
-                editable = false;
-            }
             rest.disabled = disabled;
             rest.readOnly = readOnly;
-            rest.editable = editable;
-            if(disabled || readOnly || !editable){
+            if(disabled || readOnly){
                 this[this.isEditableSymbol] = false;
             }
         }
@@ -966,7 +957,7 @@ export default class Field extends AppComponent {
         format = defaultStr(format);
         tooltip = defaultVal(tooltip,title);
 
-        const isEditable = rest.disabled !== true && rest.readOnly !== true && rest.editable !== false ? true : false;
+        const isEditable = rest.disabled !== true && rest.readOnly !== true ? true : false;
         const hasDefaultValue = isNonNullString(rest.defaultValue) || typeof rest.defaultValue =='number'? true : false;
         const canChangeRight = this.isTextField() && !isEditable && hasDefaultValue;
         if(canChangeRight){

package/src/components/Form/Fields/{IDField.js → IdField.js}

@@ -89,7 +89,7 @@ export default class FormIDField extends TextField {
         props.contentContainerProps.pointerEvents = defaultStr(props.contentContainerProps.pointerEvents,"auto");
         props.enableCopy = typeof props.enableCopy ==='boolean'? props.enableCopy : (props.defaultValue || this.newFieldIdValue ? true : false);
         const {right} = props;
-        props.editable = typeof props.editable =='boolean'? props.editable : typeof props.disabled ==='boolean' ? !!!props.disabled : typeof props.readOnly =="boolean"? !!!props.disabled : false;
+        props.readOnly = typeof props.disabled ==='boolean' ? !!!props.disabled : typeof props.readOnly =="boolean"? !!!props.disabled : false;
         props.right = (props)=>{
             const r = typeof right =='function'? right (props) : React.isValidElement(right)? right : null;
             if(!defValue){

package/src/components/Form/Fields/SelectTableData/Component.js

@@ -82,7 +82,7 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,prepareFilters:
     }
     const foreignKeyColumnValue = props.defaultValue;
     let isDisabled = defaultBool(props.disabled,props.readOnly,false);
-    if(!isDisabled && props.editable === false){
+    if(!isDisabled && props.readOnly === true){
         isDisabled = true;
     }
     if(isUpdate && isNonNullString(foreignKeyColumnValue) && (isDisabled)){

package/src/components/Form/FormData/FormData.js

@@ -247,7 +247,7 @@ export default class FormDataComponent extends AppComponent{
             saveButtonIcon,
             formProps,
             closeAfterSave,
-            editable,
+            readOnly,
             component,
             disabled,
             onValidate,

package/src/components/Form/List/List.js

@@ -262,7 +262,7 @@ export default class FormListComponent extends AppComponent {
             text,
             title,
             indexField,
-            editable,addIcon,
+            readOnly,addIcon,
             addIconLabel,
             onRemove,onSave,
             onDelete,
@@ -347,12 +347,12 @@ export default class FormListComponent extends AppComponent {
             selectedRowsActions = selectedRowsActions(args);
         }
         selectedRowsActions = isObjOrArray(selectedRowsActions)? selectedRowsActions : []
-        let editable = defaultVal(datagridProps.editable,this.props.editable);
+        let readOnly = defaultVal(datagridProps.readOnly,this.props.readOnly);
         let deletable = defaultVal(datagridProps.deletable,this.props.deletable);
         let _sActs = isObj(selectedRowsActions)? {} : [];
-        if(editable){
+        if(!readOnly){
             let _edit = {
-                text : isNonNullString(editable)? editable:'Modifier l\'élément',
+                text : isNonNullString(readOnly)? readOnly:'Modifier l\'élément',
                 icon : 'pencil',
                 onPress : (args)=>{
                     let {selectedRows} = args;
@@ -360,7 +360,7 @@ export default class FormListComponent extends AppComponent {
                     let index = keys[0];
                     let data = Object.assign({},selectedRows[index]);
                     let pArgs = {...args,data,index,allData:allData,selectedRows};
-                    const canEdit = defaultVal(isFunction(editable)?editable.call(context,pArgs):editable,true)
+                    const canEdit = defaultVal(isFunction(readOnly)?readOnly.call(context,pArgs):readOnly,false)
                     if(canEdit){
                         return this.show(pArgs);
                     }
@@ -434,7 +434,7 @@ export default class FormListComponent extends AppComponent {
             renderAvatar,context,primaryText,show,title,indexField,
             allData : customAllData,
             controlled,
-            editable,addIcon,addIconLabel,onRemove,onSave,onDelete,
+            readOnly,addIcon,addIconLabel,onRemove,onSave,onDelete,
             beforeSave,beforeRemove,formDataProps,formName,
             itemProps,avatarProps,secondaryText,content,
             itemContainerProps,
@@ -495,14 +495,14 @@ export default class FormListComponent extends AppComponent {
         
         let canRenderTable =  this.canRenderDatagrid(fields);
 
-        if(typeof editable =='undefined'){
-            editable = true;
+        if(typeof readOnly =='undefined'){
+            readOnly = false;
         }
         if(typeof deletable =='undefined'){
             deletable = true;
         }
         const deletableFunc = typeof deletable =='function'? args => defaultVal(deletable.call(context,args,true)) : x => deletable;
-        const editableFunc = typeof editable =='function'? args => defaultVal(deletable.call(context,args),true) : x => editable;
+        const readOnlyFunc = typeof readOnly =='function'? args => defaultVal(deletable.call(context,args),false) : x => readOnly;
         const isCurrentDisplayTable = canRenderTable && this.state.display === 'table';
         let listContent = null;
         if(isCurrentDisplayTable){
@@ -513,7 +513,7 @@ export default class FormListComponent extends AppComponent {
             },datagridProps)
             dgProps.progressbar = defaultVal(dgProps.progressbar,<Datagrid.LinesProgressBar/>)
             delete dgProps.deletable;
-            delete dgProps.editable;
+            delete dgProps.readOnly;
             let _fields = extendObj(true,{},fields,datagridProps.fields)
             this.restDatagridProps = dgProps;
             this._onRowsClick = dgProps.onRowPress;
@@ -572,7 +572,7 @@ export default class FormListComponent extends AppComponent {
                                 counter++;
                                 const pArgs = {avatarProps,context,itemProps,data:data,index,allData:allData};
                                 const deletable = deletableFunc(pArgs),
-                                      editable = editableFunc(pArgs);
+                                      readOnly = readOnlyFunc(pArgs);
                                 let avatar = renderAvatar.call(context,pArgs);
                                 const avatarProps = Object.assign({},avatarProps);
                                 if(isObj(avatar)){
@@ -597,7 +597,7 @@ export default class FormListComponent extends AppComponent {
                                     index,
                                     _index,
                                     deletable,
-                                    editable,
+                                    readOnly,
                                     key,
                                     props : {
                                         ...itemProps,
@@ -612,7 +612,7 @@ export default class FormListComponent extends AppComponent {
                             return itx;
                         }}
                         renderItem = {({item})=>{
-                            const {data,title,description,key,_index,props,index,editable,deletable} = item;
+                            const {data,title,description,key,_index,props,index,readOnly,deletable} = item;
                             const titleText = React.getTextContent(title);
                             return <View key={key} testID={testID+".Cell"+key} style={[theme.styles.w100]}>
                                 <Surface key={key} elevation={5} {...itemContainerProps} style={[styles.itemContainer,itemContainerProps.style]}>
@@ -625,9 +625,9 @@ export default class FormListComponent extends AppComponent {
                                         description={description}
                                         descriptionStyle = {[{color:theme.colors.text},props.descriptionStyle]}
                                         style = {[props.style,styles.item]}
-                                        right = {!editable && !deletable?undefined : (rProps)=>{
+                                        right = {readOnly && !deletable?undefined : (rProps)=>{
                                             return <View {...rProps} style={[styles.itemRight]}>
-                                                {!editable?null:<Icon title={"Modifier ["+titleText+"]"} name={"pencil"} color={theme.colors.secondary} onPress = {(e)=>{
+                                                {readOnly?null:<Icon title={"Modifier ["+titleText+"]"} name={"pencil"} color={theme.colors.secondary} onPress = {(e)=>{
                                                     React.stopEventPropagation(e);
                                                     this.show({data:{...data},index,_index,allData,context})
                                                 }} ></Icon>} 

package/src/components/Grid/Cell.js

@@ -111,7 +111,7 @@ GridCellComponent.propTypes = {
         PropTypes.number,
     ]),
     withSurface : PropTypes.bool,
-    elevation : PropTypes.number,///l'elévation pour le box shadow
+    elevation : PropTypes.number,
     contentProps : PropTypes.object,
 }
 const styles = StyleSheet.create({

package/src/components/HeavyScreen/index.js

@@ -1,15 +1,12 @@
 import React from '$react';
 import {useAfterInteractions }  from "./utils";
-import { Transition, Transitioning } from 'react-native-reanimated'
+import { Transition } from 'react-native-reanimated'
 import PropTypes from "prop-types";
+import {Animated} from "react-native";
 import { StylePropTypes } from '$theme';
 import {isNumber,defaultStr} from "$cutils";
 
 const OptimizedHeavyScreen = React.forwardRef(({
-  transition = (<Transition.Together>
-      <Transition.Change interpolation="easeInOut" />
-      <Transition.In type="fade" />
-    </Transition.Together>),
   style,
   children:cChildren,
   isLoading,
@@ -26,14 +23,14 @@ const OptimizedHeavyScreen = React.forwardRef(({
   if(enabled === false) return children;
   placeholder = React.isComponent(Placeholder)? <Placeholder /> : React.isValidElement(Placeholder)? Placeholder :  null;
   return (
-    <Transitioning.View
+    <Animated.View
       testID={defaultStr(testID,'RN_OptimizedHeavyScreen')}
-      transition={transition}
+      //transition={transition}
       style={[{flex:1},style]}
       ref={React.useMergeRefs(transitionRef,ref)}
     >
       {areInteractionsComplete && isLoading !==true ? (children) :  placeholder}
-    </Transitioning.View>
+    </Animated.View>
   )
 });
 

package/src/components/Icon/Icon.js

@@ -6,7 +6,7 @@ import React from "$react";
 import {IconButton} from "react-native-paper"
 
 const IconComponentRef = React.forwardRef((props,ref)=>{
-    let {icon,style,Component,button,color,name,...rest} = props;
+    let {icon,style,Component,button,color,name,containerColor,...rest} = props;
     icon = defaultVal(icon,name);
     if(isNonNullString(icon)){
         icon = icon.trim().ltrim("")
@@ -22,14 +22,22 @@ const IconComponentRef = React.forwardRef((props,ref)=>{
     if(button === false){
         flattenedStyle.borderRadius = 0;
     }
+    const C = React.isComponent(Component)?Component:IconButton;
     const iconColor = Colors.isValid(color) ? color : Colors.isValid(rest.iconColor)? rest.iconColor : Colors.isValid(flattenedStyle.color)? flattenedStyle.color : theme.colors.text
+    const restP = {};
+    if(C == IconButton){
+        restP.iconColor = iconColor;
+        restP.containerColor = Colors.isValid(containerColor)? containerColor : Colors.isValid(flattenStyle.backgroundColor) ? flattenStyle.backgroundColor : "transparent";
+    } else {
+        restP.color = iconColor; 
+    }
     return <Tooltip 
         animated 
-        {...rest}  
-        color={iconColor}
-        iconColor = {iconColor} 
+        {...restP}
+        {...rest}
+        testID = {defaultStr(rest.testID,"RN_IconComponent")}
         style = {flattenedStyle}
-        Component={React.isComponent(Component)?Component:IconButton}
+        Component={C}
         ref = {ref}
     />
 });

package/src/components/Icon/IconButton.js

@@ -69,7 +69,7 @@ const IconButtonComponent = ({
         // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
         accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
         accessibilityComponentType="button"
-        accessibilityRole="button"
+        role="button"
         accessibilityState={{ disabled }}
         disabled={disabled}
         hitSlop={

package/src/components/Image/index.js

@@ -55,7 +55,7 @@ export default function ImageComponent(props){
     })*/ 
     const [isDrawing,setIsDrawing] = React.useState(false);
     let {disabled,onMount,defaultSource,onUnmount,label,text,labelProps,readOnly,beforeRemove,
-        onChange,draw,round,drawText,drawLabel,rounded,editable,defaultSrc,
+        onChange,draw,round,drawText,drawLabel,rounded,defaultSrc,
         createSignatureOnly,pickImageProps,width,height,cropProps,size,resizeProps,containerProps,
         menuProps,pickUri,drawProps,imageProps,length,testID,...rest} = props;
     rest = defaultObj(rest);
@@ -72,9 +72,8 @@ export default function ImageComponent(props){
     drawProps = defaultObj(drawProps);
     const flattenStyle = StyleSheet.flatten(props.style) || {};
     defaultSrc = defaultVal(defaultSrc);
-    editable = defaultBool(editable,false);
     if(disabled){
-        editable = false;
+        readOnly = true;
     }
     React.useEffect(()=>{
         if(src == props.src) return;
@@ -211,7 +210,7 @@ export default function ImageComponent(props){
     imageProps = defaultObj(imageProps);
     testID = defaultStr(testID,"RN_ImageComponent");
     let menuItems = []
-    if(editable){
+    if(!readOnly){
         menuItems.push({
             label : 'Sélect Image',
             icon :'image-search',
@@ -232,7 +231,7 @@ export default function ImageComponent(props){
         }
     })();
 
-    if(canUpdate && editable){
+    if(canUpdate && !readOnly){
         menuItems.push({
             key : 'has-photo',
             label : 'Retirer la photo',
@@ -240,7 +239,7 @@ export default function ImageComponent(props){
             onPress : x=> context.deleteImage()
         })
     }
-    if(false && defaultBool(draw ,true) && editable){
+    if(false && defaultBool(draw ,true) && !readOnly){
         menuItems.push({
             key : "drawImageCustom",
             label : defaultString(drawText,drawLabel,'Faire un dessin'),
@@ -308,7 +307,7 @@ const styles = StyleSheet.create ({
 ImageComponent.propTypes = {
     containerProps : PropTypes.object,//les props du container entre le lable et l'image rendu
     menuProps : PropTypes.object, ///les props du menu d'édition du composant,
-    editable : PropTypes.bool,
+    readOnly : PropTypes.bool,
     disabled: PropTypes.bool,
     pickUri : PropTypes.bool,////si l'uri sera retournée lorsqu'on pick l'image en lieu et place du dataURL
     imageProps : PropTypes.object, ///les props supplémentaires du composant Image

package/src/components/Label/index.js

@@ -10,7 +10,7 @@ const defaultSelectable = canTextBeSelectable();
 
 export const EllipsizeMode = {'head':'head','middle':'middle', 'tail':'tail' , 'clip':'clip'}
 
-const LabelComponent = React.forwardRef(({ children,color,upperCase,fontSize,testID,wrap,nativeID,wrapText,error,underlined,splitText,secondary,primary,bold,textBold,disabled,text,style,...rest},ref)=> {
+const LabelComponent = React.forwardRef(({ children,color,upperCase,fontSize,testID,wrap,id,wrapText,error,underlined,splitText,secondary,primary,bold,textBold,disabled,text,style,...rest},ref)=> {
     children = defaultVal(children,text);
     let isText = false;
     if(!React.isValidElement(children) && Array.isArray(children) && children.length){
@@ -43,7 +43,7 @@ const LabelComponent = React.forwardRef(({ children,color,upperCase,fontSize,tes
     
     style = Object.assign({},StyleSheet.flatten(style));
     testID = defaultStr(testID,"RN_LabelComponent");
-    const restProps = {nativeID};
+    const restProps = {id};
     if(splitText){
         restProps.numberOfLines = defaultNumber(restProps.numberOfLines,1);
         restProps.ellipsizeMode = defaultStr(restProps.ellipsizeMode,'tail');
@@ -80,8 +80,8 @@ const LabelComponent = React.forwardRef(({ children,color,upperCase,fontSize,tes
     }
     if(React.isValidElement(children)){
         if(!hasP) {
-            if(nativeID || ref){
-                return <View ref = {ref} testID = {testID} nativeID={nativeID}>{children}</View>
+            if(id || ref){
+                return <View ref = {ref} testID = {testID} id={id}>{children}</View>
             }
             return <>{children}</>
         }

package/src/components/Menu/Item.js

@@ -84,7 +84,7 @@ const MenuItemComponent = React.forwardRef(({
       disabled={disabled}
       testID={testID}
       accessibilityLabel={accessibilityLabel}
-      accessibilityRole="menuitem"
+      role="menuitem"
       accessibilityState={{ disabled }}
       pointerEvents = {pointerEvents}
     >

package/src/components/Menu/Menu.js

@@ -5,13 +5,13 @@ import {
   Platform,
   StyleSheet,
   Animated,
-  BackHandler,
   Dimensions,
   Easing,
   I18nManager,
   TouchableWithoutFeedback,
   findNodeHandle,
 } from 'react-native';
+import BackHandler from "$ecomponents/BackHandler";
 import PropTypes from "prop-types";
 import { withTheme,Surface,Portal} from 'react-native-paper';
 //import Surface from "$components/Surface";
@@ -475,7 +475,7 @@ class _Menu extends AppComponent {
             {rendered ? <TouchableWithoutFeedback
               testID={testID+"_TouchableWithoutFeedBack"}
               accessibilityLabel={overlayAccessibilityLabel}
-              accessibilityRole="button"
+              role="button"
               onPress={onDismiss}
               style = {[hiddenStyle]}
             >