@applicaster/quick-brick-core 16.0.0-alpha.4416921324 → 16.0.0-alpha.4909430115

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

@@ -60,11 +60,21 @@ jest.spyOn(useNavigationHooks, "useNavigation").mockReturnValue(navigator);
 const helperSpy = jest.spyOn(helpers, "handlePresentNavigation");
 const feedLoaderSpy = jest.spyOn(feedLoader, "useFeedLoader");
 
-const setEntryContext = jest.fn();
-
-jest.doMock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
+const mockSetEntryContext = jest.fn();
+
+// `jest.mock` is hoisted above the imports, so the entry context is replaced
+// before anything can pull the real one in. `jest.doMock` is not hoisted, and
+// only worked here for as long as no import above happened to load this module
+// first - which any new import anywhere in the graph could silently undo,
+// leaving the hook writing to the real context while the spy stayed at zero
+// calls. The rest of the module is kept, since other consumers loaded by this
+// graph read other exports from it.
+jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
+  ...jest.requireActual(
+    "@applicaster/zapp-react-native-ui-components/Contexts"
+  ),
   ZappPipesEntryContext: {
-    useZappPipesContext: () => [{}, setEntryContext],
+    useZappPipesContext: () => [{}, mockSetEntryContext],
   },
 }));
 
@@ -76,7 +86,7 @@ jest.mock("../../../logger", () => ({
   log_debug: jest.fn(),
 }));
 
-// to use import instead of require it's required to use jest.mock above
+// Required after the mocks above, so the hook binds to them.
 const { useOpenSchemeHandler } = require("../useOpenSchemeHandler");
 
 const mockStoreObj = { rivers, contentTypes, pipesEndpoints, appData };
@@ -101,7 +111,7 @@ function clearMocks() {
   navigator.replace.mockClear();
   navigator.push.mockClear();
   navigator.goHome.mockClear();
-  setEntryContext.mockClear();
+  mockSetEntryContext.mockClear();
 }
 
 describe("useOpenSchemeHandler", () => {
@@ -215,7 +225,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           expect.objectContaining({
             ...params,
             extensions: { ...params, initial_player_state: "fullscreen" },
@@ -272,7 +282,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           expect.objectContaining({
             ...params,
             extensions: { ...params, initial_player_state: "fullscreen" },
@@ -331,7 +341,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           entryWithInitialPlayerState
         );
       };
@@ -361,7 +371,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           entryWithInitialPlayerState
         );
       };
@@ -391,7 +401,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           entryWithInitialPlayerState
         );
       };
@@ -421,7 +431,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           entryWithInitialPlayerState
         );
       };
@@ -451,7 +461,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           entryWithInitialPlayerState
         );
       };
@@ -485,7 +495,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           expect.objectContaining(entryWithInitialPlayerState)
         );
       };
