stream-chat-react-native-core 10.0.0-rc.1 → 10.0.0-rc.3

package/src/components/Thread/__tests__/Thread.test.tsx

@@ -328,6 +328,8 @@ describe('Thread', () => {
       await waitFor(() => {
         expect(screen.getByTestId('loading-error')).toBeTruthy();
       });
+      // The thread's own copy, not the channel's "Error loading messages for this channel...".
+      expect(screen.getByTestId('loading-error')).toHaveTextContent('Error loading replies...');
     });
 
     it('retries the reply query — and only the reply query — from the indicator', async () => {
@@ -511,10 +513,10 @@ describe('Thread lifecycle', () => {
         generateMessage({ reply_count: 3, user }),
       );
       const readState = (unreadMessageCount: number) => ({
-        [chatClient.userID as string]: {
+        [chatClient.userId as string]: {
           lastReadAt: 1,
           unreadMessageCount,
-          user: { id: chatClient.userID as string },
+          user: { id: chatClient.userId as string },
         },
       });
       return { markRead, parentMessage, readState, testChannel };

package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap

@@ -1889,8 +1889,10 @@ exports[`Thread should match thread snapshot 1`] = `
                         }
                         hoverAnimationInDuration={50}
                         hoverAnimationOutDuration={100}
+                        immediatePressOut={false}
                         longPressAnimationOutDuration={100}
                         longPressDuration={500}
+                        moduleId={-1}
                         onButtonInteractionFinished={[Function]}
                         onButtonLongPress={[Function]}
                         onButtonPress={[Function]}
@@ -1918,7 +1920,7 @@ exports[`Thread should match thread snapshot 1`] = `
                             ],
                           ]
                         }
-                        tapAnimationInDuration={50}
+                        tapAnimationInDuration={130}
                         tapAnimationOutDuration={100}
                         testID="attach-button"
                         testOnly_onPress={[Function]}
@@ -2275,8 +2277,10 @@ exports[`Thread should match thread snapshot 1`] = `
                             }
                             hoverAnimationInDuration={50}
                             hoverAnimationOutDuration={100}
+                            immediatePressOut={false}
                             longPressAnimationOutDuration={100}
                             longPressDuration={500}
+                            moduleId={-1}
                             onButtonInteractionFinished={[Function]}
                             onButtonLongPress={[Function]}
                             onButtonPress={[Function]}
@@ -2304,7 +2308,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                 ],
                               ]
                             }
-                            tapAnimationInDuration={50}
+                            tapAnimationInDuration={130}
                             tapAnimationOutDuration={100}
                             testID="send-button"
                             testOnly_onPress={[Function]}
@@ -2465,8 +2469,10 @@ exports[`Thread should match thread snapshot 1`] = `
             }
             hoverAnimationInDuration={50}
             hoverAnimationOutDuration={100}
+            immediatePressOut={false}
             longPressAnimationOutDuration={100}
             longPressDuration={500}
+            moduleId={-1}
             onButtonInteractionFinished={[Function]}
             onButtonLongPress={[Function]}
             onButtonPress={[Function]}
@@ -2494,7 +2500,7 @@ exports[`Thread should match thread snapshot 1`] = `
                 ],
               ]
             }
-            tapAnimationInDuration={50}
+            tapAnimationInDuration={130}
             tapAnimationOutDuration={100}
             testID="upload-photo-touchable"
             testOnly_onPress={[Function]}
@@ -2620,8 +2626,10 @@ exports[`Thread should match thread snapshot 1`] = `
             }
             hoverAnimationInDuration={50}
             hoverAnimationOutDuration={100}
+            immediatePressOut={false}
             longPressAnimationOutDuration={100}
             longPressDuration={500}
+            moduleId={-1}
             onButtonInteractionFinished={[Function]}
             onButtonLongPress={[Function]}
             onButtonPress={[Function]}
