@fto-consult/expo-ui 5.11.24 → 5.11.25

package/babel.config.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "5.11.24",
+  "version": "5.11.25",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -59,14 +59,14 @@
   "homepage": "https://github.com/borispipo/expo-ui#readme",
   "dependencies": {
     "@emotion/native": "^11.11.0",
-    "@expo/html-elements": "^0.2.0",
+    "@expo/html-elements": "^0.5.1",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^3.18.31",
+    "@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-async-storage/async-storage": "1.18.2",
+    "@react-native-community/datetimepicker": "7.2.0",
+    "@react-native-community/netinfo": "9.3.10",
     "@react-native/assets-registry": "^0.72.0",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
@@ -76,12 +76,12 @@
     "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",
+    "expo-image-picker": "~14.3.1",
+    "expo-linking": "~5.0.2",
+    "expo-sqlite": "~11.3.1",
+    "expo-status-bar": "~1.6.0",
+    "expo-system-ui": "~2.4.0",
+    "expo-web-browser": "~12.3.2",
     "file-saver": "^2.0.5",
     "fs-extra": "^11.1.1",
     "google-libphonenumber": "^3.2.32",
@@ -91,29 +91,28 @@
     "react": "^18.2.0",
     "react-content-loader": "^6.2.1",
     "react-dom": "^18.2.0",
-    "react-native": "^0.71.3",
+    "react-native": "0.72.1",
     "react-native-big-list": "^1.6.1",
-    "react-native-blob-util": "^0.17.0",
-    "react-native-gesture-handler": "~2.9.0",
+    "react-native-blob-util": "^0.18.3",
+    "react-native-gesture-handler": "~2.12.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-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "^3.22.1",
+    "react-native-svg": "13.9.0",
+    "react-native-web": "~0.19.6",
+    "react-native-webview": "13.2.2",
+    "react-navigation": "^4.4.4",
     "react-virtuoso": "^4.3.11",
-    "sharp-cli": "^2.1.0",
+    "sharp-cli": "^4.1.1",
     "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",

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,

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

@@ -74,7 +74,6 @@ export const renderRowCell = (arg)=>{
                     multiple : undefined,
                     readOnly : undefined,
                     disabled : undefined,
-                    editable : undefined,
                     data : rowData,
                     columnField,
                 }
@@ -116,7 +115,7 @@ export const renderRowCell = (arg)=>{
             columnDef = defaultObj(columnDef)
             columnDef = {...columnDef,...defaultObj(columnDef.datagrid)};
             columnDef.size = defaultDecimal(columnDef.size,50);
-            columnDef.editable = defaultBool(columnDef.editable,false)
+            columnDef.readOnly = defaultBool(columnDef.readOnly,true)
             columnDef.rounded = defaultBool(columnDef.rounded,columnDef.round,true);
             columnDef.src = rowData[columnField];
             _render = <Image {...columnDef}/>

package/src/components/Date/DatePickerInput/index.js

@@ -38,7 +38,7 @@ const DatePickerInput = React.forwardRef(({
     left : customLeft,
     helperText,
     format,
-    disabled,readOnly,editable
+    disabled,readOnly
     ,text,
     withLabel,
     style,
@@ -90,7 +90,7 @@ const DatePickerInput = React.forwardRef(({
   }
   
 
-  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;
@@ -174,7 +174,7 @@ const DatePickerInput = React.forwardRef(({
           affix = {false}
           {...rest}
           style = {[styles.input,style]}
-          editable = {isEditable}
+          readOnly = {!isEditable}
           disabled = {disabled}
           left = {left}
           right = {right}
@@ -183,7 +183,7 @@ const DatePickerInput = React.forwardRef(({
           label={labelText}
           defaultValue={formattedValue}
           placeholder={inputFormatLabel}
-          keyboardType={'number-pad'}
+          inputMode={'number-pad'}
           mask={inputFormat}
           keyboardAppearance={theme.dark ? 'dark' : 'default'}
           error={hasError}

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/Drawer/DrawerLayout/index.js

@@ -5,7 +5,7 @@ import {
     Keyboard,
     PanResponder,
     StyleSheet,
-    TouchableWithoutFeedback,
+    Pressable,
     I18nManager,
 } from 'react-native';
 import PropTypes from "prop-types";
@@ -174,7 +174,7 @@ export default class DrawerLayout extends React.PureComponent {
                 style={{ flex: 1, backgroundColor: 'transparent',flexDirection:permanent?'row':'column'}}
                 {...this._panResponder.panHandlers}
             >
-                {!permanent && <TouchableWithoutFeedback
+                {!permanent && <Pressable
                     pointerEvents={pointerEvents}
                     testID = {testID+"_TouchableWithoutFeedBack"}
                     onPress={this._onOverlayClick}
@@ -185,7 +185,7 @@ export default class DrawerLayout extends React.PureComponent {
                         ref = {this._backdropRef}
                         style={[styles.overlay,{backgroundColor:theme.colors.backdrop}, animatedOverlayStyles]}
                     />
-                </TouchableWithoutFeedback>}
+                </Pressable>}
                 {posRight && content}
                 <Animated.View
                     testID={testID+"_NavigationViewContainer"}