stream-chat-react-native-core 9.10.0 → 9.10.1-beta.1

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -8,10 +8,12 @@ import { PortalProvider } from 'react-native-teleport';
 
 import { MessageOverlayHostLayer } from './MessageOverlayHostLayer';
 import { OverlayContext, OverlayProviderProps } from './OverlayContext';
+import { OverlayHostLayerContext } from './OverlayHostLayerContext';
 
 import { OverlayA11yShield } from '../../components/Accessibility/OverlayA11yShield';
 import { ImageGallery } from '../../components/ImageGallery/ImageGallery';
 import { useStreami18n } from '../../hooks/useStreami18n';
+import { createOverlayHostLayerId } from '../../state-store';
 
 import { AccessibilityProvider } from '../accessibilityContext/AccessibilityContext';
 import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext';
@@ -55,6 +57,7 @@ export const OverlayProvider = (props: PropsWithChildren<OverlayProviderProps>)
   } = props;
 
   const [overlay, setOverlay] = useState(value?.overlay || 'none');
+  const [overlayHostLayerId] = useState(createOverlayHostLayerId);
 
   const overlayOpacity = useSharedValue(0);
 
@@ -110,13 +113,15 @@ export const OverlayProvider = (props: PropsWithChildren<OverlayProviderProps>)
             <ImageGalleryProvider value={imageGalleryProviderProps}>
               <ThemeProvider style={overlayContext.style}>
                 <PortalProvider>
-                  {accessibility?.enabled ? (
-                    <OverlayA11yShield>{children}</OverlayA11yShield>
-                  ) : (
-                    children
-                  )}
-                  {overlay === 'gallery' && <ImageGallery overlayOpacity={overlayOpacity} />}
-                  <MessageOverlayHostLayer />
+                  <OverlayHostLayerContext.Provider value={overlayHostLayerId}>
+                    {accessibility?.enabled ? (
+                      <OverlayA11yShield>{children}</OverlayA11yShield>
+                    ) : (
+                      children
+                    )}
+                    {overlay === 'gallery' && <ImageGallery overlayOpacity={overlayOpacity} />}
+                    <MessageOverlayHostLayer hostLayerId={overlayHostLayerId} />
+                  </OverlayHostLayerContext.Provider>
                 </PortalProvider>
               </ThemeProvider>
             </ImageGalleryProvider>

package/src/contexts/overlayContext/__tests__/ClosingPortalHostsLayer.test.tsx

@@ -115,4 +115,31 @@ describe('ClosingPortalHostsLayer', () => {
     expect(screen.getAllByTestId('closing-portal-host-slot-overlay-header')).toHaveLength(1);
     expect(screen.getAllByTestId('closing-portal-host-slot-overlay-composer')).toHaveLength(1);
   });
+
+  it('parks its hosts under names unique to its host layer while that layer is not the top one', () => {
+    const renderLayer = (isTopHostLayer: boolean) => (
+      <ClosingPortalHostsLayer
+        closeCoverOpacity={{ value: 0 } as SharedValue<number>}
+        hostLayerId='root-layer'
+        isTopHostLayer={isTopHostLayer}
+      />
+    );
+    const getHostsNamed = (name: string) =>
+      screen.UNSAFE_root.findAll(
+        (node) => typeof node.type === 'string' && node.props.name === name,
+      );
+    const { rerender } = render(renderLayer(false));
+
+    act(() => {
+      setClosingPortalLayout('overlay-composer', 'composer-entry', FIRST_RECT);
+    });
+
+    expect(getHostsNamed('overlay-composer')).toHaveLength(0);
+    expect(getHostsNamed('overlay-composer:root-layer')).toHaveLength(1);
+
+    rerender(renderLayer(true));
+
+    expect(getHostsNamed('overlay-composer')).toHaveLength(1);
+    expect(getHostsNamed('overlay-composer:root-layer')).toHaveLength(0);
+  });
 });

package/src/contexts/overlayContext/__tests__/MessageOverlayHostLayer.test.tsx

