@applicaster/quick-brick-core 16.0.0-rc.11 → 16.0.0-rc.111

package/App/ModalProvider/ModalBottomSheet/hooks/__tests__/useKeyboardHeight.android.test.ts

@@ -0,0 +1,105 @@
+import { act, renderHook } from "@testing-library/react-native";
+import { Keyboard } from "react-native";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  isApplePlatform: () => false,
+}));
+
+// Import after mocks so module-level isApple resolves to false.
+// eslint-disable-next-line import/first
+import { useKeyboardHeight } from "../useKeyboardHeight";
+
+type KeyboardListener = (event?: {
+  endCoordinates: { height: number };
+}) => void;
+
+function setupKeyboardListenerMock() {
+  const listeners: Record<string, KeyboardListener> = {};
+  const removeMocks: Record<string, jest.Mock> = {};
+
+  const addListenerSpy = jest
+    .spyOn(Keyboard, "addListener")
+    .mockImplementation((event: string, callback: KeyboardListener) => {
+      listeners[event] = callback;
+
+      const remove = jest.fn();
+      removeMocks[event] = remove;
+
+      return { remove };
+    });
+
+  return { listeners, removeMocks, addListenerSpy };
+}
+
+describe("useKeyboardHeight (non-Apple platforms)", () => {
+  let listeners: Record<string, KeyboardListener>;
+  let removeMocks: Record<string, jest.Mock>;
+  let addListenerSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    const mock = setupKeyboardListenerMock();
+    listeners = mock.listeners;
+    removeMocks = mock.removeMocks;
+    addListenerSpy = mock.addListenerSpy;
+  });
+
+  afterEach(() => {
+    addListenerSpy.mockRestore();
+  });
+
+  it("returns 0 initially and subscribes to didShow / didHide events", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    expect(result.current).toBe(0);
+    expect(addListenerSpy).toHaveBeenCalledTimes(2);
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardDidShow",
+      expect.any(Function)
+    );
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardDidHide",
+      expect.any(Function)
+    );
+  });
+
+  it("updates height when keyboardDidShow fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardDidShow?.({
+        endCoordinates: { height: 412 },
+      });
+    });
+
+    expect(result.current).toBe(412);
+  });
+
+  it("resets height to 0 when keyboardDidHide fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardDidShow?.({
+        endCoordinates: { height: 412 },
+      });
+    });
+
+    expect(result.current).toBe(412);
+
+    act(() => {
+      listeners.keyboardDidHide?.();
+    });
+
+    expect(result.current).toBe(0);
+  });
+
+  it("removes listeners on unmount", () => {
+    const { unmount } = renderHook(() => useKeyboardHeight());
+
+    unmount();
+
+    expect(removeMocks.keyboardDidShow).toHaveBeenCalledTimes(1);
+    expect(removeMocks.keyboardDidHide).toHaveBeenCalledTimes(1);
+  });
+});

package/App/ModalProvider/ModalBottomSheet/hooks/__tests__/useKeyboardHeight.test.ts

