@applicaster/quick-brick-core 14.0.0-alpha.5219335081 → 14.0.0-alpha.5234792518

package/App/ModalProvider/ModalBottomSheet/DraggableBottomSheet/index.tsx

@@ -52,9 +52,9 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
   _lastScrollYValue: number;
   _lastScrollY: Animated.Value;
   _dragY: Animated.Value;
-  _reverseLastScrollY: Animated.AnimatedMultiplication;
+  _reverseLastScrollY: Animated.AnimatedInterpolation<number>;
   _translateYOffset: Animated.Value;
-  _translateY: Animated.AnimatedAddition;
+  _translateY: Animated.AnimatedInterpolation<number>;
   _snapPoints: SnapPoints;
   _prevContentHeight = 0;
 

package/App/ModalProvider/ModalChildrenWrapper/index.tsx

@@ -1,13 +1,8 @@
 import React, { ReactChild } from "react";
-import { StyleSheet, ViewProps } from "react-native";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { View, StyleSheet, ViewProps } from "react-native";
 
 type Props = ViewProps & { children: ReactChild };
 
 export function ModalChildrenWrapper({ children }: Props) {
-  return (
-    <GestureHandlerRootView style={StyleSheet.absoluteFill}>
-      {children}
-    </GestureHandlerRootView>
-  );
+  return <View style={StyleSheet.absoluteFill}>{children}</View>;
 }