@@ -2649,7 +2657,7 @@ exports[`Thread should match thread snapshot 1`] = `
                 ],
               ]
             }
-            tapAnimationInDuration={50}
+            tapAnimationInDuration={130}
             tapAnimationOutDuration={100}
             testID="take-photo-touchable"
             testOnly_onPress={[Function]}
@@ -2804,8 +2812,10 @@ exports[`Thread should match thread snapshot 1`] = `
             }
             hoverAnimationInDuration={50}
             hoverAnimationOutDuration={100}
+            immediatePressOut={false}
             longPressAnimationOutDuration={100}
             longPressDuration={500}
+            moduleId={-1}
             onButtonInteractionFinished={[Function]}
             onButtonLongPress={[Function]}
             onButtonPress={[Function]}
@@ -2833,7 +2843,7 @@ exports[`Thread should match thread snapshot 1`] = `
                 ],
               ]
             }
-            tapAnimationInDuration={50}
+            tapAnimationInDuration={130}
             tapAnimationOutDuration={100}
             testID="upload-file-touchable"
             testOnly_onPress={[Function]}
@@ -2955,8 +2965,10 @@ exports[`Thread should match thread snapshot 1`] = `
             }
             hoverAnimationInDuration={50}
             hoverAnimationOutDuration={100}
+            immediatePressOut={false}
             longPressAnimationOutDuration={100}
             longPressDuration={500}
+            moduleId={-1}
             onButtonInteractionFinished={[Function]}
             onButtonLongPress={[Function]}
             onButtonPress={[Function]}