@@ -0,0 +1,102 @@
+import { act, renderHook } from "@testing-library/react-native";
+import { Keyboard } from "react-native";
+import { useKeyboardHeight } from "../useKeyboardHeight";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  isApplePlatform: () => true,
+}));
+
+type KeyboardListener = (event?: {
+  endCoordinates: { height: number };
+}) => void;
+
+function setupKeyboardListenerMock() {
+  const listeners: Record<string, KeyboardListener> = {};
+  const removeMocks: Record<string, jest.Mock> = {};
+
+  const addListenerSpy = jest
+    .spyOn(Keyboard, "addListener")
+    .mockImplementation((event: string, callback: KeyboardListener) => {
+      listeners[event] = callback;
+
+      const remove = jest.fn();
+      removeMocks[event] = remove;
+
+      return { remove };
+    });
+
+  return { listeners, removeMocks, addListenerSpy };
+}
+
+describe("useKeyboardHeight (Apple platforms)", () => {
+  let listeners: Record<string, KeyboardListener>;
+  let removeMocks: Record<string, jest.Mock>;
+  let addListenerSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    const mock = setupKeyboardListenerMock();
+    listeners = mock.listeners;
+    removeMocks = mock.removeMocks;
+    addListenerSpy = mock.addListenerSpy;
+  });
+
+  afterEach(() => {
+    addListenerSpy.mockRestore();
+  });
+
+  it("returns 0 initially and subscribes to willShow / willHide events", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    expect(result.current).toBe(0);
+    expect(addListenerSpy).toHaveBeenCalledTimes(2);
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardWillShow",
+      expect.any(Function)
+    );
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardWillHide",
+      expect.any(Function)
+    );
+  });
+
+  it("updates height when keyboardWillShow fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardWillShow?.({
+        endCoordinates: { height: 336 },
+      });
+    });
+
+    expect(result.current).toBe(336);
+  });
+
+  it("resets height to 0 when keyboardWillHide fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardWillShow?.({
+        endCoordinates: { height: 280 },
+      });
+    });
+
+    expect(result.current).toBe(280);
+
+    act(() => {
+      listeners.keyboardWillHide?.();
+    });
+
+    expect(result.current).toBe(0);
+  });
+
+  it("removes listeners on unmount", () => {
+    const { unmount } = renderHook(() => useKeyboardHeight());
+
+    unmount();
+
+    expect(removeMocks.keyboardWillShow).toHaveBeenCalledTimes(1);
+    expect(removeMocks.keyboardWillHide).toHaveBeenCalledTimes(1);
+  });
+});

package/App/ModalProvider/ModalBottomSheet/hooks/index.ts

@@ -0,0 +1 @@
+export { useKeyboardHeight } from "./useKeyboardHeight";

package/App/ModalProvider/ModalBottomSheet/hooks/useKeyboardHeight.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { Keyboard, KeyboardEvent } from "react-native";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const isApple = isApplePlatform();
+
+export function useKeyboardHeight() {
+  const [keyboardHeight, setKeyboardHeight] = React.useState(0);
+
+  React.useEffect(() => {
+    // iOS supports smooth 'willShow' / 'willHide' events
+    const showEvent = isApple ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent = isApple ? "keyboardWillHide" : "keyboardDidHide";
+
+    const showListener = Keyboard.addListener(showEvent, (e: KeyboardEvent) => {
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+
+    const hideListener = Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+    });
+
+    return () => {
+      showListener.remove();
+      hideListener.remove();
+    };
+  }, []);
+
+  return keyboardHeight;
+}

package/App/ModalProvider/ModalBottomSheet/index.tsx

@@ -47,9 +47,11 @@ export function ModalBottomSheet(props: Props) {
 
   const {
     ModalBottomSheetContent = ModalComponent,
-    modalBottomSheetContentProps,
+    modalBottomSheetContentProps = {},
   } = props;
 
+  const { key, ...restContentProps } = modalBottomSheetContentProps;
+
   useEffect(() => {
     Keyboard.dismiss();
   }, []);
@@ -82,11 +84,12 @@ export function ModalBottomSheet(props: Props) {
         }}
       >
         <ModalBottomSheetContent
+          key={key as any}
           width={
             Math.min(sheetTabletMaxWidth, dimensions.width) || dimensions.width
           }
           maxHeight={sheetMaxHeight}
-          {...modalBottomSheetContentProps}
+          {...restContentProps}
           dismiss={dismiss}
           currentRoute={navigator.currentRoute}
         />

package/App/ModalProvider/ModalContent.tsx

@@ -30,6 +30,9 @@ export function ModalContent(props: Props) {
   }
 
   return (
+    // A presented screen fills the window, including the status bar and home
+    // indicator. The modal wraps it in its own SafeAreaProvider, so the screen
+    // reads the real insets itself and places its own chrome inside them.
     <View style={styles.container}>
       <ScreenResolver {...modalScreenProps} />
     </View>

package/App/ModalProvider/__tests__/ModalContent.test.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { render } from "@testing-library/react-native";
+
+import { ModalContent } from "../ModalContent";
+
+jest.mock("../ModalBottomSheet", () => ({ ModalBottomSheet: () => null }));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver",
+  () => ({ ScreenResolver: () => null })
+);
+
+const flatStyle = (tree: any) => StyleSheet.flatten(tree.props.style);
+
+describe("ModalContent", () => {
+  it("lets a presented screen fill the modal, leaving the safe area to the screen", () => {
+    const tree = render(
+      <ModalContent modalScreenProps={{ screenId: "river-1" }} />
+    ).toJSON();
+
+    // The modal provides a SafeAreaProvider instead, so the presented screen
+    // reads the real insets itself rather than being padded from the outside.
+    expect(flatStyle(tree)).toEqual({ flex: 1 });
+  });
+
+  it("leaves a bottom sheet full-bleed", () => {
+    const tree = render(
+      <ModalContent
+        modalScreenProps={{
+          screenData: { modalBottomSheetContentProps: { items: [] } },
+        }}
+      />
+    ).toJSON();
+
+    // Bottom sheets anchor to the screen edge and manage their own insets.
+    expect(tree).toBeNull();
+  });
+});

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

