@fto-consult/expo-ui 1.1.3 → 1.1.5

package/babel.config.alias.js

@@ -18,7 +18,12 @@ module.exports = (opts)=>{
     r["$enavigation"] = path.resolve(expo,"navigation");
     r["$escreens"] = path.resolve(expo,"screens");
     r["$escreen"] = path.resolve(expo,"layouts/Screen");
+    r["$eassets"] = path.resolve(dir,"assets");
+
+    ///pour personnaliser les écrans de l'application, il suffit de redefinir l'alis $screens, pointant vers le repertoire racine des écrans personnalisés
+    ///cependant, ce repertoire doit contenir un fichier mainScreens.js qui contient la liste de tous les écrans de lapplicaiton
     r["$screens"] = r["$screens"] || r["$escreens"];
+    
     r["$expo"] = r["$expo-ui"] = expo;
     r["$epreloader"] = path.resolve(expo,"components/Preloader");
     r["$eform"] = path.resolve(expo,"components","Form");
@@ -56,16 +61,15 @@ module.exports = (opts)=>{
     if(r["$loginComponent"] == r["$cloginComponent"]){
         r["$loginComponent"] = path.resolve(expo,"auth","Login");
     }
+
+    /*** alias pour le composant logo par défaut :  */
+    r["$elogoComponent"] = path.resolve(expo,"components","Logo","defaultComponent");
+    if(!r["$logoComponent"]){
+        r["$logoComponent"] = r["$elogoComponent"];
+    }
+
     if(typeof opts.mutator =='function'){
         opts.mutator(r);
     }
-    const aliases = [];
-    for(let i in r){
-        aliases.push({
-            root: r[i],
-            rootPathPrefix: i,
-            rootPathSuffix: '',
-        })
-    }
-    return aliases;
+    return r;
 }

package/babel.config.js

@@ -3,21 +3,38 @@ module.exports = function(api,opts) {
     ///les chemin vers la variable d'environnement, le chemin du fichier .env,@see : https://github.com/brysgo/babel-plugin-inline-dotenv
     const environmentPath = opts.environmentPath || opts.envPath;
     const path = require("path");
+    const fs = require("fs");
     const dir = path.resolve(__dirname);
     api.cache(true);
-    const alias =  require("./babel.config.alias")({base:dir,...opts,platform:"expo"});
+    const inlineDovOptions = {};
+    const options = {base:dir,...opts,platform:"expo"};
+    /*** 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  */
+    if(!environmentPath || typeof environmentPath !== 'string'){
+      const baseStr = typeof options.base =='string' && fs.existsSync(options.base)? options.base : typeof options.dir =='string' && fs.existsSync(options.dir)? options.dir : dir;
+      environmentPath = path.resolve(baseStr,".env");
+    } else {
+      environmentPath = "";
+    }
+    if(environmentPath && fs.existsSync(environmentPath)){
+      // File ".env" will be created or overwritten by default.
+      try {
+        fs.copyFileSync(environmentPath, path.resolve(dir,'.env'));
+      }
+      catch (e){
+        inlineDovOptions.path = environmentPath;
+      }
+    }
+    const alias =  require("./babel.config.alias")(options);
     return {
       presets: [
         ['babel-preset-expo'],
         ["@babel/preset-react", {"runtime": "automatic"}],
       ],
       plugins : [
-        ['babel-plugin-root-import', {"paths": alias}],
+        ["inline-dotenv",inlineDovOptions],
+        ["module-resolver", {"alias": alias}],
         ['react-native-reanimated/plugin'],
         ['transform-inline-environment-variables'],
-        ['inline-dotenv',{
-          ...(environmentPath?{path:environmentPath} : {})
-        }]
-      ]
+      ],
     };
   };

package/expo.metro.config.js

@@ -1,26 +1,49 @@
 const { getDefaultConfig } = require('@expo/metro-config');
 const path = require("path");
