@fto-consult/expo-ui 5.3.0 → 5.5.0

package/index.js

@@ -2,6 +2,19 @@ import { registerRootComponent } from "expo";
 import {Platform } from 'react-native';
 import App from "./src/App";
 const isWeb = Platform.OS === "web";
+
+/****
+ * les options sont de la forme : 
+ * {
+ *   @param init {function} ()=>Promise<{}>, initialise l'application, lorsque la promèsse n'est pas résolue, alors l'application considère qu'il s'agit d'une étape pour l'écran de GetStarted dans ce cas, 
+ *   l'option la route getStartedRouteName est utilisée comme route par défaut de l'application
+ *   @param initialRouteName {string} la route initiale, par d'afaut Home, valide lorsque la promèsse résultat de la fonction init est résolue
+ *   @param getStartedRouteName {string} la route de l'écran de GetStarted, valide lorsque la promèsse résultat de la fonction init n'est pas résolue
+ *      L'écran de route getStartedRouteName prend en paramètre onGetStarted {function}, qui est appelée lorsque le contenu de l'écran GetStarted est affiché à l'utilisateur
+ *   @maram {swrConfig}, les options supplémentaires à passer au gestinnaire swr
+ *   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){
     options = options && typeof options =='object' && !Array.isArray(options)? options : {};
     registerRootComponent(function(props){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "5.3.0",
+  "version": "5.5.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^3.3.3",
+    "@fto-consult/common": "^3.3.6",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "^1.17.11",
     "@react-native-community/datetimepicker": "^6.7.3",
@@ -96,8 +96,8 @@
     "react-native-blob-util": "^0.17.0",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-mime-types": "^2.3.0",
-    "react-native-paper": "^4.12.5",
-    "react-native-paper-dates": "^0.9.2",
+    "react-native-paper": "^5.4.1",
+    "react-native-paper-dates": "^0.15.1",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "^4.5.0",
     "react-native-screens": "~3.20.0",

package/src/App.js

@@ -40,7 +40,7 @@ Object.map(Utils,(v,i)=>{
      window[i] = v;
   }
 });
-export default function getIndex({onMount,onUnmount,onRender,preferences:appPreferences,...rest}){
+export default function getIndex({onMount,onUnmount,swrConfig,onRender,preferences:appPreferences,...rest}){
   const isScreenFocusedRef = React.useRef(true);
     ///garde pour chaque écran sa date de dernière activité
     const screensRef = React.useRef({});//la liste des écrans actifs
@@ -49,6 +49,7 @@ export default function getIndex({onMount,onUnmount,onRender,preferences:appPref
     const appStateRef = React.useRef({});
     const isKeyboardOpenRef = React.useRef(false);
     React.useOnRender(onRender);
+    swrConfig = defaultObj(swrConfig);
     React.useEffect(()=>{
         ///la fonction de rappel lorsque le composant est monté
         let cb = typeof onMount =='function'? onMount() : null;
@@ -120,6 +121,7 @@ export default function getIndex({onMount,onUnmount,onRender,preferences:appPref
     return (
       <SWRConfig 
         value={{
+          ...swrConfig,
           provider: () => new Map(),
           isOnline() {
             /* Customize the network state detector */

package/src/components/AppBar/index.js

@@ -27,7 +27,6 @@ export const GO_BACK_EVENT = "STACK_NAVIGATOR_GO_BACK";
 *       @param menuProps : les props à passer au menu au cas où les actions de l'appBar son segmentés avec certaines qui sont découpées dans un menu more 
 
  */
