@fto-consult/expo-ui 8.83.3 → 9.0.0

package/babel.config.alias.js

@@ -3,7 +3,7 @@ const fs = require("fs");
 
 module.exports = (opts)=>{
     const dir = path.resolve(__dirname);
-    const isDev = String(process.env.NODE_ENV).toLowerCase() !="production";
+    const isDev = String(process.env.NODE_ENV).toLowerCase().trim() !="production";
     const projectRoot = typeof opts.projectRoot =='string' && fs.existsSync(opts.projectRoot.trim()) && opts.projectRoot.trim() || process.cwd();
     opts = typeof opts =='object' && opts ? opts : {};
     opts.platform = "expo";
@@ -12,7 +12,7 @@ module.exports = (opts)=>{
     opts.assets = opts.assets || opts.alias && typeof opts.alias =='object' && opts.alias.$assets || assets;
     opts.withPouchDB = opts.withPouchDB !== false && opts.withPouchdb !== false ? true : false;
     delete opts.withPouchdb;
-    const expoUI = require("./expo-ui-path")();
+    const expoUI = require("./expo-ui-path")(projectRoot);
     const cPath = isDev && fs.existsSync(path.resolve(expoUI,"node_modules","@fto-consult","common"))? path.resolve(expoUI,"node_modules","@fto-consult","common") : null; 
     const r = require(`${cPath ? path.resolve(cPath,"babel.config.alias.js"):'@fto-consult/common/babel.config.alias'}`)(opts);
     const expo = path.resolve(expoUI,"src");

package/babel.config.js

@@ -3,15 +3,10 @@ const fs = require("fs");
 
 module.exports = function(api,opts) {
   opts = typeof opts =='object' && opts ? opts : {};
-  const inlineDovOptions = { unsafe: true};
   const platform = api.caller(caller => caller && caller.platform);
   const isWeb = platform === 'web';
   const options = {...opts,isWeb,isAndroid:platform==="android",isIos : platform==="ios",platform:"expo"};
-  const environmentPath = require("./copy-env-file")();
-  if(environmentPath && fs.existsSync(environmentPath)){
-    inlineDovOptions.path ='./.env';
-  }
-  /*** par défaut, les variables d'environnements sont stockés dans le fichier .env situé à la racine du projet, référencée par la prop base  */
+  options.projectRoot = typeof options.projectRoot == 'string' && fs.existsSync(path.resolve(options.projectRoot)) ? path.resolve(options.projectRoot) : process.cwd();
   const alias =  require("./babel.config.alias")(options);
   if(typeof options.aliasMutator =="function"){
     options.aliasMutator({...options,alias});
@@ -35,7 +30,6 @@ module.exports = function(api,opts) {
     ],
     plugins : [
       ...plugins,
-      ["inline-dotenv",inlineDovOptions],
       ["module-resolver", {"alias": alias}],
       "@babel/plugin-proposal-export-namespace-from",
       ...(reanimated?[reanimated]:[]),

package/bin/create-app/App.js

@@ -1,3 +1,4 @@
+import "@expo/metro-runtime";
 import 'react-native-gesture-handler';//please do not remove this line
 import "$session";//please do not remove this line
 import { registerRootComponent } from 'expo';

package/bin/create-app/app.json

@@ -7,7 +7,7 @@
     "orientation": "portrait",
     "expoSdkVersion" : "50",
     "web": {
-      "bundler": "webpack"
+      "bundler": "metro"
     },
     "android": {
       "package": "com.borispipo.ftoconsultexpoui"

package/bin/create-app/dependencies.js

@@ -4,36 +4,39 @@
 	"@expo/html-elements": "^0.5.1",
 	"@expo/vector-icons": "^14.0.0",
 	"@pchmn/expo-material3-theme": "^1.3.2",
-	"@react-native-community/netinfo": "11.1.0",
-	"@react-native/assets-registry": "^0.72.0",
+	"@react-native-community/netinfo": "11.3.1",
+	"@react-native-community/netinfo": "11.3.1",
 	"react-native-get-random-values": "~1.8.0",
 	"@react-navigation/native": "^6.1.17",
-	"@react-navigation/native-stack": "^6.9.26",
+    "@react-navigation/native-stack": "^6.9.26",
 	"@react-navigation/stack": "^6.3.29",
-	"@shopify/flash-list": "1.6.3",
-	"expo": "^50.0.17",
-	"expo-camera": "~14.1.3",
-	"expo-clipboard": "~5.0.1",
-	"expo-font": "~11.10.3",
-	"expo-image-picker": "~14.7.1",
-	"expo-linking": "~6.2.2",
-	"expo-sharing": "~11.10.0",
-	"expo-sqlite": "~13.4.0",
-	"expo-status-bar": "~1.11.1",
-	"expo-system-ui": "~2.9.4",
-	"expo-web-browser": "~12.8.2",
-	"react": "18.2.0",
-	"react-native": "0.73.6",
-	"react-native-safe-area-context": "4.8.2",
-	"react-native-screens": "~3.29.0",
-	"react-native-svg": "14.1.0",
-	"react-native-webview": "13.6.4",
-	"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-image-manipulator": "~11.8.0",
-	"expo-document-picker": "~11.10.1",
-	"react-native-web": "~0.19.6"
+	"@shopify/flash-list": "1.6.4",
+
+	"expo": "51.0.0",
+    "expo-camera": "~15.0.4",
+    "expo-clipboard": "~6.0.3",
+    "expo-document-picker": "~12.0.1",
+    "expo-font": "~12.0.4",
+    "expo-image-manipulator": "~12.0.3",
+    "expo-image-picker": "~15.0.4",
+    "expo-intent-launcher": "~11.0.1",
+    "expo-linking": "~6.3.1",
+	"@expo/metro-runtime": "^3.2.1",
+    "expo-sharing": "~12.0.1",
+    "expo-sqlite": "~14.0.3",
+    "expo-status-bar": "~1.12.1",
+    "expo-system-ui": "~3.0.4",
+    "expo-web-browser": "~13.0.3",
+    "react-native": "0.74.1",
+	"react-native-gesture-handler": "~2.16.1",
+    "react-native-get-random-values": "~1.11.0",
+    "react-native-reanimated": "3.10.0",
+    "react-native-safe-area-context": "4.10.1",
+    "react-native-screens": "3.31.1",
+    "react-native-svg": "15.2.0-rc.0",
+    "react-native-view-shot": "3.8.0",
+    "react-native-web": "~0.19.10",
+    "react-native-webview": "13.8.6",
+    "react-virtuoso": "latest",
 };
                             

package/bin/create-app/devDependencies.js

@@ -1,7 +1,6 @@
 module.exports = [
     "@babel/plugin-proposal-export-namespace-from",
     "@expo/metro-config",
-    "@expo/webpack-config",
     "babel-plugin-inline-dotenv",
     "babel-plugin-module-resolver"
 ]

package/bin/create-app.js

@@ -75,7 +75,7 @@ module.exports = function(appName,{projectRoot:root}){
         writeFile(mainPackagePath,JSON.stringify(mainPackage,null,2),{overwrite:true});
     }
     console.log("creating application .....");
-    ["babel.config.js","metro.config.js","webpack.config.js"].map((p)=>{
+    ["babel.config.js","metro.config.js"].map((p)=>{
         const rP = path.join(projectRoot,p);
         const pp = path.join(getAppDir(),p);
         if(!fs.existsSync(rP) && fs.existsSync(pp)){
@@ -98,7 +98,6 @@ module.exports = function(appName,{projectRoot:root}){
     });
 }
 const defaultDevDependencies = {
- "@expo/webpack-config":"latest", 
  "@expo/metro-config" : "latest", 
 }
 const createEntryFile = (projectRoot)=>{
@@ -191,7 +190,7 @@ electron/**/*
       },
       "web": {
         "favicon": "./assets/favicon.png",
-        "bundler": "webpack"
+        "bundler": "metro"
       }
     }
   }

package/docs/expo-upgrades.txt

@@ -0,0 +1 @@
+Upgrade to SDK 51 : https://expo.dev/changelog/2024/05-07-sdk-51

package/expo-ui-path.js

@@ -4,34 +4,29 @@
 
 const fs = require("fs");
 const path = require("path");
+const {JSONManager} = require("@fto-consult/node-utils");
 ///retourne le chemin vers le package @expo-ui
-module.exports = function (){
-    const ag = Array.prototype.slice.call(arguments,0);
-    let suffix ="";
-    ag.map(p=>{
-        if(typeof p ==='string' && p){
-            suffix = path.join(suffix,p);
-        }
-    })
+module.exports = function (projectRoot){
     const sep = path.sep;
     if(require("./is-local-dev")()){//le programme s'exécute en environnement fix bugs sur electron
-        return path.resolve(__dirname,suffix).replace(sep,(sep+sep));///pour la résolution du module expo-ui en mode test
+        return path.resolve(__dirname).replace(sep,(sep+sep));///pour la résolution du module expo-ui en mode test
     }
-    const isDevEnv = process?.env?.WEBPACK_SERVE && 'development' === process.env.NODE_ENV;
-    const packageJSON = path.resolve(process.cwd(),"package.json");
-    const expoUIPath = path.resolve(process.cwd(),"node_modules","@fto-consult","expo-ui");
-    if(isDevEnv && fs.existsSync(packageJSON)){
-        try {
-            const package = require(`${packageJSON}`);
-            if(package && typeof package =='object' && package?.expoUIRootPath && typeof package.expoUIRootPath ==='string'){
-                const p = path.resolve(package.expoUIRootPath);
-                if(fs.existsSync(p) && fs.existsSync(path.resolve(p,"src")) && fs.existsSync(path.resolve(p,"webpack.config.js"))){
-                    return path.resolve(p,suffix).replace(sep,(sep+sep));
+    const isDev = String(process.env.NODE_ENV).toLowerCase().trim() !="production";
+    projectRoot = typeof projectRoot =='string' && fs.existsSync(path.resolve(projectRoot)) && path.resolve(projectRoot) || process.cwd();
+    const packageJSON = path.resolve(projectRoot,"package.json");
+    const expoUIPath = path.resolve(projectRoot,"node_modules","@fto-consult","expo-ui");
+    if(isDev && fs.existsSync(packageJSON)){
+        const pM = JSONManager(packageJSON);
+        if(pM.hasPackage){
+            const expoUIRootPath = pM.get("expoUIRootPath");
+            if(typeof expoUIRootPath =="string" && expoUIRootPath){
+                const p = path.resolve(expoUIRootPath);
+                const pM2 = JSONManager(path.resolve(expoUIRootPath,"package.json"));
+                if(pM2.hasPackage && pM2.get("name") =="@fto-consult/expo-ui" && fs.existsSync(p) && fs.existsSync(path.resolve(p,"src"))){
+                    return p;
                 }
             }
-            
-        } catch (e){}
+        }
     }
-    /***** old dev env */
-    return suffix ? path.join(expoUIPath,suffix).replace(sep,"/"): expoUIPath;
+    return expoUIPath;
 };

package/metro.config.js

@@ -3,6 +3,7 @@ const fs = require("fs");
 const { getDefaultConfig } = require('@expo/metro-config');
 module.exports = function(opts){
   opts = opts && typeof opts =='object'? opts : {};
+  const isDev = String(process.env.NODE_ENV).toLowerCase().trim() !="production";
   let {assetExts,sourceExts} = opts;
   assetExts = Array.isArray(assetExts)? assetExts: [];
   sourceExts= Array.isArray(sourceExts)?sourceExts : [];
@@ -38,6 +39,10 @@ module.exports = function(opts){
       'jsx', 'js','tsx',
   ]
   config.watchFolders = Array.isArray(config.watchFolders)? config.watchFolders : [];
+  const expoUIP = require("./expo-ui-path")(projectRoot);
+  if(!config.watchFolders.includes(expoUIP)){
+    config.watchFolders.push(expoUIP);
+  }
   let hasFTO = false;
   for(let i in config.watchFolders){
       if(typeof config.watchFolders[i] ==="string" && config.watchFolders[i].includes("@fto-consult")){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.83.3",
+  "version": "9.0.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": {
@@ -31,9 +31,6 @@
     "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",
@@ -48,7 +45,7 @@
     "delete-node-modules": "rimraf ./**/node_modules",
     "dev": "npx expo start --no-dev --minify -c",
     "modifier-url-remote-git": "git remote set-url origin 'https://borispipo@github.com/borispipo/smart-eneo.git'",
-    "update": "npm i @fto-consult/common@latest react-native-big-list@latest apexcharts@latest file-saver@latest google-libphonenumber@latest  react-native-iphone-x-helper@latest react-native-mime-types@latest react-native-paper@latest react-native-paper-dates@latest react-virtuoso@latest tippy.js@latest xlsx@latest && npm run update-apexchart && npm run find-licenses"
+    "update": "npm i @emotion/react@latest @fto-consult/common@latest react-native-big-list@latest apexcharts@latest file-saver@latest google-libphonenumber@latest react-native-paper@latest react-native-paper-dates@latest react-native-mime-types@latest tippy.js@latest xlsx@latest && npm run update-apexchart && npm run find-licenses"
   },
   "bin": {
     "expo-ui": "bin/index.js"
@@ -68,10 +65,9 @@
   },
   "homepage": "https://github.com/borispipo/expo-ui#readme",
   "dependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.4",
     "@faker-js/faker": "^8.0.2",
-    "@fto-consult/common": "^4.52.0",
-    "@fto-consult/expo-ui": "^8.73.1",
+    "@fto-consult/common": "^4.52.1",
     "apexcharts": "^3.49.0",
     "file-saver": "^2.0.5",
     "google-libphonenumber": "^3.2.34",
@@ -86,8 +82,6 @@
     "react-native-mime-types": "^2.5.0",
     "react-native-paper": "^5.12.3",
     "react-native-paper-dates": "^0.22.7",
-    "react-virtuoso": "^4.7.10",
-    "readable-stream": "^4.5.2",
     "sanitize-filename": "^1.6.3",
     "tippy.js": "^6.3.7",
     "xlsx": "^0.18.5"
@@ -95,12 +89,8 @@
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@expo/metro-config": "~0.17.1",
-    "@expo/webpack-config": "^19.0.1",
     "babel-plugin-inline-dotenv": "^1.7.0",
     "babel-plugin-module-resolver": "^5.0.0",
-    "crypto-browserify": "^3.12.0",
-    "sharp-cli": "^2.1.1",
-    "stream-browserify": "^3.0.0",
-    "vm": "^0.1.0"
+    "sharp-cli": "^2.1.1"
   }
 }

package/readMe.md

@@ -1,7 +1,7 @@
 ## Installation des dépendences, packages de dévéloppement
 
 ```javascript
-npm i --D babel-plugin-module-resolver babel-plugin-inline-dotenv @expo/metro-config @expo/webpack-config
+npm i --D babel-plugin-module-resolver babel-plugin-inline-dotenv @expo/metro-config
 ```
 
 ## **#ELECTRON**
@@ -12,14 +12,14 @@ npm i --D babel-plugin-module-resolver babel-plugin-inline-dotenv @expo/metro-co
 
 ### `expo-ui [build|start] [compile] [build] [url=local-url] [platform=[win32|darwin|linux|mas]] [arch=x64|x86] [out=outpout dir]`
 
-1.  \[build|start|package\], le script à exécuter : build|start
-2.  \[compile\], si l'application sera compilé, via la commande expo export:web; valide lorsque aucune url n'est spécifiée
-3.  \[build\]\], si l'exécutable sera crée pour la plateforme \[platform\], valide uniquement pour le script \<\<build>>
-4.  \[url=local-url\], l'url à ouvrir via l'application electron (exemple : http://localhost:19006/), valide uniquement pour le script \<\<start>>;
-5.  \[platform\], la plateforme vers laquelle on souhaite exporter l'exécutable electron, vailde uniquement pour le script \<\<build>>
-6.  \[arch\], l'architecture de l'exécutable à exporter, valide uniquement pour le script \<\<build>>
-7.  \[out\], le repertoire destitation, valide pour les scripts \[build et package\]
+1. \[build|start|package\], le script à exécuter : build|start
+2. \[compile\], si l'application sera compilé, via la commande expo export:web; valide lorsque aucune url n'est spécifiée
+3. \[build\]\], si l'exécutable sera crée pour la plateforme \[platform\], valide uniquement pour le script \<\<build>>
+4. \[url=local-url\], l'url à ouvrir via l'application electron (exemple : http://localhost:19006/), valide uniquement pour le script \<\<start>>;
+5. \[platform\], la plateforme vers laquelle on souhaite exporter l'exécutable electron, vailde uniquement pour le script \<\<build>>
+6. \[arch\], l'architecture de l'exécutable à exporter, valide uniquement pour le script \<\<build>>
+7. \[out\], le repertoire destitation, valide pour les scripts \[build et package\]
 
 ## **Générer le fichier binaire**
 
-1.  installer le package electron-packager : `npm install --save-dev electron-packager`
+1. installer le package electron-packager : `npm install --save-dev electron-packager`

package/src/auth/Login.js

@@ -36,7 +36,8 @@ export default function LoginComponent(props){
     const backgroundColor = theme.colors.surface;
     const _getForm = x=> getForm(formName);
     const isMounted = React.useIsMounted();
-    
+    const initializeRef = React.useRef(props.initialize);
+    const onStepChangeRef = React.useRef(props.onStepChange);
     const auth = useAuth();
     const notifyUser = (message,title)=> {
         if(isObj(message)){
@@ -87,15 +88,15 @@ export default function LoginComponent(props){
     React.useEffect(()=>{
         Preloader.closeAll();
         /*** pour initializer les cordonnées du composant login */
-        if(typeof initialize =='function'){
-            initialize();
+        if(typeof initializeRef.current =='function'){
+            initializeRef.current();
         }
     },[]);
     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})
+        if(typeof onStepChangeRef.current =='function'){
+            return onStepChangeRef.current({...state,previousStep:prevStep,focusField,nextButtonRef})
         }
     },[state.step]);
     const getButtonAction = React.useMemo(()=>{
@@ -160,7 +161,7 @@ export default function LoginComponent(props){
     const mediaQueryUpdateStyle = ()=>{
         return StyleSheet.flatten([updateMediaQueryStyle()]);
     };
-    const withScrollView = typeof customWithScrollView =='boolean'? customWithScrollView : true;
+    let withScrollView = typeof props.withScrollView =='boolean'? props.withScrollView : true;
     const Wrapper = withPortal ? ScreenWithoutAuthContainer  : withScrollView ? ScrollView: View;
     if(React.isComponent(Login)) return <Login
         {...props}
@@ -231,7 +232,15 @@ export default function LoginComponent(props){
         formProps,
         wrapperProps : cWrapperProps,
         title : customTitle,
-        withScrollView:customWithScrollView,children,initialize,renderNextButton,renderPreviousButton,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,beforeSubmit:beforeSubmitForm,canSubmit:canSubmitForm,onStepChange,...loginProps} = loginPropsMutator(callArgs);
+        withScrollView:customWithScrollView,children,initialize,renderNextButton,renderPreviousButton,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,beforeSubmit:beforeSubmitForm,canSubmit:canSubmitForm,onStepChange,...loginProps} = loginPropsMutator(callArgs);    
+   
+    if(typeof initialize =="function"){
+        initializeRef.current = initialize;
+    }
+    if(typeof onStepChange =="function"){
+        onStepChangeRef.current = onStepChange;
+    }
+    withScrollView = typeof customWithScrollView =='boolean'? customWithScrollView : withScrollView;
     if(isNonNullString(customTitle)){
         loginTitle = customTitle;
     }

package/src/auth/utils.js

@@ -0,0 +1,10 @@
+import {isAllowedFromStr} from "$cauth/perms";
+/***
+ * vérifie si pour la permission perm, l'utilisateur connecté à accès à la resource
+ */
+export const isPermAllowed = (perm,...permsArgs)=>{
+    if(typeof perm === 'boolean') return perm;
+    if(typeof perm ==='function' && perm(...permsArgs) === false) return false;
+    if(isNonNullString(perm) && !isAllowedFromStr(perm,...permsArgs)) return false;
+    return true;
+}

package/src/components/AppBar/utils.js

@@ -7,8 +7,8 @@ import theme from "$theme"
 import Action from "$ecomponents/Form/Action";
 import Menu from "$ecomponents/Menu";
 import Icon,{ MORE_ICON } from "$ecomponents/Icon";
-import {isAllowedFromStr} from "$cauth/perms";
 import breakpoints from "$cdimensions/breakpoints";
+import {isPermAllowed} from "$eauth/utils";
 
 export const ACTION_ICON_SIZE = 30;
 
@@ -104,9 +104,7 @@ export const splitActions = (args)=>{
         let cEl = null;
         if(!React.isValidElement(act)&& isPlainObj(act)){
             let {label,perm,text,...action} = act;
-            if(isNonNullString(perm) && !isAllowedFromStr(perm)){
-                continue;
-            } else if(typeof perm =='function' && perm(args) === false){
+            if(!isPermAllowed(perm,args)) {
                 continue;
             }
             action = {...defaultObj(action)};
@@ -146,7 +144,7 @@ export const splitActions = (args)=>{
     }
     if(isPlainObj(cancelButton) && !React.isValidElement(cancelButton)){
         let {label,perm,text,...action} = cancelButton;
-        let canAddCancelBtn = isNonNullString(perm) ? isAllowedFromStr(perm) : typeof perm =='function' ? perm(args)  : true;
+        const canAddCancelBtn = isPermAllowed(perm,{...args,cancelButton,action:cancelButton});
         if(canAddCancelBtn && (text||label)){
             action = {...defaultObj(action)};
             action.label = defaultVal(label,text)

package/src/components/Avatar/AutoHeightImage/cache.js

@@ -1,4 +1,5 @@
 import { Image } from 'react-native';
+import { resolveAssetSource } from '$ecomponents/Image';
 
 /**
  * store with
@@ -22,7 +23,7 @@ const loadImageSize = (image) => {
   return new Promise((resolve, reject) => {
     //number indicates import X or require(X) was used (i.e. local file)
     if (typeof image === 'number') {
-      const { width, height } = Image.resolveAssetSource(image);
+      const { width, height } = defaultObj(resolveAssetSource(image));
       resolve({ width, height });
     } else {
       Image.getSize(

package/src/components/BottomSheet/Sheet.js

@@ -31,12 +31,12 @@ export const defaultHeight = 300;
 const useNativeDriver = false;
 
 const BottomSheetComponent = React.forwardRef((props,ref)=> {
-    const {
+    let {
         animationType,
         animationDuration,
         animationPosition,
         closeOnDragDown,
-        //dragFromTopOnly,
+        dragFromTopOnly,
         closeOnPressMask,
         closeOnPressBack,
         children,
@@ -62,7 +62,7 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
         actionTitle,
         elevation:customElevation,
         containerProps : customContainerProps,
-        backdropProps : customBackdropProps,
+        backdropProps,
         ...rest
     } = props;
     const {height:winHeight} = Dimensions.get("window");
@@ -192,7 +192,7 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
         transform: pan.getTranslateTransform()
     };
     const actionProps = Object.assign({},rest.actionProps);
-    const backdropProps = defaultObj(backdropProps);
+    backdropProps = defaultObj(backdropProps);
     //actionProps.size = actionProps.size || 25;
     actionProps.style = [{marginVertical:0,paddingVertical:0},actionProps.style]
     const aStyle = {color:theme.colors.primaryOnSurface};
@@ -231,7 +231,7 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
             React.setRef(ref,null);
         }
     },[]);
-    const dragFromTopOnly = typeof dragFromTopOnly ==='boolean' ? dragFromTopOnly : withScrollView !== false ? true : isTouchDevice();
+    dragFromTopOnly = typeof dragFromTopOnly ==='boolean' ? dragFromTopOnly : withScrollView !== false ? true : isTouchDevice();
     const testID = defaultStr(customTestID,"RN_BottomSheetComponent");
     const containerProps = defaultObj(customContainerProps);
     const elevation = typeof customElevation =='number'? Math.ceil(customElevation) : 10;