@fto-consult/expo-ui 6.8.1 → 6.9.0

package/appConfig.txt

@@ -20,4 +20,7 @@
     handleHelpScreen : {boolean}, //if Help screen will be added on navigation's main drawer
     
     checkNavigationPermsOnTableOrStructData : {boolean}, si le test de la permission sur la table data où sur la struct data sera effectuée lorsqu'on appelera la fonction navigateToTableData ou navigateToStructData
- }
+ }
+ 
+la routine useMainNavigation de $enavigation/hooks, renvoie toutes  les propriétés passées à l'objet principal MainNavoigationProvider, nottement, 
+la fonction onGetStart, qui est appélé après initialisation de l'application, mais aussi l'état du composant App de $expoUI/src/index

package/babel.config.alias.js

@@ -70,21 +70,11 @@ module.exports = (opts)=>{
         opts.mutator(r);
     }
     r.$eutils = path.resolve(expo,"utils");
-    r.$ehooks = path.resolve(expo,"hooks");
+    r.$ehooks = path.resolve(expo,"context","hooks");
     ///le chemin racine du projet expo-ui
     r["$expo-ui-root-path"] = r["$expo-ui-root"]= path.resolve(expo,"..");
 
     const HelpScreen = path.resolve(r["$escreens"],"Help");
-    /*** alias des termsOfUses */
-    r.$eTermsOfUses = path.resolve(HelpScreen,"TermsOfUses","content");
-    if(!r.$TermsOfUses){
-        r.$TermsOfUses = r.$eTermsOfUses;
-    }
-    /*** alias des privacyPolicy */
-    r.$ePrivacyPolicy = path.resolve(HelpScreen,"PrivacyPolicy","content");
-    if(!r.$PrivacyPolicy){
-        r.$PrivacyPolicy = r.$ePrivacyPolicy;
-    }
     ///on génère les librairies open sources utilisées par l'application
     const root = path.resolve(r.$src,"..");
     const nModulePath = fs.existsSync(path.resolve(root,"node_modules")) && path.resolve(root,"node_modules") || fs.existsSync(path.resolve(r.$src,"node_modules")) && path.resolve(r.$src,"node_modules") || path.resolve(base,"node_modules");

package/babel.config.js

