@fto-consult/expo-ui 5.11.24 → 5.12.0

package/babel.config.js

@@ -62,4 +62,4 @@ module.exports = function(api,opts) {
       ['react-native-reanimated/plugin'],
     ],
   };
-};
+};

package/package.json

@@ -1,123 +1,122 @@
-{
-  "name": "@fto-consult/expo-ui",
-  "version": "5.11.24",
-  "description": "Bibliothèque de composants UI Expo,react-native",
-  "main": "index.js",
-  "scripts": {
-    "publish1": "npm publish --access=public",
-    "unpublish": "npm -f unpublish @fto-consult/expo-ui",
-    "build-web": "",
-    "dev": "npx expo start -c --no-minify",
-    "start": "npx expo start --dev --no-minify",
-    "start-d": "npx expo start -c --no-dev --no-minify",
-    "start-p": "npm run start-d",
-    "expo-start-client": "npx expo start --dev --no-minify --dev-client",
-    "start-m": "npx expo start - c--dev--no -minify",
-    "android": "npx expo start --android -c",
-    "ios": "npx expo start --ios",
-    "web": "npx expo start --web",
-    "web-c": "npx expo start --web -c",
-    "eject": "expo eject",
-    "emulator": "npm run android-emulator",
-    "web-server": "npx serve web-build",
-    "build-android": "eas build --clear-cache -p android --profile preview",
-    "build-android-local": "eas build --platform android --local",
-    "build-android-dist": "eas build --clear-cache -p android",
-    "build-ios": "eas build --clear-cache -p ios --profile preview",
-    "build-ios-dist": "eas build --clear-cache -p ios",
-    "install-apk": "adb -s emulator-5554 install myapp.apk",
-    "android-emulator": "emulator -avd EMULATOR",
-    "flipper": "npx cross-env METRO_SERVER_PORT=19000 E:\\Studies\\react-native\\debugger\\Flipper-win\\Flipper.exe",
-    "test:build": "electron-webpack && electron-builder --dir -c.compression=store -c.mac.identity=null",
-    "compile-electron": "webpack --env platform=electron",
-    "compile-electron-p": "webpack --config ./electron/webpack.config.js --mode=production",
-    "electron": "electron ./electron",
-    "logcat": "adb -d logcat com.ftc.apps.salite1:E > errors.txt",
-    "logcat-export": "adb -d logcat com.ftc.apps.salite1 *:S > logcat.txt",
-    "electron-c": "npm run compile-electron && npm run electron",
-    "electron-p": "npm run compile-electron-p && npm run electron",
-    "update-app-version": "node ./update-app-version.js",
-    "find-licenses": "node ./find-licenses.js",
-    "fix-dependencies": "expo-cli doctor --fix-dependencies",
-    "delete-node-modules": "rimraf ./**/node_modules",
-    "modifier-url-remote-git": "git remote set-url origin 'https://borispipo@github.com/borispipo/smart-eneo.git'"
-  },
-  "bin": "./bin/index.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/borispipo/expo-ui.git"
-  },
-  "keywords": [
-    "Expo",
-    "React-Native"
-  ],
-  "author": "Boris Fouomene",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/borispipo/expo-ui/issues"
-  },
-  "homepage": "https://github.com/borispipo/expo-ui#readme",
-  "dependencies": {
-    "@emotion/native": "^11.11.0",
-    "@expo/html-elements": "^0.2.0",
-    "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^3.18.31",
-    "@gorhom/portal": "^1.0.14",
-    "@pchmn/expo-material3-theme": "^1.0.1",
-    "@react-native-async-storage/async-storage": "^1.17.11",
-    "@react-native-community/datetimepicker": "^6.7.3",
-    "@react-native-community/netinfo": "^9.3.7",
-    "@react-native/assets-registry": "^0.72.0",
-    "@react-navigation/native": "^6.1.6",
-    "@react-navigation/native-stack": "^6.9.12",
-    "@shopify/flash-list": "^1.4.0",
-    "apexcharts": "^3.41.0",
-    "expo": "^48.0.19",
-    "expo-camera": "^13.2.1",
-    "expo-clipboard": "^4.1.2",
-    "expo-font": "^11.1.1",
-    "expo-image-picker": "^14.1.1",
-    "expo-linking": "^4.0.1",
-    "expo-sqlite": "^11.1.1",
-    "expo-status-bar": "^1.4.4",
-    "expo-system-ui": "^2.2.1",
-    "expo-web-browser": "^12.1.1",
-    "file-saver": "^2.0.5",
-    "fs-extra": "^11.1.1",
-    "google-libphonenumber": "^3.2.32",
-    "htmlparser2-without-node-native": "^3.9.2",
-    "process": "^0.11.10",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-content-loader": "^6.2.1",
-    "react-dom": "^18.2.0",
-    "react-native": "^0.71.3",
-    "react-native-big-list": "^1.6.1",
-    "react-native-blob-util": "^0.17.0",
-    "react-native-gesture-handler": "~2.9.0",
-    "react-native-iphone-x-helper": "^1.3.1",
-    "react-native-mime-types": "^2.3.0",
-    "react-native-paper": "^5.9.1",
-    "react-native-paper-dates": "^0.18.12",
-    "react-native-reanimated": "~2.14.4",
-    "react-native-safe-area-context": "^4.5.3",
-    "react-native-screens": "^3.20.0",
-    "react-native-svg": "13.4.0",
-    "react-native-web": "~0.18.7",
-    "react-native-webview": "^11.26.0",
-    "react-virtuoso": "^4.3.11",
-    "sharp-cli": "^2.1.0",
-    "tippy.js": "^6.3.7",
-    "websql": "^2.0.3",
-    "xlsx": "^0.18.5"
-  },
-  "devDependencies": {
-    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@babel/preset-react": "^7.18.6",
-    "@expo/metro-config": "^0.7.1",
-    "@expo/webpack-config": "^18.0.1",
-    "babel-plugin-inline-dotenv": "^1.7.0",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "babel-plugin-transform-inline-environment-variables": "^0.4.4"
-  }
-}
+{
+  "name": "@fto-consult/expo-ui",
+  "version": "5.12.0",
+  "description": "Bibliothèque de composants UI Expo,react-native",
+  "main": "index.js",
+  "scripts": {
+    "publish1": "npm publish --access=public",
+    "unpublish": "npm -f unpublish @fto-consult/expo-ui",
+    "build-web": "",
+    "dev": "npx expo start -c --no-minify",
+    "start": "npx expo start --dev --no-minify",
+    "start-d": "npx expo start -c --no-dev --no-minify",
+    "start-p": "npm run start-d",
+    "expo-start-client": "npx expo start --dev --no-minify --dev-client",
+    "start-m": "npx expo start - c--dev--no -minify",
+    "android": "npx expo start --android -c",
+    "ios": "npx expo start --ios",
+    "web": "npx expo start --web",
+    "web-c": "npx expo start --web -c",
+    "eject": "expo eject",
+    "emulator": "npm run android-emulator",
+    "web-server": "npx serve web-build",
+    "build-android": "eas build --clear-cache -p android --profile preview",
+    "build-android-local": "eas build --platform android --local",
+    "build-android-dist": "eas build --clear-cache -p android",
+    "build-ios": "eas build --clear-cache -p ios --profile preview",
+    "build-ios-dist": "eas build --clear-cache -p ios",
+    "install-apk": "adb -s emulator-5554 install myapp.apk",
+    "android-emulator": "emulator -avd EMULATOR",
+    "flipper": "npx cross-env METRO_SERVER_PORT=19000 E:\\Studies\\react-native\\debugger\\Flipper-win\\Flipper.exe",
+    "test:build": "electron-webpack && electron-builder --dir -c.compression=store -c.mac.identity=null",
+    "compile-electron": "webpack --env platform=electron",
+    "compile-electron-p": "webpack --config ./electron/webpack.config.js --mode=production",
+    "electron": "electron ./electron",
+    "logcat": "adb -d logcat com.ftc.apps.salite1:E > errors.txt",
+    "logcat-export": "adb -d logcat com.ftc.apps.salite1 *:S > logcat.txt",
+    "electron-c": "npm run compile-electron && npm run electron",
+    "electron-p": "npm run compile-electron-p && npm run electron",
+    "update-app-version": "node ./update-app-version.js",
+    "find-licenses": "node ./find-licenses.js",
+    "fix-dependencies": "expo-cli doctor --fix-dependencies",
+    "delete-node-modules": "rimraf ./**/node_modules",
+    "modifier-url-remote-git": "git remote set-url origin 'https://borispipo@github.com/borispipo/smart-eneo.git'"
+  },
+  "bin": "./bin/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/borispipo/expo-ui.git"
+  },
+  "keywords": [
+    "Expo",
+    "React-Native"
+  ],
+  "author": "Boris Fouomene",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/borispipo/expo-ui/issues"
+  },
+  "homepage": "https://github.com/borispipo/expo-ui#readme",
+  "dependencies": {
+    "@emotion/native": "^11.11.0",
+    "@expo/html-elements": "^0.5.1",
+    "@expo/vector-icons": "^13.0.0",
+    "@fto-consult/common": "^3.18.32",
+    "@gorhom/portal": "^1.0.14",
+    "@pchmn/expo-material3-theme": "^1.0.1",
+    "@react-native-async-storage/async-storage": "1.17.11",
+    "@react-native-community/datetimepicker": "6.7.3",
+    "@react-native-community/netinfo": "9.3.7",
+    "@react-native/assets-registry": "^0.72.0",
+    "@react-navigation/native": "^6.1.6",
+    "@react-navigation/native-stack": "^6.9.12",
+    "@shopify/flash-list": "1.4.0",
+    "apexcharts": "^3.41.0",
+    "expo": "^48.0.19",
+    "expo-camera": "~13.2.1",
+    "expo-clipboard": "~4.1.2",
+    "expo-font": "~11.1.1",
+    "expo-image-picker": "~14.1.1",
+    "expo-linking": "~4.0.1",
+    "expo-sqlite": "~11.1.1",
+    "expo-status-bar": "~1.4.4",
+    "expo-system-ui": "~2.2.1",
+    "expo-web-browser": "~12.1.1",
+    "file-saver": "^2.0.5",
+    "fs-extra": "^11.1.1",
+    "google-libphonenumber": "^3.2.32",
+    "htmlparser2-without-node-native": "^3.9.2",
+    "process": "^0.11.10",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-content-loader": "^6.2.1",
+    "react-dom": "^18.2.0",
+    "react-native": "0.71.8",
+    "react-native-big-list": "^1.6.1",
+    "react-native-blob-util": "^0.18.3",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-iphone-x-helper": "^1.3.1",
+    "react-native-mime-types": "^2.3.0",
+    "react-native-paper": "^5.9.1",
+    "react-native-paper-dates": "^0.18.12",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0",
+    "react-native-svg": "13.4.0",
+    "react-native-web": "~0.18.10",
+    "react-native-webview": "11.26.0",
+    "react-navigation": "^4.4.4",
+    "react-virtuoso": "^4.3.11",
+    "sharp-cli": "^4.1.1",
+    "tippy.js": "^6.3.7",
+    "websql": "^2.0.3",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@expo/metro-config": "^0.7.1",
+    "@expo/webpack-config": "^18.0.1",
+    "babel-plugin-inline-dotenv": "^1.7.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4"
+  }
+}

