@applicaster/quick-brick-core 12.0.0-rc.10 → 12.0.0-rc.100

package/App/ActionSetters/index.ts

@@ -88,10 +88,10 @@ const getActionInitialStateSetters = (key) => {
   return R.compose(
     R.map((subscription: { [x: string]: any; pluginId: any }) => {
       return async () => {
+        const now = performance.now();
+
         logger.info({
-          message: `Invocation Started - action plugin ${key}, pluginId: ${
-            subscription.pluginId
-          }: ${performance.now()}`,
+          message: `Invocation Started - action plugin ${key}, pluginId: ${subscription.pluginId}`,
         });
 
         const promiseFunc = subscription[key];
@@ -101,7 +101,7 @@ const getActionInitialStateSetters = (key) => {
         logger.info({
           message: `Invocation Completed - action plugin ${key}, pluginId: ${
             subscription.pluginId
-          }: ${performance.now()}`,
+          }: ${performance.now() - now} ms`,
         });
 
         return result;

package/App/AssetCache/__tests__/assetCache.test.ts

@@ -323,7 +323,7 @@ describe("asset cache", () => {
 
       expect(saveCacheData).toHaveBeenCalledWith(
         layoutId,
-        newFiles.filter(({ url }) => !url.includes("fail")),
+        newFiles.filter(({ url }) => !url.includes("fail"))
       );
     });
 

package/App/AssetCache/index.ts

@@ -143,7 +143,12 @@ export async function cacheAssets({
 
     newCacheState.forEach(({ file, url }) => (urlFileMap[url] = file));
 
-    const updatedLayout = remapAssetPath(layoutAssets, layout, urlFileMap, "layoutAssets");
+    const updatedLayout = remapAssetPath(
+      layoutAssets,
+      layout,
+      urlFileMap,
+      "layoutAssets"
+    );
 
     const updatedPluginConfigurations = remapAssetPath(
       pluginAssets,
@@ -169,6 +174,8 @@ export async function cacheAssets({
 
     return { layout, pluginConfigurations, cellStyles };
   } finally {
-    log_verbose(`cacheAssets: caching assets took ${performance.now() - time} ms`);
+    log_verbose(
+      `cacheAssets: caching assets took ${performance.now() - time} ms`
+    );
   }
 }

package/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/usePresentSchemeHandler.ts

@@ -1,7 +1,4 @@
-import {
-  useActions,
-  usePickFromState,
-} from "@applicaster/zapp-react-native-redux/hooks";
+import { useActions } from "@applicaster/zapp-react-native-redux/hooks";
 import * as R from "ramda";
 import * as React from "react";
 import axios from "axios";
@@ -28,6 +25,7 @@ import {
 } from "../../helpers";
 
 import { log_error, log_info } from "../../logger";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 
 const getFeed = (query) => ({
   content: { src: query.data_source },
@@ -60,7 +58,7 @@ export function usePresentSchemeHandler({
     feedUrl: data_source,
   });
 
-  const { rivers } = usePickFromState(["rivers"]);
+  const rivers = useRivers();
   const screenRiver = findRiver({ screen_id, rivers });
   const dispatch = useDispatch();
 

package/App/DeepLinking/URLSchemeHandler/__tests__/URLSchemeHandler.test.tsx

@@ -1,7 +1,5 @@
 import React from "react";
-import { render, waitFor, cleanup } from "@testing-library/react-native";
-
-jest.mock("react-native");
+import { cleanup, render, waitFor } from "@testing-library/react-native";
 
 const theme = {
   screen_margin_top: 0,
@@ -10,6 +8,8 @@ const theme = {
 
 const plugins = [];
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
   useTheme: jest.fn(() => theme),
 }));

package/App/DeepLinking/URLSchemeListener/__tests__/URLSchemeListenerTest.js

@@ -7,8 +7,6 @@ import { URLSchemeListener } from "../index";
 
 const URL = "url";
 
-jest.mock("react-native");
-
 const TestComponent = () => (
   <View>
     <Text>I'm a test component</Text>

package/App/ModalProvider/ModalBottomSheet/index.tsx

@@ -13,6 +13,7 @@ import {
   useNavigation,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
+import { ModalComponent } from "@applicaster/zapp-react-native-ui-components/Components";
 
 const styles = StyleSheet.create({
   container: {
@@ -55,7 +56,10 @@ export function ModalBottomSheet(props: Props) {
     modal_bottom_sheet_tablet_max_width: sheetTabletMaxWidth,
   } = theme;
 
-  const { ModalBottomSheetContent, modalBottomSheetContentProps } = props;
+  const {
+    ModalBottomSheetContent = ModalComponent,
+    modalBottomSheetContentProps,
+  } = props;
 
   const onLayout = useCallback(({ nativeEvent }) => {
     const calculatedHeight = nativeEvent?.layout?.height;

package/App/ModalProvider/ModalContent.tsx

@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
 export function ModalContent(props: Props) {
   const { modalScreenProps } = props;
 
-  if (modalScreenProps?.screenData?.ModalBottomSheetContent) {
+  if (modalScreenProps?.screenData?.modalBottomSheetContentProps) {
     const { ModalBottomSheetContent, modalBottomSheetContentProps } =
       modalScreenProps?.screenData || {};
 

package/App/ModalProvider/index.tsx

@@ -1,16 +1,16 @@
 import * as React from "react";
 
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-
 import { ModalPresenter } from "./ModalPresenter";
 import { ModalContent } from "./ModalContent";
 import { ModalChildrenWrapper } from "./ModalChildrenWrapper";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { ScreenContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
+import { useModalStore } from "@applicaster/zapp-react-native-utils/modalState";
 
 export function ModalProvider() {
-  const { modalState } = useNavigation();
+  const { modalState } = useModalStore();
+
   const [modalVisible, setModalVisible] = React.useState(false);
   const [modalShown, setModalShown] = React.useState(false);
 

package/App/NavigationProvider/NavigationProvider.tsx

@@ -63,6 +63,9 @@ import { findParent } from "@applicaster/zapp-react-native-ui-components/Context
 import { ZappPipesEntryContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 import { inflateUrl } from "@applicaster/zapp-react-native-ui-components/Components/LinkHandler/LinkHandler";
+import { useModalStore } from "@applicaster/zapp-react-native-utils/modalState";
+import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
+import { QBUIComponentEvents } from "@applicaster/zapp-react-native-ui-components/events";
 
 const logger = coreAppLogger.addSubsystem("Navigator");
 
@@ -92,13 +95,6 @@ const navigationActions = {
 
 const platform = getPlatform();
 
-const initialModalState = {
-  visible: false,
-  screen: null,
-  options: {},
-  props: {},
-};
-
 export function NavigationProvider({ children }: Props) {
   const {
     appData: { layoutVersion },
@@ -130,13 +126,16 @@ export function NavigationProvider({ children }: Props) {
     ZappPipesEntryContext.Context
   );
 
-  const [modalState, setModalState] =
-    React.useState<ModalState>(initialModalState);
+  const { openModal, dismissModal } = useModalStore();
 
   const playNextOverlayState = React.useRef();
 
   const online = useConnectionInfo(true);
 
+  const replaceEvent = useSubscriberFor(
+    QBUIComponentEvents.navigatorReplaceItem
+  );
+
   React.useEffect(() => {
     stateRef.current = state;
     pathnameRef.current = pathname;
@@ -153,6 +152,12 @@ export function NavigationProvider({ children }: Props) {
     [pathname, rivers]
   );
 
+  const getModalState: () => ModalState = () => {
+    const { modalState } = useModalStore.getState();
+
+    return modalState;
+  };
+
   const homeRiver = React.useMemo(
     () => homeRiverSelector({ rivers }),
     [rivers]
@@ -168,7 +173,7 @@ export function NavigationProvider({ children }: Props) {
     [rivers, homeRiver]
   );
 
-  const getStack = () => [...stateRef?.current?.stack?.mainStack];
+  const getStack = () => [...state?.stack?.mainStack];
 
   const openVideoModal = (
     item: ZappEntry,
@@ -260,6 +265,7 @@ export function NavigationProvider({ children }: Props) {
       item?.id !==
         legacyScreenData(state?.location?.state as NavigationScreenData)?.id
     ) {
+      replaceEvent();
       navigateTo(item, ACTIONS.REPLACE, options);
     }
   };
@@ -276,7 +282,7 @@ export function NavigationProvider({ children }: Props) {
         route.includes(pathname)
       );
 
-      return pathnameStackIndex > 1;
+      return pathnameStackIndex >= 1;
     }
 
     if (!Number.isNaN(filteredStack?.length)) {
@@ -408,9 +414,12 @@ export function NavigationProvider({ children }: Props) {
     }
   };
 
-  const handleHookCancel = ({ hookPlugin }, dispose) => {
-    if (hookPlugin?.lastHook) {
-      dispose();
+  const handleHookCancel = ({ hookPlugin, callback }, dispose) => {
+    dispose();
+    setStartUpHooks(false);
+
+    if (callback && typeof callback === "function") {
+      callback();
     }
 
     if (hookPlugin.isModalHook()) {
@@ -476,7 +485,13 @@ export function NavigationProvider({ children }: Props) {
     return false;
   }, [pluginConfigurations, plugins, rivers]);
 
-  const [startUpHooks, setStartUpHooks] = React.useState(checkStartUpHooks);
+  const [startUpHooks, _setStartUpHooks] = React.useState(checkStartUpHooks);
+  const currentStartUpHooks = React.useRef(checkStartUpHooks);
+
+  const setStartUpHooks = (value) => {
+    _setStartUpHooks(value);
+    currentStartUpHooks.current = value;
+  };
 
   const handleHookComplete =
     (navigationAction, targetRoute, { screen, options }) =>
@@ -484,7 +499,7 @@ export function NavigationProvider({ children }: Props) {
       if (hookPlugin?.lastHook) {
         dispose({ disposeAll: true });
 
-        startUpHooks && setStartUpHooks(false);
+        startUpHooks.current && setStartUpHooks(false);
       }
 
       dispatch(
@@ -593,7 +608,10 @@ export function NavigationProvider({ children }: Props) {
           targetScreen: screen,
           rivers,
           plugins,
-          startUpHooksData: { startUpHooks, setStartUpHooks },
+          startUpHooksData: {
+            startUpHooks: currentStartUpHooks.current,
+            setStartUpHooks,
+          },
         };
 
         HooksManager(hooksOptions)
@@ -615,31 +633,6 @@ export function NavigationProvider({ children }: Props) {
     },
   });
 
-  const openModal = React.useCallback(
-    ({ item, options = {}, props = {} }: OpenModalArg) => {
-      setModalState({
-        visible: true,
-        screen: item as ZappRiver,
-        options: {
-          animated: true,
-          animationType: "slide",
-          onShow: () => {},
-          presentationStyle: "overFullScreen",
-          transparent: true,
-          ...options,
-          onDismiss: () => {
-            setModalState(initialModalState);
-          },
-          onRequestClose: () => {
-            dismissModal();
-          },
-        },
-        props,
-      });
-    },
-    []
-  );
-
   const openPiP = React.useCallback(() => {
     dispatch(setVideoPiP());
   }, []);
@@ -660,10 +653,6 @@ export function NavigationProvider({ children }: Props) {
     }
   }, [state?.options?.videoModal?.previousMode]);
 
-  const dismissModal = React.useCallback(() => {
-    setModalState(() => ({ ...initialModalState }));
-  }, []);
-
   const openModalBottomSheet = React.useCallback(
     ({
       ModalBottomSheetContent,
@@ -695,15 +684,15 @@ export function NavigationProvider({ children }: Props) {
 
   // It will only work for the regular stack and pathname, It won't work for modals
   // TODO: integrate video/hook and regular modal into stack.
-  const getStackForPathname = React.useCallback((pathname: string):
-    | NavigationScreenState
-    | undefined => {
-    const stack = getStack();
+  const getStackForPathname = (
+    pathname: string
+  ): NavigationScreenState | undefined => {
+    const stack = [...state?.stack?.mainStack];
 
     const currentStack = stack.find(({ route }) => route === pathname);
 
     return currentStack;
-  }, []);
+  };
 
   const navigator: QuickBrickAppNavigator = React.useMemo(
     () => ({
@@ -730,7 +719,7 @@ export function NavigationProvider({ children }: Props) {
       modalData: state.stack.modal?.state ?? null,
       openModal,
       dismissModal,
-      modalState,
+      getModalState,
       openModalBottomSheet,
       closeModalBottomSheet,
       videoModalState: state.options.videoModal,
@@ -747,15 +736,9 @@ export function NavigationProvider({ children }: Props) {
       replaceTop,
       getStack,
       getStackForPathname,
+      mainStack: state.stack.mainStack,
     }),
-    [
-      rivers,
-      plugins,
-      JSON.stringify(state),
-      modalState,
-      appLaunched,
-      startUpHooks,
-    ]
+    [rivers, plugins, JSON.stringify(state), appLaunched, startUpHooks]
   );
 
   // when running the tests, we pass the dispatch function

package/App/NavigationProvider/__tests__/__snapshots__/navigationProvider.test.tsx.snap

@@ -11,7 +11,9 @@ Object {
     "presentationStyle": "overFullScreen",
     "transparent": true,
   },
-  "props": Object {},
+  "props": Object {
+    "screenData": Object {},
+  },
   "screen": Object {
     "id": "A1234",
     "navigations": Array [],
@@ -30,26 +32,7 @@ Object {
 }
 `;
 
-exports[`<NavigationProvider /> modal feature sets the modalState when opening a modal 1`] = `
-Object {
-  "options": Object {
-    "animated": true,
-    "animationType": "slide",
-    "onDismiss": [Function],
-    "onRequestClose": [Function],
-    "onShow": [Function],
-    "presentationStyle": "overFullScreen",
-    "transparent": true,
-  },
-  "props": Object {},
-  "screen": Object {
-    "id": "A1234",
-    "navigations": Array [],
-    "ui_components": Array [],
-  },
-  "visible": true,
-}
-`;
+exports[`<NavigationProvider /> modal feature sets the modalState when opening a modal 1`] = `undefined`;
 
 exports[`<NavigationProvider /> modal feature should reset state to initial when dismissing a modal ( closeModalBottomSheet ) opened by openModalBottomSheet 1`] = `
 Object {

package/App/NavigationProvider/__tests__/navigationProvider.test.tsx

@@ -5,6 +5,9 @@ import { createStore } from "redux";
 import { Provider } from "react-redux";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { getByTestId } from "@applicaster/zapp-react-native-utils/testUtils/getByTestId";
+// @TODO @szhigunov to complete the migration to @testing-library/react-native
+// import { act, waitFor } from "@testing-library/react-native";
 
 const rivers = {
   A1234: {
@@ -151,37 +154,58 @@ const failingHook = {
   name: "failing hook",
 };
 
+// const store = {
+//   rivers,
+//   plugins: [hookPlugin, hookPlugin2, failingHook],
+// };
+
+const store = createStore(() => ({
+  appData: { layoutVersion: "v1" },
+  contentTypes: null,
+  rivers,
+  plugins: [hookPlugin, hookPlugin2, failingHook],
+  appState: { appLaunched: true },
+}));
+
 const ContextConsumer = () => {
   const { state, ...navigator } = useNavigation();
 
-  const renderHook = () => {
-    if (navigator.currentRoute.includes("/hooks/")) {
-      const { hookPlugin, payload, callback } = navigator.screenData;
-      const Component = hookPlugin.module.Component;
+  let renderHook;
 
-      return <Component payload={payload} callback={callback} />;
-    }
+  if (navigator.currentRoute.includes("/hooks/")) {
+    const { hookPlugin, payload, callback } = navigator.screenData;
+    const Component = hookPlugin.module.Component;
 
-    return null;
-  };
+    renderHook = <Component payload={payload} callback={callback} />;
+  }
+
+  renderHook = null;
+
+  const WrapperView: any = "View";
 
   return (
-    <View navigator={navigator} state={state}>
-      {renderHook()}
-    </View>
+    <WrapperView testID="WrapperView" navigator={navigator} state={state}>
+      {renderHook}
+    </WrapperView>
   );
 };
 
-const store = createStore(() => ({
-  appData: { layoutVersion: "v1" },
-  contentTypes: null,
-  rivers,
-  plugins: [hookPlugin, hookPlugin2, failingHook],
-  appState: { appLaunched: true },
-}));
-
 const consoleSpy = jest.spyOn(console, "error").mockImplementation(() => {});
 
+// const renderContextConsumer = (_store = store) => {
+//   return renderWithProviders(<ContextConsumer />, _store);
+// };
+
+const renderContextConsumer = (_store = store) => {
+  return create(
+    <Provider store={store}>
+      <NavigationProvider>
+        <ContextConsumer />
+      </NavigationProvider>
+    </Provider>
+  );
+};
+
 afterAll(() => {
   consoleSpy.mockReset();
 });
@@ -189,86 +213,39 @@ afterAll(() => {
 describe("<NavigationProvider />", () => {
   let wrapper;
 
-  it("renders correctly", () => {
+  it("navigator contains expected properties", () => {
     act(() => {
-      wrapper = create(
-        <Provider store={store}>
-          <NavigationProvider>
-            <ContextConsumer />
-          </NavigationProvider>
-        </Provider>
-      );
+      wrapper = renderContextConsumer();
     });
 
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
+    const view = getByTestId(wrapper, "WrapperView");
 
-  describe("navigator Properties", () => {
-    act(() => {
-      wrapper = create(
-        <Provider store={store}>
-          <NavigationProvider>
-            <ContextConsumer />
-          </NavigationProvider>
-        </Provider>
-      );
-    });
-
-    const view = wrapper.root.findByType(View);
     const { navigator } = view.props;
+    expect(navigator.activeRiver).toEqual(rivers.B4567);
+    expect(navigator.currentRoute).toEqual("/river/B4567");
+    expect(navigator.previousAction).toEqual("REPLACE");
 
-    it("exposes the active river", () => {
-      expect(navigator.activeRiver).toEqual(rivers.B4567);
-    });
-
-    it("exposes the currentRoute", () => {
-      expect(navigator.currentRoute).toEqual("/river/B4567");
+    expect(navigator.screenData).toEqual({
+      ...rivers.B4567,
+      targetScreen: rivers.B4567,
     });
 
-    it("exposes the previous action", () => {
-      expect(navigator.previousAction).toEqual("REPLACE");
-    });
-
-    it("exposes the screen data", () => {
-      expect(navigator.screenData).toEqual(rivers.B4567);
-    });
-
-    it("exposes a routeData function", () => {
-      const consoleSpy = jest
-        .spyOn(console, "warn")
-        .mockImplementation(jest.fn());
-
-      expect(navigator.routeData()).toEqual(rivers.B4567);
-      consoleSpy.mockRestore();
-    });
-
-    it("warns in the console when calling navigator.routeData()", () => {
-      const consoleSpy = jest
-        .spyOn(console, "warn")
-        .mockImplementation(jest.fn());
-
-      navigator.routeData();
-      expect(consoleSpy.mock.calls).toMatchSnapshot();
-
-      consoleSpy.mockRestore();
+    expect(navigator.routeData()).toEqual({
+      ...rivers.B4567,
+      targetScreen: rivers.B4567,
     });
   });
 
   describe("pushing a new route", () => {
     act(() => {
-      wrapper = create(
-        <Provider store={store}>
-          <NavigationProvider>
-            <ContextConsumer />
-          </NavigationProvider>
-        </Provider>
-      );
+      wrapper = renderContextConsumer();
     });
 
-    const view = wrapper.root.findByType(View);
+    it("sets the data to that route", async () => {
+      const view = getByTestId(wrapper, "WrapperView");
 
-    it("sets the data to that route", () => {
       act(() => view.props.navigator.push(rivers.A1234));
+
       expect(view.props.navigator).toHaveProperty("activeRiver", rivers.A1234);
 
       expect(view.props.navigator).toHaveProperty(
@@ -276,23 +253,21 @@ describe("<NavigationProvider />", () => {
         "/river/B4567/river/A1234"
       );
 
-      expect(view.props.navigator.screenData).toEqual(rivers.A1234);
-      expect(view.props.state.stack.mainStack).toBeArrayOfSize(2);
+      expect(view.props.navigator.screenData).toEqual({
+        ...rivers.A1234,
+        targetScreen: rivers.A1234,
+      });
+
+      expect(view.props.state.stack.mainStack).toHaveLength(2);
     });
   });
 
   describe("replacing a current route", () => {
     act(() => {
-      wrapper = create(
-        <Provider store={store}>
-          <NavigationProvider>
-            <ContextConsumer />
-          </NavigationProvider>
-        </Provider>
-      );
+      wrapper = renderContextConsumer();
     });
 
-    const view = wrapper.root.findByType(View);
+    const view = getByTestId(wrapper, "WrapperView");
 
     it("sets the data to that route", () => {
       act(() => view.props.navigator.replace(rivers.A1234));
@@ -303,24 +278,22 @@ describe("<NavigationProvider />", () => {
         "/river/A1234"
       );
 
-      expect(view.props.navigator.screenData).toEqual(rivers.A1234);
-      expect(view.props.state.stack.mainStack).toBeArrayOfSize(1);
+      expect(view.props.navigator.screenData).toEqual({
+        ...rivers.A1234,
+        targetScreen: rivers.A1234,
+      });
+
+      expect(view.props.state.stack.mainStack).toHaveLength(1);
     });
   });
 
   describe("going back", () => {
     describe("when there is no previous route", () => {
       act(() => {
-        wrapper = create(
-          <Provider store={store}>
-            <NavigationProvider>
-              <ContextConsumer />
-            </NavigationProvider>
-          </Provider>
-        );
+        wrapper = renderContextConsumer();
       });
 
-      const view = wrapper.root.findByType(View);
+      const view = getByTestId(wrapper, "WrapperView");
 
       it("returns false when calling canGoBack", () => {
         let result;
@@ -345,23 +318,21 @@ describe("<NavigationProvider />", () => {
           "/river/B4567"
         );
 
-        expect(view.props.navigator.screenData).toEqual(rivers.B4567);
-        expect(view.props.state.stack.mainStack).toBeArrayOfSize(1);
+        expect(view.props.navigator.screenData).toEqual({
+          ...rivers.B4567,
+          targetScreen: rivers.B4567,
+        });
+
+        expect(view.props.state.stack.mainStack).toHaveLength(1);
       });
     });
 
     describe("when there is one route and we're going in a hook", () => {
       act(() => {
-        wrapper = create(
-          <Provider store={store}>
-            <NavigationProvider>
-              <ContextConsumer />
-            </NavigationProvider>
-          </Provider>
-        );
+        wrapper = renderContextConsumer();
       });
 
-      const view = wrapper.root.findByType(View);
+      const view = getByTestId(wrapper, "WrapperView");
       act(() => view.props.navigator.replace(rivers.A1234));
 
       it("returns true when calling goBack()", () => {
@@ -387,25 +358,20 @@ describe("<NavigationProvider />", () => {
         );
 
         expect(view.props.navigator.screenData).toEqual(rivers.A1234);
-        expect(view.props.state.stack.mainStack).toBeArrayOfSize(1);
+        expect(view.props.state.stack.mainStack).toHaveLength(1);
       });
     });
 
     describe("when there is a previous route", () => {
       act(() => {
-        wrapper = create(
-          <Provider store={store}>
-            <NavigationProvider>
-              <ContextConsumer />
-            </NavigationProvider>
-          </Provider>
-        );
+        wrapper = renderContextConsumer();
       });
 
-      const view = wrapper.root.findByType(View);
+      const view = getByTestId(wrapper, "WrapperView");
 
       act(() => view.props.navigator.push(rivers.A1234));
-      act(() => view.props.navigator.push(rivers.B4567));
+
+      act(() => view.props.navigator.push({ ...rivers.B4567, id: "B4567-1" }));
 
       it("returns true when calling canGoBack", () => {
         let result;
@@ -414,11 +380,27 @@ describe("<NavigationProvider />", () => {
           result = view.props.navigator.canGoBack();
         });
 
-        expect(result).toBe(true);
+        expect(result).toBeTruthy();
+      });
+
+      it("returns true when calling canGoBack(false, pathname)", () => {
+        let result;
+
+        act(() => {
+          result = view.props.navigator.canGoBack(false, "B4567-1");
+        });
+
+        expect(result).toBeTruthy();
+
+        act(() => {
+          result = view.props.navigator.canGoBack(false, "A1234");
+        });
+
+        expect(result).toBeTruthy();
       });
 
       it("returns to the previous route", () => {
-        expect(view.props.state.stack.mainStack).toBeArrayOfSize(3);
+        expect(view.props.state.stack.mainStack).toHaveLength(3);
 
         act(() => view.props.navigator.goBack());
 
@@ -432,160 +414,84 @@ describe("<NavigationProvider />", () => {
           "/river/B4567/river/A1234"
         );
 
-        expect(view.props.navigator.screenData).toEqual(rivers.A1234);
-        expect(view.props.state.stack.mainStack).toBeArrayOfSize(2);
+        expect(view.props.navigator.screenData).toEqual({
+          ...rivers.A1234,
+          targetScreen: rivers.A1234,
+        });
+
+        expect(view.props.state.stack.mainStack).toHaveLength(2);
       });
     });
 
     describe("when there is a previous route and there are hooks", () => {
       act(() => {
-        wrapper = create(
-          <Provider store={store}>
-            <NavigationProvider>
-              <ContextConsumer />
-            </NavigationProvider>
-          </Provider>
-        );
+        wrapper = renderContextConsumer();
       });
 
-      const view = wrapper.root.findByType(View);
+      const view = getByTestId(wrapper, "WrapperView");
       act(() => view.props.navigator.push(rivers.A1234));
       act(() => view.props.navigator.push(rivers.C0987));
 
       it("returns to the previous entry in the stack which is not a hook", () => {
-        expect(view.props.state.stack.mainStack).toBeArrayOfSize(5);
+        expect(view.props.state.stack.mainStack).toHaveLength(3);
 
         expect(view.props.navigator).toHaveProperty(
           "currentRoute",
           "/river/B4567/river/A1234/river/C0987"
         );
 
-        expect(view.props.navigator.screenData).toEqual(rivers.C0987);
+        expect(view.props.navigator.screenData).toMatchObject({
+          ...rivers.C0987,
+          targetScreen: rivers.C0987,
+        });
 
         act(() => view.props.navigator.goBack());
 
-        expect(view.props.state.stack.mainStack).toBeArrayOfSize(2);
+        expect(view.props.state.stack.mainStack).toHaveLength(2);
 
         expect(view.props.navigator).toHaveProperty(
           "currentRoute",
           "/river/B4567/river/A1234"
         );
 
-        expect(view.props.navigator.screenData).toEqual(rivers.A1234);
+        expect(view.props.navigator.screenData).toMatchObject({
+          ...rivers.A1234,
+          targetScreen: rivers.A1234,
+        });
       });
     });
   });
 
-  describe("when changing navBar visibility", () => {
-    act(() => {
-      wrapper = create(
-        <Provider store={store}>
-          <NavigationProvider>
-            <ContextConsumer />
-          </NavigationProvider>
-        </Provider>
-      );
-    });
-
-    const view = wrapper.root.findByType(View);
-
-    it("updates the navbar visibility attribute", () => {
-      act(() => view.props.navigator.hideNavBar());
-      expect(view.props.state.options.navBar.visible).toBe(false);
-      expect(view.props.navigator.isNavBarVisible).toBe(false);
-    });
-  });
-
-  describe("set the navbar title", () => {
-    act(() => {
-      wrapper = create(
-        <Provider store={store}>
-          <NavigationProvider>
-            <ContextConsumer />
-          </NavigationProvider>
-        </Provider>
-      );
-    });
-
-    const view = wrapper.root.findByType(View);
-
-    it("updates the navbar title attribute", () => {
-      const screenTitle = "Screen Title";
-      act(() => view.props.navigator.setScreenTitle(screenTitle));
-      expect(view.props.state.options.navBar.title).toBe(screenTitle);
-      expect(view.props.navigator.screenTitle).toBe(screenTitle);
-    });
-  });
-
-  describe("set the navbar summary", () => {
-    act(() => {
-      wrapper = create(
-        <Provider store={store}>
-          <NavigationProvider>
-            <ContextConsumer />
-          </NavigationProvider>
-        </Provider>
-      );
-    });
-
-    const view = wrapper.root.findByType(View);
-
-    it("updates the navbar summary attribute", () => {
-      const screenSummary = "Screen Summary";
-      act(() => view.props.navigator.setScreenSummary(screenSummary));
-      expect(view.props.state.options.navBar.summary).toBe(screenSummary);
-      expect(view.props.navigator.screenSummary).toBe(screenSummary);
-    });
-  });
-
-  describe.only("modal feature", () => {
+  describe("modal feature", () => {
     it("sets the modalState when opening a modal", () => {
       act(() => {
-        wrapper = create(
-          <Provider store={store}>
-            <NavigationProvider>
-              <ContextConsumer />
-            </NavigationProvider>
-          </Provider>
-        );
+        wrapper = renderContextConsumer();
       });
 
-      const view = wrapper.root.findByType(View);
+      const view = getByTestId(wrapper, "WrapperView");
       act(() => view.props.navigator.openModal({ item: rivers.A1234 }));
-      expect(view.props.navigator.modalState).toMatchSnapshot();
+      expect(view.props.navigator.get).toMatchSnapshot();
     });
 
     it("removes the visible flag when dismissing a modal", () => {
       act(() => {
-        wrapper = create(
-          <Provider store={store}>
-            <NavigationProvider>
-              <ContextConsumer />
-            </NavigationProvider>
-          </Provider>
-        );
+        wrapper = renderContextConsumer();
       });
 
-      const view = wrapper.root.findByType(View);
+      const view = getByTestId(wrapper, "WrapperView");
       act(() => view.props.navigator.openModal({ item: rivers.A1234 }));
-      expect(view.props.navigator.modalState).toMatchSnapshot();
+      expect(view.props.navigator.getModalState()).toMatchSnapshot();
       act(() => view.props.navigator.dismissModal());
-      expect(view.props.navigator.modalState.visible).toBeFalsy();
-      expect(view.props.navigator.modalState).toMatchSnapshot();
+      expect(view.props.navigator.getModalState().visible).toBeFalsy();
+      expect(view.props.navigator.getModalState()).toMatchSnapshot();
     });
 
     it("should reset state to initial when dismissing a modal ( closeModalBottomSheet ) opened by openModalBottomSheet", () => {
       act(() => {
-        wrapper = create(
-          <Provider store={store}>
-            <NavigationProvider>
-              <ContextConsumer />
-            </NavigationProvider>
-          </Provider>
-        );
+        wrapper = renderContextConsumer();
       });
 
-      const view = wrapper.root.findByType(View);
+      const view = getByTestId(wrapper, "WrapperView");
 
       act(() =>
         view.props.navigator.openModalBottomSheet({
@@ -594,9 +500,9 @@ describe("<NavigationProvider />", () => {
         })
       );
 
-      expect(view.props.navigator.modalState).toMatchSnapshot();
+      expect(view.props.navigator.getModalState()).toMatchSnapshot();
       act(() => view.props.navigator.closeModalBottomSheet());
-      expect(view.props.navigator.modalState).toMatchSnapshot();
+      expect(view.props.navigator.getModalState()).toMatchSnapshot();
     });
   });
 });

package/App/NetworkStatusProvider/utils.ts

@@ -3,7 +3,10 @@ import * as R from "ramda";
 
 import { NetInfoState } from "@react-native-community/netinfo";
 import { NETWORK_HOOKS_KEYS } from "./const";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  isVizioPlatform,
+  platformSelect,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
 import { Platform } from "react-native";
 
 type ConnectionStatus = boolean;
@@ -203,6 +206,18 @@ export const subscribeToDeviceNetworkChanges = (callback: NetCb) => {
     registeredListener = webapis.network.addNetworkStateChangeListener(
       samsungNetworkChangeHandler(callback)
     );
+
+    return;
+  }
+
+  if (isVizioPlatform()) {
+    window.addEventListener("online", function () {
+      callback({ online: true });
+    });
+
+    window.addEventListener("offline", function () {
+      callback({ online: false });
+    });
   }
 };
 
@@ -214,5 +229,12 @@ export const subscribeToDeviceNetworkChanges = (callback: NetCb) => {
 export const unsubscribeToDeviceNetworkChanges = (id = registeredListener) => {
   if (hasTizenAPIs()) {
     webapis.network.removeNetworkStateChangeListener(id);
+
+    return;
+  }
+
+  if (isVizioPlatform()) {
+    window.removeEventListener("online", function () {});
+    window.removeEventListener("offline", function () {});
   }
 };

package/App/RouteManager/__tests__/__snapshots__/routeManager.test.js.snap

@@ -1,13 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RouteManager /> renders correctly 1`] = `
-<WithProvider
-  screenData={
-    Object {
-      "id": "A1234",
-    }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      undefined,
+    ]
   }
-  screenId="A1234"
-  screenType="river"
-/>
+>
+  <View
+    testID="river"
+  />
+</RNCSafeAreaProvider>
 `;

package/App/RouteManager/__tests__/routeManager.test.js

@@ -1,31 +1,42 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
 
-import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
+const {
+  ScreenResolver,
+} = require("@applicaster/zapp-react-native-ui-components/Components/ScreenResolver");
+
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   useNavigation: jest.fn(() => ({
     screenId: { id: "A1234" },
     currentRoute: "/river/A1234",
     screenData: { id: "A1234" },
+    videoModalState: { mode: "WINDOWED" },
+  })),
+  useRoute: jest.fn(() => ({
+    pathname: "/river/A1234",
+    screenData: { id: "A1234-screenData" },
   })),
 }));
 
 const { RouteManager } = require("../");
 
 describe("<RouteManager />", () => {
-  const wrapper = shallow(<RouteManager />);
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = renderWithProviders(<RouteManager />);
+  });
 
   it("renders correctly", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   it("passes the correct props to ScreenResolver", () => {
-    expect(wrapper.find(ScreenResolver).props()).toEqual({
+    expect(wrapper.UNSAFE_getByType(ScreenResolver).props).toEqual({
       screenType: "river",
       screenId: "A1234",
-      screenData: { id: "A1234" },
+      screenData: { id: "A1234-screenData" },
     });
   });
 });

package/App/RouteManager/index.tsx

@@ -4,7 +4,7 @@ import * as R from "ramda";
 import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
 
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 
 type Props = any;
 
@@ -14,7 +14,8 @@ type Props = any;
  * @param {Props}: see props above
  */
 export const RouteManager = React.memo(function RouteManager(props: Props) {
-  const { currentRoute: pathname, screenData } = useNavigation();
+  const { pathname, screenData } = useRoute();
+
   const pathAttributes = getPathAttributes({ pathname });
 
   if (!pathAttributes.length) {

package/App/__tests__/createQuickBrickApp.test.js

@@ -15,6 +15,11 @@ jest.mock(
 // This is meant to silence errors with react-native-gesture-handler
 jest.mock("../ModalProvider/ModalBottomSheet", () => () => null);
 
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation",
+  () => () => null
+);
+
 jest.mock("react-native-safe-area-context", () => ({
   SafeAreaProvider: jest.fn(
     () =>

package/App/index.tsx

@@ -1,15 +1,10 @@
 import * as React from "react";
 import * as R from "ramda";
 import {
-  SafeAreaProvider,
   initialWindowMetrics,
+  SafeAreaProvider,
 } from "react-native-safe-area-context";
 
-import type {
-  AppComponentProps,
-  ZappApp,
-} from "@applicaster/zapp-react-native-flow-types";
-
 import { ErrorBoundary } from "./ErrorBoundary";
 import { RouteManager } from "./RouteManager";
 import { withNavigationProvider } from "./NavigationProvider";
@@ -32,6 +27,7 @@ import {
 import { withURLSchemeContextProvider } from "./DeepLinking/URLSchemeListener/URLSchemeContextProvider";
 import { appRemoteDataLoader } from "./appRemoteDataLoader";
 import { withActionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
+import { withScreenDataContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
 /**
  * @typedef {Object} AppOptions
@@ -104,6 +100,7 @@ export function createQuickBrickApp(options): ZappApp {
     withURLSchemeContextProvider,
     withNetworkStatusProvider,
     withNavigationProvider,
+    withScreenDataContextProvider,
     ZappPipesSearchContext.withProvider,
     InteractionManager,
     withActionExecutor,

package/const/index.ts

@@ -34,3 +34,7 @@ export const requiredSessionKeys = [
   "userAgent",
   "version_name",
 ];
+
+export const QUICK_BRICK_NAVBAR = "quick-brick-navbar";
+
+export const QUICK_BRICK_CONTENT = "quick-brick-content";

package/createZappApp/__tests__/__snapshots__/createZappApp.test.js.snap

@@ -20,13 +20,13 @@ Object {
       "isAvailable": null,
       "nextState": null,
     },
-    "isTransitioning": false,
   },
   "cellStyles": Object {},
   "components": Object {
     "AppContainer": [Function],
     "ContentScreen": [Function],
     "HookRenderer": [Function],
+    "ModalComponent": [Function],
     "PlayerContainer": Object {
       "$$typeof": Symbol(react.memo),
       "WrappedComponent": Object {

package/createZappApp/{index.js → index.tsx}

@@ -7,11 +7,10 @@
 import * as React from "react";
 import * as R from "ramda";
 import { Dimensions } from "react-native";
-
-import type {
-  AppComponentProps,
-  ZappAppConfig,
-} from "@applicaster/zapp-react-native-flow-types";
+import {
+  isNotEmpty,
+  isNotNil,
+} from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import {
   createZappReduxStore,
@@ -32,6 +31,9 @@ import { remoteDataLoader } from "../App/appRemoteDataLoader/remoteDataLoader";
 import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 
+const isNotEmptyObject = (value: unknown) =>
+  isNotNil(value) && R.is(Object, value) && isNotEmpty(value);
+
 /**
  * Creates a Zapp App with the provided options
  * @export
@@ -60,8 +62,8 @@ export function createZappApp(zappAppConfig: ZappAppConfig) {
 
   const useTabletLayout =
     isTablet({ width, height }, width > height ? "landscape" : "portrait") &&
-    tabletLayout &&
-    tabletCellStyles;
+    isNotEmptyObject(tabletLayout) &&
+    isNotEmptyObject(tabletCellStyles);
 
   function fetchPluginConfiguration(plugin) {
     const configuration = R.compose(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "12.0.0-rc.10",
+  "version": "12.0.0-rc.100",
   "description": "Core package for Applicaster's Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -30,15 +30,15 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-rc.10",
-    "@applicaster/quick-brick-core-plugins": "12.0.0-rc.10",
-    "@applicaster/zapp-pipes-v2-client": "12.0.0-rc.10",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.10",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.10",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.10",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.10",
+    "@applicaster/applicaster-types": "12.0.0-rc.100",
+    "@applicaster/quick-brick-core-plugins": "12.0.0-rc.100",
+    "@applicaster/zapp-pipes-v2-client": "12.0.0-rc.100",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.100",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.100",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.100",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.100",
     "atob": "^2.1.2",
-    "axios": "^0.21.2",
+    "axios": "^0.28.0",
     "btoa": "^1.2.1",
     "camelize": "^1.0.0",
     "md5": "^2.3.0",
@@ -58,7 +58,6 @@
     "react-native-safe-area-context": "*"
   },
   "devDependencies": {
-    "@applicaster/zapp-react-native-flow-types": "1.5.0",
     "@types/react-native": "0.69.6",
     "@types/tizen-tv-webapis": "^2.0.1",
     "nock": "^10.0.0",