@@ -2984,7 +2996,7 @@ exports[`Thread should match thread snapshot 1`] = `
                 ],
               ]
             }
-            tapAnimationInDuration={50}
+            tapAnimationInDuration={130}
             tapAnimationOutDuration={100}
             testID="commands-touchable"
             testOnly_onPress={[Function]}

package/src/components/Thread/components/ThreadFooterComponent.tsx

@@ -14,9 +14,7 @@ import { useStateStore } from '../../../hooks';
 import { primitives } from '../../../theme';
 
 type ThreadFooterComponentPropsWithContext = Pick<ThreadContextValue, 'thread'> & {
-  /**
-   * Boolean to enable/disable parent message press. Defaults to `true`.
-   */
+  /** Whether pressing the parent message is disabled. Defaults to true. */
   parentMessagePreventPress?: boolean;
 };
 
@@ -54,8 +52,8 @@ const ThreadFooterComponentWithContext = (props: ThreadFooterComponentPropsWithC
 
   const styles = useStyles();
 
-  // The parent message is read reactively from the thread instance so the header updates live when
-  // it is edited / reacted to / its reply_count changes.
+  // Read from the thread state so the header updates when the parent message or its reply count
+  // changes.
   const { parentMessage, replyCount = parentMessage?.reply_count } =
     useStateStore(thread?.state, selector) ?? {};
 
@@ -89,9 +87,8 @@ const areEqual = (
   prevProps: ThreadFooterComponentPropsWithContext,
   nextProps: ThreadFooterComponentPropsWithContext,
 ) => {
-  // The parent message + reply count are read reactively from `thread.state` inside the
-  // component (via useStateStore), so this memo only needs to gate parent-driven re-renders on the
-  // remaining props: the prevent-press flag and the thread instance identity.
+  // The parent message and reply count come from `thread.state`, so only the prevent-press flag
+  // and the thread identity gate re-renders.
   const { parentMessagePreventPress: prevParentMessagePreventPress, thread: prevThread } =
     prevProps;
   const { parentMessagePreventPress: nextParentMessagePreventPress, thread: nextThread } =

package/src/components/ThreadList/ThreadListItem.tsx

@@ -50,7 +50,7 @@ const attachmentManagerStateSelector = (state: AttachmentManagerState) => ({
 
 // The newest reply, also when the loaded page of replies is not the newest one.
 const lastReplySelector = (state: MessagePaginatorAggregateState) => ({
-  lastReply: state.lastMessage ?? undefined,
+  lastReply: state.latestMessage ?? undefined,
 });
 
 export const ThreadListItemComponent = () => {
@@ -158,7 +158,7 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
         channel: nextValue.channel,
         deletedAt: nextValue.deletedAt,
         ownUnreadMessageCount:
-          (client.userID && nextValue.read[client.userID]?.unreadMessageCount) || 0,
+          (client.userId && nextValue.read[client.userId]?.unreadMessageCount) || 0,
         parentMessage: nextValue.parentMessage,
       }) as const,
     [client],

package/src/components/ThreadList/ThreadListUnreadBanner.tsx

@@ -11,13 +11,15 @@ import { primitives } from '../../theme';
 const selector = (nextValue: ThreadManagerState) =>
   ({ unseenThreadIds: nextValue.unseenThreadIds }) as const;
 
-// The paginator records a failed reload and clears it on the next successful query.
+// The paginator records a failed query and clears it on the next successful one.
 const lastQueryErrorSelector = (nextValue: { lastQueryError?: Error }) => ({
   lastQueryError: nextValue.lastQueryError,
 });
 
 export const ThreadListUnreadBanner = () => {
+  // we need the two extra states so we can tell the client's states apart
   const [loading, setLoading] = useState(false);
+  const [reloadFailed, setReloadFailed] = useState(false);
   const { client } = useChatContext();
   const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
@@ -48,8 +50,10 @@ export const ThreadListUnreadBanner = () => {
     setLoading(true);
     try {
       await client.threads.reload();
+      setReloadFailed(!!client.threads.paginator.lastQueryError);
     } catch {
       // Only with the paginator's `throwErrors`; the error is already in its state.
+      setReloadFailed(true);
     } finally {
       setLoading(false);
     }
@@ -64,7 +68,7 @@ export const ThreadListUnreadBanner = () => {
     );
   }
 
-  if (lastQueryError) {
+  if (reloadFailed && lastQueryError) {
     return (
       <Pressable onPress={handlePress} style={pressableStyle}>
         <icons.ExclamationCircle stroke={semantics.textSecondary} height={20} width={20} />

package/src/components/ThreadList/ThreadMessagePreviewDeliveryStatus.tsx

@@ -12,9 +12,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 
-/**
- * Module scope so the reference stays stable — an inline selector re-subscribes on every render.
- */
+// Module scope so the selector stays referentially stable.
 const readEventsSelector = ({ readEvents }: ChannelConfig) => ({
   readEventsEnabled: readEvents.enabled,
 });
@@ -31,9 +29,9 @@ export const ThreadMessagePreviewDeliveryStatus = ({
   const { client } = useChatContext();
   const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
-  // `configState` is absent on the partial channel mocks some tests pass in; a real channel always
-  // has one. Resolved configuration, so `read_events` is already ANDed with anything registered
-  // through `client.config.set({ channel: { readEvents } })`.
+  // `configState` is the resolved channel configuration, so `read_events` already accounts for
+  // `client.config.set({ channel: { readEvents } })`. Optional chaining covers partial channel
+  // mocks.
   const configState = channel?.configState;
   const { readEventsEnabled } = useStateStore(configState, readEventsSelector) ?? {};
   const styles = useStyles();

package/src/components/ThreadList/__tests__/ThreadList.test.tsx

@@ -179,4 +179,25 @@ describe('ThreadList loading states', () => {
     await waitFor(() => expect(rows()).toHaveLength(2));
     expect(screen.queryByText("Couldn't load new threads. Tap to retry")).toBeNull();
   });
+
+  it('keeps the new threads count when a different thread query failed', async () => {
+    jest
+      .spyOn(chatClient, 'queryThreadsAndHydrate')
+      .mockResolvedValueOnce({ next: undefined, threads: [makeThread()] });
+    render(
+      <Chat client={chatClient}>
+        <ThreadList isFocused />
+      </Chat>,
+    );
+    await waitFor(() => expect(rows()).toHaveLength(1));
+
+    // A failed next page, for example: the paginator records it the same way as a failed reload.
+    act(() => {
+      chatClient.threads.paginator.state.partialNext({ lastQueryError: new Error('offline') });
+      chatClient.threads.state.partialNext({ unseenThreadIds: ['a'] });
+    });
+
+    await waitFor(() => expect(screen.getByText('1 new thread')).toBeTruthy());
+    expect(screen.queryByText("Couldn't load new threads. Tap to retry")).toBeNull();
+  });
 });

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -59,28 +59,15 @@ const supportedOrientations: ModalProps['supportedOrientations'] = [
 const LANDSCAPE_MAX_HEIGHT_RATIO = 0.9;
 
 export type BottomSheetModalProps = {
-  /**
-   * Function to call when the modal is closed or dismissed.
-   * @returns void
-   */
+  /** Called when the modal is closed or dismissed. */
   onClose: () => void;
-  /**
-   * Whether the modal is visible.
-   */
+  /** Whether the modal is visible. */
   visible: boolean;
-  /**
-   * The height of the modal.
-   */
+  /** Height of the modal, capped to the available window height. Defaults to half the window. */
   height?: number;
-  /**
-   * Whether the sheet should wrap its content up to the provided `height`.
-   */
+  /** Whether the sheet wraps its content, up to `height`. Defaults to false. */
   enableDynamicSizing?: boolean;
-  /**
-   * Whether the sheet content should be lazy loaded or not. Particularly
-   * useful when the content is something heavy and we don't want to disrupt
-   * the animations while this is happening.
-   */
+  /** Renders the content only after the opening animation finishes. Defaults to false. */
   lazy?: boolean;
 };
 
@@ -146,12 +133,9 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
   const wasVisibleRef = useRef(false);
 
   const [renderContent, setRenderContent] = useState(!lazy);
-  // We keep the underlying RN `<Modal>` mounted while it dismisses so we can
-  // listen for its `onDismiss` (iOS) and only then run the consumer's
-  // close-finished callback. Without this, callbacks that present another
-  // native modal (e.g. `UIImagePickerController` for camera capture) can race
-  // the still-dismissing view controller and crash with "Application tried to
-  // present modal view controller on top of itself" on iOS.
+  // Keeps the RN `<Modal>` mounted while it dismisses so the close callback runs only after its
+  // `onDismiss` (iOS). Otherwise a callback that presents another native modal (such as the camera)
+  // races the dismissing view controller and crashes iOS.
   const [isDismissing, setIsDismissing] = useState(false);
   const pendingCloseCallbackRef = useRef<(() => void) | undefined>(undefined);
 
@@ -208,9 +192,8 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
     }) => {
       pendingCloseCallbackRef.current = closeAnimationFinishedCallback;
       if (Platform.OS !== 'ios') {
-        // RN's `Modal.onDismiss` is iOS-only, so synthesize the same signal on
-        // other platforms after a short delay that gives the Dialog time to
-        // detach. Matches the previous Android behavior.
+        // `Modal.onDismiss` is iOS-only; elsewhere, signal it after a short delay that lets the
+        // Dialog detach.
         setTimeout(handleNativeModalDismiss, 100);
       } else {
         if (shouldDismiss) {
@@ -274,8 +257,7 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
     closeInternal({ closeAnimationFinishedCallback: dismissFinishedCallback, shouldDismiss: true });
   });
 
-  // modal opening layout effect - we make sure to only show the content
-  // after the animation has finished if `lazy` has been set to true
+  // With `lazy`, the content is shown only after the opening animation finishes.
   useLayoutEffect(() => {
     const wasVisible = hasCommittedVisibilityRef.current ? wasVisibleRef.current : false;
     hasCommittedVisibilityRef.current = true;
@@ -350,7 +332,7 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
     ],
   );
 
-  // if `visible` gets hard changed, we force a cleanup
+  // Reset the animation state when the modal is hidden.
   useEffect(() => {
     if (visible) return;
 
@@ -520,12 +502,11 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
               }
             }
 
-            // velocity-based snapping, fast upward swipe goes to top snap point
+            // A fast upward swipe goes to the top snap point.
             if (hasMultipleSnapPoints && event.velocityY < -800) {
               nearestIndex = topSnapIndex.value;
             }
-            // From top snap, a gentle downward flick should settle to snap 0
-            // without requiring a large drag distance.
+            // From the top snap, a gentle downward flick settles to snap 0.
             if (hasMultipleSnapPoints && isAtTopSnap && event.velocityY > 120) {
               nearestIndex = 0;
             }
@@ -671,9 +652,9 @@ const useStyles = () => {
         },
         contentContainer: {
           flex: 1,
-          // A RN `Modal` is its own native window, so a consumer's `SafeAreaView` never reaches
-          // this - it insets itself. Spread rather than assigned: a `paddingLeft: 0` longhand
-          // would override a themed `paddingHorizontal` for that side.
+          // A RN `Modal` is its own native window, so a consumer's `SafeAreaView` never reaches it.
+          // Spread rather than assigned: a `paddingLeft: 0` longhand would override a themed
+          // `paddingHorizontal` for that side.
           ...horizontalInsets,
         },
         handle: {

package/src/components/UIComponents/ClippingFadeBottom.tsx

@@ -7,20 +7,13 @@ const CLIPPING_FADE_HEIGHT = 16;
 const CLIPPING_FADE_GRADIENT_ID = 'sdk-clipping-fade-bottom';
 
 export type ClippingFadeBottomProps = {
-  /**
-   * Color the fade ramps toward at the bottom edge. Typically the
-   * background color of the surface beneath the fade so the bottom edge of
-   * scrolling content visually melts into it.
-   */
+  /** Color the fade ramps toward at the bottom edge, usually the background beneath it. */
   backgroundColor: string;
 };
 
 /**
- * Bottom edge fade overlay. Draws a 16px tall SVG linear gradient that
- * ramps from the supplied background's transparent variant at the top to
- * fully opaque at the bottom - visually clipping any content that scrolls
- * past the lower edge of its parent. `pointerEvents='none'` so it doesn't
- * intercept taps/scrolls on the rows underneath.
+ * Bottom edge fade overlay: a 16px tall gradient from transparent to `backgroundColor` that hides
+ * content scrolling past the parent's lower edge. It ignores touches (`pointerEvents='none'`).
  */
 export const ClippingFadeBottom = ({ backgroundColor }: ClippingFadeBottomProps) => (
   <View pointerEvents='none' style={styles.fade}>

package/src/components/UIComponents/EmptyList.tsx

@@ -6,17 +6,11 @@ import { IconProps } from '../../icons/utils/base';
 import { primitives } from '../../theme';
 
 export type EmptyListProps = {
-  /**
-   * Icon component to render. Its size and color are set by `EmptyList`.
-   */
+  /** Icon component to render. Its size and color are set by `EmptyList`. */
   icon: React.ComponentType<IconProps>;
-  /**
-   * Title text shown below the icon.
-   */
+  /** Title text shown below the icon. */
   title: string;
-  /**
-   * Optional supporting text shown below the title.
-   */
+  /** Supporting text shown below the title. */
   subtitle?: string;
 };
 

package/src/components/UIComponents/GenericListLoadingSkeleton.tsx

@@ -9,7 +9,7 @@ import { primitives } from '../../theme';
 
 const ROW_COUNT = 4;
 
-// `memberListSkeleton` and `userListSkeleton` share an identical shape.
+// `memberListSkeleton` and `userListSkeleton` share this shape.
 export type ListLoadingSkeletonTheme = Theme['memberListSkeleton'];
 
 export type GenericListLoadingSkeletonProps = {

package/src/components/UIComponents/ImageBackground.tsx

@@ -3,32 +3,11 @@ import * as React from 'react';
 import { Image, ImageBackgroundProps, ImageProps, StyleSheet, View } from 'react-native';
 
 /**
- * DISCLAIMER: This component has been pretty-much copied from react-native's source code
+ * Drop-in replacement for `Image` that supports nesting views, adapted from React Native's
+ * `ImageBackground`:
  * https://github.com/facebook/react-native/blob/main/Libraries/Image/ImageBackground.js
- * Few modifications have been done such as converting to functional component, removing ref related logic (since its not required).
- * Also support for prop `ImageComponent` has been introduced to allow rendering custom
- * component instead of `Image`.
- *
- *
- * Very simple drop-in replacement for <Image> which supports nesting views.
- *
- * ```ReactNativeWebPlayer
- * import React, { Component } from 'react';
- * import { AppRegistry, View, ImageBackground, Text } from 'react-native';
- *
- * class DisplayAnImageBackground extends Component {
- *   render() {
- *     return (
- *       <ImageBackground
- *         style={{width: 50, height: 50}}
- *         source={{uri: 'https://reactnative.dev/img/opengraph.png'}}
- *       >
- *         <Text>React</Text>
- *       </ImageBackground>
- *     );
- *   }
- * }
  *
