@applicaster/zapp-react-native-app 14.0.0-rc.9 → 12.0.26-rc.1

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

@@ -4,8 +4,8 @@ exports[`Layout should match snapshot when appReady is true 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    [
-      {
+    Array [
+      Object {
         "flex": 1,
       },
       undefined,
@@ -13,66 +13,85 @@ exports[`Layout should match snapshot when appReady is true 1`] = `
   }
 >
   <View
+    onLayout={[Function]}
     style={
-      {
-        "height": "100%",
+      Object {
+        "flex": 1,
       }
     }
+    testID="on-layout-view"
   >
     <View
-      contentStyle={
-        {
-          "height": "100%",
-          "opacity": 1,
-          "paddingBottom": 50,
+      style={
+        Object {
+          "display": "none",
+          "flex": 1,
         }
       }
-      isRTL={false}
-      testID="transitioner"
-      transitionConfig={[Function]}
     >
       <View
-        pathname="home"
-        screenData={{}}
+        style={
+          Object {
+            "height": "100%",
+          }
+        }
+      >
+        <View
+          contentStyle={
+            Object {
+              "height": "100%",
+              "opacity": 1,
+              "paddingBottom": 50,
+            }
+          }
+          isRTL={false}
+          testID="transitioner"
+          transitionConfig={[Function]}
+        >
+          <View
+            pathname="home"
+            screenData={Object {}}
+          />
+        </View>
+      </View>
+      <View
+        bottomTabBarHeight={50}
+        closeMenu={[MockFunction]}
+        dimensions={
+          Object {
+            "window": Object {
+              "height": 100,
+              "width": 100,
+            },
+          }
+        }
+        id="home"
+        isRTL={false}
+        navigator={
+          Object {
+            "activeRiver": Object {
+              "navigations": Array [],
+            },
+            "currentRoute": "home",
+            "data": Object {},
+            "isVideoModalDocked": false,
+            "videoModalState": Object {
+              "mode": "MINIMIZED",
+              "visible": false,
+            },
+          }
+        }
+        openMenu={[MockFunction]}
+        setCloseMenu={[MockFunction]}
+        setOpenMenu={[MockFunction]}
+        setToggleMenu={[MockFunction]}
+        testID="menu"
+        toggleMenu={[MockFunction]}
+      />
+      <View
+        testID="zappHooksModal"
       />
     </View>
   </View>
-  <View
-    bottomTabBarHeight={50}
-    closeMenu={[MockFunction]}
-    dimensions={
-      {
-        "window": {
-          "height": 100,
-          "width": 100,
-        },
-      }
-    }
-    id="home"
-    isRTL={false}
-    navigator={
-      {
-        "activeRiver": {
-          "navigations": [],
-        },
-        "currentRoute": "home",
-        "data": {},
-        "isVideoModalDocked": false,
-        "videoModalState": {
-          "mode": "MINIMIZED",
-          "visible": false,
-        },
-      }
-    }
-    openMenu={[MockFunction]}
-    setCloseMenu={[MockFunction]}
-    setOpenMenu={[MockFunction]}
-    setToggleMenu={[MockFunction]}
-    testID="menu"
-    toggleMenu={[MockFunction]}
-  />
-  <View
-    testID="zappHooksModal"
-  />
 </RNCSafeAreaProvider>
 `;

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { View } from "react-native";
 import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 const mockUseMenuToggleContext = jest.fn(() => ({
@@ -10,39 +11,25 @@ const mockUseMenuToggleContext = jest.fn(() => ({
   setCloseMenu: jest.fn(),
 }));
 
-jest.mock("../layoutHelpers", () => {
-  const { View } = jest.requireActual("react-native");
-
-  return {
-    // eslint-disable-next-line react/display-name
-    getNavigationPluginModule: () => (props) => (
-      <View testID="menu" {...props} />
-    ),
-  };
-});
+jest.mock("../layoutHelpers", () => ({
+  // eslint-disable-next-line react/display-name
+  getNavigationPluginModule: () => (props) => <View testID="menu" {...props} />,
+}));
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/Transitioner",
-  () => {
-    const { View } = jest.requireActual("react-native");
-
-    return {
-      // eslint-disable-next-line react/display-name
-      Transitioner: (props) => <View testID="transitioner" {...props} />,
-    };
-  }
+  () => ({
+    // eslint-disable-next-line react/display-name
+    Transitioner: (props) => <View testID="transitioner" {...props} />,
+  })
 );
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/Screen",
-  () => {
-    const { View } = jest.requireActual("react-native");
-
-    return {
-      // eslint-disable-next-line react/display-name
-      Screen: (props) => <View {...props} />,
-    };
-  }
+  () => ({
+    // eslint-disable-next-line react/display-name
+    Screen: (props) => <View {...props} />,
+  })
 );
 
 jest.mock(
@@ -61,12 +48,12 @@ jest.mock(
   })
 );
 
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useGetBottomTabBarHeight",
-  () => ({
-    useGetBottomTabBarHeight: jest.fn(() => 50),
-  })
-);
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  ...(jest.requireActual(
+    "@applicaster/zapp-react-native-utils/reactHooks/navigation"
+  ) as {}),
+  useGetBottomTabBarHeight: jest.fn(() => 50),
+}));
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/layout/useDimensions",
@@ -87,25 +74,17 @@ jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
 }));
 
 jest.mock(
-  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation",
-  () => ({
-    withModalAnimationProvider: jest.fn((Component) => Component),
-  })
-);
-
-jest.mock(
-  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/useModalAnimationContext",
+  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext",
   () => ({
+    ...(jest.requireActual(
+      "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext"
+    ) as {}),
     useModalAnimationContext: jest.fn(() => ({
       isActiveGesture: false,
     })),
   })
 );
 
-jest.mock("@applicaster/zapp-react-native-utils/dimensionsProvider", () => ({
-  withDimensionsProvider: jest.fn((Component) => Component),
-}));
-
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler",
   () => ({
@@ -115,26 +94,18 @@ jest.mock(
 
 jest.mock(
   "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal",
-  () => {
-    const { View } = jest.requireActual("react-native");
-
-    return {
-      // eslint-disable-next-line react/display-name
-      ZappHooksModal: (props) => <View testID="zappHooksModal" {...props} />,
-    };
-  }
+  () => ({
+    // eslint-disable-next-line react/display-name
+    ZappHooksModal: (props) => <View testID="zappHooksModal" {...props} />,
+  })
 );
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/VideoModal",
-  () => {
-    const { View } = jest.requireActual("react-native");
-
-    return {
-      // eslint-disable-next-line react/display-name
-      VideoModal: (props) => <View testID="videoModal" {...props} />,
-    };
-  }
+  () => ({
+    // eslint-disable-next-line react/display-name
+    VideoModal: (props) => <View testID="videoModal" {...props} />,
+  })
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/navigationUtils", () => ({
@@ -147,16 +118,6 @@ jest.mock("@applicaster/zapp-react-native-utils/navigationUtils", () => ({
 const { Layout } = require("../");
 
 describe("Layout", () => {
-  beforeAll(() => {
-    mockUseNavigation.mockImplementation(() => ({
-      activeRiver: { navigations: [] },
-      videoModalState: { visible: false, mode: "MINIMIZED" },
-      isVideoModalDocked: false,
-      currentRoute: "home",
-      data: {},
-    }));
-  });
-
   beforeEach(() => {
     jest.clearAllMocks();
 
@@ -171,7 +132,6 @@ describe("Layout", () => {
 
   it("should match snapshot when appReady is true", () => {
     const { toJSON } = renderWithProviders(<Layout />);
-
     expect(toJSON()).toMatchSnapshot();
   });
 
@@ -187,8 +147,8 @@ describe("Layout", () => {
   });
 
   it("should render menu when showMenu is true", () => {
-    const { queryByTestId } = renderWithProviders(<Layout />);
-    expect(queryByTestId("menu")).toBeTruthy();
+    const { getByTestId } = renderWithProviders(<Layout />);
+    expect(getByTestId("menu")).toBeTruthy();
   });
 
   it("should render VideoModal when visible & VideoModal is true", () => {
@@ -220,9 +180,9 @@ describe("Layout", () => {
 
     const { getByTestId } = renderWithProviders(<Layout />);
 
-    return expect(
-      getByTestId("transitioner").props.contentStyle.paddingBottom
-    ).toBe(50);
+    expect(getByTestId("transitioner").props.contentStyle.paddingBottom).toBe(
+      50
+    );
   });
 
   it("transitioner should have contentStyle with specific styles", () => {

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 { View } from "react-native";
 
 import {
   getNavigationProps,
@@ -24,13 +24,15 @@ import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Comp
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import {
-  MenuToggleContextType,
   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 { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/useModalAnimationContext";
+import {
+  withModalAnimationProvider,
+  useModalAnimationContext,
+} 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";
@@ -39,13 +41,10 @@ import {
   PushTopicManagerConsts,
   PushTopicManagerEvents,
 } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-const styles = StyleSheet.create({
-  container: {
-    height: "100%",
-  },
-});
+const containerStyle = {
+  height: "100%",
+};
 
 const LayoutWithMenu = () => {
   const {
@@ -66,7 +65,6 @@ const LayoutWithMenu = () => {
   const isRTL = useIsRTL();
   const navigator = useNavigation();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
-  const { bottom: safeAreaBottomInset } = useSafeAreaInsets();
   const { title } = useNavbarState();
 
   const { activeRiver, videoModalState, isVideoModalDocked } = navigator;
@@ -115,21 +113,17 @@ const LayoutWithMenu = () => {
 
   const isBottomTabsPlugin = plugin?.identifier === "quick-brick-bottom-tabs";
 
-  const paddingBottom =
-    showMenu && isBottomTabsPlugin
-      ? bottomTabBarHeight + safeAreaBottomInset
-      : 0; // if activeRiver?.navigations has quick-brick-bottom-tabs - append bottomTabBarHeight as padding
+  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 contentStyle = React.useMemo(
-    () =>
-      StyleSheet.flatten([
-        styles.container,
-        {
-          paddingBottom,
-          opacity: videoModalState.visible && !isVideoModalDocked ? 0 : 1,
-        },
-      ]),
-    [videoModalState.visible, isVideoModalDocked]
+    () => ({
+      ...containerStyle,
+      paddingBottom,
+      opacity: videoModalState.visible && !isVideoModalDocked ? 0 : 1,
+    }),
+    [videoModalState.visible, isVideoModalDocked, paddingBottom]
   );
 
   const menuProps = React.useMemo(() => {
@@ -173,7 +167,7 @@ const LayoutWithMenu = () => {
   return (
     <>
       {appReady ? (
-        <View style={styles.container}>
+        <View style={containerStyle}>
           <Transitioner
             transitionConfig={transitionConfig}
             contentStyle={contentStyle}
@@ -187,7 +181,7 @@ const LayoutWithMenu = () => {
           </Transitioner>
         </View>
       ) : null}
-      {showMenu ? (
+      {showMenu && (
         <Menu
           {...menuProps}
           setToggleMenu={setToggleMenu}
@@ -197,9 +191,9 @@ const LayoutWithMenu = () => {
           closeMenu={closeMenu}
           setCloseMenu={setCloseMenu}
         />
-      ) : null}
+      )}
       {/* depends on active river. @TODO move below screen context */}
-      {VideoModal && videoModalState.visible ? <VideoModal /> : null}
+      {VideoModal && videoModalState.visible && <VideoModal />}
       <ZappHooksModal />
     </>
   );

package/App/__tests__/__snapshots__/app.test.js.snap

@@ -1,3 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ZappApp /> renders correctly 1`] = `null`;
+exports[`<ZappApp /> renders correctly 1`] = `
+<ContextProvider
+  value={null}
+>
+  <WithContextProviderComponent
+    appSettings={
+      Object {
+        "runtimeConfigurationUrls": Object {
+          "cell_styles_url": "http://zapp.com/cell_styles.json",
+        },
+      }
+    }
+    components={
+      Object {
+        "AppContainer": [Function],
+        "Screen": [Function],
+      }
+    }
+    dispatch={[Function]}
+    rivers={
+      Array [
+        Object {
+          "home": false,
+          "id": "1",
+        },
+        Object {
+          "home": true,
+          "id": 2,
+        },
+      ]
+    }
+    store={
+      Object {
+        "clearActions": [Function],
+        "dispatch": [Function],
+        "getActions": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      }
+    }
+    styles={
+      Object {
+        "color": "blue",
+      }
+    }
+  />
+</ContextProvider>
+`;

package/App/__tests__/app.test.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { render } from "@testing-library/react-native";
+import { shallow } from "enzyme";
+import { shallowToJson } from "enzyme-to-json";
 import configureStore from "redux-mock-store";
 import * as R from "ramda";
 
@@ -7,7 +8,7 @@ const MockNetInfo = {
   connection: { type: "none " },
 };
 
-class mockNativeEventEmitter {
+class NativeEventEmitter {
   constructor(eventEmitter) {
     this.eventEmitter = eventEmitter;
     this.listeners = [];
@@ -97,7 +98,7 @@ jest.mock("react-native", () => {
       },
       UIManager: {},
     },
-    NativeEventEmitter: mockNativeEventEmitter,
+    NativeEventEmitter: NativeEventEmitter,
     Easing: {
       in: jest.fn(),
       bezier: jest.fn(),
@@ -110,9 +111,13 @@ jest.mock("react-native", () => {
   };
 });
 
-jest.mock("react-native-webview", () => {
-  const { View } = jest.requireActual("react-native");
+jest.mock("react-native-svg", () => {
+  const SvgXml = (props) => <View {...props} mock="SvgXml" />;
+
+  return { SvgXml };
+});
 
+jest.mock("react-native-webview", () => {
   return {
     WebView: jest.fn(() => <View mock="react-native-webview" />),
   };
@@ -128,8 +133,7 @@ const store = configureStore()({});
 const Screen = () => <View />;
 Screen.displayName = "Screen";
 
-// eslint-disable-next-line react/prop-types
-const AppContainer = ({ children }) => <View>{children(dimensions)}</View>;
+const AppContainer = ({ children }: any) => <View>{children(dimensions)}</View>;
 AppContainer.displayName = "AppContainer";
 
 const runtimeConfigurationUrls = {
@@ -152,10 +156,10 @@ const zappAppProps = {
   dispatch: jest.fn(),
 };
 
-// not clear the purpose of this test
-describe.skip("<ZappApp />", () => {
+describe("<ZappApp />", () => {
   it("renders correctly", () => {
-    const { toJSON } = render(<ZappApp {...zappAppProps} store={store} />);
-    expect(toJSON()).toMatchSnapshot();
+    const wrapper = shallow(<ZappApp {...zappAppProps} store={store} />);
+
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
   });
 });

package/App/index.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
+import { NativeRouter, useHistory, useLocation } from "react-router-native";
 // @ts-ignore
 import { createQuickBrickApp } from "@applicaster/quick-brick-core";
 import * as Contexts from "@applicaster/zapp-react-native-ui-components/Contexts";
@@ -13,6 +14,11 @@ import { Layout } from "./Layout";
 type Props = ZappScreenProps & ZappRiver;
 
 export const ZappApp: React.ComponentType<Props> = createQuickBrickApp({
+  navigations: {
+    Router: NativeRouter,
+    useHistory,
+    useLocation,
+  },
   QuickBrickManager,
   Layout,
   OfflineHandler,

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@applicaster/zapp-react-native-app",
-  "version": "14.0.0-rc.9",
+  "version": "12.0.26-rc.1",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
-    "build": "echo 'skipping ts build for core packages'"
+    "test": "jest -w=2",
+    "build": "echo 'skipping ts build for core packages'",
+    "flow-types": "node_modules/.bin/flow-copy-source -v -i '**/__tests__**' . ."
   },
   "repository": {
     "type": "git",
@@ -27,38 +29,20 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-core": "14.0.0-rc.9",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-rc.9",
-    "@applicaster/zapp-react-native-redux": "14.0.0-rc.9",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.9",
-    "@applicaster/zapp-react-native-utils": "14.0.0-rc.9",
+    "@applicaster/quick-brick-core": "12.0.26-rc.1",
+    "@applicaster/zapp-react-native-bridge": "12.0.26-rc.1",
+    "@applicaster/zapp-react-native-redux": "12.0.26-rc.1",
+    "@applicaster/zapp-react-native-ui-components": "12.0.26-rc.1",
+    "@applicaster/zapp-react-native-utils": "12.0.26-rc.1",
     "axios": "^0.28.0",
     "camelize": "^1.0.0",
     "query-string": "7.1.3",
+    "react-router-native": "5.1.2",
     "url": "^0.11.0"
   },
   "peerDependencies": {
-    "@applicaster/blur": "*",
-    "@applicaster/quick-brick-xray": "*",
-    "@applicaster/zapp-pipes-v2-client": "*",
-    "@applicaster/zapp-react-dom-ui-components": "*",
-    "@applicaster/zapp-react-native-tvos-app": "*",
-    "@applicaster/zapp-react-native-tvos-ui-components": "*",
-    "@babel/runtime": "*",
-    "@react-native-community/netinfo": "*",
-    "immer": "*",
-    "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": "*"
+    "react": "17.0.2",
+    "react-native": "0.68.6"
   },
   "devDependencies": {
     "nock": "^10.0.0",