package/App/ModalProvider/ModalPresenter.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Modal, ModalProps } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 
 type Props = ModalProps & {
   children: React.ReactChild;
@@ -13,7 +14,7 @@ export function ModalPresenter(props: Props) {
 
   return (
     <Presenter visible={visible} {...presenterOptions}>
-      {children}
+      <GestureHandlerRootView>{children}</GestureHandlerRootView>
     </Presenter>
   );
 }

package/App/NavigationProvider/NavigationProvider.tsx

@@ -7,6 +7,7 @@ import {
   getTargetRoute,
   usesVideoModal,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import { last } from "@applicaster/zapp-react-native-utils/utils";
 import {
   allowedOrientationsForScreen,
   useGetScreenOrientation,
@@ -79,6 +80,8 @@ import { URLSchemeContext } from "../DeepLinking/URLSchemeListener/URLSchemeCont
 
 import { loadingOverlayManager } from "../LoadingOverlay";
 
+
+
 const logger = coreAppLogger.addSubsystem("Navigator");
 
 type Props = {
@@ -121,8 +124,20 @@ export function NavigationProvider({ children }: Props) {
     NavigationReducerState
   >(reducer, initialState, (x) => x);
 
+  const topStackRoute = last(state?.stack?.mainStack);
+
+  /** TODO: temporary variable, before we remove need for a "current".
+   There is no current as we are using stack navigator. Route data should be contextualised per screen
+   There are some cases to use a route data from top of the stack but it should be separate method.
+   */
+
+  const currentLocation = {
+    ...topStackRoute,
+    route: topStackRoute?.route || "/", // Fallback for initial state.
+  };
+
   const stateRef = React.useRef<NavigationReducerState>(state);
-  const pathname = state?.location?.pathname;
+  const pathname = currentLocation?.route; // TODO: remove. Pathname is part of the route, not a global.
   const pathnameRef = React.useRef(pathname);
 
   const { context } = React.useContext(ZappPipesEntryContext.Context);
@@ -146,6 +161,8 @@ export function NavigationProvider({ children }: Props) {
     }
   }, [pathname]);
 
+  // TODO remove.
+  // There is no concept of active river. Multiple rivers can be rendered at the same time.
   const activeRiver = React.useMemo(
     () => activeRiverSelector({ pathname, rivers }),
     [pathname, rivers]
@@ -186,6 +203,7 @@ export function NavigationProvider({ children }: Props) {
   // TODO: Move in proper place
   const modalPresenterScreenOrientation = useGetScreenOrientation(activeRiver);
 
+  // TODO: Move modal state to separate store
   const closeVideoModal = () => {
     if (navigator.modalData) {
       allowedOrientationsForScreen(modalPresenterScreenOrientation);
@@ -213,13 +231,15 @@ export function NavigationProvider({ children }: Props) {
   const isVideoModalDocked = () =>
     state?.options.videoModal.mode === "MINIMIZED";
 
+  // TODO: Remove as it's using a concept of "current" route.
+  // Route is contextualised and shouldn't be used this way.
   const routeData = () => {
     // eslint-disable-next-line no-console
     console.warn(`you are retrieving screen data from navigator.routeData()
     This function will be removed in a later version of quick brick.
     You can retrieve this data from navigator.screenData`);
 
-    return legacyScreenData(state?.location?.state as NavigationScreenData);
+    return legacyScreenData(currentLocation?.state as NavigationScreenData);
   };
 
   // TODO: remove it by refactoring back buttons handlers
@@ -262,7 +282,7 @@ export function NavigationProvider({ children }: Props) {
     if (
       targetRoute !== pathnameRef.current ||
       item?.id !==
-        legacyScreenData(state?.location?.state as NavigationScreenData)?.id
+        legacyScreenData(currentLocation?.state as NavigationScreenData)?.id
     ) {
       replaceEvent();
       navigateTo(item, ACTIONS.REPLACE, options);
@@ -688,7 +708,8 @@ export function NavigationProvider({ children }: Props) {
     }
   }, [state?.options?.videoModal?.previousMode]);
 
-  const getNestedEntry = () => state?.location?.state?.nested?.entry ?? null;
+  // TODO: remove. This shouldn't be part of navigator
+  const getNestedEntry = () => currentLocation?.state?.nested?.entry ?? null;
 
   // 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.
@@ -706,7 +727,7 @@ export function NavigationProvider({ children }: Props) {
     () => ({
       activeRiver,
       getPathname: () => pathnameRef.current, // hack use to fix issue causing broken navigation as currentRoute is unreliable
-      currentRoute: pathname,
+      currentRoute: pathname, // TODO: remove. Current route shouldn't be needed
       previousAction: lastEntrySelector(state)
         ?.action as QuickBrickNavigationActionType,
       push: pushItem,
@@ -716,14 +737,15 @@ export function NavigationProvider({ children }: Props) {
       goHome,
       canGoBack,
       goBack,
-      routeData,
+      routeData, // TODO: remove
       screenData: legacyScreenData(
-        state?.location?.state as NavigationScreenData,
+        // TODO: remove
+        currentLocation?.state as NavigationScreenData,
         plugins
       ),
-      data: state?.location?.state as NavigationScreenData,
+      data: currentLocation?.state as NavigationScreenData,
       getNestedEntry,
-      key: state?.location?.key,
+      key: currentLocation?.key, // TODO: remove
       modalData: state.stack.modal?.state ?? null,
       openModal,
       dismissModal,

package/App/NavigationProvider/navigator/__tests__/__snapshots__/reducer.test.ts.snap

@@ -13,7 +13,6 @@ exports[`ACTIONS matches snapshot 1`] = `
   "PUSH": "PUSH",
   "REPLACE": "REPLACE",
   "REPLACE_TOP": "REPLACE_TOP",
-  "SET_LOCATION": "SET_LOCATION",
   "SET_NESTED_CONTENT": "SET_NESTED_CONTENT",
   "SET_VIDEO_MODAL_ITEM": "SET_VIDEO_MODAL_ITEM",
 }
@@ -22,30 +21,6 @@ exports[`ACTIONS matches snapshot 1`] = `
 exports[`reducer when a back action is dispatched push, back, push, back does what it's supposed to do 1`] = `
 {
   "state1": {
-    "location": {
-      "key": "mocked-uuid",
-      "pathname": "/river/A1234",
-      "state": {
-        "entry": undefined,
-        "options": undefined,
-        "screen": {
-          "home": true,
-          "home_offline": true,
-          "hooks": {
-            "preload_plugins": [],
-          },
-          "id": "A1234",
-          "name": "Home",
-          "navigations": [
-            {
-              "id": "nav_id",
-            },
-          ],
-          "supports_offline": false,
-          "type": "general_content",
-        },
-      },
-    },
     "options": {
       "videoModal": {
         "item": null,
@@ -86,36 +61,6 @@ exports[`reducer when a back action is dispatched push, back, push, back does wh
     },
   },
   "state2": {
-    "location": {
-      "key": "mocked-uuid",
-      "pathname": "/river/A1234/river/B7890",
-      "state": {
-        "entry": {
-          "id": "C0987",
-          "title": "Entry",
-          "type": {
-            "value": "feed",
-          },
-        },
-        "options": undefined,
-        "screen": {
-          "home": false,
-          "home_offline": false,
-          "hooks": {
-            "preload_plugins": [],
-          },
-          "id": "B5678",
-          "name": "Screen name",
-          "navigations": [
-            {
-              "id": "nav_id",
-            },
-          ],
-          "supports_offline": false,
-          "type": "general_content",
-        },
-      },
-    },
     "options": {
       "videoModal": {
         "item": null,
@@ -187,36 +132,6 @@ exports[`reducer when a back action is dispatched push, back, push, back does wh
     },
   },
   "state3": {
-    "location": {
-      "key": "mocked-uuid",
-      "pathname": "/river/A1234/river/B7890/river/C0987",
-      "state": {
-        "entry": {
-          "id": "D1234",
-          "title": "Entry 2",
-          "type": {
-            "value": "video",
-          },
-        },
-        "options": undefined,
-        "screen": {
-          "home": false,
-          "home_offline": false,
-          "hooks": {
-            "preload_plugins": [],
-          },
-          "id": "C9090",
-          "name": "Screen 2 name",
-          "navigations": [
-            {
-              "id": "nav_id",
-            },
-          ],
-          "supports_offline": false,
-          "type": "general_content",
-        },
-      },
-    },
     "options": {
       "videoModal": {
         "item": null,
@@ -319,37 +234,6 @@ exports[`reducer when a back action is dispatched push, back, push, back does wh
     },
   },
   "state4": {
-    "location": {
-      "action": "PUSH",
-      "key": "mocked-uuid",
-      "pathname": "/river/A1234/river/B7890",
-      "state": {
-        "entry": {
-          "id": "C0987",
-          "title": "Entry",
-          "type": {
-            "value": "feed",
-          },
-        },
-        "options": undefined,
-        "screen": {
-          "home": false,
-          "home_offline": false,
-          "hooks": {
-            "preload_plugins": [],
-          },
-          "id": "B5678",
-          "name": "Screen name",
-          "navigations": [
-            {
-              "id": "nav_id",
-            },
-          ],
-          "supports_offline": false,
-          "type": "general_content",
-        },
-      },
-    },
     "options": {
       "videoModal": {
         "item": null,
@@ -421,36 +305,6 @@ exports[`reducer when a back action is dispatched push, back, push, back does wh
     },
   },
   "state5": {
-    "location": {
-      "key": "mocked-uuid",
-      "pathname": "/river/A1234/river/B7890/river/D5678",
-      "state": {
-        "entry": {
-          "id": "C0987",
-          "title": "Entry",
-          "type": {
-            "value": "feed",
-          },
-        },
-        "options": undefined,
-        "screen": {
-          "home": false,
-          "home_offline": false,
-          "hooks": {
-            "preload_plugins": [],
-          },
-          "id": "B5678",
-          "name": "Screen name",
-          "navigations": [
-            {
-              "id": "nav_id",
-            },
-          ],
-          "supports_offline": false,
-          "type": "general_content",
-        },
-      },
-    },
     "options": {
       "videoModal": {
         "item": null,
@@ -553,37 +407,6 @@ exports[`reducer when a back action is dispatched push, back, push, back does wh
     },
   },
   "state6": {
-    "location": {
-      "action": "PUSH",
-      "key": "mocked-uuid",
-      "pathname": "/river/A1234/river/B7890",
-      "state": {
-        "entry": {
-          "id": "C0987",
-          "title": "Entry",
-          "type": {
-            "value": "feed",
-          },
-        },
-        "options": undefined,
-        "screen": {
-          "home": false,
-          "home_offline": false,
-          "hooks": {
-            "preload_plugins": [],
-          },
-          "id": "B5678",
-          "name": "Screen name",
-          "navigations": [
-            {
-              "id": "nav_id",
-            },
-          ],
-          "supports_offline": false,
-          "type": "general_content",
-        },
-      },
-    },
     "options": {
       "videoModal": {
         "item": null,

package/App/NavigationProvider/navigator/__tests__/reducer.test.ts

@@ -1,9 +1,9 @@
 import reducer, {
   ACTIONS,
-  push,
-  replace,
   back,
   initialState,
+  push,
+  replace,
 } from "../reducer";
 
 jest.mock("uuid");
@@ -181,24 +181,6 @@ describe("reducer", () => {
       expect(newState.options.navBar).toEqual(initialState.options.navBar);
       expect(newState2.options.navBar).toEqual(initialState.options.navBar);
     });
-
-    it("updates the location properties of the state", () => {
-      expect(newState).toHaveProperty("location");
-      expect(newState.location).toHaveProperty("pathname", route);
-
-      expect(newState.location).toHaveProperty("state", { screen: homeScreen });
-
-      expect(newState2).toHaveProperty("location");
-      expect(newState2.location).toHaveProperty("pathname", route2);
-
-      expect(newState2.location).toHaveProperty(
-        "state",
-        expect.objectContaining({
-          screen,
-          entry,
-        })
-      );
-    });
   });
 
   describe("when a replace action is dispatched", () => {
@@ -245,24 +227,6 @@ describe("reducer", () => {
       expect(newState.options.navBar).toEqual(initialState.options.navBar);
       expect(newState2.options.navBar).toEqual(initialState.options.navBar);
     });
-
-    it("updates the location properties of the state", () => {
-      expect(newState).toHaveProperty("location");
-      expect(newState.location).toHaveProperty("pathname", route);
-
-      expect(newState.location).toHaveProperty("state", {
-        screen: homeScreen,
-        entry: undefined,
-      });
-
-      expect(newState2).toHaveProperty("location");
-      expect(newState2.location).toHaveProperty("pathname", route2);
-
-      expect(newState2.location).toHaveProperty("state", {
-        screen,
-        entry,
-      });
-    });
   });
 
   describe("when a back action is dispatched", () => {
@@ -300,30 +264,6 @@ describe("reducer", () => {
         expect(newState2.options.navBar).toEqual(initialState.options.navBar);
         expect(finalState.options.navBar).toEqual(initialState.options.navBar);
       });
-
-      it("updates the location properties of the state", () => {
-        expect(newState).toHaveProperty("location");
-        expect(newState.location).toHaveProperty("pathname", route);
-
-        expect(newState.location).toHaveProperty("state", {
-          screen: homeScreen,
-        });
-
-        expect(newState2).toHaveProperty("location");
-        expect(newState2.location).toHaveProperty("pathname", route2);
-
-        expect(newState2.location).toHaveProperty("state", {
-          screen,
-          entry,
-        });
-
-        expect(finalState).toHaveProperty("location");
-        expect(finalState.location).toHaveProperty("pathname", route);
-
-        expect(finalState.location).toHaveProperty("state", {
-          screen: homeScreen,
-        });
-      });
     });
 
     describe("push, back, push, back", () => {
@@ -382,14 +322,6 @@ describe("reducer", () => {
           entry: undefined,
         });
 
-        expect(finalState).toHaveProperty("location");
-        expect(finalState.location).toHaveProperty("pathname", route);
-
-        expect(finalState.location).toHaveProperty("state", {
-          screen: homeScreen,
-          entry: undefined,
-        });
-
         expect(finalState).toEqual(newState);
       });
     });

package/App/NavigationProvider/navigator/reducer.ts

@@ -1,6 +1,8 @@
 import * as R from "ramda";
 import { v4 } from "uuid";
 
+import { last } from "@applicaster/zapp-react-native-utils/utils";
+
 import {
   firstStackEntriesSelector,
   previousStackEntriesSelector,
@@ -18,7 +20,6 @@ export const initialState: NavigationReducerState = {
     mainStack: [],
     modal: null,
   },
-  location: { key: "", pathname: "/", state: null },
   options: {
     videoModal: {
       visible: false,
@@ -38,7 +39,6 @@ export enum ACTIONS {
   BACK_PLAYER_NESTED_CONTENT = "BACK_PLAYER_NESTED_CONTENT",
   REPLACE_TOP = "REPLACE_TOP",
   SET_NESTED_CONTENT = "SET_NESTED_CONTENT",
-  SET_LOCATION = "SET_LOCATION",
   OPEN_VIDEO_MODAL = "OPEN_VIDEO_MODAL",
   CLOSE_VIDEO_MODAL = "CLOSE_VIDEO_MODAL",
   MINIMISE_VIDEO_MODAL = "MINIMISE_VIDEO_MODAL",
@@ -174,9 +174,9 @@ function backPlayerNestedContent(state) {
   return findPlayableAndTruncate(currentState);
 }
 
-function addNestedContent(stack, payload, locationState: LocationReducerState) {
-  const locationKey = locationState.key;
-  const stackIndex = R.findIndex(R.propEq("key", locationKey))(stack);
+function addNestedContent(stack, payload, targetStackEntry) {
+  const targetStackKey = targetStackEntry.key;
+  const stackIndex = R.findIndex(R.propEq("key", targetStackKey))(stack);
 
   return R.adjust(
     stackIndex,
@@ -190,7 +190,7 @@ function addNestedContent(stack, payload, locationState: LocationReducerState) {
 
 function navigationStackReducer(
   state: NavigationStackReducerState = initialState.stack,
-  { type = "", payload, meta }: ReducerAction = { type: "" }
+  { type = "", payload }: ReducerAction = { type: "" }
 ) {
   switch (type) {
     case ACTIONS.SET_NESTED_CONTENT:
@@ -199,7 +199,7 @@ function navigationStackReducer(
         mainStack: addNestedContent(
           state.mainStack,
           navigationEntry(ACTIONS.REPLACE, payload as AnyRecord),
-          meta as LocationReducerState
+          last(state.mainStack)
         ),
       };
     case ACTIONS.PUSH:
@@ -268,47 +268,6 @@ function navigationStackReducer(
   }
 }
 
-function locationReducer(
-  state = initialState.location,
-  { type, payload, meta = {} }
-) {
-  const { route, key, screen, entry, options } = payload;
-
-  switch (type) {
-    case ACTIONS.BACK:
-      // eslint-disable-next-line no-case-declarations
-      const previousEntry = R.compose(
-        R.last,
-        payload.route ? firstStackEntriesSelector : previousStackEntriesSelector
-      )(meta);
-
-      if (previousEntry) {
-        const { state, key, action } = previousEntry;
-
-        return { pathname: previousEntry.route, state, key, action };
-      }
-
-      return state;
-
-    case ACTIONS.PUSH:
-    case ACTIONS.REPLACE:
-    case ACTIONS.REPLACE_TOP:
-    case ACTIONS.BACK_PLAYER_NESTED_CONTENT:
-      return { pathname: route, state: { screen, entry, options }, key };
-
-    case ACTIONS.SET_NESTED_CONTENT:
-      // eslint-disable-next-line no-case-declarations
-      const nestedEntry = navigationEntry(
-        ACTIONS.REPLACE,
-        payload as AnyRecord
-      );
-
-      return R.assocPath(["state", "nested"], nestedEntry.state, state);
-    default:
-      return state;
-  }
-}
-
 /* Video Modal reducer */
 export const setVideoModalOpen = (item, options, screen) => ({
   type: ACTIONS.OPEN_VIDEO_MODAL,
@@ -354,43 +313,28 @@ export const videoModalReducer = (
   switch (type) {
     case ACTIONS.OPEN_VIDEO_MODAL: {
       const { item, options } = payload;
+      const mode = options?.mode || MAXIMIZED;
 
-      const mode = R.pathOr(MAXIMIZED, ["mode"], options);
-
-      return R.compose(
-        R.set(R.lensProp("mode"), mode),
-        R.set(R.lensProp("visible"), true),
-        R.over(
-          R.lensProp("item"),
-          R.unless(R.tryCatch(R.propEq("id", item?.id), R.F), () => item)
-        )
-      )(state);
+      return {
+        ...state,
+        visible: true,
+        mode,
+        item: state.item?.id !== item?.id ? item : state.item,
+      };
     }
 
     case ACTIONS.SET_VIDEO_MODAL_ITEM:
-      return R.set(R.lensProp("item"), payload)(state);
+      return { ...state, item: payload };
     case ACTIONS.CLOSE_VIDEO_MODAL:
       return initialState.options.videoModal;
     case ACTIONS.FULLSCREEN_VIDEO_MODAL:
-      return R.compose(
-        R.set(R.lensProp("mode"), FULLSCREEN),
-        R.set(R.lensProp("previousMode"), state.mode)
-      )(state);
+      return { ...state, mode: FULLSCREEN, previousMode: state.mode };
     case ACTIONS.MINIMISE_VIDEO_MODAL:
-      return R.compose(
-        R.set(R.lensProp("mode"), MINIMIZED),
-        R.set(R.lensProp("previousMode"), state.mode)
-      )(state);
+      return { ...state, mode: MINIMIZED, previousMode: state.mode };
     case ACTIONS.MAXIMISE_VIDEO_MODAL:
-      return R.compose(
-        R.set(R.lensProp("mode"), MAXIMIZED),
-        R.set(R.lensProp("previousMode"), state.mode)
-      )(state);
+      return { ...state, mode: MAXIMIZED, previousMode: state.mode };
     case ACTIONS.PIP:
-      return R.compose(
-        R.set(R.lensProp("mode"), PIP),
-        R.set(R.lensProp("previousMode"), state.mode)
-      )(state);
+      return { ...state, mode: PIP, previousMode: state.mode };
   }
 };
 
@@ -406,34 +350,19 @@ export default function navigationReducer(
     case ACTIONS.REPLACE_TOP:
     case ACTIONS.BACK:
     case ACTIONS.BACK_PLAYER_NESTED_CONTENT:
-      return R.evolve(
-        {
-          stack: applyReducer(navigationStackReducer, { type, payload }),
-          location: applyReducer(locationReducer, {
-            type,
-            payload,
-            meta: state,
-          }),
-        },
-        state
-      );
+      return {
+        ...state,
+        stack: navigationStackReducer(state.stack, { type, payload }),
+      };
 
     case ACTIONS.SET_NESTED_CONTENT:
-      return R.evolve(
-        {
-          stack: applyReducer(navigationStackReducer, {
-            type,
-            payload,
-            meta: state.location,
-          }),
-          location: applyReducer(locationReducer, {
-            type,
-            payload,
-            meta: state.stack,
-          }),
-        },
-        state
-      );
+      return {
+        ...state,
+        stack: navigationStackReducer(state.stack, {
+          type,
+          payload,
+        }),
+      };
 
     case ACTIONS.OPEN_VIDEO_MODAL:
     case ACTIONS.CLOSE_VIDEO_MODAL:

package/App/RouterDecorator/__tests__/routerDecorator.test.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import ReactTestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 import { createRouterDecorator } from "../index";
 
@@ -26,7 +26,7 @@ describe("routerDecorator", () => {
     const decorator = createRouterDecorator(Router);
     const DecoratedComp = decorator(SomeComp);
 
-    const wrapper = ReactTestRenderer.create(<DecoratedComp foo="bar" />);
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    const { toJSON } = render(<DecoratedComp foo="bar" />);
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/App/__tests__/createQuickBrickApp.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable indent */
 import * as React from "react";
-import ReactTestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import thunk from "redux-thunk";
 import configureStore from "redux-mock-store";
@@ -175,13 +175,13 @@ describe("createQuickBrickApp", () => {
   it("returns a react component and it renders correctly", () => {
     const QuickBrickApp = createQuickBrickApp(options);
 
-    const wrapper = ReactTestRenderer.create(
+    const { toJSON } = render(
       <Provider store={store}>
         <QuickBrickApp store={store} />
       </Provider>
     );
 
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   describe("with no InteractionManager", () => {
@@ -190,13 +190,13 @@ describe("createQuickBrickApp", () => {
       const { InteractionManager, ...otherOptions } = options;
       const QuickBrickApp = createQuickBrickApp(otherOptions);
 
-      const wrapper = ReactTestRenderer.create(
+      const { toJSON } = render(
         <Provider store={store}>
           <QuickBrickApp store={store} />
         </Provider>
       );
 
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 
@@ -206,13 +206,13 @@ describe("createQuickBrickApp", () => {
       const { ContextProviders, ...otherOptions } = options;
       const QuickBrickApp = createQuickBrickApp(otherOptions);
 
-      const wrapper = ReactTestRenderer.create(
+      const { toJSON } = render(
         <Provider store={store}>
           <QuickBrickApp store={store} />
         </Provider>
       );
 
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 });

package/App/components/ZappAppWrapper.ts

@@ -0,0 +1,3 @@
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+
+export const ZappAppWrapper = GestureHandlerRootView;

package/App/components/ZappAppWrapper.web.ts

@@ -0,0 +1,3 @@
+import { View } from "react-native";
+
+export const ZappAppWrapper = View;

package/App/index.tsx

@@ -31,6 +31,7 @@ import { withActionExecutor } from "@applicaster/zapp-react-native-utils/actions
 import { withScreenDataContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { LogicAggregatorContainer } from "./LogicAggregatorContainer";
 import { LoadingOverlay } from "./LoadingOverlay";
+import { ZappAppWrapper } from "./components/ZappAppWrapper";
 
 interface AppOptions {
   Layout: React.ComponentType;
@@ -59,31 +60,33 @@ const App = ({
     } = props;
 
     return (
-      <ThemeManager plugins={plugins}>
-        <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-          <AppContainer styles={styles}>
-            <ErrorBoundary>
-              <URLSchemeListener>
-                <SplashLoader>
-                  <OfflineHandler>
-                    <Layout>
-                      <RouteManager />
-                    </Layout>
-                  </OfflineHandler>
-                </SplashLoader>
-                <ModalProvider />
-              </URLSchemeListener>
-              <LoadingOverlay />
-            </ErrorBoundary>
-            <LogicAggregatorContainer
-              components={React.useMemo(
-                () => [InteractionManager, ApplyScreenHooks],
-                [InteractionManager, ApplyScreenHooks]
-              )}
-            />
-          </AppContainer>
-        </SafeAreaProvider>
-      </ThemeManager>
+      <ZappAppWrapper>
+        <ThemeManager plugins={plugins}>
+          <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+            <AppContainer styles={styles}>
+              <ErrorBoundary>
+                <URLSchemeListener>
+                  <SplashLoader>
+                    <OfflineHandler>
+                      <Layout>
+                        <RouteManager />
+                      </Layout>
+                    </OfflineHandler>
+                  </SplashLoader>
+                  <ModalProvider />
+                </URLSchemeListener>
+                <LoadingOverlay />
+              </ErrorBoundary>
+              <LogicAggregatorContainer
+                components={React.useMemo(
+                  () => [InteractionManager, ApplyScreenHooks],
+                  [InteractionManager, ApplyScreenHooks]
+                )}
+              />
+            </AppContainer>
+          </SafeAreaProvider>
+        </ThemeManager>
+      </ZappAppWrapper>
     );
   });
 

package/createZappApp/__tests__/createZappApp.test.js

@@ -75,6 +75,17 @@ jest.mock("@applicaster/zapp-react-native-bridge/QuickBrick", () => ({
   getLegacyInitialProps: jest.fn(() => ({ initialProps: {} })),
 }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/River",
+  () => {
+    const View = require("react-native").View;
+
+    return {
+      River: jest.fn(() => <View testID="mock-river" />),
+    };
+  }
+);
+
 describe("createZappApp", () => {
   it("renders the provided React App", () => {
     const ZappApp = createZappApp({ App });

package/index.d.ts

@@ -45,7 +45,6 @@ declare type NavigationReducerActionTypes =
   | "SET_NAV_BAR_TITLE"
   | "SET_NAV_BAR_SUMMARY"
   | "SET_BOTTOM_BAR_VISIBILITY"
-  | "SET_LOCATION"
   | "OPEN_VIDEO_MODAL"
   | "CLOSE_VIDEO_MODAL"
   | "MINIMISE_VIDEO_MODAL"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "14.0.0-alpha.5219335081",
+  "version": "14.0.0-alpha.5234792518",
   "description": "Core package for Applicaster's Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,13 +28,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.5219335081",
-    "@applicaster/quick-brick-core-plugins": "14.0.0-alpha.5219335081",
-    "@applicaster/zapp-pipes-v2-client": "14.0.0-alpha.5219335081",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.5219335081",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.5219335081",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.5219335081",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5219335081",
+    "@applicaster/applicaster-types": "14.0.0-alpha.5234792518",
+    "@applicaster/quick-brick-core-plugins": "14.0.0-alpha.5234792518",
+    "@applicaster/zapp-pipes-v2-client": "14.0.0-alpha.5234792518",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.5234792518",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.5234792518",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.5234792518",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5234792518",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",