@@ -0,0 +1,99 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { modalStore } from "@applicaster/zapp-react-native-utils/modalState";
+
+import { ModalProvider } from "../";
+
+/**
+ * Records the ScreenDataContext value seen by the presented screen — the
+ * context useScreenContext()/useCurrentScreenData() read from.
+ */
+const mockSeenScreenData: any[] = [];
+
+/** Records the `initialMetrics` each SafeAreaProvider the modal renders got. */
+const mockSafeAreaProviderMetrics: any[] = [];
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver",
+  () => {
+    const ReactLocal = require("react");
+
+    const {
+      ScreenDataContext,
+    } = require("@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext");
+
+    return {
+      ScreenResolver: () => {
+        mockSeenScreenData.push(ReactLocal.useContext(ScreenDataContext));
+
+        return null;
+      },
+    };
+  }
+);
+
+// Needs the navigator + redux to build navbar state; irrelevant to this test.
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext",
+  () => ({
+    ScreenContextProvider: ({ children }: any) => children,
+  })
+);
+
+// Pulls in the whole Components barrel; only the ScreenResolver branch matters here.
+jest.mock("../ModalBottomSheet", () => ({ ModalBottomSheet: () => null }));
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  // A modal renders in its own native window, so it needs its own provider
+  // seeded with the window metrics; without them insets read as zero inside.
+  initialWindowMetrics: { insets: { top: 59, bottom: 34, left: 0, right: 0 } },
+  SafeAreaProvider: ({ children, initialMetrics }: any) => {
+    mockSafeAreaProviderMetrics.push(initialMetrics);
+
+    return children;
+  },
+}));
+
+const river = { id: "river-parent-lock", type: "parent_lock" } as any;
+
+const entry = { id: "entry-1", type: { value: "video" } } as any;
+
+const seen = () => mockSeenScreenData[mockSeenScreenData.length - 1];
+
+describe("ModalProvider", () => {
+  beforeEach(() => {
+    mockSeenScreenData.length = 0;
+    mockSafeAreaProviderMetrics.length = 0;
+    modalStore.getState().dismissModal();
+  });
+
+  it("gives the presented screen its screen and entry through ScreenDataContext", () => {
+    modalStore.getState().openModal({ item: river, props: { entry } });
+
+    render(<ModalProvider />);
+
+    expect(seen()).toEqual({ screen: river, entry });
+  });
+
+  it("gives the presented screen its screen when presented without an entry", () => {
+    modalStore.getState().openModal({ item: river });
+
+    render(<ModalProvider />);
+
+    expect(seen()).toMatchObject({ screen: river });
+  });
+
+  it("seeds the presented screen's safe area with the window metrics", () => {
+    const { initialWindowMetrics } = require("react-native-safe-area-context");
+
+    modalStore.getState().openModal({ item: river });
+
+    render(<ModalProvider />);
+
+    expect(mockSafeAreaProviderMetrics).toEqual(
+      expect.arrayContaining([initialWindowMetrics])
+    );
+  });
+});

package/App/ModalProvider/index.tsx

@@ -1,9 +1,15 @@
 import * as React from "react";
 
+import {
+  initialWindowMetrics,
+  SafeAreaProvider,
+} from "react-native-safe-area-context";
+
 import { ModalPresenter } from "./ModalPresenter";
 import { ModalContent } from "./ModalContent";
 import { ModalChildrenWrapper } from "./ModalChildrenWrapper";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 import { useModalStoreState } from "@applicaster/zapp-react-native-utils/modalState";
