fix(core): 🐛 mobile working related change

package/nativeComponents/dataTable/NativeDataTableToolbar.js

@@ -25,7 +25,7 @@ export default function NativeDataTableToolbar(props) {
   const showStack = (stack) => {
     if (!stack.hideInApp) {
       if (menuRenderFunction) {
-        let visibleItems = stack?.filter((element) => !element.hideInApp);
+        let visibleItems = stack?.filter((element) => !element.hideInApp && element.comp);
 
         return menuRenderFunction(visibleItems);
       } else {

package/nativeComponents/feedback/NativeDialog.js

@@ -69,7 +69,7 @@ export default function NativeDialog(props) {
             {!dialog.noCancelButton && (
               <NativeTextButton
                 label={dialog?.cancelButtonLabel || "Cancel"}
-                OnClick={() => {
+                onClick={() => {
                   if (
                     dialog.cancelButton &&
                     typeof dialog.cancelButton === "function"
@@ -84,7 +84,7 @@ export default function NativeDialog(props) {
             {!dialog.noDoneButton && (
               <NativeTextButton
                 label={dialog?.doneButtonLabel || "Done"}
-                OnClick={() => {
+                onClick={() => {
                   if (
                     dialog.doneButton &&
                     typeof dialog.doneButton === "function"

package/nativeComponents/inputs/NativeButton.js

@@ -8,7 +8,7 @@ import { SCButton } from "../../styledComponents/inputs/SCButton";
 export default function NativeButton(props) {
   const {
     label,
-    OnClick,
+    onClick,
     variant,
     innerRef,
     type,
@@ -48,8 +48,8 @@ export default function NativeButton(props) {
       }
       onPress={(ele) => {
         UserActionLogging();
-        if (OnClick && typeof OnClick === "function") {
-          OnClick(ele);
+        if (onClick && typeof onClick === "function") {
+          onClick(ele);
         }
       }}
     >

package/nativeComponents/layouts/NativeAppContainer.js

@@ -1,26 +1,26 @@
 // eslint-disable-next-line unused-imports/no-unused-imports, no-unused-vars
 import React from "react";
 
+// eslint-disable-next-line import/no-unresolved
+import { WrappidDataContext } from "@wrappid/styles";
 // eslint-disable-next-line import/namespace
 import { StatusBar } from "react-native";
-import { useTheme } from "react-native-paper";
 
 import NativeBox from "./NativeBox";
 
 export default function NativeAppContainer(props) {
   const { appBar, leftDrawer, rightDrawer, footer } = props;
-  const theme = useTheme();
+
+  const { themes = {}, pageThemeID } = React.useContext(WrappidDataContext);
+  const theme = Object.keys(themes).includes(pageThemeID);
 
   return (
     <>
-      <StatusBar
-        backgroundColor={theme.palette.primary.main}
-        barStyle="light-content"
-      />
+      <StatusBar barStyle="dark-content" backgroundColor={theme.palette.background.default}/>
 
       {appBar()}
 
-      <NativeBox style={{ backgroundColor: theme.palette.primary.main, height: "92%" }}>
+      <NativeBox style={{ backgroundColor: theme.palette.background.default, height: "92%" }}>
         {leftDrawer()}
 
         {props.children}

package/nativeComponents/layouts/NativeGrid.js

@@ -73,6 +73,7 @@ export default function NativeGrid(props) {
               paddingLeft: padding,
               paddingTop : padding,
             }}
+            styleClasses={child.props?.gridProps?.styleClasses || []}
           >
             {child}
           </SCGridItem>

package/nativeComponents/layouts/NativePageContainer.js

@@ -1,13 +1,26 @@
 // eslint-disable-next-line unused-imports/no-unused-imports, no-unused-vars
-import React from "react";
+import React, { useContext, useEffect } from "react";
 
-// eslint-disable-next-line import/namespace
-import { ScrollView, Dimensions } from "react-native";
+// eslint-disable-next-line import/no-unresolved
+import { nativeUseLocation } from "@wrappid/native";
+// eslint-disable-next-line import/no-unresolved
+import { UtilityClasses, WrappidDataContext } from "@wrappid/styles";
+import {
+  BackHandler,
+  Dimensions,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView
+  // eslint-disable-next-line import/namespace
+} from "react-native";
 
 import NativeBox from "./NativeBox";
+import { nativeUseNavigate } from "../helper/routerHelper";
 
 export default function NativePageContainer(props) {
-  const { coreClasses, uid } = props;
+  const config = useContext(WrappidDataContext)?.config;
+  const location = nativeUseLocation();
+  const { uid } = props;
   /**
    * @todo scroll view is used in page container should be removed
    * when flatlist used but this is causing children in pages being
@@ -19,26 +32,37 @@ export default function NativePageContainer(props) {
   // eslint-disable-next-line no-unused-vars
   const DEFAULT_APP_BAR_HEIGHT = 64;
 
+  const navigate = nativeUseNavigate();
+
+  useEffect(() => {
+    BackHandler.addEventListener("hardwareBackPress", handleBackButtonClick);
+    return () => {
+      BackHandler.removeEventListener("hardwareBackPress", handleBackButtonClick);
+    };
+  }, []);
+
+  const handleBackButtonClick = () => {
+    if(uid && location?.pathname !== "/" + config?.defaultAuthenticatedRoute){
+      navigate("/" + config?.defaultAuthenticatedRoute);
+      return true;
+    }
+  };
+
   return (
-    <NativeBox
-      // eslint-disable-next-line etc/no-commented-out-code
-      // style={{
-      //   height  : uid ? windowHeight - DEFAULT_APP_BAR_HEIGHT : windowHeight,
-      //   height  : uid ? windowHeight - DEFAULT_APP_BAR_HEIGHT : "100%",
-      //   position: uid ? "absolute" : "relative",
-      // }}
-      styleClasses={
-        uid
-          ? [coreClasses.LAYOUT.PAGE_CONTAINER]
-          : [coreClasses.LAYOUT.LOGGED_OUT_PAGE_CONTAINER]
-      }
+    <KeyboardAvoidingView
+      style={{ flex: 1 }}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
     >
       <ScrollView
         keyboardShouldPersistTaps={"always"}
         contentContainerStyle={{ flexGrow: 1 }}
       >
-        {props.children}
+        <NativeBox
+          styleClasses={[UtilityClasses?.BG?.BG_WHITE, UtilityClasses?.HEIGHT?.H_100]}
+        >
+          {props.children}
+        </NativeBox>
       </ScrollView>
-    </NativeBox>
+    </KeyboardAvoidingView>
   );
 }

package/nativeComponents/layouts/NativeStack.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line unused-imports/no-unused-imports, no-unused-vars
-import React, { isValidElement, cloneElement } from "react";
+import React, { cloneElement, isValidElement } from "react";
 
 // eslint-disable-next-line import/no-unresolved
 import { CoreBox } from "@wrappid/core";
@@ -10,25 +10,13 @@ import { SCStack } from "../../styledComponents/layouts/SCStack";
 import NativeDivider from "../dataDisplay/NativeDivider";
 
 export default function NativeStack(props) {
-  // direction
-  //   'column-reverse'
-  // | 'column'
-  // | 'row-reverse'
-  // | 'row'
-  // divider	node
-  // spacing
-  //   Array<number
-  // | string>
-  // | number
-  // | object
-  // | string
 
   const {
     // eslint-disable-next-line no-unused-vars
     component,
     direction = "column",
     divider,
-    spacing = 0,
+    // spacing = 0,
     /**
      * @todo need to implment whenever it is required
      */
@@ -51,16 +39,17 @@ export default function NativeStack(props) {
 
   const childrenWithProps = () => {
     let marginClasses = [];
-    let marginString = "M";
-
-    if (direction.includes("column")) {
-      marginString += "T" + spacing;
-      marginString = marginString.toUpperCase();
-      marginClasses.push(UtilityClasses?.MARGIN[marginString]);
-    } else {
-      marginString += "L" + spacing;
-      marginClasses.push(UtilityClasses?.MARGIN[marginString]);
-    }
+
+    // eslint-disable-next-line etc/no-commented-out-code
+    // let marginString = "M";
+    // if (direction.includes("column")) {
+    //   marginString += "T" + spacing;
+    //   marginString = marginString.toUpperCase();
+    //   marginClasses.push(UtilityClasses?.MARGIN[marginString]);
+    // } else {
+    //   marginString += "L" + spacing;
+    //   marginClasses.push(UtilityClasses?.MARGIN[marginString]);
+    // }
 
     let newChildren =
       children &&
@@ -70,7 +59,7 @@ export default function NativeStack(props) {
           const { styleClasses, ...restChildProps } = child?.props || {};
           let childStyleClasses =
             index > 0
-              ? [...(styleClasses || []), ...marginClasses]
+              ? [...(styleClasses || [])]
               : styleClasses;
           let newChild = cloneElement(child, {
             ...restChildProps,