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

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/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/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}
         />