@@ -14,6 +20,9 @@ export function ModalProvider() {
   const [modalVisible, setModalVisible] = React.useState(false);
   const [modalShown, setModalShown] = React.useState(false);
 
+  const screen = modalState?.screen;
+  const entry = modalState?.props?.entry as ZappEntry | undefined;
+
   React.useEffect(() => {
     setModalVisible(!!modalState);
 
@@ -22,13 +31,25 @@ export function ModalProvider() {
     }
   }, [modalState]);
 
-  if (!modalState?.screen) {
+  /**
+   * The modal renders as a sibling of the stack navigator, so nothing upstream
+   * provides ScreenDataContext and the presented screen would otherwise see
+   * `null` from useScreenContext()/useCurrentScreenData(). Provide it here so a
+   * presented screen resolves its own screen and entry, the same way a pushed
+   * screen does through the navigator's scene.
+   */
+  const screenDataContextValue = React.useMemo(
+    () => ({ screen, entry }),
+    [screen, entry]
+  );
+
+  if (!screen) {
     return null;
   }
 
   const modalScreenProps = {
-    screenData: modalState?.screen,
-    screenId: modalState?.screen?.id,
+    screenData: entry ? { ...entry, targetScreen: screen } : screen,
+    screenId: screen?.id,
     screenType: "river",
     ...modalState.props,
   };
@@ -39,17 +60,21 @@ export function ModalProvider() {
 
   return (
     <PathnameContext.Provider value={pathname}>
-      <ScreenContextProvider pathname={pathname}>
-        <ModalPresenter
-          visible={shouldShowModal}
-          {...modalState?.options}
-          statusBarTranslucent
-        >
-          <ModalChildrenWrapper>
-            <ModalContent modalScreenProps={modalScreenProps} />
-          </ModalChildrenWrapper>
-        </ModalPresenter>
-      </ScreenContextProvider>
+      <ScreenDataContext.Provider value={screenDataContextValue}>
+        <ScreenContextProvider pathname={pathname}>
+          <ModalPresenter
+            visible={shouldShowModal}
+            {...modalState?.options}
+            statusBarTranslucent
+          >
+            <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+              <ModalChildrenWrapper>
+                <ModalContent modalScreenProps={modalScreenProps} />
+              </ModalChildrenWrapper>
+            </SafeAreaProvider>
+          </ModalPresenter>
+        </ScreenContextProvider>
+      </ScreenDataContext.Provider>
     </PathnameContext.Provider>
   );
 }

package/App/NavigationProvider/NavigationProvider.tsx

@@ -55,6 +55,7 @@ import {
   getTargetScreen,
   legacyScreenData,
   openExternalUrl,
+  stripHookPrefix,
 } from "./utils";
 import {
   debounce,
@@ -242,6 +243,10 @@ export function NavigationProvider({ children }: Props) {
     playNextOverlayState.current = state;
   };
 
+  // The play-next overlay owns remote focus while it is visible, so key
+  // handling (InteractionManager) needs to be able to ask for it.
+  const getPlayNextOverlay = () => playNextOverlayState.current ?? null;
+
   const setNestedScreenContent = (entry: ZappEntry, screenId: string) => {
     const screen = rivers[screenId];
     const parent = findParent(context, navigator.currentRoute);
@@ -348,10 +353,7 @@ export function NavigationProvider({ children }: Props) {
           state: firstRoute.state,
         };
 
-        if (
-          stateForBack?.state?.entry &&
-          "home" in stateForBack?.state?.entry
-        ) {
+        if (stateForBack?.state?.entry?.home) {
           goHome();
         } else {
           dispatch(back(stateForBack));
@@ -414,6 +416,19 @@ export function NavigationProvider({ children }: Props) {
     },
     dispose
   ) => {
+    logger.debug({
+      message: `Hook screen presented: ${
+        hookPlugin.isModalHook() ? `(modal) ${route}` : route
+      }`,
+      data: {
+        route,
+        hookIdentifier: hookPlugin?.identifier,
+        hookScreenId: hookPlugin?.screen_id,
+        isModal: hookPlugin.isModalHook(),
+        lastHook: hookPlugin?.lastHook,
+      },
+    });
+
     if (hookPlugin?.lastHook) {
       dispose();
     }
@@ -536,6 +551,17 @@ export function NavigationProvider({ children }: Props) {
         currentStartUpHooks.current && setStartUpHooks(false);
       }
 
+      logger.debug({
+        message: `Hooks complete, navigating to: ${targetRoute}`,
+        data: {
+          targetRoute,
+          hookIdentifier: hookPlugin?.identifier,
+          screenId: screen?.id,
+          screenName: screen?.name,
+          options,
+        },
+      });
+
       dispatch(
         navigationAction(targetRoute, { screen, entry: payload, options })
       );
@@ -574,12 +600,28 @@ export function NavigationProvider({ children }: Props) {
     ) => {
       const { entry, screen, targetRoute, externalUrl } = getNavigationTarget(
         item,
-        action === ACTIONS.REPLACE ? "" : pathnameRef.current,
+        action === ACTIONS.REPLACE ? "" : stripHookPrefix(pathnameRef.current),
         contentTypes,
         layoutVersion,
         rivers
       );
 
+      logger.debug({
+        message: `Navigating: ${pathnameRef.current || "(none)"} -> ${
+          targetRoute || externalUrl || "(unresolved)"
+        }`,
+        data: {
+          action,
+          from: pathnameRef.current,
+          to: targetRoute,
+          externalUrl,
+          screenId: screen?.id,
+          screenName: screen?.name,
+          entryType: entry?.type?.value,
+          options,
+        },
+      });
+
       if (externalUrl) {
         const openURL = async (url) => {
           const inflatedURL = await inflateUrl(url);
@@ -668,6 +710,15 @@ export function NavigationProvider({ children }: Props) {
 
         hooksManager.handleHooks(legacyScreenData({ entry, screen }));
       } else {
+        logger.debug({
+          message: `Navigating offline (hooks skipped) to: ${targetRoute}`,
+          data: {
+            targetRoute,
+            screenId: screen?.id,
+            screenName: screen?.name,
+          },
+        });
+
         dispatch(navigationAction(targetRoute, { screen, entry, options }));
       }
     },
@@ -727,6 +778,7 @@ export function NavigationProvider({ children }: Props) {
       replace: replaceItem,
       setNestedScreenContent,
       setPlayNextOverlay,
+      getPlayNextOverlay,
       goHome,
       canGoBack,
       goBack,

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

@@ -410,6 +410,62 @@ describe("<NavigationProvider />", () => {
       });
     });
 
+    describe("when backToTop is requested from a non-home tab", () => {
+      const listenRiver = {
+        id: "LISTEN",
+        home: false,
+        navigations: [],
+        ui_components: [],
+      };
+
+      beforeEach(() => {
+        wrapper = renderContextConsumer({
+          ...store,
+          rivers: { ...rivers, LISTEN: listenRiver },
+        });
+
+        act(() => {
+          getNavigatorValues(wrapper).navigator.replace(listenRiver);
+        });
+      });
+
+      it("returns to the tab root from the second level", () => {
+        act(() => {
+          getNavigatorValues(wrapper).navigator.push(rivers.A1234);
+        });
+
+        act(() => {
+          getNavigatorValues(wrapper).navigator.goBack(false, false, true);
+        });
+
+        const { navigator, state } = getNavigatorValues(wrapper);
+
+        expect(navigator.currentRoute).toEqual("/river/LISTEN");
+        expect(navigator.activeRiver).toEqual(listenRiver);
+        expect(state.stack.mainStack).toHaveLength(1);
+      });
+
+      it("returns to the tab root from the third level", () => {
+        act(() => {
+          getNavigatorValues(wrapper).navigator.push(rivers.A1234);
+        });
+
+        act(() => {
+          getNavigatorValues(wrapper).navigator.push(rivers.C0987);
+        });
+
+        act(() => {
+          getNavigatorValues(wrapper).navigator.goBack(false, false, true);
+        });
+
+        const { navigator, state } = getNavigatorValues(wrapper);
+
+        expect(navigator.currentRoute).toEqual("/river/LISTEN");
+        expect(navigator.activeRiver).toEqual(listenRiver);
+        expect(state.stack.mainStack).toHaveLength(1);
+      });
+    });
+
     describe("when there is a previous route and there are hooks", () => {
       beforeEach(() => {
         wrapper = renderContextConsumer();