-const isNullOrE = x => x === null || x === false;
 
 const AppBarComponent = React.forwardRef((props,ref)=> {
     let { bindResizeEvent,elevation,isMainDrawer,
@@ -91,7 +90,6 @@ const AppBarComponent = React.forwardRef((props,ref)=> {
           children = {backAction}
         /> 
     }
-    console.log(backAction," is back actions");
     const [context] = React.useState({});
     actions = typeof actions =='function'? actions(getCallAgs()) : actions;
     const dimensions = Dimensions.get("window");

package/src/components/BottomSheet/Menu.js

@@ -11,17 +11,15 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
     let {anchor,anchorProps,screenIndent,height:customHeight,bindResizeEvent,onDismiss,testID,visible:customVisible,controlled,mobile,animateOnClose,renderMenuContent,sheet,children,...rest} = props;
     rest = defaultObj(rest);
     const isControlled = controlled ? true : false;
-    const visibleRef = React.useRef(null);
     const [state,setState] = React.useState({
         visible : false,
         height : undefined,
     });
-    const visible = typeof visibleRef.current =='boolean'? visibleRef.current : isControlled ? customVisible : state.visible;
-    visibleRef.current = null;
+    const visible = isControlled ? customVisible : state.visible;
     let height = state.height;
     const isMounted = React.useIsMounted();
     const anchorRef = React.useRef(null);
-    const isMobile = x=> mobile || sheet === true || renderMenuContent === false || isMobileMedia() ? true : false;
+    const isMobile = x=> mobile || sheet === true || renderMenuContent === false || isMob ? true : false;
     let isMob = isMobile();
     testID = defaultStr(testID,'RN_BottomSheetMenuComponent');
     const innerRef = React.useRef(null);
@@ -32,9 +30,9 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
         getContentHeight(anchorRef,({height})=>{
             setState({...state,visible:true,height});
         },screenIndent);
-    }, close = ()=>{
-        if(!isMobile()) return;
-        if(!isMounted() || !visible) return;
+    }, close = (force)=>{
+        if(force !== true && !isMobile()) return;
+        if(!isMounted() || (force !== true && !visible)) return;
         if(isControlled){
             if(onDismiss){
                 onDismiss({});
@@ -43,6 +41,7 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
         }
         setState({...state,visible:false})
     }
+    const prevIsMob = React.usePrevious(isMob);
     const Component = isMob ? BottomSheet : Menu;
     anchorProps = defaultObj(anchorProps);
     if(isMob){
@@ -67,6 +66,9 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
         delete rest.visible;
         height = undefined;
     }
+    if(prevIsMob !== isMob){
+        rest.visible = visible;
+    }
     if(!isControlled){
         rest.onAnchorPress = ()=>{
             open();
@@ -77,8 +79,7 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
     React.useEffect(()=>{
         const closeModal = ()=>{
             if(!isMounted()) return;
-            visibleRef.current = false;
-            setState({...state});
+            close(true);
         }
         if(bindResizeEvent !== false){
             APP.on(APP.EVENTS.RESIZE_PAGE,closeModal);

package/src/components/Datagrid/SWRDatagrid.js

@@ -177,6 +177,9 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
             opts = defaultObj(opts);
             opts.fetchOptions = isObj(opts.fetchOptions)? Object.clone(opts.fetchOptions) : {};
             extendObj(true,opts.fetchOptions,fetchOptionsRef.current?.fetchOptions);
+            if(props.convertFiltersToSQL === false){
+                opts.fetchOptions.selector = extendObj(true,{},opts.fetchOptions.selector,fetchOptionsRef.current?.selector);
+            }
             opts.fetchOptions.sort = sortRef.current;
             if(canHandleLimit){
                 opts.fetchOptions.limit = limitRef.current;

package/src/components/Menu/Menu.js

@@ -47,18 +47,9 @@ class _Menu extends AppComponent {
     statusBarHeight: APPROX_STATUSBAR_HEIGHT,
     overlayAccessibilityLabel: 'Close menu',
   };
-
-  static getDerivedStateFromProps1(nextProps, prevState) {
-    if (nextProps.visible && !prevState.rendered) {
-      return { rendered: true };
-    }
-
-    return null;
-  }
   constructor(props){
     super(props);
     extendObj(this.state,{
-      rendered: this.props.visible,
       top: 0,
       left: 0,
       menuLayout: { width: 0, height: 0 },
@@ -78,17 +69,13 @@ class _Menu extends AppComponent {
   componentWillUnmount() {
     super.componentWillUnmount();
     this.removeListeners();
+    this.menu = null;
+    this.anchor = null;
   }
 
   anchor = null;
-  menu = null;
   backHandlerSubscription;
 
-  isCoordinate = (anchor) =>
-    !React.isValidElement(anchor) &&
-    typeof anchor?.x === 'number' &&
-    typeof anchor?.y === 'number';
-
   measureMenuLayout = () =>
     new Promise((resolve) => {
       if (this.menu) {
@@ -100,12 +87,6 @@ class _Menu extends AppComponent {
 
   measureAnchorLayout = () =>
     new Promise((resolve) => {
-      const { anchor } = this.props;
-      if (this.isCoordinate(anchor)) {
-        resolve({ x: anchor.x, y: anchor.y, width: 0, height: 0 });
-        return;
-      }
-
       if (this.anchor) {
         this.anchor.measureInWindow((x, y, width, height) => {
           resolve({ x, y, width, height });
@@ -198,8 +179,8 @@ class _Menu extends AppComponent {
       !windowLayout.height ||
       !menuLayout.width ||
       !menuLayout.height ||
-      (!anchorLayout.width && !this.isCoordinate(this.props.anchor)) ||
-      (!anchorLayout.height && !this.isCoordinate(this.props.anchor))
+      (!anchorLayout.width) ||
+      (!anchorLayout.height)
     ) {
       requestAnimationFrame(this.show);
       return;
@@ -255,7 +236,7 @@ class _Menu extends AppComponent {
       useNativeDriver: true,
     }).start(({ finished }) => {
       if (finished) {
-        this.setState({ menuLayout: { width: 0, height: 0 }, rendered: false });
+        this.setState({ menuLayout: { width: 0, height: 0 }});
         this.state.scaleAnimation.setValue({ x: 0, y: 0 });
         this.focusFirstDOMNode(this.anchor);
       }
@@ -283,8 +264,8 @@ class _Menu extends AppComponent {
       opacityAnimation,
       scaleAnimation,
     } = this.state;
-    const rendered = visible;
     const minWidth = defaultDecimal(customMinWidth);
+    const rendered = this.props.visible;
     let { left, top } = this.state;
 
     // I don't know why but on Android measure function is wrong by 24
@@ -458,7 +439,7 @@ class _Menu extends AppComponent {
     
     //- (sameWidth ? anchorLayout.height  : 0)
     const positionStyle = {
-      top: this.isCoordinate(anchor) ? top : top + additionalVerticalValue,
+      top: top + additionalVerticalValue,
       ...(I18nManager.isRTL ? { right: left } : { left }),
     };
     if(sameWidth){
@@ -474,8 +455,9 @@ class _Menu extends AppComponent {
       positionStyle.top = SCREEN_INDENT;
     }
     const maxMenuHeight = windowLayout.height - top - SCREEN_INDENT;
-    const maxHeight = maxMenuHeight >=0 ? Math.max(Math.min(maxMenuHeight,menuLayout.height),150)  : windowLayout.height - SCREEN_INDENT*2;
+    const maxHeight = maxMenuHeight >=0 ? Math.max(Math.max(maxMenuHeight,menuLayout.height),150)  : windowLayout.height - SCREEN_INDENT*2;
     const contentContainerStyle = maxMenuHeight > SCREEN_INDENT ? {maxHeight} : undefined;
+    const hiddenStyle = !rendered ? {display:'none',width:0,opacity:0} : null;
     return (
       <View
         testID = {testID}
@@ -485,17 +467,18 @@ class _Menu extends AppComponent {
         collapsable={false}
         style = {{backgroundColor:'transparent'}}
       >
-        {this.isCoordinate(anchor) ? null : anchor}
-        {rendered ? (
+        {anchor}
+        {true ? (
           <Portal>
-            <TouchableWithoutFeedback
+            {rendered ? <TouchableWithoutFeedback
               testID={testID+"_TouchableWithoutFeedBack"}
               accessibilityLabel={overlayAccessibilityLabel}
               accessibilityRole="button"
               onPress={onDismiss}
+              style = {[hiddenStyle]}
             >
               <View style={[StyleSheet.absoluteFill,{flex:1,backgroundColor:'transparent'}]} testID={testID+"_Backdrop"} />
-            </TouchableWithoutFeedback>
+            </TouchableWithoutFeedback>:null}
             <View
               testID = {testID+"_ContentContainer"}
               ref={(ref) => {
@@ -503,11 +486,11 @@ class _Menu extends AppComponent {
               }}
               collapsable={false}
               accessibilityViewIsModal={visible}
-              style={[styles.wrapper, positionStyle, style]}
+              style={[styles.wrapper, positionStyle, style,hiddenStyle]}
               pointerEvents={visible ? 'box-none' : 'none'}
               onAccessibilityEscape={onDismiss}
             >
-              <Animated.View style={{ transform: positionTransforms }} testID={testID+"_Animated"}>
+              {rendered?<Animated.View style={{ transform: positionTransforms }} testID={testID+"_Animated"}>
                 <Surface
                   elevation = {5}
                   testID= {testID+"_Content"}
@@ -525,7 +508,7 @@ class _Menu extends AppComponent {
                   {((scrollableMenuHeight|| contentContainerStyle) && (<ScrollView contentContainerStyle={contentContainerStyle} testID={testID+"_ScrollView"}>{children}</ScrollView>
                   )) || children}
                 </Surface>
-              </Animated.View>
+              </Animated.View> : null}
             </View>
           </Portal>
         ) : null}

package/src/components/Menu/index.js

@@ -73,7 +73,7 @@ const MenuComponent = React.forwardRef((props,ref)=>{
         console.error("unable to render menu, anchor not spécified for props",props);
     }
     const context = {openMenu,closeMenu,open:openMenu,close:closeMenu};
-    React.setRef(ref,context);
+    //React.setRef(ref,context);
     if(typeof children =='function'){
         children = children({openMenu,closeMenu,context});
     }
@@ -81,8 +81,17 @@ const MenuComponent = React.forwardRef((props,ref)=>{
         return ()=>{
             React.setRef(ref,null);
         }
-    },[])
-    return  <Menu {...menuProps} testID={testID} visible={visible} onDismiss={closeMenu} anchor={anchor}>
+    },[]);
+    return  <Menu {...menuProps} ref={(el)=>{
+        if(el){
+            for(let i in context){
+                if(!(i in el)){
+                    el[i] = context[i];
+                }
+            }
+        }
+        React.setRef(ref,el);
+    }} testID={testID} visible={visible} onDismiss={closeMenu} anchor={anchor}>
         {renderItems({...props,onPressItem,renderItem,openMenu,closeMenu})}
         {React.isValidElement(children)? children: null}
     </Menu>

package/src/components/Menu/utils.js

@@ -7,7 +7,7 @@ import Expandable from "$ecomponents/Expandable";
 import {cursorPointer} from "$theme";
 import Item from "./Item";
 
-export const MIN_WIDTH = 160;
+export const MIN_WIDTH = 180;
 
 export const renderItems = (props)=>{
     let _items = [];

package/src/index.js

@@ -33,7 +33,12 @@ const resetExitCounter = ()=>{
 
 const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE';
 
-function App({init:initApp}) {
+/****
+ *  init {function}: ()=>Promise<{}> est la fonction d'initialisation de l'application
+ *  initialRouteName : la route initiale par défaut
+ *  getStartedRouteName : la route par défaut de getStarted lorsque l'application est en mode getStarted, c'est à dire lorsque la fonction init renvoie une erreur (reject)
+ */
+function App({init:initApp,initialRouteName:appInitialRouteName,getStartedRouteName}) {
   AppStateService.init();
   const [initialState, setInitialState] = React.useState(undefined);
   const appReadyRef = React.useRef(true);
@@ -156,16 +161,16 @@ function App({init:initApp}) {
       console.log(e," is net info heinn")
     });
     loadResources().finally(()=>{
-      (typeof initApp =='function'?initApp : init)().then(()=>{
+      (typeof initApp =='function'?initApp : init)().then((args)=>{
         if(Auth.isLoggedIn()){
            Auth.loginUser(false);
         }
         setState({
-          ...state,isInitialized:true,isLoading : false,
+          ...state,hasGetStarted:true,...defaultObj(args && args?.state),isInitialized:true,isLoading : false,
         });  
       }).catch((e)=>{
           console.error(e," initializing app")
-          setState({...state,isInitialized:true,isLoading : false});
+          setState({...state,isInitialized:true,isLoading : false,hasGetStarted:false});
       })
     });
 
@@ -197,7 +202,6 @@ function App({init:initApp}) {
     }   
   }, []);
   const {isInitialized} = state;
-  const hasGetStarted = true;
   const isLoading = state.isLoading || !isInitialized || !appReadyRef.current? true : false;
     React.useEffect(()=>{
       if(isInitialized){
@@ -205,7 +209,7 @@ function App({init:initApp}) {
           trackIDLE(true);
       }
   },[isInitialized]);
-  const initialRouteName = "Home";
+  const hasGetStarted = state.hasGetStarted !== false? true : false;
   return (<SplashScreen isLoaded={!isLoading}>
       <NavigationContainer 
           ref={navigationRef}
@@ -216,9 +220,12 @@ function App({init:initApp}) {
         }
       >
           <Navigation
-            initialRouteName = {initialRouteName}
+            initialRouteName = {defaultStr(hasGetStarted ? appInitialRouteName : getStartedRouteName,"Home")}
             state = {state}
             hasGetStarted = {hasGetStarted}
+            onGetStart = {(e)=>{
+              setState({...state,hasGetStarted:true})
+            }}
           />
       </NavigationContainer> 
   </SplashScreen>);

package/src/navigation/index.js

@@ -6,15 +6,23 @@ import DrawerNavigator from "./Drawer";
 
 export * from "./utils";
 
+/**** la fonction onGetStart doit normalement être appélée lorsque l'application 
+ *  lorsque hasGetStarted est à false, celle-ci rend l'écran Start permettant de rendre le contenu GetStarted
+*/
 export default function NavigationComponent (props){
-    let {state,hasGetStarted,initialRouteName,extra} = props;
+    let {state,hasGetStarted,onGetStart,initialRouteName,extra} = props;
     const allScreens = initScreens({Factory:Stack,ModalFactory:Stack,filter:({name,Screen})=>{
-        return (name === initialRouteName? defaultObj(extra) : true);
+        if(name === initialRouteName){
+            extra = defaultObj(extra);
+            extra.onGetStart = onGetStart;
+            extra.state = state;
+            return extra;
+        }
+        return true;
     }});
-    
     initialRouteName = sanitizeName(initialRouteName);
-    const drawerScreens = handleContent({screens:allScreens,hasGetStarted,initialRouteName,state,Factory:Stack});
-    const stackScreens = handleContent({screens:allScreens.modals,hasGetStarted,initialRouteName,state,Factory:Stack});
+    const drawerScreens = handleContent({screens:allScreens,onGetStart,hasGetStarted,initialRouteName,state,Factory:Stack});
+    const stackScreens = handleContent({screens:allScreens.modals,onGetStart,hasGetStarted,initialRouteName,state,Factory:Stack});
     if(!drawerScreens.length && !stackScreens.length){
        console.error("apps will stuck on splash screen because any valid screen has been found on screens ",allScreens);
     }

package/src/screens/Auth/Profile.js

@@ -1,6 +1,6 @@
 import FormDataScreen from "$elayouts/Screen/FormData";
 import {defaultStr,defaultObj,isObjOrArray,isObj} from "$utils";
-import Auth from "$auth";
+import Auth from "$cauth";
 import {navigate} from "$cnavigation";
 import SelectTheme from "$themeSelectorComponent";
 import Preloader from "$epreloader";

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

@@ -6,7 +6,7 @@ import Label from "$components/Label";
 
 export default function ContentPrivacy (){
     return <Label primary style={{fontSize:15,fontWeight:'bold',padding:10}}>
-    Pour modifier le contenu de la police de sécurité, il suffit de déclarer dans les alias, l'alias 
+    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>

package/src/screens/index.js

@@ -7,8 +7,7 @@ import { SCREEN_OPTIONS } from "./utils";
 
 export * from "./utils";
 
-
-export const handleScreen = ({Screen,Factory,ModalFactory,result,useTheme,filter,index})=>{
+export const handleScreen = ({Screen,Factory,ModalFactory,result,filter,index})=>{
     result = defaultObj(result);
     result.screens = defaultObj(result.screens);
     result.groups = defaultObj(result.groups);
@@ -18,7 +17,7 @@ export const handleScreen = ({Screen,Factory,ModalFactory,result,useTheme,filter
     let screenOptions = undefined;
     if(Array.isArray(Screen)){
         Screen.map((S,i)=>{
-            return handleScreen({Screen:S,Factory,ModalFactory,result,groups,useTheme,filter,index:i});
+            return handleScreen({Screen:S,Factory,ModalFactory,result,groups,filter,index:i});
         })
     } else if(typeof Screen ==='object' && React.isComponent(Screen.Component) && isNonNullString(Screen.screenName)){
         screenName = Screen.screenName;
@@ -40,11 +39,15 @@ export const handleScreen = ({Screen,Factory,ModalFactory,result,useTheme,filter
             if(!GROUP_NAMES[groupName]){
                 groupName = GROUP_NAMES.PRIVATE;
             }
-            if(!authRequired){
-                groupName = groupName || GROUP_NAMES.PUBLIC;
-            } else{
-                groupName = GROUP_NAMES.PRIVATE;
-                authRequired = true;
+            if( groupName !== GROUP_NAMES.INSTALL){
+                if(!authRequired){
+                    groupName = groupName || GROUP_NAMES.PUBLIC;
+                } else{
+                    groupName = GROUP_NAMES.PRIVATE;
+                    authRequired = true;
+                }
+            } else {
+                authRequired = false;
             }
             groups[groupName] = defaultObj(groups[groupName]);
             groups[groupName][sanitizeName] = name;
@@ -84,7 +87,6 @@ export const handleScreen = ({Screen,Factory,ModalFactory,result,useTheme,filter
  * @param Factory {typeof Factory : voir @https://reactnavigation.org/}
  * @param screens {Object {screns:{screens:{},groups:{}}}} l'objet dans lequel le screensat sera retourné
  * @param screens {array} la liste des écrans à rendre dynamiquement dans le FactoryContainer
- * @param useTheme {boolean} si le composant sera wrapper par le hook withTheme de react-native-paper
  * @return {object} : objet comportant deux propriétés : 
  *      screens : {} : liste des écrans de l'application initialisés. il est à noter que, tous les écrans sont dans les sous répertoire du dossier courant
             screens screens est de la forme : {group1:[],group2:[], ...groupN:[]}:
@@ -92,7 +94,7 @@ export const handleScreen = ({Screen,Factory,ModalFactory,result,useTheme,filter
             
         groups : {} : la liste des différents groupes d'écrans rendus par la méthode
  */
-export default function initScreens ({Factory,ModalFactory,useTheme,screens,result,filter}){
+export default function initScreens ({Factory,ModalFactory,screens,result,filter}){
     if(!isArray(screens) || !screens.length){
         screens = mainScreens;
     }
@@ -100,7 +102,6 @@ export default function initScreens ({Factory,ModalFactory,useTheme,screens,resu
     result.screens = defaultObj(result.screens);
     result.groups = defaultObj(result.groups);
     ///lorsque les écrans sont passés enparamètres, par défaut, le wrapper withTheme n'est pas utilisé
-    useTheme = defaultBool(useTheme,false);
     filter = typeof filter =="function" ? filter : x=> true;
     defaultArray(screens).map((Screen,index)=>{
         handleScreen({Screen,result,Factory,ModalFactory,filter,index})
@@ -108,7 +109,7 @@ export default function initScreens ({Factory,ModalFactory,useTheme,screens,resu
     return result;
 }
 
-export const handleContent = ({screens,hasGetStarted,state,Factory})=>{
+export const handleContent = ({screens,hasGetStarted,onGetStart,state,Factory})=>{
     const content = [];
     state = defaultObj(state);
     screens = defaultObj(screens);