package/readMe.md

@@ -1,7 +1,7 @@
 ## Installation des dépendences, packages de dévéloppement
 
 ```javascript
-npm i --D @babel/plugin-proposal-export-namespace-from  @babel/preset-react babel-plugin-inline-dotenv babel-plugin-module-resolver babel-plugin-transform-inline-environment-variables @expo/metro-config @expo/webpack-config
+npm i --D @babel/preset-react babel-plugin-inline-dotenv babel-plugin-module-resolver babel-plugin-transform-inline-environment-variables @expo/metro-config @expo/webpack-config
 ```
 
 ## **#ELECTRON**

package/src/auth/avatarProps/index.js

@@ -5,7 +5,7 @@ import {isNativeMobile} from "$platform";
 import defaultSrc from "./defaultAvatar";
 export default {
     accordion:false,
-    editable : !isNativeMobile(),
+    readOnly : isNativeMobile(),
     text : 'Avatar',
     type : 'image',
     defaultSrc,

package/src/components/AppBar/Content.js

@@ -1,5 +1,5 @@
 import React from '$react';
-import {Platform,StyleSheet,TouchableWithoutFeedback,View} from 'react-native';
+import {Platform,StyleSheet,Pressable,View} from 'react-native';
 import Label from "$ecomponents/Label";
 import theme,{Colors,StyleProp} from "$theme";
 import PropTypes from "prop-types";
@@ -30,7 +30,7 @@ const AppbarContent = React.forwardRef(({
   const subtitleColor = Colors.setAlpha(titleTextColor,0.7);
 
   return (
-    <TouchableWithoutFeedback testID={testID+"_Container"} {...defaultObj(containerProps)} onPress={onPress} disabled={!onPress}>
+    <Pressable testID={testID+"_Container"} {...defaultObj(containerProps)} onPress={onPress} disabled={!onPress}>
       <View
         pointerEvents="box-none"
         style={[styles.container, style]}
@@ -54,7 +54,7 @@ const AppbarContent = React.forwardRef(({
           numberOfLines={1}
           accessible
           // @ts-ignore Type '"heading"' is not assignable to type ...
-          accessibilityRole={Platform.OS === 'web' ? 'heading' : 'header'}
+          role={Platform.OS === 'web' ? 'heading' : 'header'}
         >
           {title}
         </Label>
@@ -69,7 +69,7 @@ const AppbarContent = React.forwardRef(({
           </Label>
         ) : null}
       </View>
-    </TouchableWithoutFeedback>
+    </Pressable>
   );
 });
 

package/src/components/AppBar/index.js

@@ -7,7 +7,7 @@ import theme,{Colors,flattenStyle} from "$theme";
 import {StyleSheet} from "react-native";
 import {goBack as navGoBack,useNavigation,useRoute,useScreenOptions } from "$cnavigation";
 import PropTypes from "prop-types";
-import { Dimensions,View,TouchableWithoutFeedback} from "react-native";
+import { Dimensions,View,Pressable} from "react-native";
 import Content from "./Content";
 import Icon from "$ecomponents/Icon";
 import {Elevations} from "$ecomponents/Surface";
@@ -81,9 +81,9 @@ const AppBarComponent = React.forwardRef((props,ref)=> {
     }
     backAction =  React.isValidElement(backAction)? backAction : null;
     if(!backAction && BackActionComponent){
-      backAction = <BackActionComponent back={options.back} ref={backActionRef} {...backActionProps} onPress={onBackActionPress} />
+      backAction = <BackActionComponent containerColor="transparent" testID="RN_AppBarBackAction" back={options.back} ref={backActionRef} {...backActionProps} onPress={onBackActionPress} />
     } else if(backAction){
-        backAction = <TouchableWithoutFeedback
+        backAction = <Pressable
           {...backActionProps}
           ref = {backActionRef}
           onPress={onBackActionPress}
@@ -114,23 +114,30 @@ const AppBarComponent = React.forwardRef((props,ref)=> {
     titleProps = defaultObj(titleProps);
     React.setRef(ref,context);
     testID = defaultStr(testID,"RN_AppBarComponent")
+    const renderedActions = renderSplitedActions(splitedActions,{
+      ...defaultObj(menuProps,appBarProps.menuProps),
+      anchorProps : {
+       style : anchorStyle,
+       color : anchorStyle.color,
+      }
+   });
+   const renderedRight = React.isValidElement(rightContent) && rightContent || right;
+   const hasRight = React.isValidElement(renderedActions) || React.isValidElement(renderedRight);
     return (
       <Appbar.Header elevation={elevation} {...appBarProps}  testID={testID} style={[styles.header,{backgroundColor},elevStyle,appBarProps.style]} onLayout={onPageResize}>
-        {backAction}
-        <Content {...defaultObj(appBarProps.contentProps)} 
-            title={title}
-            titleProps = {{...titleProps,style:[styles.title,{color:primaryText},titleProps.style]}}
-            subtitle = {defaultVal(subtitle,params.subtitle,options.subtitle)}
-            subtitleProps = {subtitleProps}
-        />
-        {renderSplitedActions(splitedActions,{
-           ...defaultObj(menuProps,appBarProps.menuProps),
-           anchorProps : {
-            style : anchorStyle,
-            color : anchorStyle.color,
-           }
-        })}
-        {React.isValidElement(rightContent) && rightContent || right}
+        <View style={styles.title2Back} testID={testID+"_AppBarBack2Titlte"}>
+          {backAction}
+          <Content {...defaultObj(appBarProps.contentProps)} 
+              title={title}
+              titleProps = {{...titleProps,style:[styles.title,{color:primaryText},titleProps.style]}}
+              subtitle = {defaultVal(subtitle,params.subtitle,options.subtitle)}
+              subtitleProps = {subtitleProps}
+          />
+        </View>
+        {hasRight ? <View testID={testID+"_Actions"} style={styles.actions2right}>
+          {renderedActions}
+          {renderedRight}
+        </View> : null}
       </Appbar.Header>
     );
 });
@@ -144,9 +151,23 @@ const styles = StyleSheet.create({
     fontSize : TITLE_FONT_SIZE,
     fontWeight : 'bold'
   },
+  title2Back : {
+    flexDirection : "row",
+    justifyContent : "start",
+    alignItems : "center",
+  },
+  actions2right : {
+    flexDirection : "row",
+    justifyContent : "start",
+    alignItems : "center",
+  },
   header : {
     paddingHorizontal : 5,
     paddingRight : 10,
+    justifyContent : "space-between",
+    alignItems : "center",
+    flexDirection : "row",
+    w : "100%"
   },
 })
 

package/src/components/BottomSheet/Sheet.js

@@ -17,9 +17,8 @@ import View from "$ecomponents/View";
 import {Easing} from "react-native";
 import Portal from "$ecomponents/Portal";
 import { ScrollView } from "react-native";
-
+import BackHandler from "$ecomponents/BackHandler";
 import {
-  BackHandler,
   TouchableOpacity,
   Animated,
   PanResponder,

package/src/components/Button/index.js

@@ -50,7 +50,7 @@ const ButtonComponent = React.forwardRef((prs,ref) => {
     accessible,
     backgroundColor,
     borderColor,
-    accessibilityRole,
+    role,
     contentContainerProps,
     loadingProps,
     rounded,
@@ -243,7 +243,7 @@ const ButtonComponent = React.forwardRef((prs,ref) => {
                     // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
                     accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
                     accessibilityComponentType="button"
-                    accessibilityRole={disabled?accessibilityRole || "button":undefined}
+                    role={disabled?role || "button":undefined}
                     accessibilityState={{ disabled }}
                     accessible={accessible}
                     disabled={disabled}
@@ -254,7 +254,7 @@ const ButtonComponent = React.forwardRef((prs,ref) => {
                   >
                     <View testID={testID+"_Content"} {...contentProps} style={[styles.content, contentStyle,noPadding && theme.styles.noPadding,noMargin && theme.styles.noMargin]}>
                       {React.isValidElement(left)? left : typeof left =='function' ?left(leftRProps):null}
-                      {icon && isLoading !== true ? (
+                      {icon && isLoading !== true && false ? (
                         <View style={[iconStyle,{color:textColor},iconProps.style]} testID={testID+"_IconContainer"}>
                           {React.isValidElement(icon)?icon : <Icon
                             testID={testID+"_Icon"}

package/src/components/Checkbox/index.js

@@ -37,7 +37,6 @@ const CheckboxComponent = React.forwardRef((props,ref)=>{
         labelStyle,
         helperText,
         position,
-        editable,
         disabled,
         readOnly,
         primaryOnCheck,
@@ -48,7 +47,7 @@ const CheckboxComponent = React.forwardRef((props,ref)=>{
         ...p
     } = props;
     disabled = defaultBool(disabled,false);
-    const isEditable = !disabled && readOnly !== true && editable !== false ? true : false;
+    const isEditable = !disabled && readOnly !== true ? true : false;
     const pointerEvents = isEditable ? "auto" : "none";
     p = defaultObj(p);
     checkedValue = defaultVal(checkedValue,1);
@@ -124,7 +123,7 @@ const CheckboxComponent = React.forwardRef((props,ref)=>{
             {...p}
             testID = {testID}
             disabled = {disabled}
-            editable = {isEditable}
+            readOnly = {!isEditable}
             pointerEvents = {pointerEvents}
             style = {[styles.checkbox,style]}
             position = {position}

package/src/components/Chip/index.js

@@ -4,7 +4,7 @@ import {
   Animated,
   Platform,
   StyleSheet,
-  TouchableWithoutFeedback,
+  Pressable,
 } from 'react-native';
 import Icon from "$ecomponents/Icon";
 import {Text,TouchableRipple } from 'react-native-paper';
@@ -131,7 +131,7 @@ const ChipComponent = React.forwardRef(({
         // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
         accessibilityTraits={accessibilityTraits}
         accessibilityComponentType="button"
-        accessibilityRole="button"
+        role="button"
         accessibilityState={accessibilityState}
         testID={testID+"_Container"}
       >
@@ -195,12 +195,12 @@ const ChipComponent = React.forwardRef(({
       </TouchableRipple>
       {onClose ? (
         <View style={styles.closeButtonStyle} testID={testID+"_CloseButtonContainer"}>
-          <TouchableWithoutFeedback
+          <Pressable
             onPress={onPress}
             // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
             accessibilityTraits="button"
             accessibilityComponentType="button"
-            accessibilityRole="button"
+            role="button"
             accessibilityLabel={closeIconAccessibilityLabel}
             testID={testID+"_CloseButtonRipple"}
           >
@@ -217,7 +217,7 @@ const ChipComponent = React.forwardRef(({
                 />
               )}
             </View>
-          </TouchableWithoutFeedback>
+          </Pressable>
         </View>
       ) : null}
     </Surface>
@@ -247,7 +247,7 @@ const styles = StyleSheet.create({
   text: {
     minHeight: 24,
     lineHeight: 24,
-    textAlignVertical: 'center',
+    verticalAlign: 'center',
     marginVertical: 4,
   },
   avatar: {

package/src/components/Color/ColorPicker.js

@@ -7,7 +7,7 @@ import {
 	Image,
 	PanResponder,
 	StyleSheet,
-	TouchableWithoutFeedback,
+	Pressable,
 } from 'react-native';
 
 import Elevations from '$ecomponents/Surface/Elevations';
@@ -399,20 +399,20 @@ export default class ColorPickerComponent extends Component {
 	renderSwatches () {
 		this.swatches = this.props.palette.map((c,i) => (
 			<View testID={"RN_ColorPicker_SWATCHES"} style={[styles.swatch,theme.styles.cursorPointer,{backgroundColor:c}]} key={'S'+i} hitSlop={this.props.swatchesHitSlop}>
-				<TouchableWithoutFeedback onPress={x=>this.onSwatchPress(c,i)} hitSlop={this.props.swatchesHitSlop}>
+				<Pressable onPress={x=>this.onSwatchPress(c,i)} hitSlop={this.props.swatchesHitSlop}>
 					<Animated.View style={[styles.swatchTouch,{backgroundColor:c,transform:[{scale:this.swatchAnim[i].interpolate({inputRange:[0,0.5,1],outputRange:[0.666,1,0.666]})}]}]} />
-				</TouchableWithoutFeedback>
+				</Pressable>
 			</View>
 		))
 	}
 	renderDiscs () {
 		this.disc = (`1`).repeat(this.props.discreteLength).split('').map((c,i) => (
 			<View testID={"RN_ColorPicker_DISC"} style={[styles.swatch,{backgroundColor:this.state.hueSaturation}]} key={'D'+i} hitSlop={this.props.swatchesHitSlop}>
-				<TouchableWithoutFeedback style={[theme.styles.cursorPointer]} onPress={x=>this.onDiscPress(c,i)} hitSlop={this.props.swatchesHitSlop}>
+				<Pressable style={[theme.styles.cursorPointer]} onPress={x=>this.onDiscPress(c,i)} hitSlop={this.props.swatchesHitSlop}>
 					<Animated.View style={[styles.swatchTouch,{backgroundColor:this.state.hueSaturation,transform:[{scale:this.discAnim[i].interpolate({inputRange:[0,0.5,1],outputRange:[0.666,1,0.666]})}]}]}>
 						<View style={[styles.wheelImg,{backgroundColor:'#000',opacity:1-(i>=9?1:(i*11/100))}]}></View>
 					</Animated.View>
-				</TouchableWithoutFeedback>
+				</Pressable>
 			</View>
 		)).reverse()
 		this.tryForceUpdate()
@@ -428,7 +428,7 @@ export default class ColorPickerComponent extends Component {
 			sliderHidden,
 			discrete,
             disabled,
-            editable,
+            readOnly,
 			row,
 			testID : customTestId,
 		} = this.props
@@ -520,7 +520,7 @@ export default class ColorPickerComponent extends Component {
 						testID={`${testID}_ColorPickerInput`}
 						enableCopy
 						label = ''
-						editable = {editable}
+						readOnly = {readOnly}
 						disabled = {disabled}
 						defaultValue = {hex}
 						{...restProps}

package/src/components/Color/index.js

@@ -10,11 +10,11 @@ import {isMobileOrTabletMedia} from "$cplatform/dimensions";
 import {defaultStr,defaultObj} from "$cutils";
 
 const ColorPickerComponent = React.forwardRef ((props,ref)=>{
-    let {defaultValue,label,rippleColor,onChange,text,containerProp,editable,disabled,readOnly,...rest} = props;
+    let {defaultValue,label,rippleColor,onChange,text,containerProp,disabled,readOnly,...rest} = props;
     containerProp = defaultObj(containerProp);
     disabled = defaultBool(disabled,false);
     readOnly = defaultBool(readOnly,false);
-    const isEditable = !disabled && readOnly !== true && editable !== false ? true : false;
+    const isEditable = !disabled && readOnly !== true ? true : false;
     const pointerEvents = isEditable ? "auto" : "none";
     const isMob = isMobileOrTabletMedia();
     const _label = defaultStr(label,text);
@@ -69,7 +69,7 @@ const ColorPickerComponent = React.forwardRef ((props,ref)=>{
     return <>
             <TouchableOpacity
                 {...containerProp}
-                accessibilityRole="button"
+                role="button"
                 disabled = {!isEditable}
                 pointerEvents = {pointerEvents}
                 accessibilityLabel={defaultStr(label,text)}
@@ -84,7 +84,7 @@ const ColorPickerComponent = React.forwardRef ((props,ref)=>{
                 mode = {mode}
                 ref = {ref}
                 label = {defaultVal(label,_label)}
-                editable = {false}
+                readOnly = {true}
                 disabled = {disabled}
                 selectionColor = {selectionColor}
                 color = {selectionColor}
@@ -124,7 +124,7 @@ const ColorPickerComponent = React.forwardRef ((props,ref)=>{
                     color={color}
                     thumbSize={40}
                     disabled = {disabled}
-                    editable = {isEditable}
+                    readOnly = {!isEditable}
                     onColorChange={onColorChange}
                     onColorChangeComplete={onColorChangeComplete}
                 />

package/src/components/Countries/Flag.js

@@ -19,7 +19,7 @@ export default function CountryFlagComponent({code,label,withName,withCode,text,
             <Image  
             accessibilityIgnoresInvertColors 
             testID ={testID+"Image"}
-            editable = {false}
+            readOnly = {true}
             {...props}
             size = {25} 
             style={[props.style]} 

package/src/components/Countries/SelectCountry.js

@@ -39,7 +39,7 @@ export const getCountryFieldProps = (props)=>{
         },
         renderItem : ({item})=>{
             return <View style={[styles.renderedImage]}>
-                {(isNonNullString(item.image) || isNumber(item.image)) && <Image  editable = {false} accessibilityIgnoresInvertColors {...imageProps} style={[styles.flagImage,{marginRight:10},imageProps.style]} source={isNumber(item.image)?item.image:{uri:item.image}}/>}
+                {(isNonNullString(item.image) || isNumber(item.image)) && <Image  readOnly= {true} accessibilityIgnoresInvertColors {...imageProps} style={[styles.flagImage,{marginRight:10},imageProps.style]} source={isNumber(item.image)?item.image:{uri:item.image}}/>}
                 <Label>{item.label}</Label>
             </View>
         },

package/src/components/Datagrid/Common/Common.js

@@ -2451,7 +2451,6 @@ export default class CommonDatagridComponent extends AppComponent {
                 render,
                 readOnly,
                 disabled,
-                editable,
                 visible,
                 defaultValue,
                 id,