@@ -159,7 +159,7 @@ describe('MessageOverlayHostLayer', () => {
     const CustomBackground = () => <Text testID='custom-background'>Background</Text>;
     render(
       <WithComponents overrides={{ MessageOverlayBackground: CustomBackground }}>
-        <MessageOverlayHostLayer />
+        <MessageOverlayHostLayer hostLayerId='layer' />
       </WithComponents>,
     );
 
@@ -197,7 +197,7 @@ describe('MessageOverlayHostLayer', () => {
 
     render(
       <WithComponents overrides={{ MessageOverlayBackground: NoopBackground }}>
-        <MessageOverlayHostLayer />
+        <MessageOverlayHostLayer hostLayerId='layer' />
       </WithComponents>,
     );
 
@@ -239,7 +239,7 @@ describe('MessageOverlayHostLayer', () => {
   it('positions and translates the top, message, and bottom hosts using the registered rects', () => {
     const renderTree = () => (
       <WithComponents overrides={{ MessageOverlayBackground: NoopBackground }}>
-        <MessageOverlayHostLayer />
+        <MessageOverlayHostLayer hostLayerId='layer' />
       </WithComponents>
     );
     const { rerender } = render(renderTree());
@@ -289,7 +289,7 @@ describe('MessageOverlayHostLayer', () => {
   it('keeps the hosts mounted but resets their geometry after finalizeCloseOverlay', () => {
     const renderTree = () => (
       <WithComponents overrides={{ MessageOverlayBackground: NoopBackground }}>
-        <MessageOverlayHostLayer />
+        <MessageOverlayHostLayer hostLayerId='layer' />
       </WithComponents>
     );
     const { rerender } = render(renderTree());
@@ -341,7 +341,7 @@ describe('MessageOverlayHostLayer', () => {
 
     const renderTree = () => (
       <WithComponents overrides={{ MessageOverlayBackground: NoopBackground }}>
-        <MessageOverlayHostLayer />
+        <MessageOverlayHostLayer hostLayerId='layer' />
       </WithComponents>
     );
     const { rerender } = render(renderTree());
@@ -396,7 +396,7 @@ describe('MessageOverlayHostLayer', () => {
           MessageOverlayBackground: NoopBackground,
         }}
       >
-        <MessageOverlayHostLayer />
+        <MessageOverlayHostLayer hostLayerId='layer' />
       </WithComponents>
     );
     const { rerender } = render(renderTree());
@@ -433,4 +433,82 @@ describe('MessageOverlayHostLayer', () => {
       width: BOTTOM_RECT.w,
     });
   });
+
+  it('lets the most recently mounted host layer own the overlay and hands it back once that layer unmounts', () => {
+    const renderTree = (withNestedLayer: boolean) => (
+      <WithComponents overrides={{ MessageOverlayBackground: NoopBackground }}>
+        <MessageOverlayHostLayer hostLayerId='root-layer' />
+        {withNestedLayer ? <MessageOverlayHostLayer hostLayerId='nested-layer' /> : null}
+      </WithComponents>
+    );
+    const getHostsNamed = (name: string) =>
+      screen.UNSAFE_root.findAll(
+        (node) => typeof node.type === 'string' && node.props.name === name,
+      );
+    const { rerender } = render(renderTree(true));
+
+    // The nested layer owns the shared host names, the root layer parks its own.
+    expect(getHostsNamed('bottom-item')).toHaveLength(1);
+    expect(getHostsNamed('bottom-item:root-layer')).toHaveLength(1);
+
+    act(() => {
+      setOverlayTopH(TOP_RECT);
+      setOverlayMessageH(MESSAGE_RECT);
+      setOverlayBottomH(BOTTOM_RECT);
+      openOverlay('message-1');
+    });
+
+    rerender(renderTree(true));
+
+    expect(screen.getAllByTestId('message-overlay-backdrop')).toHaveLength(1);
+    const [rootBottomSlot, nestedBottomSlot] = screen.getAllByTestId('message-overlay-bottom');
+    expect(StyleSheet.flatten(nestedBottomSlot.props.style)).toMatchObject({
+      height: BOTTOM_RECT.h,
+      width: BOTTOM_RECT.w,
+    });
+    expect(StyleSheet.flatten(rootBottomSlot.props.style)).toMatchObject({ height: 0 });
+
+    act(() => {
+      finalizeCloseOverlay();
+    });
+
+    rerender(renderTree(false));
+
+    expect(getHostsNamed('bottom-item')).toHaveLength(1);
+    expect(getHostsNamed('bottom-item:root-layer')).toHaveLength(0);
+
+    act(() => {
+      setOverlayTopH(TOP_RECT);
+      setOverlayMessageH(MESSAGE_RECT);
+      setOverlayBottomH(BOTTOM_RECT);
+      openOverlay('message-2');
+    });
+
+    rerender(renderTree(false));
+
+    expect(screen.getAllByTestId('message-overlay-backdrop')).toHaveLength(1);
+    expect(
+      StyleSheet.flatten(screen.getByTestId('message-overlay-bottom').props.style),
+    ).toMatchObject({
+      height: BOTTOM_RECT.h,
+      width: BOTTOM_RECT.w,
+    });
+  });
+
+  it('renders a MessageActions override only in the top host layer', () => {
+    const renderTree = () => (
+      <WithComponents
+        overrides={{
+          MessageActions: CustomMessageActions,
+          MessageOverlayBackground: NoopBackground,
+        }}
+      >
+        <MessageOverlayHostLayer hostLayerId='root-layer' />
+        <MessageOverlayHostLayer hostLayerId='nested-layer' />
+      </WithComponents>
+    );
+    render(renderTree());
+
+    expect(screen.getAllByTestId('custom-message-actions')).toHaveLength(1);
+  });
 });

package/src/state-store/__tests__/message-overlay-store.test.tsx

@@ -9,10 +9,15 @@ import {
   finalizeCloseOverlay,
   openOverlay,
   overlayStore,
+  registerOverlayHostLayer,
+  registerOverlaySharedValueController,
   scheduleActionOnClose,
   setClosingPortalLayout,
+  setOverlayBottomH,
+  setOverlayMessageH,
   useClosingPortalHostBlacklist,
   useClosingPortalHostBlacklistState,
+  useIsTopOverlayHostLayer,
   useShouldTeleportToClosingPortal,
 } from '../message-overlay-store';
 
@@ -308,3 +313,95 @@ describe('message overlay store portal hooks', () => {
     allowed.unmount();
   });
 });
+
+describe('message overlay host layer stack', () => {
+  const createController = () => ({
+    incrementCloseCorrectionY: jest.fn(),
+    reset: jest.fn(),
+    resetCloseCorrectionY: jest.fn(),
+    setBottomH: jest.fn(),
+    setMessageH: jest.fn(),
+    setTopH: jest.fn(),
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('routes the overlay geometry to the most recently registered controller and hands it back once that one unregisters', () => {
+    const rootController = createController();
+    const nestedController = createController();
+    const unregisterRoot = registerOverlaySharedValueController(rootController);
+    const unregisterNested = registerOverlaySharedValueController(nestedController);
+
+    setOverlayMessageH(BASE_RECT);
+
+    expect(nestedController.setMessageH).toHaveBeenCalledWith(BASE_RECT);
+    expect(rootController.setMessageH).not.toHaveBeenCalled();
+
+    unregisterNested();
+    setOverlayMessageH(BASE_RECT);
+
+    expect(rootController.setMessageH).toHaveBeenCalledWith(BASE_RECT);
+    expect(nestedController.setMessageH).toHaveBeenCalledTimes(1);
+
+    unregisterRoot();
+  });
+
+  it('keeps routing to the top controller when a controller below it unregisters', () => {
+    const rootController = createController();
+    const nestedController = createController();
+    const unregisterRoot = registerOverlaySharedValueController(rootController);
+    const unregisterNested = registerOverlaySharedValueController(nestedController);
+
+    unregisterRoot();
+    setOverlayBottomH(BASE_RECT);
+
+    expect(nestedController.setBottomH).toHaveBeenCalledWith(BASE_RECT);
+    expect(rootController.setBottomH).not.toHaveBeenCalled();
+
+    unregisterNested();
+  });
+
+  it('reports only the most recently registered host layer as the top one', () => {
+    const root = renderHook(() => useIsTopOverlayHostLayer('root-layer'));
+    const nested = renderHook(() => useIsTopOverlayHostLayer('nested-layer'));
+    const withoutLayer = renderHook(() => useIsTopOverlayHostLayer(undefined));
+
+    expect(root.result.current).toBe(true);
+    expect(nested.result.current).toBe(true);
+
+    let unregisterRoot = () => {};
+    let unregisterNested = () => {};
+
+    act(() => {
+      unregisterRoot = registerOverlayHostLayer('root-layer');
+    });
+
+    expect(root.result.current).toBe(true);
+    expect(nested.result.current).toBe(false);
+
+    act(() => {
+      unregisterNested = registerOverlayHostLayer('nested-layer');
+    });
+
+    expect(root.result.current).toBe(false);
+    expect(nested.result.current).toBe(true);
+    expect(withoutLayer.result.current).toBe(true);
+
+    act(() => {
+      unregisterNested();
+    });
+
+    expect(root.result.current).toBe(true);
+    expect(nested.result.current).toBe(false);
+
+    act(() => {
+      unregisterRoot();
+    });
+
+    root.unmount();
+    nested.unmount();
+    withoutLayer.unmount();
+  });
+});

package/src/state-store/message-overlay-store.ts

@@ -51,37 +51,43 @@ type OverlaySharedValueController = {
   setTopH: (rect: Rect) => void;
 };
 
-let sharedValueController: OverlaySharedValueController | undefined;
+// Every mounted `MessageOverlayHostLayer` registers its controller and the most recently registered
+// one drives the overlay. Unregistering hands control back to the previous controller, so nested
+// `OverlayProvider`s (one at the root and one inside a native modal, for example) can come and go.
+let sharedValueControllerStack: OverlaySharedValueController[] = [];
+
+const getSharedValueController = () =>
+  sharedValueControllerStack[sharedValueControllerStack.length - 1];
 
 export const registerOverlaySharedValueController = (controller: OverlaySharedValueController) => {
-  sharedValueController = controller;
+  sharedValueControllerStack = [...sharedValueControllerStack, controller];
   return () => {
-    if (sharedValueController === controller) {
-      sharedValueController = undefined;
-    }
+    sharedValueControllerStack = sharedValueControllerStack.filter(
+      (registeredController) => registeredController !== controller,
+    );
   };
 };
 
 export const setOverlayMessageH = (messageH: Rect) => {
-  sharedValueController?.setMessageH(messageH);
+  getSharedValueController()?.setMessageH(messageH);
 };
 
 export const setOverlayTopH = (topH: Rect) => {
-  sharedValueController?.setTopH(topH);
+  getSharedValueController()?.setTopH(topH);
 };
 
 export const setOverlayBottomH = (bottomH: Rect) => {
-  sharedValueController?.setBottomH(bottomH);
+  getSharedValueController()?.setBottomH(bottomH);
 };
 
 export const bumpOverlayLayoutRevision = (closeCorrectionDeltaY = 0) => {
-  sharedValueController?.incrementCloseCorrectionY(closeCorrectionDeltaY);
+  getSharedValueController()?.incrementCloseCorrectionY(closeCorrectionDeltaY);
 };
 
 export const openOverlay = (params: OpenOverlayParams | string) => {
   const overlayPayload = typeof params === 'string' ? { id: params, messageId: undefined } : params;
 
-  sharedValueController?.resetCloseCorrectionY();
+  getSharedValueController()?.resetCloseCorrectionY();
   overlayStore.partialNext({
     closing: false,
     closingPortalHostBlacklist: getCurrentClosingPortalHostBlacklist(),
@@ -122,7 +128,7 @@ export const finalizeCloseOverlay = () => {
     ...DefaultState,
     closingPortalHostBlacklist: getCurrentClosingPortalHostBlacklist(),
   });
-  sharedValueController?.reset();
+  getSharedValueController()?.reset();
 };
 
 export const overlayStore = new StateStore<OverlayState>(DefaultState);
@@ -133,6 +139,59 @@ const closingPortalLayoutsStore = new StateStore<ClosingPortalLayoutsState>(
 export const createClosingPortalLayoutRegistrationId = () =>
   `closing-portal-layout-${closingPortalLayoutRegistrationCounter++}`;
 
+type OverlayHostLayersState = {
+  hostLayerIds: string[];
+};
+
+let overlayHostLayerRegistrationCounter = 0;
+
+const overlayHostLayersStore = new StateStore<OverlayHostLayersState>({ hostLayerIds: [] });
+
+export const createOverlayHostLayerId = () =>
+  `overlay-host-layer-${overlayHostLayerRegistrationCounter++}`;
+
+/**
+ * Registers a `MessageOverlayHostLayer` (one per `OverlayProvider`) using stack semantics.
+ *
+ * Only the most recently registered layer drives the overlay and owns the shared portal host names.
+ * Portal hosts are looked up by name in a single native registry, so two layers using the same
+ * names would take them over from each other. The other layers park their hosts under names unique
+ * to them, and when the top layer unregisters the previous one takes the shared names back.
+ */
+export const registerOverlayHostLayer = (id: string) => {
+  overlayHostLayersStore.partialNext({
+    hostLayerIds: [...overlayHostLayersStore.getLatestValue().hostLayerIds, id],
+  });
+
+  return () => {
+    overlayHostLayersStore.partialNext({
+      hostLayerIds: overlayHostLayersStore
+        .getLatestValue()
+        .hostLayerIds.filter((hostLayerId) => hostLayerId !== id),
+    });
+  };
+};
+
+const topOverlayHostLayer = { isTop: true };
+const notTopOverlayHostLayer = { isTop: false };
+
+/**
+ * Whether the host layer with the given id is the one that currently owns the overlay. A missing
+ * id (used outside of an `OverlayProvider`) or an empty stack counts as the top, which keeps the
+ * single provider setup identical to before the stack existed.
+ */
+export const useIsTopOverlayHostLayer = (id: string | undefined) => {
+  const isTopOverlayHostLayerSelector = useCallback(
+    ({ hostLayerIds }: OverlayHostLayersState) =>
+      !id || !hostLayerIds.length || hostLayerIds[hostLayerIds.length - 1] === id
+        ? topOverlayHostLayer
+        : notTopOverlayHostLayer,
+    [id],
+  );
+
+  return useStateStore(overlayHostLayersStore, isTopOverlayHostLayerSelector).isTop;
+};
+
 const getCurrentClosingPortalHostBlacklist = () =>
   closingPortalHostBlacklistStack[closingPortalHostBlacklistStack.length - 1]?.hostNames ?? [];
 

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.10.0"
+  "version": "9.10.1-beta.1"
 }