@applicaster/zapp-react-native-app 15.0.0-rc.44 → 15.0.0-rc.46

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

@@ -1,5 +1,10 @@
 import React from "react";
 import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import {
+  getMenuPlugin,
+  isBottomTabVisible,
+  SIDE_MENU_PLUGIN_ID,
+} from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
 
 const mockUseMenuToggleContext = jest.fn(() => ({
   toggleMenu: jest.fn(),
@@ -12,12 +17,14 @@ const mockUseMenuToggleContext = jest.fn(() => ({
 
 jest.mock("../layoutHelpers", () => {
   const { View } = jest.requireActual("react-native");
+  const { isVideoOverlayVisible } = jest.requireActual("../layoutHelpers");
 
   return {
     // eslint-disable-next-line react/display-name
     getNavigationPluginModule: () => (props) => (
       <View testID="menu" {...props} />
     ),
+    isVideoOverlayVisible,
   };
 });
 
@@ -110,6 +117,9 @@ jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler",
   () => ({
     isMenuVisible: jest.fn(() => true),
+    isBottomTabVisible: jest.fn(() => true),
+    getMenuPlugin: jest.fn(() => ({ identifier: "test-plugin" })),
+    SIDE_MENU_PLUGIN_ID: "quick_brick_side_menu",
   })
 );
 
@@ -237,4 +247,60 @@ describe("Layout", () => {
       opacity: 1,
     });
   });
+
+  it("should render menu when Side Menu is active and VideoModal is FULLSCREEN", () => {
+    (getMenuPlugin as jest.Mock).mockReturnValue({
+      identifier: SIDE_MENU_PLUGIN_ID,
+    });
+
+    mockUseNavigation.mockReturnValue({
+      activeRiver: { navigations: [] },
+      videoModalState: { visible: true, mode: "FULLSCREEN" },
+      isVideoModalDocked: false,
+      currentRoute: "home",
+      data: {},
+    });
+
+    const { queryByTestId } = renderWithProviders(<Layout />);
+    expect(queryByTestId("menu")).toBeTruthy();
+  });
+
+  it("should NOT render menu when Bottom Tabs are active and VideoModal is FULLSCREEN", () => {
+    (getMenuPlugin as jest.Mock).mockReturnValue({
+      identifier: "quick-brick-bottom-tabs",
+    });
+
+    mockUseNavigation.mockReturnValue({
+      activeRiver: { navigations: [] },
+      videoModalState: { visible: true, mode: "FULLSCREEN" },
+      isVideoModalDocked: false,
+      currentRoute: "home",
+      data: {},
+    });
+
+    const { queryByTestId } = renderWithProviders(<Layout />);
+    expect(queryByTestId("menu")).toBeNull();
+  });
+
+  it("should not add padding when Side Menu is active", () => {
+    (getMenuPlugin as jest.Mock).mockReturnValue({
+      identifier: SIDE_MENU_PLUGIN_ID,
+    });
+
+    (isBottomTabVisible as jest.Mock).mockReturnValue(false);
+
+    mockUseNavigation.mockReturnValue({
+      activeRiver: { navigations: [] },
+      videoModalState: { visible: false, mode: "MINIMIZED" },
+      isVideoModalDocked: false,
+      currentRoute: "home",
+      data: {},
+    });
+
+    const { getByTestId } = renderWithProviders(<Layout />);
+
+    expect(getByTestId("transitioner").props.contentStyle.paddingBottom).toBe(
+      0
+    );
+  });
 });

package/App/Layout/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 
-import { View, StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 
 import { getNavigationProps } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import {
@@ -15,9 +15,17 @@ import { transitionConfig } from "@applicaster/zapp-react-native-ui-components/C
 import { Screen } from "@applicaster/zapp-react-native-ui-components/Components/Screen";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 
-import { getNavigationPluginModule } from "./layoutHelpers";
+import {
+  getNavigationPluginModule,
+  isVideoOverlayVisible,
+} from "./layoutHelpers";
 
-import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
+import {
+  getMenuPlugin,
+  isBottomTabVisible,
+  isMenuVisible,
+  SIDE_MENU_PLUGIN_ID,
+} from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import {
@@ -82,6 +90,12 @@ const LayoutWithMenu = () => {
     [activeRiver]
   );
 
+  const isSideMenu = React.useMemo(() => {
+    const menuPlugin = getMenuPlugin(navigator.screenData, plugins);
+
+    return menuPlugin?.identifier === SIDE_MENU_PLUGIN_ID;
+  }, [navigator.screenData, plugins]);
+
   /** BTB shown when videoModalState - visible & minimized, maximized & animation gesture is active
    * otherwise hidden if videoModalState - visible
    * also check isMenuVisible
@@ -93,14 +107,38 @@ const LayoutWithMenu = () => {
       plugins
     );
 
-    const shouldShowWithVideo =
-      videoModalState.visible &&
-      ["MINIMIZED", "MAXIMIZED"].includes(videoModalState.mode);
+    if (isSideMenu) {
+      return menuVisible;
+    }
 
-    return menuVisible && (shouldShowWithVideo || !videoModalState.visible);
-  }, [videoModalState.visible, videoModalState.mode, navigator.currentRoute]);
+    return menuVisible && isVideoOverlayVisible(videoModalState);
+  }, [
+    plugins,
+    isSideMenu,
+    navigator.currentRoute,
+    navigator.screenData,
+    videoModalState.visible,
+    videoModalState.mode,
+  ]);
+
+  const showBottomTabs = React.useMemo(() => {
+    const bottomTabsVisible = isBottomTabVisible(
+      navigator.currentRoute,
+      navigator.screenData,
+      plugins
+    );
 
-  const paddingBottom = showMenu ? bottomTabBarHeight + safeAreaBottomInset : 0; // if activeRiver?.navigations has quick-brick-bottom-tabs - append bottomTabBarHeight as padding
+    return bottomTabsVisible && isVideoOverlayVisible(videoModalState);
+  }, [
+    videoModalState.visible,
+    videoModalState.mode,
+    navigator.currentRoute,
+    navigator.screenData,
+  ]);
+
+  const paddingBottom = showBottomTabs
+    ? bottomTabBarHeight + safeAreaBottomInset
+    : 0; // if activeRiver?.navigations has quick-brick-bottom-tabs - append bottomTabBarHeight as padding
 
   const contentStyle = React.useMemo(
     () =>

package/App/Layout/layoutHelpers.ts

@@ -28,3 +28,10 @@ export function getNavigationPluginModule(
 
   return plugin.module;
 }
+
+export function isVideoOverlayVisible(videoModalState) {
+  return (
+    !videoModalState.visible ||
+    ["MINIMIZED", "MAXIMIZED"].includes(videoModalState.mode)
+  );
+}

package/package.json

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