@applicaster/quick-brick-core 16.0.0-alpha.9225550512 → 16.0.0-alpha.9506982263

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

@@ -0,0 +1,88 @@
+import React from "react";
+import { View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { State } from "react-native-gesture-handler";
+import { DraggableBottomSheet } from "../index";
+
+// Render the gesture handlers as passthrough Views so we can mount the sheet
+// and drive its release handler directly. State stays real (we need ACTIVE).
+jest.mock("react-native-gesture-handler", () => {
+  const RN = require("react-native");
+  const ReactActual = require("react");
+  const actual = jest.requireActual("react-native-gesture-handler");
+
+  const Passthrough = ReactActual.forwardRef(({ children }: any, _ref: any) => (
+    <RN.View>{children}</RN.View>
+  ));
+
+  return {
+    __esModule: true,
+    ...actual,
+    PanGestureHandler: Passthrough,
+    TapGestureHandler: Passthrough,
+  };
+});
+
+// height 800, sheetHeight 400, no header:
+//   SnapPoints.top = 800 - 400 = 400 (lastSnap after mount)
+//   SnapPoints.threshold = max(800 - 400 / 2, 100) = 600
+// Release dismisses when lastSnap + translationY + 0.05 * velocityY > 600,
+// i.e. once the drag+toss pushes past 200px.
+const mountSheet = () => {
+  const dismiss = jest.fn();
+  const ref = React.createRef<DraggableBottomSheet>();
+
+  render(
+    <DraggableBottomSheet
+      ref={ref}
+      header={() => null}
+      dismiss={dismiss}
+      visible={true}
+      sheetHeight={400}
+      width={320}
+      height={800}
+      hasHeader={false}
+      maxWidth={320}
+    >
+      <View testID="child" />
+    </DraggableBottomSheet>
+  );
+
+  return { instance: ref.current as DraggableBottomSheet, dismiss };
+};
+
+const release = (
+  instance: DraggableBottomSheet,
+  translationY: number,
+  velocityY = 0
+) =>
+  instance._onHandlerStateChange({
+    nativeEvent: { oldState: State.ACTIVE, translationY, velocityY },
+  });
+
+describe("DraggableBottomSheet release", () => {
+  // Mounting an open sheet schedules a deferred animateIn via setTimeout. Keep
+  // it on fake timers so it never fires into a torn-down Jest environment.
+  beforeEach(() => jest.useFakeTimers());
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it("dismisses when the release lands past the threshold", () => {
+    const { instance, dismiss } = mountSheet();
+
+    release(instance, 300);
+
+    expect(dismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it("springs back (does not dismiss) when the release is below the threshold", () => {
+    const { instance, dismiss } = mountSheet();
+
+    release(instance, 50);
+
+    expect(dismiss).not.toHaveBeenCalled();
+  });
+});

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

@@ -1,15 +1,24 @@
-import React, { Component, ReactChild, ReactElement } from "react";
+import React, { Component, ReactElement } from "react";
 import { Animated, StyleSheet, View, Easing } from "react-native";
 import {
   PanGestureHandler,
-  NativeViewGestureHandler,
   State,
   TapGestureHandler,
 } from "react-native-gesture-handler";
 
 import { SnapPoints } from "./SnapPoints";
-
-const USE_NATIVE_DRIVER = true;
+import {
+  BottomSheetContext,
+  BottomSheetContextValue,
+} from "@applicaster/zapp-react-native-utils/bottomSheet";
+
+// Must stay false: the sheet drives _dragY from old-API PanGestureHandler
+// onGestureEvent props via RN Animated.event. This RNGH version cannot attach
+// a native (useNativeDriver: true) Animated.event to those handlers — it leaks
+// the AnimatedEvent object into the JS event path and throws "Expected
+// onGestureHandlerEvent listener to be a function". Native-threaded dragging
+// needs the full reanimated + Gesture-API migration (tracked separately).
+const USE_NATIVE_DRIVER = false;
 const HEADER_HEIGHT = 44;
 
 const ANIMATION_DURATION = 400;
@@ -24,7 +33,7 @@ const styles = StyleSheet.create({
 });
 
 type Props = {
-  children: ReactChild;
+  children: ReactElement;
   header: (boolean) => ReactElement;
   dismiss: () => void;
   visible: boolean;
@@ -49,35 +58,24 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
   _isMounted = false;
   _animatedIn = false;
   _animating = false;
-  _lastScrollYValue: number;
-  _lastScrollY: Animated.Value;
   _dragY: Animated.Value;
-  _reverseLastScrollY: Animated.AnimatedInterpolation<number>;
   _translateYOffset: Animated.Value;
   _translateY: Animated.AnimatedInterpolation<number>;
   _snapPoints: SnapPoints;
   _prevContentHeight = 0;
+  _bottomSheetContextValue: BottomSheetContextValue;
 
   _callWhenMounted: () => void | null;
 
-  _onRegisterLastScroll: (...args: any[]) => void;
+  // One shared JS Animated.event feeds _dragY for every drag handler (top
+  // handle, header drag-area, body). Safe because useNativeDriver is false — the
+  // event is a plain JS listener that setValue's _dragY for whichever handler
+  // is active, and only one gesture is ever active at a time.
   _onGestureEvent: (...args: any[]) => void;
 
   constructor(props) {
     super(props);
 
-    this._lastScrollYValue = 0;
-    this._lastScrollY = new Animated.Value(0);
-
-    this._onRegisterLastScroll = Animated.event(
-      [{ nativeEvent: { contentOffset: { y: this._lastScrollY } } }],
-      { useNativeDriver: USE_NATIVE_DRIVER }
-    );
-
-    this._lastScrollY.addListener(({ value }) => {
-      this._lastScrollYValue = value;
-    });
-
     this._dragY = new Animated.Value(0);
 
     this._onGestureEvent = Animated.event(
@@ -85,10 +83,11 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
       { useNativeDriver: USE_NATIVE_DRIVER }
     );
 
-    this._reverseLastScrollY = Animated.multiply(
-      new Animated.Value(-1),
-      this._lastScrollY
-    );
+    this._bottomSheetContextValue = {
+      masterDrawerRef: this.masterdrawer,
+      onDragGestureEvent: this._onGestureEvent,
+      onDragStateChange: this._onHeaderHandlerStateChange,
+    };
 
     const initialSnapPoints = new SnapPoints(props.height, props.sheetHeight);
 
@@ -181,7 +180,7 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
 
     this._translateY = Animated.add(
       this._translateYOffset,
-      Animated.add(this._dragY, this._reverseLastScrollY)
+      this._dragY
     ).interpolate({
       inputRange: [this._snapPoints.top, this._snapPoints.bottom],
       outputRange: [this._snapPoints.top, this._snapPoints.bottom],
@@ -226,10 +225,6 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
       return;
     }
 
-    if (nativeEvent.oldState === State.BEGAN) {
-      this._lastScrollY.setValue(0);
-    }
-
     this._onHandlerStateChange({ nativeEvent });
   };
 
@@ -240,8 +235,7 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
 
     if (nativeEvent.oldState === State.ACTIVE) {
       const { velocityY } = nativeEvent;
-      let { translationY } = nativeEvent;
-      translationY -= this._lastScrollYValue;
+      const { translationY } = nativeEvent;
       const dragToss = 0.05;
 
       const endOffsetY =
@@ -300,7 +294,7 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
           >
             <PanGestureHandler
               ref={this.drawerheader}
-              simultaneousHandlers={[this.scroll, this.masterdrawer]}
+              simultaneousHandlers={[this.masterdrawer]}
               shouldCancelWhenOutside={false}
               onGestureEvent={this._onGestureEvent}
               onHandlerStateChange={this._onHeaderHandlerStateChange}
@@ -309,31 +303,11 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
                 {this.props?.header(this.state.dragging)}
               </Animated.View>
             </PanGestureHandler>
-            <PanGestureHandler
-              ref={this.drawer}
-              simultaneousHandlers={[this.scroll, this.masterdrawer]}
-              shouldCancelWhenOutside={false}
-              onGestureEvent={this._onGestureEvent}
-              onHandlerStateChange={this._onHandlerStateChange}
-            >
+            <BottomSheetContext.Provider value={this._bottomSheetContextValue}>
               <Animated.View style={styles.container}>
-                <NativeViewGestureHandler
-                  ref={this.scroll}
-                  waitFor={this.masterdrawer}
-                  simultaneousHandlers={this.drawer}
-                >
-                  <Animated.ScrollView
-                    bounces={false}
-                    onScrollBeginDrag={this._onRegisterLastScroll}
-                    scrollEventThrottle={1}
-                    scrollEnabled={false}
-                    showsVerticalScrollIndicator={false}
-                  >
-                    {this.props.children}
-                  </Animated.ScrollView>
-                </NativeViewGestureHandler>
+                {this.props.children}
               </Animated.View>
-            </PanGestureHandler>
+            </BottomSheetContext.Provider>
           </Animated.View>
         </View>
       </TapGestureHandler>

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