@@ -51,7 +51,7 @@ module.exports = function(api,opts) {
                   if(!indexContent || (!indexContent.includes("table") && !indexContent.includes("tableName"))){
                       return;
                   }
-                   getTableJSContent+=`\n\t\tif(tableName === "${tableName}"){return require("./${table}").default;}`;
+                   getTableJSContent+=`\t\tif(tableName === "${tableName}"){return require("./${table}").default;}\n`;
                 });
                 //on génère le fichier getTable des tables data de l'application
                 if(getTableJSContent){

package/index.js

@@ -1,9 +1,8 @@
 import { registerRootComponent } from "expo";
 import {Platform } from 'react-native';
 import App from "./src/App";
-import { Provider } from "$econtext";
+import Provider from "$econtext/Provider";
 const isWeb = Platform.OS === "web";
-import {isObj} from "$cutils";
 
 /****
  * les options sont de la forme : 
@@ -17,10 +16,9 @@ import {isObj} from "$cutils";
  *   les écrans d'initialisation doivent garder la propriété Start à true ou doivent avoir le groupe INTALL, pour spécifier que ce sont es écrans qui apparaissent lorsque l'application n'est pas initialisée
  * }
  */
-export default function registerApp (options){
-    const {onMount,onUnmount,onRender,render,swrConfig,...rest} = isObj(options)? options : {};
+export default function registerApp ({onMount,onUnmount,onRender,render,swrConfig,init,...rest}){
     registerRootComponent(function(props){
-        return <Provider {...props} {...rest} swrConfig={isObj(swrConfig) && swrConfig || {}} children={<App render={render} onMount={onMount} onUnmount={onUnmount} onRender={onRender}/>}/>
+        return <Provider {...props} {...rest} swrConfig={isObj(swrConfig) && swrConfig || {}} children={<App init={init} render={render} onMount={onMount} onUnmount={onUnmount} onRender={onRender}/>}/>
     });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.8.1",
+  "version": "6.9.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -41,7 +41,7 @@
     "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'",
-    "update": "npm i expo @emotion/native@latest apexcharts@latest file-saver@latest fs-extra@latest google-libphonenumber@latest @pchmn/expo-material3-theme@latest @gorhom/portal@latest @emotion/native@latest @fto-consult/common@latest react-native-blob-util react-native-gesture-handler@latest react-native-iphone-x-helper@latest react-native-mime-types@latest react-native-paper@latest  react-native-paper-dates@latest @react-navigation/native@latest @react-navigation/native-stack@latest react-virtuoso@latest sharp-cli@latest tippy.js@latest websql@latest xlsx@latest && npx expo install --fix"
+    "update": "npm i expo @emotion/native@latest react-native-big-list@latest apexcharts@latest file-saver@latest fs-extra@latest google-libphonenumber@latest @pchmn/expo-material3-theme@latest @gorhom/portal@latest @emotion/native@latest @fto-consult/common@latest react-native-blob-util react-native-gesture-handler@latest react-native-iphone-x-helper@latest react-native-mime-types@latest react-native-paper@latest react-native-safe-area-context@latest react-native-paper-dates@latest @react-navigation/native@latest @react-navigation/native-stack@latest react-native-screens@latest react-virtuoso@latest sharp-cli@latest tippy.js@latest websql@latest xlsx@latest && npx expo install --fix"
   },
   "bin": "./bin/index.js",
   "repository": {
@@ -94,7 +94,7 @@
     "react-dom": "^18.2.0",
     "react-native": "0.72.3",
     "react-native-big-list": "^1.6.1",
-    "react-native-blob-util": "^0.18.3",
+    "react-native-blob-util": "^0.18.4",
     "react-native-gesture-handler": "^2.12.0",
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-mime-types": "^2.4.0",
@@ -102,7 +102,7 @@
     "react-native-paper-dates": "^0.18.12",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0",
+    "react-native-screens": "^3.22.1",
     "react-native-svg": "13.9.0",
     "react-native-web": "~0.19.6",
     "react-native-webview": "13.2.2",

package/src/App.js

@@ -26,7 +26,7 @@ Object.map(Utils,(v,i)=>{
   }
 });
 
-export default function getIndex({onMount,onUnmount,render,onRender}){
+export default function getIndex({onMount,onUnmount,render,onRender,init}){
     const {swrConfig} = useContext();
     const isScreenFocusedRef = React.useRef(true);
     ///garde pour chaque écran sa date de dernière activité
@@ -141,7 +141,7 @@ export default function getIndex({onMount,onUnmount,render,onRender}){
       >
         <GestureHandlerRootView style={{ flex: 1 }}>
           <SafeAreaProvider>
-            <Index onMount={onMount} render={render} onUnmount={onUnmount} onRender={onRender}/>
+            <Index onMount={onMount} render={render} onUnmount={onUnmount} onRender={onRender} init={init}/>
           </SafeAreaProvider>
         </GestureHandlerRootView>
       </SWRConfig>

package/src/components/Drawer/Provider.js

@@ -2,5 +2,5 @@ import React from "$react";
 export const DrawerContext = React.createContext(null);
 
 export const useDrawer = ()=>{
-    return React.useContext(DrawerContext) || {};
+    return React.useContext(DrawerContext) || {hasContext:x=>false};
 }

package/src/components/Drawer/index.js

@@ -166,6 +166,7 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
     context.isMinimized = ()=>{
       return minimizable !== false && canBeMinimizedOrPermanent() && isDesktopMedia() && session.get("minimized")? true : false;
     }
+    const hasContext = ()=>drawerRef && isObj(drawerRef?.current) && Object.size(drawerRef?.current,true);
     context.canBeMinimizedOrPermanent = canBeMinimizedOrPermanent;
     context.isPermanent = x=>{
        if(!drawerRef.current || !drawerRef.current.isOpen()) return false;
@@ -247,8 +248,11 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
     }
     return (
       <DrawerContext.Provider value={{
-          context,drawerRef,
+          ...context,
+          context,
+          drawerRef,
           session,
+          hasContext,
           close : (cb,force) =>closeDrawer(drawerRef,cb,force),
           sessionName,
           isItemActive : (opts)=>{

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

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import KeyboardEventHandler from "../KeyboardEventHandler";
-import { addMediaQueryUpdateStyeSubscription } from "$ehooks";
+import { addMediaQueryUpdateStyeSubscription } from "$context/hooks";
 import Dimensions from "$cdimensions";
 const {getActions,getFormFields,Forms} = require("../utils")
 import TextField,{parseDecimal} from "$ecomponents/TextField";

package/src/components/TextField/index.js

@@ -26,9 +26,6 @@ export * from "./utils";
 //const isNative = isNativeMobile();
 const isAndroid = _isAndroid() //|| isAndroidMobileBrowser();
 const isWeb = _isWeb();
-const isIos = _isIos();
-
-
 
 const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
     let {defaultValue,toCase:toCustomCase,color,validType,validRule,placeholder,outlined,placeholderColor,
@@ -136,6 +133,8 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
     const isNormalMode = mode == normalMode ? true : false;
     const isFlatMode =  mode == flatMode ? true : false;
     
+    const MULTIPLE_HEIGHT = isShadowMode ? HEIGHT : HEIGHT;
+    
     const [inputState, setInputState] = React.useState({
         focused : false,
         touched: false,
@@ -287,7 +286,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
     const borderWidth = outlined !== false ? (isFocused ? 2: 1):0;
     const _height = typeof flattenStyle.height == 'number' && flattenStyle.height > 20 ?  flattenStyle.height : HEIGHT;
     const tHeight = _height;//isShadowMode ?  (_height+(isMobileNative()?10:0)) : isNormalMode ? (_height-10) : _height;
-    const heightRef = React.useRef(tHeight);
+    const heightRef = React.useRef(multiline?MULTIPLE_HEIGHT:tHeight);
     //const lineHeightRef = React.useRef(0);
     roundness = typeof roundness =='number'? roundness : undefined;
     const borderRadius = isShadowMode ? (roundness || Math.max(tHeight/3,10)) : isOutlinedMode ? (roundness || 10) : 0;
@@ -357,6 +356,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
             inputStyle2,
             isNormalMode && styles.inputNormalMode,
             isShadowMode && styles.inputShadowMode,
+            isShadowMode && multiline && {minHeight:heightRef.current},
             multiline && {paddingTop : isFlatMode? 12 : 7},
         ],
         secureTextEntry,
@@ -377,10 +377,10 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
             }
             if(multiline){
                 if(!text2 || text2.length < 30){
-                    heightRef.current = HEIGHT;
+                    heightRef.current = MULTIPLE_HEIGHT;
                     setToggle(!toggle);
                 } else  if(target.scrollHeight > heightRef.current){
-                    heightRef.current = target.scrollHeight; 
+                    heightRef.current = Math.max(target.scrollHeight,MULTIPLE_HEIGHT); 
                     setToggle(!toggle);
                 }
             }

package/src/components/View/index.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import React from "$react";
 import {isMobileNative} from "$cplatform";
 import {debounce,isNumber} from "$cutils";
-import {useMediaQueryUpdateStyle} from "$ehooks";
+import {useMediaQueryUpdateStyle} from "$context/hooks";
 
 
 const ViewComponent = React.forwardRef(({onRender,onLayoutTimeout,onLayout,autoHeight,autoWidth,elevation,...props},ref)=>{

package/src/context/Provider.js

@@ -41,15 +41,8 @@ const Provider = ({children,getTableData,navigation,components,getStructData,tab
     structsData = isObj(structsData)? structsData : null;
     appConfig.tablesData = tablesData;
     appConfig.structsData = appConfig.structsData = isObj(structsData)? structsData : null;
-    if(isObj(tablesData) && Object.size(tablesData,true)){
-        appConfig.getTableData = (tableName)=>{
-            if(!isNonNullString(tableName)) return null;
-            tableName = tableName.trim();
-        }
-    } else if(typeof getTableData =='function'){
-        appConfig.getTableData = getTableData;
-    }
-    appConfig.getStructData = getStructData;
+    getTableData = appConfig.getTable = appConfig.getTableData = getTableOrStructDataCall(tablesData,getTableData);
+    getStructData = appConfig.getStructData = getTableOrStructDataCall(structsData,getStructData);
     appConfig.LoginComponent = Login;
     //const colorScheme = useColorScheme();
     appConfig.extendAppTheme = (theme)=>{
@@ -93,12 +86,28 @@ const Provider = ({children,getTableData,navigation,components,getStructData,tab
                 return extendProps(components.tableLinkPropsMutator,props);
             }
         },
-        getTableData,getStructData,tablesData,structsData,appConfig
+        getTableData,
+        getTable : getTableData,
+        getStructData,
+        tablesData,
+        structsData,
+        appConfig
       }} 
       children={children}
     />;
 }
-
+const getTableOrStructDataCall = (tablesOrStructDatas,getTableOrStructDataFunc)=>{
+  return (tableName,...rest)=>{
+      if(!isNonNullString(tableName)) return null;
+      tableName = tableName.trim();
+      const ret2 = typeof getTableOrStructDataFunc ==='function' ? getTableOrStructDataFunc (tableName,...rest) : null;
+      if(isObj(ret2) && Object.size(ret2,true)) return ret2;
+      if(!isObj(tablesOrStructDatas)) return null;
+      const ret = tablesOrStructDatas[tableName] || tablesOrStructDatas[tableName.toLowerCase()] || tablesOrStructDatas[tableName.toUpperCase];
+      if(isObj(ret)) return ret;
+      return null;
+  }
+}
 const extendProps = (cb,props)=>{
   const prs = defaultObj(props);
   const o = typeof  cb ==='function'? cb(props) : null;

package/src/context/hooks.js

@@ -1,3 +1,11 @@
+
+
+import Dimensions from "$cplatform/dimensions";
+import useStableMemo  from "$react/useStableMemo";
+import { useWindowDimensions } from "$cdimensions";
+import {isObj,isNonNullString} from "$cutils";
+import { StyleSheet } from "react-native";
+
 import { createContext,useContext as useReactContext } from "react";
 
 export const ExpoUIContext = createContext(null);
@@ -8,4 +16,51 @@ export default useExpoUI;
 
 export const useContext = useExpoUI;
 
-export const useApp = useContext;
+export const useApp = useContext;
+
+/**** retourne un composant définit dans la props
+    components de la fonction registerApp appelée pour l'initialisation de l'application
+    @param {string} componentName : le nom du composant que l'on veut recupérer
+*/
+export const useAppGetComponent = (componentName)=>{
+    if(!isNonNullString(componentName)) return null;
+    componentName = componentName.trim();
+    const {components} = useExpoUI();
+    const camCase = componentName.toCamelCase();
+    const lowerFirst = camCase.lowerFirst();
+    return components[componentName] ||  components[componentName.toLowerCase()]  || components[componentName.ucFirst()] || components[camCase] || components[lowerFirst] || components[componentName.toUpperCase()] || null;
+}
+
+/*** permet d'attacher un lister sur la modification des props de manière responsive : 
+    permet de récupérer la fonction à attacher par défaut au listener DimensionChange, pour la mise à jour automatique de la propriété style
+   * @param mediaQueryUpdateStyleCb{function}, la fonction permettant de mettre à jour les props lorsque la taille de l'écran change
+   * @param timeout {number}, le délai d'attente à passer à la fonction debounce, pour pouvoir appeler la fonction de mise à jour des props lorsque la taile de l'écran change
+ *  @return {object{remove:function}||null} l'objet null ou ayan la fonction remove permettant de suprimer le listerner lorsque le composant est démonté
+ */
+export const addMediaQueryUpdateStyeSubscription = (mediaQueryUpdateStyleCb,timeout)=>{
+    if(typeof mediaQueryUpdateStyleCb !='function') return null;
+    const options = isObj(timeout)? timeout : {};
+    timeout = typeof timeout =='number'? timeout : typeof options.timeout =='number'? options.timeout : 200;
+    return Dimensions.addEventListener("change",debounce((dimensions)=>{
+        return mediaQueryUpdateStyleCb(Dimensions.getDimensionsProps(dimensions));
+    },timeout));
+}
+
+/*** met à jour dynamiquemnet les propriétés style d'un objet en fonction du changement de la taille de l'objet
+ * @param {useCurrentMedia} {boolean} si true, alors les propriétés sont mis à jour uniquement si le current media change
+   @param {mediaQueryUpdateStyle}, la fonction permettant d'obtenir les propriétés css du composant à retourner
+   @return {object}, le flatten style des propriétés css associés aux props du composant react l'object
+ */
+export function useMediaQueryUpdateStyle({useCurrentMedia,target,mediaQueryUpdateStyle,...props}){
+    if(typeof mediaQueryUpdateStyle !=='function') return props.style;
+    const dimensions = useWindowDimensions();
+    const handleProps = dimensions && useCurrentMedia === true ? Dimensions.getCurrentMedia() : dimensions;
+    return useStableMemo(()=>{
+        const args = Dimensions.getDimensionsProps();
+        args.props = props,
+        args.target = target;
+        const nStyle = mediaQueryUpdateStyle(args);
+        if(isObj(nStyle) || Array.isArray(nStyle)) return StyleSheet.flatten([props.style,nStyle]);
+        return StyleSheet.flatten(props.style)||{};
+    },[handleProps,useCurrentMedia,dimensions,props.style]);
+}

package/src/index.js

@@ -273,7 +273,7 @@ function App({init:initApp,initialRouteName:appInitialRouteName,render,onMount})
           initialRouteName = {defaultStr(hasGetStarted ? appInitialRouteName : getStartedRouteName,"Home")}
           state = {state}
           hasGetStarted = {hasGetStarted}
-          isInitialized = {!isLoading}
+          isInitialized = {isInitialized}
           onGetStart = {(e)=>{
             setState({...state,hasGetStarted:true})
           }}
@@ -282,7 +282,7 @@ function App({init:initApp,initialRouteName:appInitialRouteName,render,onMount})
     </PortalProvider>
   </NavigationContainer>  : null;
   const content = isLoaded ? typeof render == 'function'? render({children:child,appConfig,config:appConfig}) : child : null;
-  return (<SplashScreen isLoaded={!isLoading}>
+  return (<SplashScreen isLoaded={isLoaded}>
       <AuthProvider>
         <PaperProvider 
           theme={theme}

package/src/layouts/AppBar/index.js

@@ -10,11 +10,32 @@ export * from "./utils";
 
 const AppBarLayout = React.forwardRef(({backActionProps,withDrawer,backAction,backActionRef,options,...props},ref)=>{
     const innerRef = React.useRef(null);
+    const {drawerRef} = useDrawer();
     options = defaultObj(options);
     const mergedRef = React.useMergeRefs(innerRef,ref);
     return <AppBar
         backAction = {getBackActionComponent({backAction,backActionProps,withDrawer})}
         {...props}
+        onBackActionPress = {(args)=>{
+            const {canGoBack,goBack} = args;
+            if(typeof props.onPress ==='function' && props.onPress(args) === false) return false;
+            if((backAction === true || backActionProps?.back === true) && canGoBack()){
+                goBack();
+                return false;
+            }
+            if(drawerRef && drawerRef?.current){
+                if(drawerRef?.current?.isMinimized() && drawerRef?.current?.isOpen()){
+                    drawerRef?.current?.restore();
+                    return false;
+                }
+                if(!drawerRef?.current?.isPermanent()){
+                    drawerRef?.current?.toggle();
+                } else if(!drawerRef?.current?.isOpen()){
+                    drawerRef?.current?.open();
+                }
+            }
+            return false;
+        }}
         ref = {mergedRef}
     />
 });
@@ -28,32 +49,12 @@ export const getBackActionComponent = ({backAction,backActionProps,withDrawer})=
             size,
             ...backActionProps,
             ...props,
-            onPress : (args)=>{
-                const {canGoBack,goBack} = args;
-                if(typeof props.onPress ==='function' && props.onPress(args) === false) return false;
-                if(backAction === true && canGoBack()){
-                    goBack();
-                    return false;
-                }
-                if(drawerRef && drawerRef.current){
-                    if(drawerRef.current.isMinimized() && drawerRef.current.isOpen()){
-                        drawerRef.current.restore();
-                        return false;
-                    }
-                    if(!drawerRef.current.isPermanent()){
-                        drawerRef.current.toggle();
-                    } else if(!drawerRef.current.isOpen()){
-                        drawerRef.current.open();
-                    }
-                }
-                return false;
-            },
         }
         if(backAction === true) return <Appbar.BackAction {...bProps}/>;
-        const isPermanent = typeof drawerRef.current?.isPermanent =='function' && drawerRef?.current?.isPermanent(); 
-        const isMinimized = typeof drawerRef.current?.isMinimized =="function" && drawerRef.current.isMinimized();
+        const isPermanent = typeof drawerRef?.current?.isPermanent =='function' && drawerRef?.current?.isPermanent(); 
+        const isMinimized = typeof drawerRef?.current?.isMinimized =="function" && drawerRef?.current?.isMinimized();
         if(backAction === false || withDrawer === false) return null;
-        const hasRightPosition = typeof drawerRef.current?.hasRightPosition =="function" && drawerRef.current?.hasRightPosition();
+        const hasRightPosition = typeof drawerRef?.current?.hasRightPosition =="function" && drawerRef?.current?.hasRightPosition();
         if(isMinimized){
             bProps.style =[bProps.style];
             if(hasRightPosition){

package/src/navigation/hooks.js

@@ -0,0 +1,11 @@
+import {createContext,useContext} from "react";
+
+const MainNavigationContext = createContext(null);
+
+export const useMainNavigation = ()=>{
+    return useContext(MainNavigationContext);
+}
+
+export const MainNavigationProvider = ({children,...props})=>{
+    return <MainNavigationContext.Provider value = {props} children={children}/>
+}

package/src/navigation/index.js

@@ -4,6 +4,9 @@ import {Stack,setInitialRouteName } from "$cnavigation";
 import React from "$react";
 import DrawerNavigator from "./Drawer";
 import useContext from "$econtext/hooks";
+import { MainNavigationProvider } from "./hooks";
+
+export * from "./hooks";
 
 export * from "./utils";
 
@@ -11,15 +14,9 @@ export * from "./utils";
  *  lorsque hasGetStarted est à false, celle-ci rend l'écran Start permettant de rendre le contenu GetStarted
 */
 export default function NavigationComponent (props){
-    let {state,hasGetStarted,onGetStart,initialRouteName,extra} = props;
+    let {state,hasGetStarted,onGetStart,initialRouteName,...rest} = props;
     const {navigation:{screens}} = useContext();
     const allScreens = initScreens({Factory:Stack,screens,ModalFactory:Stack,filter:({name})=>{
-        if(name === initialRouteName){
-            extra = defaultObj(extra);
-            extra.onGetStart = onGetStart;
-            extra.state = state;
-            return extra;
-        }
         return true;
     }});
     initialRouteName = sanitizeName(initialRouteName);
@@ -33,25 +30,27 @@ export default function NavigationComponent (props){
         headerShown : false,
         header : ()=> null,
     }
-    return <DrawerNavigator {...props}>
+    return <MainNavigationProvider {...rest} onGetStart={onGetStart} state={state} initialRouteName={initialRouteName}>
+        <DrawerNavigator {...props}>
             {<Stack.Navigator 
-                initialRouteName={initialRouteName} 
-                screenOptions={opts}
-            >
-                {<Stack.Group screenOptions={{...opts}}>
-                    {drawerScreens}
-                </Stack.Group>}
-                <Stack.Group
-                    key = {"MODAL-DRAWERS-SCREENS"}
-                    screenOptions={{
-                        ...opts,
-                        presentation: 'transparentModal', 
-                    }}
+                    initialRouteName={initialRouteName} 
+                    screenOptions={opts}
                 >
-                    {stackScreens}
-                </Stack.Group>
-            </Stack.Navigator> }
-    </DrawerNavigator>
+                    {<Stack.Group screenOptions={{...opts}}>
+                        {drawerScreens}
+                    </Stack.Group>}
+                    <Stack.Group
+                        key = {"MODAL-DRAWERS-SCREENS"}
+                        screenOptions={{
+                            ...opts,
+                            presentation: 'transparentModal', 
+                        }}
+                    >
+                        {stackScreens}
+                    </Stack.Group>
+                </Stack.Navigator> }
+        </DrawerNavigator>
+    </MainNavigationProvider>
 }
 
 export * from "$cnavigation";

package/src/screens/Help/PrivacyPolicy/content.js

@@ -1,13 +1,16 @@
 // Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
-
+import {useAppGetComponent} from "$econtext/hooks";
 import Label from "$ecomponents/Label";
+import React from "$react";
 
 export default function ContentPrivacy (){
-    return <Label primary style={{fontSize:15,fontWeight:'bold',padding:10}}>
-    Pour modifier le contenu de la politique de confidentialité, il suffit de déclarer dans les alias, l'alias 
-    $PrivacyPolicy prointant vers un fichier javascript dans lequel on exporte par défaut, soit un composant React
-    où encore un élément react valide dont le rendu remplacera ledit contenu.
-</Label>
+    const PrivacyPolicy = useAppGetComponent("PrivacyPolicy"); 
+    return React.isComponent(PrivacyPolicy) ? <PrivacyPolicy/>
+    : React.isValidElement(PrivacyPolicy) ? PrivacyPolicy : 
+    <Label primary style={{fontSize:15,fontWeight:'bold',padding:10}}>
+        Pour modifier le contenu de la politique de confidentialité, il suffit de déclarer dans la propriété "components" 
+        de la fonction "registerApp", initialisant l'application, un attribut "PrivacyPolicy|privacyPolicy", pointant vers le composant/l'élément react, dont le contenu , une fois rendu devra remplacer celui ci (le décrivant);
+    </Label>
 }

package/src/screens/Help/PrivacyPolicy/index.js

@@ -2,7 +2,7 @@ import {PRIVACY_POLICY} from "./routes";
 import title from "./title"
 import  Screen  from "$screen";
 import Link from "./Link";
-import Content from "$PrivacyPolicy";
+import Content from "./content";
 import React from "$react";
 
 export default function PrivacyPolicy(props){

package/src/screens/Help/TermsOfUses/content.js

@@ -3,11 +3,15 @@
 // license that can be found in the LICENSE file.
 
 import Label from "$ecomponents/Label";
+import {useAppGetComponent} from "$econtext/hooks";
+import React from "$react";
 
 export default function ContentTermsOfUses (){
-    return <Label primary style={{fontSize:15,fontWeight:'bold',padding:10}}>
-        Pour modifier le contenu des Termes et contrat d'utilisation, il suffit de déclarer dans les alias, l'alias 
-        $TermsOfUses prointant vers un fichier javascript dans lequel on exporte par défaut, soit un composant React
-        où encore un élément react valide dont le rendu remplacera ledit contenu.
+    const TermsOfUses = useAppGetComponent("TermsOfUses"); 
+    return React.isComponent(TermsOfUses) ? <TermsOfUses/>
+    : React.isValidElement(TermsOfUses) ? TermsOfUses : 
+    <Label primary style={{fontSize:15,fontWeight:'bold',padding:10}}>
+        Pour modifier le contenu des Termes et contrat d'utilisation, il suffit de déclarer dans la propriété "components" 
+        de la fonction "registerApp", initialisant l'application, un attribut "TermsOfUses|termsOfUses", pointant vers le composant/l'élément react, dont le contenu, une fois rendu devra remplacer celui ci (le décrivant);
     </Label>
 }

package/src/screens/Help/TermsOfUses/index.js

@@ -2,7 +2,7 @@ import {TERMS_OF_USES} from "./routes";
 import title from "./title";
 import Screen from "$screen";
 import Link from "./Link";
-import Content from "$TermsOfUses";
+import Content from "./content";
 import {extendObj} from "$cutils";
 import React from "$react";
 

package/src/screens/Help/index.js

@@ -5,4 +5,10 @@ export default [
     TermsOfUses,
     PrivacyPolicy,
     About,
-]
+]
+
+export {PrivacyPolicy};
+
+export {About};
+
+export {TermsOfUses};

package/src/screens/index.js

@@ -109,7 +109,7 @@ export default function initScreens ({Factory,ModalFactory,screens,result,filter
     return result;
 }
 
-export const handleContent = ({screens,hasGetStarted,onGetStart,state,Factory})=>{
+export const handleContent = ({screens,hasGetStarted,state,Factory})=>{
     const content = [];
     state = defaultObj(state);
     screens = defaultObj(screens);

package/src/hooks/index.js

@@ -1,41 +0,0 @@
-
-import Dimensions from "$cplatform/dimensions";
-import useStableMemo  from "$react/useStableMemo";
-import { useWindowDimensions } from "$cdimensions";
-import {isObj} from "$cutils";
-import { StyleSheet } from "react-native";
-
-
-/*** permet d'attacher un lister sur la modification des props de manière responsive : 
-    permet de récupérer la fonction à attacher par défaut au listener DimensionChange, pour la mise à jour automatique de la propriété style
-   * @param mediaQueryUpdateStyleCb{function}, la fonction permettant de mettre à jour les props lorsque la taille de l'écran change
-   * @param timeout {number}, le délai d'attente à passer à la fonction debounce, pour pouvoir appeler la fonction de mise à jour des props lorsque la taile de l'écran change
- *  @return {object{remove:function}||null} l'objet null ou ayan la fonction remove permettant de suprimer le listerner lorsque le composant est démonté
- */
-export const addMediaQueryUpdateStyeSubscription = (mediaQueryUpdateStyleCb,timeout)=>{
-    if(typeof mediaQueryUpdateStyleCb !='function') return null;
-    const options = isObj(timeout)? timeout : {};
-    timeout = typeof timeout =='number'? timeout : typeof options.timeout =='number'? options.timeout : 200;
-    return Dimensions.addEventListener("change",debounce((dimensions)=>{
-        return mediaQueryUpdateStyleCb(Dimensions.getDimensionsProps(dimensions));
-    },timeout));
-}
-
-/*** met à jour dynamiquemnet les propriétés style d'un objet en fonction du changement de la taille de l'objet
- * @param {useCurrentMedia} {boolean} si true, alors les propriétés sont mis à jour uniquement si le current media change
-   @param {mediaQueryUpdateStyle}, la fonction permettant d'obtenir les propriétés css du composant à retourner
-   @return {object}, le flatten style des propriétés css associés aux props du composant react l'object
- */
-export function useMediaQueryUpdateStyle({useCurrentMedia,target,mediaQueryUpdateStyle,...props}){
-    if(typeof mediaQueryUpdateStyle !=='function') return props.style;
-    const dimensions = useWindowDimensions();
-    const handleProps = dimensions && useCurrentMedia === true ? Dimensions.getCurrentMedia() : dimensions;
-    return useStableMemo(()=>{
-        const args = Dimensions.getDimensionsProps();
-        args.props = props,
-        args.target = target;
-        const nStyle = mediaQueryUpdateStyle(args);
-        if(isObj(nStyle) || Array.isArray(nStyle)) return StyleSheet.flatten([props.style,nStyle]);
-        return StyleSheet.flatten(props.style)||{};
-    },[handleProps,useCurrentMedia,dimensions,props.style]);
-}