@applicaster/zapp-react-native-app 12.0.0-alpha.5606245605 → 12.0.0-alpha.5624518702

package/App/Layout/__tests__/index.test.ts

@@ -0,0 +1,7 @@
+describe("Layout", () => {
+  it.todo("should match snapshot when appReady is true");
+  it.todo("should not render transitioner with screen when appReady is false");
+  it.todo("should render menu when showMenu is true");
+  it.todo("should render VideoModal when visible & VideoModal is true");
+  it.todo("should render ZappHooksModal");
+});

package/App/Layout/index.tsx

@@ -5,10 +5,10 @@ import { View } from "react-native";
 
 import { getNavigationProps } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import {
-  useGetBottomTabBarHeight,
-  useNavigation,
   useDimensions,
+  useGetBottomTabBarHeight,
   useNavbarState,
+  useNavigation,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { Transitioner } from "@applicaster/zapp-react-native-ui-components/Components/Transitioner";
 import { transitionConfig } from "@applicaster/zapp-react-native-ui-components/Components/Transitioner/config";
@@ -20,9 +20,13 @@ import { getNavigationPluginModule } from "./layoutHelpers";
 import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
-import { MenuToggleContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
+import {
+  useMenuToggleContext,
+  MenuToggleContextType,
+} from "@applicaster/zapp-react-native-ui-components/Contexts/MenuToggleContext";
 import { VideoModal } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal";
 import { withDimensionsProvider } from "@applicaster/zapp-react-native-utils/dimensionsProvider";
+import { withModalAnimationProvider } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 import { ZappHooksModal } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal";
 import { useListenEventBusEvent } from "@applicaster/zapp-react-native-utils/reactHooks/useListenEventBusEvent";
@@ -32,22 +36,11 @@ import {
   PushTopicManagerEvents,
 } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
 
-type Props = {
-  children: React.ReactNode;
-  toggleMenu: any;
-  setToggleMenu: () => void;
-  openMenu: any;
-  setOpenMenu: () => void;
-  closeMenu: any;
-  setCloseMenu: () => void;
-  navigator: QuickBrickAppNavigator;
-};
-
 const containerStyle = {
   height: "100%",
 };
 
-const LayoutWithMenu = (props: Props) => {
+const LayoutWithMenu = () => {
   const {
     plugins,
     appState: { appReady },
@@ -60,7 +53,7 @@ const LayoutWithMenu = (props: Props) => {
     setOpenMenu,
     closeMenu,
     setCloseMenu,
-  } = props;
+  } = useMenuToggleContext();
 
   const dimensions = useDimensions("screen", { fullDimensions: true });
   const isRTL = useIsRTL();
@@ -76,7 +69,12 @@ const LayoutWithMenu = (props: Props) => {
         "menu",
         activeRiver,
         plugins
-      ) as React.ComponentType<MobileNavBarPluginProps>,
+      ) as React.ComponentType<
+        MobileNavBarPluginProps &
+          MenuToggleContextType & {
+            navigator: QuickBrickAppNavigator;
+          }
+      >,
     []
   );
 
@@ -98,23 +96,31 @@ const LayoutWithMenu = (props: Props) => {
     [bottomTabBarHeight, videoModalState.visible, isVideoModalDocked, showMenu]
   );
 
-  const menuProps = {
-    setToggleMenu: setToggleMenu,
-    toggleMenu: toggleMenu,
-    openMenu: openMenu,
-    setOpenMenu: setOpenMenu,
-    closeMenu: closeMenu,
-    setCloseMenu: setCloseMenu,
-    dimensions: { window: dimensions },
-    navigator,
-    ...getNavigationProps({
+  const menuProps = React.useMemo(() => {
+    const navigationProps = getNavigationProps({
       navigator,
       title,
       category: "menu",
-    }),
-    bottomTabBarHeight,
-    isRTL,
-  };
+    }) ?? {
+      selected: "",
+      title: "",
+      home: false,
+      rules: {} as ZappNavBarRules,
+      assets: {} as ZappNavBarAssets,
+      styles: {},
+      nav_items: [] as NavBarItem[],
+    };
+
+    const props = {
+      ...navigationProps,
+      dimensions: { window: dimensions },
+      bottomTabBarHeight,
+      isRTL,
+      navigator,
+    };
+
+    return { ...props, id: navigator.currentRoute };
+  }, [dimensions, isRTL, bottomTabBarHeight, navigator.currentRoute]);
 
   useListenEventBusEvent(
     PushTopicManagerConsts.PushTopicManagerSubscriptionID,
@@ -141,14 +147,22 @@ const LayoutWithMenu = (props: Props) => {
             <Screen
               key={navigator.currentRoute}
               pathname={navigator.currentRoute} // required by TransitionerComponent
-              screenData={navigator.screenData} // required by TransitionerComponent
-              setToggleMenu={setToggleMenu}
-              setCloseMenu={setCloseMenu}
+              screenData={navigator.data} // required by TransitionerComponent
             />
           </Transitioner>
         </View>
       ) : null}
-      {showMenu && <Menu {...menuProps} />}
+      {showMenu && (
+        <Menu
+          {...menuProps}
+          setToggleMenu={setToggleMenu}
+          toggleMenu={toggleMenu}
+          openMenu={openMenu}
+          setOpenMenu={setOpenMenu}
+          closeMenu={closeMenu}
+          setCloseMenu={setCloseMenu}
+        />
+      )}
       {/* depends on active river. @TODO move below screen context */}
       {VideoModal && videoModalState.visible && <VideoModal />}
       <ZappHooksModal />
@@ -157,6 +171,6 @@ const LayoutWithMenu = (props: Props) => {
 };
 
 export const Layout = R.compose(
-  MenuToggleContext.withConsumer,
-  withDimensionsProvider
+  withDimensionsProvider,
+  withModalAnimationProvider
 )(LayoutWithMenu);

package/App/__tests__/app.test.js

@@ -54,6 +54,11 @@ jest.mock(
   () => () => null
 );
 
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation",
+  () => ({ withModalAnimationProvider: () => null })
+);
+
 jest.mock("react-native-safe-area-context", () => ({
   SafeAreaProvider: jest.fn(
     () =>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-app",
-  "version": "12.0.0-alpha.5606245605",
+  "version": "12.0.0-alpha.5624518702",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
@@ -29,11 +29,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-core": "12.0.0-alpha.5606245605",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5606245605",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5606245605",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.5606245605",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5606245605",
+    "@applicaster/quick-brick-core": "12.0.0-alpha.5624518702",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5624518702",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5624518702",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.5624518702",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5624518702",
     "axios": "^0.28.0",
     "camelize": "^1.0.0",
     "query-string": "7.1.3",