+ * It is a function component without ref handling; an optional `ImageComponent` renders the image.
  */
 
 export const ImageBackground: React.ComponentType<
@@ -58,13 +37,8 @@ export const ImageBackground: React.ComponentType<
         style={[
           StyleSheet.absoluteFill,
           {
-            // Temporary Workaround:
-            // Current (imperfect yet) implementation of <Image> overwrites width and height styles
-            // (which is not quite correct), and these styles conflict with explicitly set styles
-            // of <ImageBackground> and with our internal layout model here.
-            // So, we have to proxy/reapply these styles explicitly for actual <Image> component.
-            // This workaround should be removed after implementing proper support of
-            // intrinsic content size of the <Image>.
+            // `Image` overwrites width and height styles, which conflicts with the container's, so
+            // they are re-applied here. Can go once `Image` supports intrinsic content size.
             height: flattenedStyle?.height,
             width: flattenedStyle?.width,
           },

package/src/components/UIComponents/PortalWhileClosingView.tsx

@@ -20,49 +20,25 @@ import {
 import type { ViewRef } from '../../types/react-native-compat';
 
 type PortalWhileClosingViewProps = {
-  /**
-   * Content that should render in place normally and teleport to a closing portal host
-   * while the message overlay is closing.
-   */
+  /** Content that renders in place and teleports to the closing portal host during close. */
   children: ReactNode;
-  /**
-   * Name of the closing `PortalHost` in `MessageOverlayHostLayer`.
-   * This key is also used in the closing layout registry.
-   */
+  /** Name of the closing `PortalHost` in `MessageOverlayHostLayer` and the layout registry key. */
   portalHostName: string;
-  /**
-   * Stable portal instance name used by `react-native-teleport` to move this content
-   * between the in-place tree and the closing host.
-   */
+  /** Stable `react-native-teleport` portal name that moves the content to the closing host. */
   portalName: string;
 };
 
 /**
- * Keeps wrapped UI above the message overlay during close animation by teleporting it to a closing portal host.
+ * Keeps wrapped UI above the message overlay while it closes by teleporting it to a closing portal
+ * host, so the animated message does not pass over fixed UI such as the composer or header.
  *
- * Why this is needed:
+ * Children render in place normally. The layout is measured with `measureInWindow` and registered
+ * under `portalHostName`; only entries with a valid measurement can take a host slot. While the
+ * overlay is `closing`, the children teleport to the matching host and a placeholder keeps their
+ * space in the layout.
  *
- * When the overlay closes, the animated message can visually pass over fixed UI (for example composer/header).
- * This wrapper moves that UI into the overlay host layer for the closing phase, so stacking stays correct.
- *
- * To use it, simply wrap any view that should remain on top while the overlay is closing, and pass a `portalHostName`
- * and a `portalName`. Once the wrapped view has a valid measured layout, it can participate in the closing host layer.
- *
- * Behavior:
- * - renders children in place during normal operation
- * - registers absolute layout for `portalHostName` once a valid measurement exists
- * - while overlay state is `closing`, teleports children to the matching closing host
- * - renders a local placeholder while closing to preserve original layout space
- *
- * Stack presence only starts after first valid measurement. That prevents unmeasured entries from taking over a host
- * slot and rendering with incomplete geometry.
- *
- * Note: As the `PortalWhileClosingView` relies heavily on being able to calculate the layout and positioning
- * properties of its children automatically, make sure that you do not wrap absolutely positioned views with
- * it as positioning parameters specifically will not be calculated correctly as the absolute position of
- * the immediate child will be towards its immediate parent (which is our `Portal` view). Instead, wrap its
- * children directly (the non-absolutely positioned ones). Since we use `measureInWindow` to get a hold of
- * the initial measurements, we'll always have the correct position of the relevant content.
+ * Wrap non-absolutely positioned views only: an absolutely positioned child is positioned against
+ * the `Portal` view, so its measured position would be wrong.
  *
  * @param props.children content to render and teleport while closing
  * @param props.portalHostName closing host slot name used for layout registration and portal target
@@ -143,7 +119,7 @@ const useSyncingApi = (
         setClosingPortalLayout(portalHostName, registrationId, rect);
       })
       .catch(() => {
-        // the container isn't measurable yet; the next layout/effect pass will retry
+        // Not measurable yet; the next layout or effect pass retries.
       });
   });
 

package/src/components/UIComponents/SafeAreaViewWrapper.tsx

@@ -7,15 +7,12 @@ import {
 } from 'react-native-safe-area-context';
 
 /**
- * `react-native-safe-area-context`'s `SafeAreaView`, keeping React Native's own as a defensive
- * runtime fallback.
+ * `react-native-safe-area-context`'s `SafeAreaView`, falling back to React Native's own when it is
+ * missing at runtime.
  *
- * The type is pinned to the safe-area-context component deliberately. A `A ?? B` expression types as
- * the *union* of both components, which makes the resulting `style` prop their intersection - and
- * from React Native 0.87 that intersection is unsatisfiable, because RN's own `SafeAreaView` and
- * safe-area-context's now describe styles differently. That in turn breaks
- * `Animated.createAnimatedComponent()` wrapping (see `ImageGalleryFooter`). The fallback is only
- * ever hit when safe-area-context is missing at runtime, so pinning the type costs nothing.
+ * The type is pinned to the safe-area-context component: typing `A ?? B` as a union makes the
+ * `style` prop an unsatisfiable intersection on recent React Native versions, which breaks
+ * `Animated.createAnimatedComponent()` wrapping (see `ImageGalleryFooter`).
  */
 export const SafeAreaView = (SafeAreaViewOriginal ??
   RNFSafeAreaView) as typeof SafeAreaViewOriginal;

package/src/components/UIComponents/SvgAwareImage.tsx

@@ -13,11 +13,8 @@ const getSourceUri = (source: ImageProps['source']): string | undefined => {
 };
 
 /**
- * Default `ImageComponent` for the SDK. Behaves exactly like RN's `Image` for
- * raster sources, but transparently renders SVG URIs (`.svg`, `image/svg+xml`
- * data URIs) via `SvgUri` from `react-native-svg`. Integrators who override
- * `ImageComponent` with a custom image library (e.g. FastImage) are
- * responsible for SVG handling in their override.
+ * Default `ImageComponent`: RN's `Image` for raster sources, `SvgUri` from `react-native-svg` for
+ * SVG URIs (`.svg` or `image/svg+xml` data URIs). A custom `ImageComponent` must handle SVG itself.
  */
 export const SvgAwareImage = (props: ImageProps) => {
   const uri = getSourceUri(props.source);