@@ -514,7 +524,7 @@ describe("useOpenSchemeHandler", () => {
         );
 
         expect(navigator.goHome).toHaveBeenCalled();
-        expect(setEntryContext).not.toHaveBeenCalled();
+        expect(mockSetEntryContext).not.toHaveBeenCalled();
       };
 
       await testHook({

package/App/ModalProvider/ModalBottomSheet/ModalBottomSheetFrame.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { LayoutChangeEvent, Platform, StyleSheet, View } from "react-native";
+import { LayoutChangeEvent, StyleSheet, View } from "react-native";
 
 import { Handle, HandleProps } from "./Handle";
 import { DraggableBottomSheet } from "./DraggableBottomSheet";
@@ -11,9 +11,12 @@ import {
 import {
   isAndroidPlatform,
   isAndroidVersionAtLeast,
+  isApplePlatform,
   platformSelect,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 
+import { useKeyboardHeight } from "./hooks";
+
 type Props = {
   children: React.ReactChild;
   backgroundColor: string;
@@ -104,6 +107,8 @@ export function ModalBottomSheetFrame(props: Props) {
 
   const sheetHeight = useGetSheetHeight(height, maxHeight);
 
+  const keyboardHeight = useKeyboardHeight();
+
   return (
     <DraggableBottomSheet
       sheetHeight={sheetHeight}
@@ -113,7 +118,9 @@ export function ModalBottomSheetFrame(props: Props) {
       header={(dragging) => <Handle {...handleProps} focused={dragging} />}
       maxWidth={maxWidth}
       {...dimensions}
-      height={safeAreaDims.height - (Platform.OS === "ios" ? bottom : 0)}
+      height={
+        safeAreaDims.height - (isApplePlatform() ? bottom : 0) - keyboardHeight
+      }
     >
       <SafeAreaView
         edges={["left", "right", "bottom"]}

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/NotificationToastRenderer/NotificationToastManager.ts

@@ -24,12 +24,19 @@ export interface ToastStyle {
   letterSpacing?: number;
 }
 
+export const DEFAULT_TOAST_TIMEOUT = 4000;
+
+export const CONFIRMATION_TOAST_SOURCE = "confirmation";
+
 export interface ToastPayload {
   id?: string;
   message: string;
   extraMessage?: string; // secondary line; TV renderers show it as a subtitle, mobile ignores it
-  timeout?: number; // ms; if omitted, toast stays until dismissed
+  timeout?: number; // ms; defaults to DEFAULT_TOAST_TIMEOUT (4000) if omitted
   style?: ToastStyle;
+  // stamped by the showToast action; Theme confirmation styles apply when
+  // source === CONFIRMATION_TOAST_SOURCE ("confirmation")
+  source?: string;
   [key: string]: unknown;
 }
 
@@ -122,7 +129,11 @@ class NotificationToastManager {
   };
 
   private handleShowToast = (payload: ToastPayload) => {
-    const item = { ...payload, id: payload.id ?? String(this.nextId++) };
+    const item = {
+      ...payload,
+      id: payload.id ?? String(this.nextId++),
+      timeout: payload.timeout ?? DEFAULT_TOAST_TIMEOUT,
+    };
 
     const queuedIndex = this.queue.findIndex((queued) => queued.id === item.id);
 

package/App/NotificationToastRenderer/NotificationToastRenderer.tsx

@@ -1,16 +1,22 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { View, Text, Animated, StyleSheet, ViewStyle } from "react-native";
 import {
-  View,
-  Text,
-  Animated,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  ViewStyle,
-} from "react-native";
-
-import { notificationToastManager } from "./NotificationToastManager";
+  Directions,
+  Gesture,
+  GestureDetector,
+} from "react-native-gesture-handler";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+import {
+  CONFIRMATION_TOAST_SOURCE,
+  notificationToastManager,
+} from "./NotificationToastManager";
 import { useNotificationToastState } from "./useNotificationToastState";
 import { useNotificationHeight } from "./useNotificationHeight";
+import { resolveConfirmationToastStyle } from "./resolveConfirmationToastStyle";
+
+const DEFAULT_TOAST_BACKGROUND_COLOR = "#000";
+const DEFAULT_TOAST_MESSAGE_COLOR = "#fff";
 
 const styles = StyleSheet.create({
   notificationView: {
@@ -28,6 +34,7 @@ type NumberBoolean = 0 | 1;
 
 export const NotificationToastRenderer = ({ children }) => {
   const { statusHeight, notificationHeight } = useNotificationHeight();
+  const theme = useTheme<BaseThemePropertiesMobile>();
 
   const toast = useNotificationToastState();
 
@@ -36,15 +43,22 @@ export const NotificationToastRenderer = ({ children }) => {
 
   const yPosition = useRef(new Animated.Value(0)).current;
 
-  const backgroundColor = toast?.style?.backgroundColor ?? "#000";
-  const color = toast?.style?.color ?? "#fff";
+  const resolvedStyle =
+    toast?.source === CONFIRMATION_TOAST_SOURCE
+      ? resolveConfirmationToastStyle(theme, toast.style)
+      : toast?.style;
+
+  const backgroundColor =
+    resolvedStyle?.backgroundColor ?? DEFAULT_TOAST_BACKGROUND_COLOR;
+
+  const color = resolvedStyle?.color ?? DEFAULT_TOAST_MESSAGE_COLOR;
 
   const textStyles = {
     color,
-    fontFamily: toast?.style?.fontFamily,
-    fontSize: toast?.style?.fontSize,
-    lineHeight: toast?.style?.lineHeight,
-    letterSpacing: toast?.style?.letterSpacing,
+    fontFamily: resolvedStyle?.fontFamily,
+    fontSize: resolvedStyle?.fontSize,
+    lineHeight: resolvedStyle?.lineHeight,
+    letterSpacing: resolvedStyle?.letterSpacing,
   };
 
   const animatedViewStyles: ViewStyle = {
@@ -64,6 +78,20 @@ export const NotificationToastRenderer = ({ children }) => {
     backgroundColor,
   };
 
+  const flingGesture = useMemo(
+    () =>
+      Gesture.Fling()
+        .direction(Directions.UP)
+        .enabled(!!toast)
+        .runOnJS(true)
+        .onEnd((_event, success) => {
+          if (success) {
+            notificationToastManager.dismiss();
+          }
+        }),
+    [toast]
+  );
+
   useEffect(() => {
     if (toast) {
       setNotificationOpacity(1);
@@ -83,20 +111,24 @@ export const NotificationToastRenderer = ({ children }) => {
   }, [toast]);
 
   return (
-    <View testID="NotificationToastRenderer" style={StyleSheet.absoluteFill}>
+    <View
+      testID="NotificationToastRenderer"
+      style={StyleSheet.absoluteFill}
+      pointerEvents="box-none"
+    >
       {children}
-      <TouchableWithoutFeedback
-        testID="NotificationToastRenderer-touchable"
-        style={styles.notificationView}
-        onPress={() => notificationToastManager.dismiss()}
-      >
-        <Animated.View style={animatedViewStyles}>
+      <GestureDetector gesture={flingGesture}>
+        <Animated.View
+          testID="NotificationToastRenderer-fling"
+          pointerEvents={toast ? "auto" : "none"}
+          style={animatedViewStyles}
+        >
           <View style={{ height: statusHeight, backgroundColor }} />
           <Text testID="NotificationToastRenderer-message" style={textStyles}>
             {toast?.message}
           </Text>
         </Animated.View>
-      </TouchableWithoutFeedback>
+      </GestureDetector>
     </View>
   );
 };

package/App/NotificationToastRenderer/NotificationToastRenderer.tv.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { View, Text, Animated, StyleSheet, ViewStyle } from "react-native";
+import {
+  Directions,
+  FlingGestureHandler,
+  State,
+} from "react-native-gesture-handler";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+import {
+  CONFIRMATION_TOAST_SOURCE,
+  notificationToastManager,
+} from "./NotificationToastManager";
+import { useNotificationToastState } from "./useNotificationToastState";
+import { useNotificationHeight } from "./useNotificationHeight";
+import { resolveConfirmationToastStyle } from "./resolveConfirmationToastStyle";
+
+const DEFAULT_TOAST_BACKGROUND_COLOR = "#000";
+const DEFAULT_TOAST_MESSAGE_COLOR = "#fff";
+
+const styles = StyleSheet.create({
+  notificationView: {
+    flex: 1,
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center",
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+});
+
+type NumberBoolean = 0 | 1;
+
+export const NotificationToastRenderer = ({ children }) => {
+  const { statusHeight, notificationHeight } = useNotificationHeight();
+  const theme = useTheme<BaseThemePropertiesMobile>();
+
+  const toast = useNotificationToastState();
+
+  const [notificationOpacity, setNotificationOpacity] =
+    useState<NumberBoolean>(0);
+
+  const yPosition = useRef(new Animated.Value(0)).current;
+
+  const resolvedStyle =
+    toast?.source === CONFIRMATION_TOAST_SOURCE
+      ? resolveConfirmationToastStyle(theme, toast.style)
+      : toast?.style;
+
+  const backgroundColor =
+    resolvedStyle?.backgroundColor ?? DEFAULT_TOAST_BACKGROUND_COLOR;
+
+  const color = resolvedStyle?.color ?? DEFAULT_TOAST_MESSAGE_COLOR;
+
+  const textStyles = {
+    color,
+    fontFamily: resolvedStyle?.fontFamily,
+    fontSize: resolvedStyle?.fontSize,
+    lineHeight: resolvedStyle?.lineHeight,
+    letterSpacing: resolvedStyle?.letterSpacing,
+  };
+
+  const animatedViewStyles: ViewStyle = {
+    ...styles.notificationView,
+    transform: [
+      {
+        translateY: yPosition.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-notificationHeight, 0],
+        }),
+      },
+    ],
+    opacity: notificationOpacity,
+    height: notificationHeight,
+    width: "100%",
+
+    backgroundColor,
+  };
+
+  const onFlingStateChange = useCallback(({ nativeEvent }) => {
+    // Fling activates then ends; dismiss once the upward fling is recognized.
+    if (nativeEvent.oldState === State.ACTIVE) {
+      notificationToastManager.dismiss();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (toast) {
+      setNotificationOpacity(1);
+
+      Animated.timing(yPosition, {
+        toValue: 1,
+        useNativeDriver: true,
+        duration: 300,
+      }).start();
+    } else {
+      Animated.timing(yPosition, {
+        toValue: 0,
+        useNativeDriver: true,
+        duration: 300,
+      }).start(() => setNotificationOpacity(0));
+    }
+  }, [toast]);
+
+  return (
+    <View
+      testID="NotificationToastRenderer"
+      style={StyleSheet.absoluteFill}
+      pointerEvents="box-none"
+    >
+      {children}
+      <FlingGestureHandler
+        enabled={!!toast}
+        direction={Directions.UP}
+        onHandlerStateChange={onFlingStateChange}
+      >
+        <Animated.View
+          testID="NotificationToastRenderer-fling"
+          pointerEvents={toast ? "auto" : "none"}
+          style={animatedViewStyles}
+        >
+          <View style={{ height: statusHeight, backgroundColor }} />
+          <Text testID="NotificationToastRenderer-message" style={textStyles}>
+            {toast?.message}
+          </Text>
+        </Animated.View>
+      </FlingGestureHandler>
+    </View>
+  );
+};

package/App/NotificationToastRenderer/__tests__/NotificationToastManager.test.ts

@@ -1,6 +1,7 @@
 import {
   notificationToastManager,
   NOTIFICATION_TOAST_EVENTS,
+  DEFAULT_TOAST_TIMEOUT,
 } from "../NotificationToastManager";
 import { postEvent } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
 
@@ -210,4 +211,27 @@ describe("NotificationToastManager", () => {
 
     expect(onShow).not.toHaveBeenCalled();
   });
+
+  it("defaults timeout to DEFAULT_TOAST_TIMEOUT (4000ms) when omitted and auto-hides", () => {
+    const onShow = jest.fn();
+    const onHide = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+    on(NOTIFICATION_TOAST_EVENTS.HIDE, onHide);
+
+    notificationToastManager.showToast({
+      message: "Added to queue",
+    });
+
+    expect(onShow).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: "Added to queue",
+        timeout: DEFAULT_TOAST_TIMEOUT,
+      }),
+      expect.any(Function)
+    );
+
+    jest.advanceTimersByTime(DEFAULT_TOAST_TIMEOUT);
+
+    expect(onHide).toHaveBeenCalledTimes(1);
+  });
 });

package/App/NotificationToastRenderer/__tests__/NotificationToastRenderer.test.tsx

@@ -1,14 +1,68 @@
 import React from "react";
 import { Text } from "react-native";
 import { act, fireEvent, render } from "@testing-library/react-native";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
-import { notificationToastManager } from "../NotificationToastManager";
+import {
+  CONFIRMATION_TOAST_SOURCE,
+  notificationToastManager,
+} from "../NotificationToastManager";
 import { NotificationToastRenderer } from "../NotificationToastRenderer";
 
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 44 }),
 }));
 
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(),
+}));
+
+jest.mock("react-native-gesture-handler", () => {
+  const RN = require("react-native");
+  const ReactActual = require("react");
+  const actual = jest.requireActual("react-native-gesture-handler");
+
+  const GestureDetector = ReactActual.forwardRef(
+    ({ gesture, children }: any, ref: any) => {
+      const onEnd = gesture?.handlers?.onEnd;
+
+      return (
+        <RN.View
+          ref={ref}
+          testID="NotificationToastRenderer-fling-handler"
+          accessibilityState={{ disabled: gesture?.config?.enabled === false }}
+          // drive Gesture.Fling().onEnd via a test-only event
+          onEnd={() => onEnd?.({}, true)}
+          onEndFailed={() => onEnd?.({}, false)}
+        >
+          {children}
+        </RN.View>
+      );
+    }
+  );
+
+  return {
+    __esModule: true,
+    ...actual,
+    GestureDetector,
+  };
+});
+
+const mockedUseTheme = useTheme as jest.MockedFunction<typeof useTheme>;
+
+const confirmationTheme: Partial<BaseThemePropertiesMobile> = {
+  confirmation_toast_style_background_color: "#0188FF",
+  confirmation_toast_style_color: "#EFEFEF",
+  confirmation_toast_style_ios_font_family: "SFProText-Semibold",
+  confirmation_toast_style_android_font_family: "Roboto-Medium",
+  confirmation_toast_style_ios_font_size: 14,
+  confirmation_toast_style_android_font_size: 14,
+  confirmation_toast_style_ios_line_height: 44,
+  confirmation_toast_style_android_line_height: 44,
+  confirmation_toast_style_ios_letter_spacing: -1.4,
+  confirmation_toast_style_android_letter_spacing: -1.4,
+};
+
 describe("NotificationToastRenderer", () => {
   beforeAll(() => {
     jest.spyOn(console, "log").mockImplementation(() => {});
@@ -18,6 +72,12 @@ describe("NotificationToastRenderer", () => {
     (console.log as jest.Mock).mockRestore();
   });
 
+  beforeEach(() => {
+    mockedUseTheme.mockReturnValue(
+      confirmationTheme as BaseThemePropertiesMobile
+    );
+  });
+
   afterEach(() => {
     // drain whatever is left showing/queued so the next test starts clean
     for (let i = 0; i < 10; i++) {
@@ -73,13 +133,101 @@ describe("NotificationToastRenderer", () => {
     ).toEqual(expect.objectContaining({ color: "#123456", fontSize: 20 }));
   });
 
-  it("dismisses the toast when the touchable area is pressed", () => {
+  it("applies Theme confirmation styles when source is confirmation", () => {
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({
+        message: "Added to queue",
+        source: CONFIRMATION_TOAST_SOURCE,
+      });
+    });
+
+    expect(
+      getByTestId("NotificationToastRenderer-message").props.style
+    ).toEqual(
+      expect.objectContaining({
+        color: "#EFEFEF",
+        fontSize: 14,
+        lineHeight: 44,
+        letterSpacing: -1.4,
+      })
+    );
+  });
+
+  it("shallow-merges style overrides onto Theme confirmation defaults", () => {
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({
+        message: "Playlist created",
+        source: CONFIRMATION_TOAST_SOURCE,
+        style: { backgroundColor: "#00FF00", fontSize: 20 },
+      });
+    });
+
+    expect(
+      getByTestId("NotificationToastRenderer-message").props.style
+    ).toEqual(
+      expect.objectContaining({
+        color: "#EFEFEF",
+        fontSize: 20,
+        lineHeight: 44,
+      })
+    );
+  });
+
+  it("does not apply Theme confirmation styles for non-confirmation toasts", () => {
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({
+        message: "You are offline",
+        style: { color: "#abcdef" },
+      });
+    });
+
+    expect(
+      getByTestId("NotificationToastRenderer-message").props.style
+    ).toEqual(
+      expect.objectContaining({
+        color: "#abcdef",
+      })
+    );
+
+    expect(
+      getByTestId("NotificationToastRenderer-message").props.style.fontSize
+    ).toBeUndefined();
+  });
+
+  it("dismisses the toast on a successful upward fling", () => {
     const dismissSpy = jest.spyOn(notificationToastManager, "dismiss");
 
     const { getByTestId } = render(<NotificationToastRenderer />);
 
-    fireEvent.press(getByTestId("NotificationToastRenderer-touchable"));
+    act(() => {
+      notificationToastManager.showToast({ message: "Added to queue" });
+    });
+
+    fireEvent(getByTestId("NotificationToastRenderer-fling-handler"), "end");
 
     expect(dismissSpy).toHaveBeenCalled();
   });
+
+  it("does not dismiss when the fling ends unsuccessfully", () => {
+    const dismissSpy = jest.spyOn(notificationToastManager, "dismiss");
+
+    const { getByTestId } = render(<NotificationToastRenderer />);
+
+    act(() => {
+      notificationToastManager.showToast({ message: "Added to queue" });
+    });
+
+    fireEvent(
+      getByTestId("NotificationToastRenderer-fling-handler"),
+      "endFailed"
+    );
+
+    expect(dismissSpy).not.toHaveBeenCalled();
+  });
 });

package/App/NotificationToastRenderer/__tests__/resolveConfirmationToastStyle.test.ts

@@ -0,0 +1,118 @@
+import { resolveConfirmationToastStyle } from "../resolveConfirmationToastStyle";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  // manifestKeyParser captures currentPlatform at module load from this map
+  platformSelect: jest.fn((platforms) => {
+    if (platforms?.ios === "ios" && platforms?.android === "android") {
+      return "ios";
+    }
+
+    return platforms?.default;
+  }),
+}));
+
+describe("resolveConfirmationToastStyle", () => {
+  const theme = {
+    confirmation_toast_style_background_color: "#0188FF",
+    confirmation_toast_style_color: "#EFEFEF",
+    confirmation_toast_style_ios_font_family: "SFProText-Semibold",
+    confirmation_toast_style_android_font_family: "Roboto-Medium",
+    confirmation_toast_style_ios_font_size: 14,
+    confirmation_toast_style_android_font_size: 16,
+    confirmation_toast_style_ios_line_height: 44,
+    confirmation_toast_style_android_line_height: 40,
+    confirmation_toast_style_ios_letter_spacing: -1.4,
+    confirmation_toast_style_android_letter_spacing: -0.5,
+  };
+
+  it("maps Theme confirmation_toast_style_* keys via getAllSpecificStyles (iOS platform)", () => {
+    expect(resolveConfirmationToastStyle(theme)).toEqual({
+      backgroundColor: "#0188FF",
+      color: "#EFEFEF",
+      fontFamily: "SFProText-Semibold",
+      fontSize: 14,
+      lineHeight: 44,
+      letterSpacing: -1.4,
+    });
+  });
+
+  it("ignores other-platform keys for the current platform", () => {
+    const result = resolveConfirmationToastStyle(theme);
+
+    expect(result.fontFamily).toBe("SFProText-Semibold");
+    expect(result.fontSize).toBe(14);
+
+    expect(result).not.toEqual(
+      expect.objectContaining({
+        fontFamily: "Roboto-Medium",
+        fontSize: 16,
+      })
+    );
+  });
+
+  it("shallow-merges override style on top of Theme defaults", () => {
+    expect(
+      resolveConfirmationToastStyle(theme, {
+        backgroundColor: "#00FF00",
+        fontSize: 20,
+      })
+    ).toEqual({
+      backgroundColor: "#00FF00",
+      color: "#EFEFEF",
+      fontFamily: "SFProText-Semibold",
+      fontSize: 20,
+      lineHeight: 44,
+      letterSpacing: -1.4,
+    });
+  });
+
+  it("returns override fields when Theme is missing", () => {
+    expect(resolveConfirmationToastStyle(undefined, { color: "#fff" })).toEqual(
+      {
+        color: "#fff",
+      }
+    );
+  });
+});
+
+describe("resolveConfirmationToastStyle (android platform)", () => {
+  it("maps android platform Theme keys", () => {
+    jest.resetModules();
+
+    jest.doMock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+      platformSelect: jest.fn((platforms) => {
+        if (platforms?.ios === "ios" && platforms?.android === "android") {
+          return "android";
+        }
+
+        return platforms?.default;
+      }),
+    }));
+
+    const {
+      resolveConfirmationToastStyle: resolveAndroid,
+    } = require("../resolveConfirmationToastStyle");
+
+    const theme = {
+      confirmation_toast_style_background_color: "#0188FF",
+      confirmation_toast_style_color: "#EFEFEF",
+      confirmation_toast_style_ios_font_family: "SFProText-Semibold",
+      confirmation_toast_style_android_font_family: "Roboto-Medium",
+      confirmation_toast_style_ios_font_size: 14,
+      confirmation_toast_style_android_font_size: 16,
+      confirmation_toast_style_ios_line_height: 44,
+      confirmation_toast_style_android_line_height: 40,
+      confirmation_toast_style_ios_letter_spacing: -1.4,
+      confirmation_toast_style_android_letter_spacing: -0.5,
+    };
+
+    expect(resolveAndroid(theme)).toEqual({
+      backgroundColor: "#0188FF",
+      color: "#EFEFEF",
+      fontFamily: "Roboto-Medium",
+      fontSize: 16,
+      lineHeight: 40,
+      letterSpacing: -0.5,
+    });
+  });
+});