+const isCaseSensitive = require("./is-os-case-sensitive");
 module.exports = (opts)=>{
   opts = opts && typeof opts =='object'? opts : {};
-  let {dir,nodeModulesPaths} = opts;
+  let {dir,nodeModulesPaths,assetExts,sourceExts} = opts;
   nodeModulesPaths = Array.isArray(nodeModulesPaths)? nodeModulesPaths : [];
+  assetExts = Array.isArray(assetExts)? assetExts: [];
+  sourceExts= Array.isArray(sourceExts)?sourceExts : [];
   dir = dir || path.resolve(__dirname);
   const projectRoot = path.resolve(dir);
-  const workspaceRoot = path.resolve(projectRoot, '../..');
+  const localDir = path.resolve(__dirname);
   const config = getDefaultConfig(projectRoot);
-  config.watchFolders = [workspaceRoot];
-  // 2. Let Metro know where to resolve packages and in what order
-  config.resolver.nodeModulesPaths = [
-      path.resolve(projectRoot, 'node_modules'),
-      path.resolve(workspaceRoot, 'node_modules'),
-	    path.resolve(__dirname,"node_modules"),
-      ...nodeModulesPaths,
-    ];
-  config.resolver.assetExts.push('db');
+  config.watchFolders = [projectRoot];
+  if(projectRoot !== localDir){
+    config.watchFolders.push(localDir);
+  }
+  config.resolver.assetExts = [
+     ...config.resolver.assetExts,
+     ...assetExts,
+     "db",
+     "txt"
+  ];
   config.resolver.sourceExts = [
       ...config.resolver.sourceExts,
-      'jsx', 'js','tsx'
+      ...sourceExts,"txt",
+      'jsx', 'js','tsx',
   ]
+  const allNodePaths = [
+    path.resolve(projectRoot, 'node_modules'),
+    path.resolve(localDir, 'node_modules'),
+    ...nodeModulesPaths,
+  ];
+  const existingNodesPath= {},nPaths = [];
+  allNodePaths.map(p=>{
+    if(!p || typeof p !='string') return;
+    if(isCaseSensitive){
+      p = p.toLocaleLowerCase();
+    }
+    if(!existingNodesPath[p]){
+      existingNodesPath[p] = true;
+      nPaths.push(p);
+    }
+  });
+  
+  config.resolver.nodeModulesPaths = nPaths;
   // 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
   config.resolver.disableHierarchicalLookup = true;
   return config;

package/is-os-case-sensitive.js

@@ -0,0 +1,27 @@
+// 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.
+
+const path = require("path");
+const dir = path.resolve(__dirname);
+const fs = require("fs");
+
+/*** check weather os is case sensitive 
+ * @see : https://stackoverflow.com/questions/27367261/check-if-file-exists-case-sensitive/52908385#52908385
+*/
+function fileExistsWithCaseSync(filepath) {
+    var dir = path.dirname(filepath);
+    if (dir === '/' || dir === '.') return true;
+    var filenames = fs.readdirSync(dir);
+    if (filenames.indexOf(path.basename(filepath)) === -1) {
+        return false;
+    }
+    return fileExistsWithCaseSync(dir);
+}
+
+/***vérifie si le système supporte la cassse où non 
+ * c'est à dire si 2 noms de fichiers ayant la case différentes sont considérés comme le même où pas
+*/
+module.exports = (()=>{
+    return fileExistsWithCaseSync(path.resolve(dir,"metro.config.js")) == fileExistsWithCaseSync(path.resolve(dir,"Metro.config.js"))
+})();

package/metro.config.js

@@ -1 +1,4 @@
-module.exports = require("./expo.metro.config")();
+const path = require("path");
+module.exports = require("./expo.metro.config")({
+    dir : path.resolve(__dirname)
+});

package/package.json

@@ -1,99 +1,102 @@
-{
-  "name": "@fto-consult/expo-ui",
-  "version": "1.1.3",
-  "description": "Bibliothèque de composants UI Expo,react-native",
-  "main": "index.js",
-  "scripts": {
-    "publish": "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",
-    "build-electron": "electron-webpack && electron-builder --dir -c.compression=store",
-    "test:build": "electron-webpack && electron-builder --dir -c.compression=store -c.mac.identity=null",
-    "compile-electron": "webpack --config ./electron/webpack.config.js",
-    "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 doctor --fix-dependencies"
-  },
-  "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": {
-    "@babel/preset-react": "^7.18.6",
-    "@emotion/native": "^11.10.0",
-    "@expo/metro-config": "^0.4.0",
-    "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.1.13",
-    "@gorhom/portal": "^1.0.14",
-    "@react-native-async-storage/async-storage": "~1.17.3",
-    "@react-native-community/netinfo": "9.3.0",
-    "@react-navigation/native": "^6.0.13",
-    "@react-navigation/native-stack": "^6.9.1",
-    "@shopify/flash-list": "1.1.0",
-    "babel-plugin-inline-dotenv": "^1.7.0",
-    "babel-plugin-root-import": "^6.6.0",
-    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "dotenv": "^16.0.3",
-    "expo": "^46.0.15",
-    "expo-camera": "~12.3.0",
-    "expo-linking": "~3.2.2",
-    "expo-sqlite": "~10.3.0",
-    "expo-status-bar": "~1.4.0",
-    "expo-system-ui": "~1.3.0",
-    "expo-web-browser": "~11.0.0",
-    "google-libphonenumber": "^3.2.31",
-    "parent-package-json": "^2.0.1",
-    "prop-types": "^15.8.1",
-    "react-apexcharts": "^1.4.0",
-    "react-content-loader": "^6.2.0",
-    "react-dom": "18.0.0",
-    "react-native": "0.69.6",
-    "react-native-big-list": "^1.5.5",
-    "react-native-gesture-handler": "~2.5.0",
-    "react-native-paper": "^4.12.5",
-    "react-native-paper-dates": "^0.9.2",
-    "react-native-reanimated": "~2.9.1",
-    "react-native-safe-area-context": "4.3.1",
-    "react-native-svg": "12.3.0",
-    "react-native-web": "~0.18.7",
-    "sharp-cli": "^2.1.0",
-    "tippy.js": "^6.3.7"
-  }
-}
+{
+  "name": "@fto-consult/expo-ui",
+  "version": "1.1.5",
+  "description": "Bibliothèque de composants UI Expo,react-native",
+  "main": "index.js",
+  "scripts": {
+    "publish": "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",
+    "build-electron": "electron-webpack && electron-builder --dir -c.compression=store",
+    "test:build": "electron-webpack && electron-builder --dir -c.compression=store -c.mac.identity=null",
+    "compile-electron": "webpack --config ./electron/webpack.config.js",
+    "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 doctor --fix-dependencies"
+  },
+  "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": {
+    "@babel/preset-react": "^7.18.6",
+    "@emotion/native": "^11.10.0",
+    "@expo/html-elements": "^0.2.0",
+    "@expo/metro-config": "^0.4.0",
+    "@expo/webpack-config": "^0.17.2",
+    "@fto-consult/common": "^1.1.28",
+    "@gorhom/portal": "^1.0.14",
+    "@react-native-async-storage/async-storage": "~1.17.3",
+    "@react-native-community/datetimepicker": "6.2.0",
+    "@react-native-community/netinfo": "9.3.0",
+    "@react-navigation/native": "^6.0.13",
+    "@react-navigation/native-stack": "^6.9.1",
+    "@shopify/flash-list": "1.1.0",
+    "babel-plugin-inline-dotenv": "^1.7.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "expo": "^46.0.15",
+    "expo-camera": "~12.3.0",
+    "expo-linking": "~3.2.2",
+    "expo-sqlite": "~10.3.0",
+    "expo-status-bar": "~1.4.0",
+    "expo-system-ui": "~1.3.0",
+    "expo-web-browser": "~11.0.0",
+    "google-libphonenumber": "^3.2.31",
+    "htmlparser2-without-node-native": "^3.9.2",
+    "parent-package-json": "^2.0.1",
+    "prop-types": "^15.8.1",
+    "react-apexcharts": "^1.4.0",
+    "react-content-loader": "^6.2.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.6",
+    "react-native-big-list": "^1.5.5",
+    "react-native-gesture-handler": "~2.5.0",
+    "react-native-paper": "^4.12.5",
+    "react-native-paper-dates": "^0.9.2",
+    "react-native-reanimated": "~2.9.1",
+    "react-native-safe-area-context": "4.3.1",
+    "react-native-svg": "12.3.0",
+    "react-native-web": "~0.18.7",
+    "react-native-webview": "11.23.0",
+    "sharp-cli": "^2.1.0",
+    "tippy.js": "^6.3.7"
+  }
+}

package/parent-package.js

@@ -3,8 +3,8 @@
 // license that can be found in the LICENSE file.
 
 /**** cette fonction a pour rôle de retourner le package parent à celui ci */
-module.export = ()=>{
-    const pathToParent = require("parent-package-json"); // Will return false if no parent exists
+module.exports = ()=>{
+    const pathToParent = require("parent-package-json")(); // Will return false if no parent exists
     if (pathToParent !== false) {
         return pathToParent.path;
     }

package/src/App.js

@@ -20,6 +20,7 @@ import {GestureHandlerRootView} from "react-native-gesture-handler";
 import StatusBar from "$ecomponents/StatusBar";
 import SimpleSelect from '$ecomponents/SimpleSelect';
 import {Provider as AlertProvider} from '$ecomponents/Dialog/confirm/Alert';
+import APP from "$app";
 
 export default function getIndex(options){
   const {App} = defaultObj(options);
@@ -35,7 +36,7 @@ export default function getIndex(options){
         theme,
     }),[theme]);
     const child = <Index theme={theme}/>;
-    const children = typeof App =='function'? App({children:child}) : child;
+    const children = typeof App =='function'? App({children:child,APP}) : child;
     return (
       <GestureHandlerRootView style={{ flex: 1 }}>
           <PaperProvider theme={theme}>

package/src/auth/Login.js

@@ -15,10 +15,12 @@ import View from "$ecomponents/View";
 import Avatar from "$ecomponents/Avatar";
 import Surface from "$ecomponents/Surface";
 import {Provider as DialogProvider} from "$ecomponents/Dialog";
-import Screen from "$escreen";
+import ScreenWithoutAuthContainer from "$escreen/ScreenWithoutAuthContainer";
 import {getTitle} from "$escreens/Auth/utils";
 import {isWeb} from "$cplatform";
+
 import getLoginProps from "$getLoginProps";
+const getProps = typeof getLoginProps =='function'? getLoginProps : x=>null;
 
 const WIDTH = 400;
 
@@ -31,7 +33,7 @@ export default function LoginComponent(props){
     const previousButtonRef = React.useRef(null);
     const dialogProviderRef = React.useRef(null);
     const backgroundColor = theme.colors.surface;
-    const Wrapper = withPortal ? Screen  : View;
+    const Wrapper = withPortal ? ScreenWithoutAuthContainer  : View;
     const _getForm = x=> getForm(formName);
     
     const auth = useAuth();
@@ -43,13 +45,12 @@ export default function LoginComponent(props){
     const getData = ()=>{
         const form = _getForm();
         if(form && form.getData){
-            return extendObj(state.data,form.getData());
+            return extendObj({},state.data,form.getData());
         }
         return defaultObj(props.data);
     }
     const goToFirstStep = ()=>{
-        const data = getData();
-        setState({...state,step:1,data});
+        setState({...state,step:1,data:getData()});
     }
     const focusField = (fieldName)=>{
         const form = _getForm();
@@ -73,9 +74,9 @@ export default function LoginComponent(props){
             },1000)
         }
     },[withPortal])
-    const getProps = typeof getLoginProps =='function'? getLoginProps : x=>null;
     const {header,children,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,canSubmit:canSubmitForm,onStepChange,...loginProps} = defaultObj(getProps({
         ...state,
+        state,
         getForm,
         getData,
         focusField,
@@ -105,7 +106,10 @@ export default function LoginComponent(props){
             notifyUser("Impossible de valider le formulaire car celui-ci semble invalide")
             return;
         }
-        const args = {data,form,step,nextButtonRef,previousButtonRef};
+        const args = {data,form,state,step,nextButtonRef,previousButtonRef};
+        if(nextButtonRef.current && nextButtonRef.current.isDisabled()){
+            return;
+        }
         if(typeof canGoToNext =='function'){
             const s = canGoToNext(args);
             if(s === false) return;
@@ -119,7 +123,7 @@ export default function LoginComponent(props){
             return auth.signIn(data).then((a)=>{
                 if(typeof onLoginSuccess =='function' && onLoginSuccess(a)=== false) return;
                 if(isFunction(onSuccess)){
-                    onSuccess(true);
+                    onSuccess(data);
                 } else {
                     navigate("Home");
                 } 
@@ -127,7 +131,7 @@ export default function LoginComponent(props){
                 Preloader.close();
             })
         } else {
-            setState({...state,step:step+1,...data})
+            setState({...state,step:step+1,data})
         }
     }
     

package/src/components/AutoLink/index.js

@@ -1,3 +1,7 @@
+// 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 * as Linking from 'expo-linking';
 import { Pressable } from 'react-native';
 import {isValidUrl,isValidEmail,defaultStr,isSms} from "$utils";

package/src/components/Br/index.js

@@ -1,4 +1,3 @@
-import {Text} from "react-native"
-export default function BrComponent(props){
-    return <Text>{"\n"}{props.children|| null}</Text>
-}
+import {BR } from '@expo/html-elements';
+
+export default BR;

package/src/components/Chart/index.native.js

@@ -1,15 +1,12 @@
 import FileSystem from "$file-system";
-import appexChartCode from "./appexchart.3.5.js.text";
+import appexChartCode from "./appexchart.3.5.html";
 import React from "$react";
 import WebView from "$ecomponents/WebView";
-import HTMLView from '$ecomponents/Html/View';
 import {defaultStr,uniqid} from "$utils";
 import View from "$ecomponents/View";
 
 let appexchartJSString = null;
 
-
-
 export const ChartComponent = React.forwardRef(({options,containerId,...props},ref)=>{
     const containerIdRef = React.useRef(defaultStr(containerId,uniqid("chart-container-id")))
     const appexChartJS = appexchartJSString? (appexchartJSString+"\n"):"";

package/src/components/Html/View.js

@@ -1,7 +1,7 @@
 /***@see : https://github.com/jsdf/react-native-htmlview */
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import htmlToElement from './htmlToElement';
+import htmlToElement from './HtmlToElement';
 import {Linking, Platform, StyleSheet, View} from 'react-native';
 import {StyleProp} from "$theme";
 

package/src/components/Html/index.js

@@ -0,0 +1 @@
+export * from "./HtmlToElement";

package/src/components/HtmlElements/index.js

@@ -0,0 +1,9 @@
+// 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.
+/***@see : https://www.npmjs.com/package/@expo/html-elements */
+export * from "@expo/html-elements";
+
+import {BR} from "@expo/html-elements";
+
+export {BR as Br};

package/src/components/Logo/Logo.js

@@ -3,17 +3,18 @@ import { Component } from "react";
 import {isNativeMobile} from "$cplatform";
 import {Image} from "react-native";
 import View from "$ecomponents/View";
-import Label from "$ecomponents/Label";
+import React from "$react";
 import theme,{remToPixel,Colors,flattenStyle} from '$theme';
 import {StyleSheet} from "react-native";
 import source from "$assets/logo.png";
 import {defaultStr} from "$utils";
+import LogoComponent from "$logoComponent";
 
 export const height = 150;
 export const width = undefined;//300;
 export default class Logo extends Component {
     render(props){
-        let {icon,color,style,testID,text} = this.props;
+        let {icon,color,style,testID,logo,text} = this.props;
         testID = defaultStr(testID,"RN_LogoComponent");
         const styles = getStyle(style,color);
         return <View testID={testID} style={styles.container}> 
@@ -28,12 +29,7 @@ export default class Logo extends Component {
                     )}
                 />}
             </View> : null}
-            {text !== false ? <View testID={testID+"_Content"} style={styles.logoContent}>
-                <Label style={styles.firstText}>XPose</Label>
-                <Label style={styles.secondText}>F</Label>
-                <Label style={styles.thirdText}>T</Label>
-                <Label style={styles.fourthText}>C</Label>
-            </View> : null}
+            {text !== false  && logo !== false ? (React.isValidElement(LogoComponent)? LogoComponent : React.isComponent(LogoComponent)? <LogoComponent {...props} style={styles.logoContent} testID={testID+"_Content"} styles={styles}/> : null) : null}
         </View>
     }
     
@@ -44,10 +40,9 @@ const getStyle = (style,color)=>{
     return  {
         ...styles,
         container : flattenStyle([styles.container,cColor,style]),
-        firstText : flattenStyle([styles.text,cColor]),
-        secondText : flattenStyle([styles.text,styles.secondText,cColor]),
-        thirdText : flattenStyle([styles.text,cColor,styles.thirdText]),
-        fourthText : flattenStyle([styles.text,cColor])
+        firstText : flattenStyle([styles.medium,cColor]),
+        large : flattenStyle([styles.medium,styles.large,cColor]),
+        small : flattenStyle([styles.medium,cColor,styles.small]),
     };
 }
 
@@ -73,25 +68,23 @@ const styles = StyleSheet.create({
     },  
     logoContent : {
         position:"relative",
-        //width : 160,
-        //flex : 2,
         flexDirection : "row",
         alignItems : "center",
         justifyContent : "flex-start"
     },
-    secondText : {
-        fontSize : remToPixel(5),
-        alignItems : "flex-start",
-        justifyContent : "center",
-        marginTop: 0//isNativeMobile() ? -5 : 0
-    },
-    thirdText : {
+    small : {
         fontSize:remToPixel(2.5),
         marginLeft:isNativeMobile()? -25 : -20
     },
-    text : {
+    medium : {
         fontSize:remToPixel(3),
     },
+    large : {
+        fontSize : remToPixel(5),
+        alignItems : "flex-start",
+        justifyContent : "center",
+        marginTop: 0
+    },
 })
 
 Logo.height = height;

package/src/components/Logo/defaultComponent.js

@@ -0,0 +1,5 @@
+// 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.
+
+export default ()=> null;

package/src/index.js

@@ -1,5 +1,6 @@
 import React from "$react"
-import { AppState,Linking,BackHandler,} from "react-native"
+import { AppState,BackHandler,} from "react-native";
+import * as Linking from 'expo-linking';
 import APP from "$capp";
 import {AppStateService,trackIDLE,stop as stopIDLE} from "$capp/idle";
 import { NavigationContainer} from '@react-navigation/native';
@@ -31,10 +32,10 @@ const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE';
 function App(props) {
   AppStateService.init();
   const [initialState, setInitialState] = React.useState(undefined);
-  const appReadyRef = React.useRef(false);
+  const appReadyRef = React.useRef(true);
   const [state,setState] = React.useState({
      isLoading : true,
-     isInitialized:false,
+     isInitialized:true,
   });
   React.useEffect(() => {
     const restoreState = () => {
@@ -99,17 +100,16 @@ function App(props) {
        APP.setOnlineState(state);
     });
     NetInfo.fetch().catch((e)=>{});
-    restoreState().then(()=>{
-      init().then(()=>{
-        if(Auth.isLoggedIn()){
-          Auth.loginUser(false);
-        }
-        setState({
-          ...state,isInitialized:true,isLoading : false,
-        });  
-      }).catch((e)=>{
-          setState({...state,isInitialized:true,isLoading : false});
-      });
+    init().then(()=>{
+      if(Auth.isLoggedIn()){
+        Auth.loginUser(false);
+      }
+      setState({
+        ...state,isInitialized:true,isLoading : false,
+      });  
+    }).catch((e)=>{
+        console.error(e," initializing app")
+        setState({...state,isInitialized:true,isLoading : false});
     });
 
     const Events = {}

package/src/layouts/Screen/Screen.js

@@ -1,172 +1,17 @@
-import React from '$react';
-import {StyleSheet} from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import PropTypes from "prop-types";
-import {defaultObj,defaultStr,defaultNumber,defaultBool} from "$utils";
-import ScrollView from '$ecomponents/ScrollView';
-import View from "$ecomponents/View";
-import { useNavigation,getScreenProps } from '$cnavigation';
-import Fab from "$elayouts/Fab";
-import APP from "$capp";
-import AppBar,{createAppBarRef} from "$elayouts/AppBar";
-import ErrorBoundary from "$ecomponents/ErrorBoundary";
-import Portal from "$ecomponents/Portal";
-import theme from "$theme";
-import StatusBar from "$ecomponents/StatusBar";
-import Auth from "$cauth";
+// 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.
 
-const getDefaultTitle = (nTitle,returnStr)=>{
-  let titleStr = React.getTextContent(nTitle);
-  if(!titleStr){
-      titleStr = APP.getName();
-  } 
-  const dbLabel = "";
-  if(!titleStr.toLowerCase().contains(dbLabel.toLowerCase())){
-      titleStr += " ["+dbLabel+"]";
-  }
-  if(returnStr) return titleStr;
-  return typeof nTitle =='string' ? titleStr : nTitle;
-}
+import Container from "$cauth/Container";
+import ScreenWithOrWithoutAuthContainer from "./ScreenWithOrWithoutAuthContainer";
 
-export default function MainScreenLayoutComponent(props) {
-  let {
-    children,
-    withScrollView = false,
-    withStatusBar = true,
-    style,
-    contentContainerStyle,
-    options,
-    backAction,
-    appBarProps,
-    authProps,
-    elevation,
-    withFab,
-    appBar,
-    authRequired,
-    withDrawer,
-    allowDrawer,
-    title,
-    subtitle,
-    modal,
-    fabProps,
-    screenName,
-    containerProps,
-    testID,
-    ...rest
-  } = getScreenProps(props);
-  const insets = useSafeAreaInsets();
-  testID = defaultStr(testID,"RN_MainScreenLayoutComponent")
-  containerProps = defaultObj(containerProps);
-  const backgroundColor = theme.colors.background;
-  const containerStyle = [
-    styles.container,
-    {
-      backgroundColor,
-      paddingBottom: insets.bottom,
-      paddingLeft: insets.left,
-      paddingRight: insets.right,
-    },
-  ];
-  options = defaultObj(options);
-  appBarProps = defaultObj(appBarProps)
-  title = defaultVal(appBarProps.title,options.title,title);
-  subtitle = defaultVal(appBarProps.subtitle,options.subtitle,subtitle);
-  const appBarRef = createAppBarRef();
-  const navigation = useNavigation();
-  authProps = Object.assign({},authProps),
-  fabProps = defaultObj(fabProps);
-  authRequired = defaultBool(authProps.required,authRequired,false);
-  withDrawer = typeof withDrawer =='boolean'? withDrawer : authRequired;
-  if(allowDrawer === false){
-     withDrawer = false;
-  }
-  if(authRequired === false){
-    withFab = false;
-  }
-  if(typeof withFab !=='boolean'){
-    withFab = withDrawer;
-  }
-  React.useEffect(() => {
-    if((title||subtitle) && navigation && navigation.setOptions){
-      const appName = APP.getName().toUpperCase();
-      subtitle = React.getTextContent(subtitle);
-      let screenTitle = getDefaultTitle(title,true);
-      if(subtitle){
-          screenTitle += " | "+subtitle;
-      }
-      if(!screenTitle.toUpperCase().contains(appName)){
-          screenTitle+=" | "+appName;
-      }
-      navigation.setOptions({
-        ...options,
-        appBarProps:{...options.appBarProps,...appBarProps,title,subtitle},
-        subtitle :subtitle,
-        title : screenTitle,
-      });
-    }
-  }, [title,subtitle]);
-  const Wrapper =  modal ? Portal : React.Fragment;
-  const fab = withFab !== false ? <Fab 
-      {...fabProps}
-      screenName={screenName}
-  />  : null;
-  return <Wrapper>
-          <Auth.Container  {...authProps} required ={authRequired}>
-              {withStatusBar !== false ? <StatusBar/> : null}
-              <ErrorBoundary testID={testID+"_ScreenLayoutErrorBoundary"}>
-                <View testID={testID} {...containerProps}  style={[styles.container,{backgroundColor},modal && styles.modal]}>
-                  {appBar === false ? null : React.isValidElement(appBar)? state.AppBar :  <AppBar testID={testID+'_AppBar'} {...appBarProps} backAction = {defaultVal(appBarProps.backAction,backAction)} elevation={defaultNumber(appBarProps.elevation,elevation)} withDrawer={withDrawer} options={options} ref={appBarRef} title={title} subtitle={subtitle}/>}
-                  {withScrollView !== false ? (
-                    <ScrollView
-                      testID = {testID+'_ScreenContentScrollView'}
-                      {...rest}
-                      contentContainerStyle={[contentContainerStyle]}
-                      style={[containerStyle,styles.container, style]}
-                    >
-                      {children}
-                      {fab}
-                    </ScrollView>
-                  ) : (
-                    <View  testID={testID+'_ScreenContent'} {...rest} style={[containerStyle,styles.wrapper,styles.container, style]}>
-                      {children}
-                      {fab}
-                    </View>
-                  )}
-                </View>
-              </ErrorBoundary>
-          </Auth.Container>
-    </Wrapper>
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  wrapper : {
-    flexDirection:'column',
-    /*flex : 1,
-    flexGrow : 1,
-    alignItems:'center'*/
-  },
-  modal : {
-    ...StyleSheet.absoluteFillObject,
-    top : 0,
-    left:0,
-    flex:1,
-    width : '100%',
-    height : '100%'
-  }
-});
-
-MainScreenLayoutComponent.propTypes = {
-  children: PropTypes.any,
-  withScrollView : PropTypes.bool,
-  style:PropTypes.object,
-  appBarProps : PropTypes.object,
-  elevation : PropTypes.number,
-  //appBar : PropTypes.bool,
-  contentContainerStyle : PropTypes.object,
-  withFab : PropTypes.bool,
-  withDrawer : PropTypes.bool,//si l'on doit afficher un drawer dans le contenu
-  fabProps : PropTypes.object,
+export default function MainScreenComponent(props){
+    return <ScreenWithOrWithoutAuthContainer
+      {...props}
+      renderChildren = {({containerProps,children})=>{
+          return <Container {...containerProps}>
+            {children}
+          </Container>
+      }}
+    />
 }

package/src/layouts/Screen/ScreenWithOrWithoutAuthContainer.js

@@ -0,0 +1,179 @@
+import React from '$react';
+import {StyleSheet} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import PropTypes from "prop-types";
+import {defaultObj,defaultStr,defaultNumber,defaultBool} from "$utils";
+import ScrollView from '$ecomponents/ScrollView';
+import View from "$ecomponents/View";
+import { useNavigation,getScreenProps } from '$cnavigation';
+import Fab from "$elayouts/Fab";
+import APP from "$capp";
+import AppBar,{createAppBarRef} from "$elayouts/AppBar";
+import ErrorBoundary from "$ecomponents/ErrorBoundary";
+import Portal from "$ecomponents/Portal";
+import theme from "$theme";
+import StatusBar from "$ecomponents/StatusBar";
+
+const getDefaultTitle = (nTitle,returnStr)=>{
+  let titleStr = React.getTextContent(nTitle);
+  if(!titleStr){
+      titleStr = APP.getName();
+  } 
+  const dbLabel = "";
+  if(!titleStr.toLowerCase().contains(dbLabel.toLowerCase())){
+      titleStr += " ["+dbLabel+"]";
+  }
+  if(returnStr) return titleStr;
+  return typeof nTitle =='string' ? titleStr : nTitle;
+}
+
+export default function MainScreenScreenWithOrWithoutAuthContainer(props) {
+  let {
+    children,
+    withScrollView = false,
+    withStatusBar = true,
+    style,
+    contentContainerStyle,
+    options,
+    backAction,
+    appBarProps,
+    authProps,
+    elevation,
+    withFab,
+    appBar,
+    authRequired,
+    withDrawer,
+    allowDrawer,
+    title,
+    subtitle,
+    modal,
+    fabProps,
+    screenName,
+    containerProps,
+    testID,
+    renderChildren,
+    ...rest
+  } = getScreenProps(props);
+  const insets = useSafeAreaInsets();
+  testID = defaultStr(testID,"RN_MainScreenScreenWithOrWithoutAuthContainer")
+  containerProps = defaultObj(containerProps);
+  const backgroundColor = theme.colors.background;
+  const containerStyle = [
+    styles.container,
+    {
+      backgroundColor,
+      paddingBottom: insets.bottom,
+      paddingLeft: insets.left,
+      paddingRight: insets.right,
+    },
+  ];
+  options = defaultObj(options);
+  appBarProps = defaultObj(appBarProps)
+  title = defaultVal(appBarProps.title,options.title,title);
+  subtitle = defaultVal(appBarProps.subtitle,options.subtitle,subtitle);
+  const appBarRef = createAppBarRef();
+  const navigation = useNavigation();
+  authProps = Object.assign({},authProps),
+  fabProps = defaultObj(fabProps);
+  authRequired = defaultBool(authProps.required,authRequired,false);
+  withDrawer = typeof withDrawer =='boolean'? withDrawer : authRequired;
+  if(allowDrawer === false){
+     withDrawer = false;
+  }
+  if(authRequired === false){
+    withFab = false;
+  }
+  if(typeof withFab !=='boolean'){
+    withFab = withDrawer;
+  }
+  React.useEffect(() => {
+    if((title||subtitle) && navigation && navigation.setOptions){
+      const appName = APP.getName().toUpperCase();
+      subtitle = React.getTextContent(subtitle);
+      let screenTitle = getDefaultTitle(title,true);
+      if(subtitle){
+          screenTitle += " | "+subtitle;
+      }
+      if(!screenTitle.toUpperCase().contains(appName)){
+          screenTitle+=" | "+appName;
+      }
+      navigation.setOptions({
+        ...options,
+        appBarProps:{...options.appBarProps,...appBarProps,title,subtitle},
+        subtitle :subtitle,
+        title : screenTitle,
+      });
+    }
+  }, [title,subtitle]);
+  const Wrapper =  modal ? Portal : React.Fragment;
+  const fab = withFab !== false ? <Fab 
+      {...fabProps}
+      screenName={screenName}
+  />  : null;
+  const child = <>
+      {withStatusBar !== false ? <StatusBar/> : null}
+      <ErrorBoundary testID={testID+"_ScreenLayoutErrorBoundary"}>
+        <View testID={testID} {...containerProps}  style={[styles.container,{backgroundColor},modal && styles.modal]}>
+          {appBar === false ? null : React.isValidElement(appBar)? state.AppBar :  <AppBar testID={testID+'_AppBar'} {...appBarProps} backAction = {defaultVal(appBarProps.backAction,backAction)} elevation={defaultNumber(appBarProps.elevation,elevation)} withDrawer={withDrawer} options={options} ref={appBarRef} title={title} subtitle={subtitle}/>}
+          {withScrollView !== false ? (
+            <ScrollView
+              testID = {testID+'_ScreenContentScrollView'}
+              {...rest}
+              contentContainerStyle={[contentContainerStyle]}
+              style={[containerStyle,styles.container, style]}
+            >
+              {children}
+              {fab}
+            </ScrollView>
+          ) : (
+            <View  testID={testID+'_ScreenContent'} {...rest} style={[containerStyle,styles.wrapper,styles.container, style]}>
+              {children}
+              {fab}
+            </View>
+          )}
+        </View>
+      </ErrorBoundary>
+  </>
+  return <Wrapper>
+          {renderChildren({
+            containerProps : {
+              ...authProps,
+              required : authRequired,
+            },
+            children : child,
+            })}
+      </Wrapper>
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  wrapper : {
+    flexDirection:'column',
+    /*flex : 1,
+    flexGrow : 1,
+    alignItems:'center'*/
+  },
+  modal : {
+    ...StyleSheet.absoluteFillObject,
+    top : 0,
+    left:0,
+    flex:1,
+    width : '100%',
+    height : '100%'
+  }
+});
+
+MainScreenScreenWithOrWithoutAuthContainer.propTypes = {
+  children: PropTypes.any,
+  withScrollView : PropTypes.bool,
+  style:PropTypes.object,
+  appBarProps : PropTypes.object,
+  elevation : PropTypes.number,
+  //appBar : PropTypes.bool,
+  contentContainerStyle : PropTypes.object,
+  withFab : PropTypes.bool,
+  withDrawer : PropTypes.bool,//si l'on doit afficher un drawer dans le contenu
+  fabProps : PropTypes.object,
+}

package/src/layouts/Screen/ScreenWithoutAuthContainer.js

@@ -0,0 +1,18 @@
+// 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.
+
+/*** afin d'éviter les redondances cycliques avec le module $loginComponent, ce composant doit être utiliser pour 
+ * le rendu de tous les composants implémentés définis dans le fichier $loginComponent car ne necessite pas de test sur 
+  le fait que l'utilisateur soit connecté où pas
+ */
+
+import ScreenWithOrWithoutAuthContainer from "./ScreenWithOrWithoutAuthContainer";
+export default function ScreenWithoutAuthContainer(props){
+    return <ScreenWithOrWithoutAuthContainer
+      {...props}
+      renderChildren = {({children})=>{
+          return children
+      }}
+    />
+}

package/src/layouts/Screen/index.js

@@ -1,4 +1,5 @@
 import Screen from "./Screen";
+import ScreenWithoutAuthContainer from "./ScreenWithoutAuthContainer";
 import FormData from "./FormData";
 import List from "./FormData/List";
 
@@ -8,4 +9,4 @@ Screen.List = List;
 
 export default Screen;
 
-export {FormData,List};
+export {FormData,List,ScreenWithoutAuthContainer};

package/src/navigation/Drawer/index.js

@@ -45,9 +45,13 @@ const DrawerNavigator = React.forwardRef(({content,children,state,...props},ref)
     React.useEffect(()=>{
         if(prevIsLoggedIn === isLoggedIn) return;
         navigate("Home");
-    },[isLoggedIn])
+    },[isLoggedIn]);
     if(!isLoggedIn) {
-        return <Login withPortal/>
+        return <Login withPortal
+            onSuccess = {(data)=>{
+                setIsLoggedIn(true);
+            }}
+        />
     }
     return <Drawer
         isItemActive = {isItemActive}

package/src/screens/Auth/index.js

@@ -1,7 +1,6 @@
 
-import {SIGN_IN} from "./routes"
+import {SIGN_IN} from "$cauth/routes"
 import Screen from "$escreen";
-import {GROUP_NAMES} from "$escreens/utils";
 import Login from "$eauth/Login";
 import {getScreenProps} from "$cnavigation";
 import {getTitle} from "./utils";
@@ -24,7 +23,7 @@ function AuthSignInScreen(_props){
 }
 
 AuthSignInScreen.screenName = SIGN_IN;
-AuthSignInScreen.groupName = GROUP_NAMES.PUBLIC;
+AuthSignInScreen.authRequired = false;
 AuthSignInScreen.modal = true;
 AuthSignInScreen.allowDrawer = false;
 

package/src/screens/index.js

@@ -12,7 +12,6 @@ export * from "./utils";
 export const SCREEN_OPTIONS = {};
 
 
-
 export const handleScreen = ({Screen,Factory,ModalFactory,result,useTheme,filter,index})=>{
     result = defaultObj(result);
     result.screens = defaultObj(result.screens);
@@ -41,9 +40,9 @@ export const handleScreen = ({Screen,Factory,ModalFactory,result,useTheme,filter
                 return null;
             }
             ///le groupe d'écran par défaut
-            let groupName = defaultStr(Screen.groupName,GROUP_NAMES.DEFAULT).toUpperCase().trim();
+            let groupName = Screen.Start ||Screen.start ? GROUP_NAMES.START : authRequired === false ? GROUP_NAMES.PUBLIC : GROUP_NAMES.PRIVATE;
             if(!GROUP_NAMES[groupName]){
-                groupName = GROUP_NAMES.DEFAULT
+                groupName = GROUP_NAMES.PRIVATE;
             }
             if(!authRequired){
                 groupName = groupName || GROUP_NAMES.PUBLIC;
@@ -179,7 +178,7 @@ export const handleContent = ({screens,hasGetStarted,state,Factory})=>{
     Object.map(screens,(screens,groupName)=>{
         if(!Array.isArray(screens)) return null;
         if(hasGetStarted === false){
-          if(groupName == GROUP_NAMES.INSTALL){
+          if(groupName == GROUP_NAMES.START){
               content.push(<Factory.Group key={groupName}>
                 {screens}
               </Factory.Group>)

package/src/components/Br/index.web.js

@@ -1,3 +0,0 @@
-export default function BrComponent(props){
-    return <><br/>{props.children|| null}</>
-}

package/src/screens/Auth/routes.js

@@ -1,9 +0,0 @@
-export const SIGN_IN = "AuthSignIn";
-
-export const LOGIN = SIGN_IN;
-
-export const SIGN_ON = "AuthSignOn";
-
-export const LOG_OUT = SIGN_ON;
-
-export default {SIGN_IN,SIGN_ON,LOGIN,LOG_OUT}