@applicaster/quick-brick-core 16.0.0-rc.92 → 16.0.0-rc.93

package/App/ModalProvider/ModalContent.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { View, StyleSheet } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
 
@@ -18,8 +17,6 @@ const styles = StyleSheet.create({
 export function ModalContent(props: Props) {
   const { modalScreenProps } = props;
 
-  const insets = useSafeAreaInsets();
-
   if (modalScreenProps?.screenData?.modalBottomSheetContentProps) {
     const { ModalBottomSheetContent, modalBottomSheetContentProps } =
       modalScreenProps?.screenData || {};
@@ -34,19 +31,9 @@ export function ModalContent(props: Props) {
 
   return (
     // A presented screen fills the window, including the status bar and home
-    // indicator. Inset it so chrome it draws at its own edges — a close button,
-    // for example — stays inside the tappable area.
-    <View
-      style={[
-        styles.container,
-        {
-          paddingTop: insets.top,
-          paddingBottom: insets.bottom,
-          paddingLeft: insets.left,
-          paddingRight: insets.right,
-        },
-      ]}
-    >
+    // indicator. The modal wraps it in its own SafeAreaProvider, so the screen
+    // reads the real insets itself and places its own chrome inside them.
+    <View style={styles.container}>
       <ScreenResolver {...modalScreenProps} />
     </View>
   );

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

@@ -6,10 +6,6 @@ import { ModalContent } from "../ModalContent";
 
 jest.mock("../ModalBottomSheet", () => ({ ModalBottomSheet: () => null }));
 
-jest.mock("react-native-safe-area-context", () => ({
-  useSafeAreaInsets: () => ({ top: 59, bottom: 34, left: 0, right: 0 }),
-}));
-
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver",
   () => ({ ScreenResolver: () => null })
@@ -18,15 +14,14 @@ jest.mock(
 const flatStyle = (tree: any) => StyleSheet.flatten(tree.props.style);
 
 describe("ModalContent", () => {
-  it("insets a presented screen by the safe area so its chrome stays tappable", () => {
+  it("lets a presented screen fill the modal, leaving the safe area to the screen", () => {
     const tree = render(
       <ModalContent modalScreenProps={{ screenId: "river-1" }} />
     ).toJSON();
 
-    expect(flatStyle(tree)).toMatchObject({
-      paddingTop: 59,
-      paddingBottom: 34,
-    });
+    // The modal provides a SafeAreaProvider instead, so the presented screen
+    // reads the real insets itself rather than being padded from the outside.
+    expect(flatStyle(tree)).toEqual({ flex: 1 });
   });
 
   it("leaves a bottom sheet full-bleed", () => {

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

@@ -11,6 +11,9 @@ import { ModalProvider } from "../";
  */
 const mockSeenScreenData: any[] = [];
 
+/** Records the `initialMetrics` each SafeAreaProvider the modal renders got. */
+const mockSafeAreaProviderMetrics: any[] = [];
+
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver",
   () => {
@@ -43,6 +46,14 @@ jest.mock("../ModalBottomSheet", () => ({ ModalBottomSheet: () => null }));
 
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  // A modal renders in its own native window, so it needs its own provider
+  // seeded with the window metrics; without them insets read as zero inside.
+  initialWindowMetrics: { insets: { top: 59, bottom: 34, left: 0, right: 0 } },
+  SafeAreaProvider: ({ children, initialMetrics }: any) => {
+    mockSafeAreaProviderMetrics.push(initialMetrics);
+
+    return children;
+  },
 }));
 
 const river = { id: "river-parent-lock", type: "parent_lock" } as any;
@@ -54,6 +65,7 @@ const seen = () => mockSeenScreenData[mockSeenScreenData.length - 1];
 describe("ModalProvider", () => {
   beforeEach(() => {
     mockSeenScreenData.length = 0;
+    mockSafeAreaProviderMetrics.length = 0;
     modalStore.getState().dismissModal();
   });
 
@@ -72,4 +84,16 @@ describe("ModalProvider", () => {
 
     expect(seen()).toMatchObject({ screen: river });
   });
+
+  it("seeds the presented screen's safe area with the window metrics", () => {
+    const { initialWindowMetrics } = require("react-native-safe-area-context");
+
+    modalStore.getState().openModal({ item: river });
+
+    render(<ModalProvider />);
+
+    expect(mockSafeAreaProviderMetrics).toEqual(
+      expect.arrayContaining([initialWindowMetrics])
+    );
+  });
 });

package/App/ModalProvider/index.tsx

@@ -1,5 +1,10 @@
 import * as React from "react";
 
+import {
+  initialWindowMetrics,
+  SafeAreaProvider,
+} from "react-native-safe-area-context";
+
 import { ModalPresenter } from "./ModalPresenter";
 import { ModalContent } from "./ModalContent";
 import { ModalChildrenWrapper } from "./ModalChildrenWrapper";
@@ -62,9 +67,11 @@ export function ModalProvider() {
             {...modalState?.options}
             statusBarTranslucent
           >
-            <ModalChildrenWrapper>
-              <ModalContent modalScreenProps={modalScreenProps} />
-            </ModalChildrenWrapper>
+            <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+              <ModalChildrenWrapper>
+                <ModalContent modalScreenProps={modalScreenProps} />
+              </ModalChildrenWrapper>
+            </SafeAreaProvider>
           </ModalPresenter>
         </ScreenContextProvider>
       </ScreenDataContext.Provider>

package/package.json

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