@fto-consult/expo-ui 1.1.2 → 1.1.4

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,6 +61,13 @@ 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);
     }

package/babel.config.js

@@ -3,8 +3,19 @@ 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 inlineDovOptions = {};
+    if(environmentPath && typeof environmentPath =='string' && 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")({base:dir,...opts,platform:"expo"});
     return {
       presets: [
@@ -12,12 +23,10 @@ module.exports = function(api,opts) {
         ["@babel/preset-react", {"runtime": "automatic"}],
       ],
       plugins : [
+        ["inline-dotenv",inlineDovOptions],
         ['babel-plugin-root-import', {"paths": alias}],
         ['react-native-reanimated/plugin'],
         ['transform-inline-environment-variables'],
-        ['inline-dotenv',{
-          ...(environmentPath?{path:environmentPath} : {})
-        }]
-      ]
+      ],
     };
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -60,7 +60,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/metro-config": "^0.4.0",
     "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.1.13",
+    "@fto-consult/common": "^1.1.24",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/netinfo": "9.3.0",
@@ -70,7 +70,6 @@
     "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",

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;
 
@@ -28,26 +30,27 @@ export default function LoginComponent(props){
     testID = defaultStr(testID,"RN_Auth.LoginComponent");
     formName = React.useRef(uniqid(defaultStr(formName,"login-formname"))).current;
     const nextButtonRef = React.useRef(null);
+    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();
     const notifyUser = (message)=> notify.error({message,position:'top'})
     const [state,setState] = React.useState({
         step : defaultNumber(step,1),
+        data : defaultObj(props.data),
     });
-    const _getForm = x=> getForm(formName);
     const getData = ()=>{
         const form = _getForm();
         if(form && form.getData){
-            return 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();
@@ -71,14 +74,15 @@ export default function LoginComponent(props){
             },1000)
         }
     },[withPortal])
-    const getProps = typeof getLoginProps =='function'? getLoginProps : x=>null;
-    const {header,children,data:loginData,validate,keyboardEvents,onSuccess:onLoginSuccess,canSubmit:canSubmitForm,onStepChange,...loginProps} = defaultObj(getProps({
+    const {header,children,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,canSubmit:canSubmitForm,onStepChange,...loginProps} = defaultObj(getProps({
         ...state,
-        data : getData(),
         state,
+        getForm,
+        getData,
+        focusField,
         formName,
-        setState,
         nextButtonRef,
+        previousButtonRef,
     }));
     React.useEffect(()=>{
         Preloader.closeAll();
@@ -87,7 +91,7 @@ export default function LoginComponent(props){
     React.useEffect(()=>{
         /*** lorsque le state du composant change */
         if(typeof onStepChange =='function'){
-            return onStepChange({...state,previousStep:prevStep,focusField,nextButtonRef,data:getData()})
+            return onStepChange({...state,previousStep:prevStep,focusField,nextButtonRef})
         }
     },[state.step]);
     /****la fonction à utiliser pour vérifier si l'on peut envoyer les données pour connextion
@@ -96,16 +100,18 @@ export default function LoginComponent(props){
     const canSubmit = typeof canSubmitForm =='function'? canSubmitForm : ({step})=>step >= 2;
     const goToNext = ()=>{
         let step = state.step;
-        let data = getData();
-        data.code = defaultStr(data.code, state.code);
+        const data = getData();
         const form = _getForm();
         if(!form){
             notifyUser("Impossible de valider le formulaire car celui-ci semble invalide")
             return;
         }
-        const args = {data,form,step,nextButtonRef};
-        if(typeof validate =='function'){
-            const s = validate(args);
+        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;
             if(isNonNullString(s)){
                 notifyUser(s);
@@ -117,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");
                 } 
@@ -125,7 +131,7 @@ export default function LoginComponent(props){
                 Preloader.close();
             })
         } else {
-            setState({...state,step:step+1,...data})
+            setState({...state,step:step+1,data})
         }
     }
     
@@ -155,7 +161,7 @@ export default function LoginComponent(props){
                             }
                         }
                     }}
-                    data = {extendObj(props.data,loginData)}
+                    data = {extendObj(state.data,loginData)}
                 >
                     <View testID={testID+"_ButtonsContainer"} style={[styles.buttonWrapper]}>
                         <Button 
@@ -167,12 +173,12 @@ export default function LoginComponent(props){
                             onPress = {goToNext}
                             icon = {state.step == 1? 'arrow-right':'login'}
                             surface
-                            disabled = {!isNonNullString(state.code)}
                         >
                             {state.step == 1? 'Suivant' : 'Connexion' }
                         </Button>
                         {state.step>=2 ? <Button 
                             onPress = {goToFirstStep}
+                            ref = {previousButtonRef}
                             mode = "contained"
                             rounded
                             raised

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/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/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

@@ -47,7 +47,11 @@ const DrawerNavigator = React.forwardRef(({content,children,state,...props},ref)
         navigate("Home");
     },[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/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}