@applicaster/zapp-react-native-app 14.0.0-alpha.1661204539 → 14.0.0-alpha.2175196485

package/App/InteractionManager/index.js

@@ -66,10 +66,13 @@ const InteractionManagerComponent = () => {
   }, [navigator.currentRoute]);
 
   React.useEffect(() => {
-    BackHandler.addEventListener("hardwareBackPress", onHardwareBackPress);
+    const unsubscribe = BackHandler.addEventListener(
+      "hardwareBackPress",
+      onHardwareBackPress
+    );
 
     return () => {
-      BackHandler.removeEventListener("hardwareBackPress", onHardwareBackPress);
+      unsubscribe.remove();
     };
   }, [onHardwareBackPress]);
 

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

@@ -138,6 +138,9 @@ jest.mock(
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/navigationUtils", () => ({
+  ...(jest.requireActual(
+    "@applicaster/zapp-react-native-utils/navigationUtils"
+  ) as jest.Mock<any>),
   getNavigationProps: () => ({}),
   resolveNavigationPlugin: () => ({
     identifier: "quick-brick-bottom-tabs",

package/App/Layout/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 
-import { View } from "react-native";
+import { View, StyleSheet } from "react-native";
 
 import {
   getNavigationProps,
@@ -39,10 +39,13 @@ import {
   PushTopicManagerConsts,
   PushTopicManagerEvents,
 } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-const containerStyle = {
-  height: "100%",
-};
+const styles = StyleSheet.create({
+  container: {
+    height: "100%",
+  },
+});
 
 const LayoutWithMenu = () => {
   const {
@@ -63,6 +66,7 @@ const LayoutWithMenu = () => {
   const isRTL = useIsRTL();
   const navigator = useNavigation();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
+  const { bottom: safeAreaBottomInset } = useSafeAreaInsets();
   const { title } = useNavbarState();
 
   const { activeRiver, videoModalState, isVideoModalDocked } = navigator;
@@ -94,34 +98,36 @@ const LayoutWithMenu = () => {
    * otherwise hidden if videoModalState - visible
    * also check isMenuVisible
    */
-  const showMenu = React.useMemo(
-    () =>
-      ((videoModalState.visible &&
-        (videoModalState.mode === "MINIMIZED" ||
-          (videoModalState.mode === "MAXIMIZED" && isActiveGesture))) ||
-        !videoModalState.visible) &&
-      isMenuVisible(navigator.currentRoute, navigator.screenData),
-    [
-      videoModalState.visible,
-      videoModalState.mode,
-      navigator.currentRoute,
-      isActiveGesture,
-    ]
-  );
+  const showMenu = React.useMemo(() => {
+    if (!videoModalState.visible && videoModalState.mode === "FULLSCREEN") {
+      return false;
+    }
+
+    return isMenuVisible(navigator.currentRoute, navigator.screenData);
+  }, [
+    videoModalState.visible,
+    videoModalState.mode,
+    navigator.currentRoute,
+    isActiveGesture,
+  ]);
 
   const isBottomTabsPlugin = plugin?.identifier === "quick-brick-bottom-tabs";
 
-  const paddingBottom = React.useMemo(() => {
-    return showMenu && isBottomTabsPlugin ? bottomTabBarHeight : 0; // if activeRiver?.navigations has quick-brick-bottom-tabs - append bottomTabBarHeight as padding
-  }, [showMenu, isBottomTabsPlugin, bottomTabBarHeight]);
+  const paddingBottom =
+    showMenu && isBottomTabsPlugin
+      ? bottomTabBarHeight + safeAreaBottomInset
+      : 0; // if activeRiver?.navigations has quick-brick-bottom-tabs - append bottomTabBarHeight as padding
 
   const contentStyle = React.useMemo(
-    () => ({
-      ...containerStyle,
-      paddingBottom,
-      opacity: videoModalState.visible && !isVideoModalDocked ? 0 : 1,
-    }),
-    [videoModalState.visible, isVideoModalDocked, paddingBottom]
+    () =>
+      StyleSheet.flatten([
+        styles.container,
+        {
+          paddingBottom,
+          opacity: videoModalState.visible && !isVideoModalDocked ? 0 : 1,
+        },
+      ]),
+    [videoModalState.visible, isVideoModalDocked]
   );
 
   const menuProps = React.useMemo(() => {
@@ -165,7 +171,7 @@ const LayoutWithMenu = () => {
   return (
     <>
       {appReady ? (
-        <View style={containerStyle}>
+        <View style={styles.container}>
           <Transitioner
             transitionConfig={transitionConfig}
             contentStyle={contentStyle}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-app",
-  "version": "14.0.0-alpha.1661204539",
+  "version": "14.0.0-alpha.2175196485",
   "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": "14.0.0-alpha.1661204539",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.1661204539",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.1661204539",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.1661204539",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.1661204539",
+    "@applicaster/quick-brick-core": "14.0.0-alpha.2175196485",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.2175196485",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.2175196485",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.2175196485",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.2175196485",
     "axios": "^0.28.0",
     "camelize": "^1.0.0",
     "query-string": "7.1.3",
@@ -50,19 +50,11 @@
     "react": "*",
     "react-native": "*",
     "react-native-fs": "*",
-    "react-native-gesture-handler": "*",
     "react-native-linear-gradient": "*",
-    "react-native-safe-area-context": "*",
     "react-native-svg": "*",
-    "react-native-web": "*",
     "react-native-webview": "*",
     "uglify-js": "*",
     "validate-color": "*",
     "zustand": "*"
-  },
-  "devDependencies": {
-    "nock": "^10.0.0",
-    "redux-mock-store": "^1.5.3"
-  },
-  "gitHead": "a473487564142c55cdb50f02505cf0b60fe75658"
+  }
 }