package/App/NotificationToastRenderer/__tests__/useNotificationHeight.test.tsx

@@ -1,27 +1,26 @@
 import { renderHook } from "@testing-library/react-native";
 
 let mockInsets = { top: 0 };
+const mockGetNavbarHeight = jest.fn();
 
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => mockInsets,
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
-  ...jest.requireActual("@applicaster/zapp-react-native-utils/reactUtils"),
-  platformSelect: jest.fn(({ ios, android }) => ({ ios, android })),
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/layout", () => ({
+  getNavbarHeight: () => mockGetNavbarHeight(),
 }));
 
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNotificationHeight } from "../useNotificationHeight";
 
 describe("useNotificationHeight", () => {
   beforeEach(() => {
-    (platformSelect as jest.Mock).mockClear();
+    mockGetNavbarHeight.mockClear();
   });
 
-  it("adds the safe area top inset to the platform nav bar height", () => {
+  it("adds the safe area top inset to the nav bar height", () => {
     mockInsets = { top: 44 };
-    (platformSelect as jest.Mock).mockReturnValueOnce(56);
+    mockGetNavbarHeight.mockReturnValueOnce(56);
 
     const { result } = renderHook(() => useNotificationHeight());
 
@@ -33,7 +32,7 @@ describe("useNotificationHeight", () => {
 
   it("falls back to a 0 status height when there is no top inset", () => {
     mockInsets = { top: 0 };
-    (platformSelect as jest.Mock).mockReturnValueOnce(44);
+    mockGetNavbarHeight.mockReturnValueOnce(44);
 
     const { result } = renderHook(() => useNotificationHeight());
 
@@ -43,11 +42,17 @@ describe("useNotificationHeight", () => {
     });
   });
 
-  it("selects the nav bar height per platform via platformSelect", () => {
+  it("uses getNavbarHeight for the nav bar height", () => {
     mockInsets = { top: 20 };
+    mockGetNavbarHeight.mockReturnValueOnce(56);
 
-    renderHook(() => useNotificationHeight());
+    const { result } = renderHook(() => useNotificationHeight());
+
+    expect(mockGetNavbarHeight).toHaveBeenCalled();
 
-    expect(platformSelect).toHaveBeenCalledWith({ ios: 44, android: 56 });
+    expect(result.current).toEqual({
+      statusHeight: 20,
+      notificationHeight: 76,
+    });
   });
 });

package/App/NotificationToastRenderer/index.tsx

@@ -1,5 +1,11 @@
 export { notificationToastManager } from "./NotificationToastManager";
 
+export type { ToastPayload, ToastStyle } from "./NotificationToastManager";
+
+export { CONFIRMATION_TOAST_SOURCE } from "./NotificationToastManager";
+
 export { NotificationToastRenderer } from "./NotificationToastRenderer";
 
 export { useNotificationHeight } from "./useNotificationHeight";
+
+export { resolveConfirmationToastStyle } from "./resolveConfirmationToastStyle";

package/App/NotificationToastRenderer/resolveConfirmationToastStyle.ts

@@ -0,0 +1,33 @@
+import { getAllSpecificStyles } from "@applicaster/zapp-react-native-utils/configurationUtils/manifestKeyParser";
+
+import { ToastStyle } from "./NotificationToastManager";
+
+const CONFIRMATION_TOAST_STYLE_COMPONENT = "confirmation_toast";
+
+/**
+ * Builds confirmation-toast style from Theme defaults via getAllSpecificStyles,
+ * then shallow-merges any caller override on top.
+ *
+ * Expected Theme keys follow:
+ * `confirmation_toast_style_[platform_]<style_name>`
+ * e.g. confirmation_toast_style_background_color,
+ *      confirmation_toast_style_ios_font_family
+ */
+export function resolveConfirmationToastStyle(
+  theme: Partial<BaseThemePropertiesMobile> | null | undefined,
+  overrideStyle?: ToastStyle | null
+): ToastStyle {
+  const outStyles: Record<string, ToastStyle> = {};
+
+  getAllSpecificStyles({
+    configuration: { ...(theme ?? {}) },
+    componentName: CONFIRMATION_TOAST_STYLE_COMPONENT,
+    subComponentName: "",
+    outStyles,
+  });
+
+  return {
+    ...outStyles.default,
+    ...overrideStyle,
+  };
+}

package/App/NotificationToastRenderer/useNotificationHeight.tsx

@@ -1,11 +1,10 @@
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { getNavbarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 
 export const useNotificationHeight = () => {
   const insets = useSafeAreaInsets();
 
-  const navBarHeight = platformSelect({ ios: 44, android: 56 });
+  const navBarHeight = getNavbarHeight();
 
   const statusHeight = insets.top;
   const notificationHeight = statusHeight + navBarHeight;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "16.0.0-alpha.4416921324",
+  "version": "16.0.0-alpha.4909430115",
   "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": "16.0.0-alpha.4416921324",
-    "@applicaster/quick-brick-core-plugins": "16.0.0-alpha.4416921324",
-    "@applicaster/zapp-pipes-v2-client": "16.0.0-alpha.4416921324",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.4416921324",
-    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.4416921324",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-alpha.4416921324",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.4416921324",
+    "@applicaster/applicaster-types": "16.0.0-alpha.4909430115",
+    "@applicaster/quick-brick-core-plugins": "16.0.0-alpha.4909430115",
+    "@applicaster/zapp-pipes-v2-client": "16.0.0-alpha.4909430115",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.4909430115",
+    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.4909430115",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-alpha.4909430115",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.4909430115",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",