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

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 = () => {

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/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);

package/src/components/UIComponents/__tests__/SwipableWrapper.test.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import { I18nManager, Text, View } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { act, render } from '@testing-library/react-native';
 
-import { SwipeRegistryProvider } from '../../../contexts/swipeableContext/SwipeRegistryContext';
+import {
+  SwipeRegistryProvider,
+  useSwipeRegistryContext,
+} from '../../../contexts/swipeableContext/SwipeRegistryContext';
 import { SwipableWrapper } from '../SwipableWrapper';
 
 const mockReanimatedSwipeable = jest.fn(({ children }: React.PropsWithChildren) => (
@@ -95,4 +98,67 @@ describe('SwipableWrapper', () => {
       undefined,
     );
   });
+  describe('swipe registry', () => {
+    type Registry = ReturnType<typeof useSwipeRegistryContext>;
+
+    const RegistryProbe = ({ onRegistry }: { onRegistry: (registry: Registry) => void }) => {
+      onRegistry(useSwipeRegistryContext());
+      return null;
+    };
+
+    const Rows = ({ ids, onRegistry }: { ids: string[]; onRegistry: (r: Registry) => void }) => (
+      <SwipeRegistryProvider>
+        <RegistryProbe onRegistry={onRegistry} />
+        {ids.map((id) => (
+          <SwipableWrapper key={id} swipeableId={id}>
+            <Text>{id}</Text>
+          </SwipableWrapper>
+        ))}
+      </SwipeRegistryProvider>
+    );
+
+    // The mocked swipeable gets the row's <Text> as children, so its label identifies the row.
+    const openRow = (id: string) => {
+      const props = mockReanimatedSwipeable.mock.calls
+        .map(([callProps]) => callProps as React.PropsWithChildren<Record<string, unknown>>)
+        .filter(
+          (callProps) =>
+            React.isValidElement<{ children: string }>(callProps.children) &&
+            callProps.children.props.children === id,
+        )
+        .pop();
+      act(() => {
+        (props?.onSwipeableOpenStartDrag as (direction: string) => void)('left');
+      });
+    };
+
+    it('stops reporting an open swipeable once that swipeable unmounts', () => {
+      let registry: Registry | undefined;
+      const onRegistry = (r: Registry) => {
+        registry = r;
+      };
+      const { rerender } = render(<Rows ids={['a', 'b']} onRegistry={onRegistry} />);
+
+      openRow('b');
+      expect(registry?.hasOpen()).toBe(true);
+
+      // e.g. a pull-to-refresh that drops the page holding the open row
+      rerender(<Rows ids={['a']} onRegistry={onRegistry} />);
+
+      expect(registry?.hasOpen()).toBe(false);
+    });
+
+    it('keeps another row open when a closed row unmounts', () => {
+      let registry: Registry | undefined;
+      const onRegistry = (r: Registry) => {
+        registry = r;
+      };
+      const { rerender } = render(<Rows ids={['a', 'b']} onRegistry={onRegistry} />);
+
+      openRow('a');
+      rerender(<Rows ids={['a']} onRegistry={onRegistry} />);
+
+      expect(registry?.hasOpen()).toBe(true);
+    });
+  });
 });

package/src/components/index.ts

@@ -35,7 +35,6 @@ export * from './Channel/hooks/useCreateInputMessageInputContext';
 export * from './Channel/hooks/useCreateMessagesContext';
 export * from './Channel/hooks/useCreateThreadContext';
 
-/** Channel List exports*/
 export * from './ChannelList/ChannelList';
 export * from './ChannelList/ChannelListFooterLoadingIndicator';
 export * from './ChannelList/ChannelListHeaderErrorIndicator';
@@ -45,7 +44,6 @@ export * from './ChannelList/ChannelListView';
 export * from './ChannelList/Skeleton';
 export * from './ChannelList/hooks';
 
-/** Channel Preview exports */
 export * from './ChannelPreview/ChannelDetailsBottomSheet';
 export * from './ChannelPreview/ChannelLastMessagePreview';
 export * from './ChannelPreview/ChannelMessagePreviewDeliveryStatus';
@@ -60,7 +58,6 @@ export * from './ChannelPreview/ChannelPreviewTypingIndicator';
 export * from './ChannelPreview/ChannelPreviewUnreadCount';
 export * from './ChannelPreview/hooks';
 
-/** Chat exports */
 export * from './Chat/Chat';
 export * from './Chat/hooks';
 
@@ -150,7 +147,7 @@ export * from './MessageInput/hooks/useCooldownRemaining';
 
 export * from './MessageList/DateHeader';
 export * from './MessageList/hooks/useMarkRead';
-// Only the constant: integrators running their own `jumpToMessage` need the TTL the SDK's highlight uses.
+// Only the constant, for integrators running their own `jumpToMessage`.
 export { DEFAULT_HIGHLIGHT_DURATION } from './MessageList/hooks/useMessageListFocus';
 export * from './MessageList/hooks/useMessageList';
 export * from './MessageList/hooks/useTypingString';

package/src/components/ui/Avatar/Avatar.tsx

@@ -10,18 +10,11 @@ import { primitives } from '../../../theme';
 
 export type AvatarProps = {
   size: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-  /**
-   * Override for the auto-generated accessibility label. When omitted and a
-   * `name` is provided, the SDK uses `a11y/Avatar of {{name}}`.
-   */
+  /** Overrides the generated accessibility label, which is built from `name` when it is set. */
   accessibilityLabel?: string;
   backgroundColor?: ColorValue;
   imageUrl?: string;
-  /**
-   * Display name of the entity this avatar represents (user, channel). Used to
-   * compose the default `accessibilityLabel`. Optional — when neither this nor
-   * `accessibilityLabel` is provided, the avatar is left unlabeled.
-   */
+  /** Display name of the user or channel for the label. Without it the avatar is unlabeled. */
   name?: string;
   placeholder?: React.ReactNode;
   showBorder?: boolean;

package/src/components/ui/Avatar/AvatarGroup.tsx

@@ -14,17 +14,13 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { BadgeCount, BadgeCountProps, OnlineIndicator, OnlineIndicatorProps } from '../Badge';
 
 export type AvatarGroupProps = {
-  /**
-   * The size of the avatar group.
-   */
+  /** Size of the avatar group. */
   size: 'lg' | 'xl' | '2xl';
-  /**
-   * The items to display in the avatar group.
-   */
+  /** Avatars to display. */
   items: React.ReactNode[];
 };
 
-// Sizes accounts for the border width as well
+// Sizes include the border width.
 const sizes = {
   '2xl': {
     width: 80,
@@ -154,13 +150,9 @@ export const AvatarGroup = (props: AvatarGroupProps) => {
 };
 
 export type UserAvatarGroupProps = Pick<AvatarGroupProps, 'size'> & {
-  /**
-   * The users to display in the avatar group.
-   */
+  /** Users to display. */
   users: UserResponse[];
-  /**
-   * Whether to show the online indicator.
-   */
+  /** Whether to show the online indicator. */
   showOnlineIndicator?: boolean;
 };
 

package/src/components/ui/Avatar/ChannelAvatar.tsx

@@ -26,16 +26,9 @@ const pickAvatarFields = (member: ChannelMemberResponse) => ({
 
 export type ChannelAvatarProps = {
   channel: Channel;
-  /**
-   * When true, the avatar renders based on `previewUri` instead of the
-   * channel's stored image. Useful for previewing a pending image change before
-   * it is saved. Defaults to false.
-   */
+  /** Renders `previewUri` in place of the channel's stored image. Defaults to false. */
   isPreview?: boolean;
-  /**
-   * Image to display while in preview mode (`isPreview` is true). A `string`
-   * shows that image; `null` shows the no-image fallback (member/user avatar).
-   */
+  /** Image shown when `isPreview` is true. `null` shows the fallback member or user avatar. */
   previewUri?: string | null;
   showOnlineIndicator?: boolean;
   size?: 'lg' | 'xl' | '2xl';

package/src/components/ui/Avatar/constants.ts

@@ -67,8 +67,8 @@ const onlineIndicatorSizes: Record<
   },
 };
 
-// Anchors the presence dot on the avatar's circular edge at 45°:
-// offset = avatarWidth / 2 * (1 - Math.SQRT1_2) - indicatorDiameter / 2  (rounded to px)
+// Centers the presence dot on the avatar's circular edge at 45 degrees:
+// offset = avatarWidth / 2 * (1 - Math.SQRT1_2) - indicatorDiameter / 2, rounded to px.
 const indicatorPositions = (Object.keys(avatarSizes) as UserAvatarProps['size'][]).reduce(
   (acc, size) => {
     const avatarDiameter = avatarSizes[size].width;

package/src/components/ui/Badge/BadgeNotification.tsx

@@ -9,10 +9,7 @@ export type BadgeNotificationProps = {
   count: number;
   size: 'sm' | 'xs';
   testID?: string;
-  /**
-   * Optional accessibility label override. When provided, screen readers
-   * announce this string instead of the bare count.
-   */
+  /** Accessibility label announced in place of the bare count. */
   accessibilityLabel?: string;
 };
 

package/src/components/ui/Button/Button.tsx

@@ -36,51 +36,28 @@ const getButtonAccessibilityState = ({
 };
 
 export type ButtonProps = PressableProps & {
-  /**
-   * Translation key used for the button's accessibility label when SDK
-   * accessibility is enabled. Prefer this for SDK-owned icon-only buttons.
-   */
+  /** Translation key of the accessibility label, resolved only with SDK accessibility enabled. */
   accessibilityLabelKey?: string;
-  /**
-   * Optional interpolation params for `accessibilityLabelKey`.
-   */
+  /** Interpolation params for `accessibilityLabelKey`. */
   accessibilityLabelParams?: Record<string, unknown>;
-  /**
-   * The style of the button.
-   */
+  /** Color variant of the button. */
   variant: 'primary' | 'secondary' | 'destructive';
-  /**
-   * The type of the button.
-   */
+  /** Fill style of the button. */
   type: 'solid' | 'outline' | 'ghost' | 'liquidGlass';
-  /**
-   * The size of the button.
-   */
+  /** Size of the button. Defaults to `'md'`. */
   size?: 'sm' | 'md' | 'lg';
-  /**
-   * Whether the button is selected.
-   */
+  /** Whether the button is selected. Defaults to false. */
   selected?: boolean;
-  /**
-   * The icon to display on the leading side of the button.
-   */
+  /** Icon on the leading side. Swaps with `TrailingIcon` in RTL. */
   LeadingIcon?: IconRenderer;
-  /**
-   * The content to display on the center of the button.
-   */
+  /** Content in the center. Strings are wrapped in a styled `Text`. */
   label?: React.ReactNode;
-  /**
-   * The icon to display on the trailing side of the button.
-   */
+  /** Icon on the trailing side. Swaps with `LeadingIcon` in RTL. */
   TrailingIcon?: IconRenderer;
-  /**
-   * Whether the button is only an icon.
-   */
+  /** Renders only an icon (`LeadingIcon`, else `TrailingIcon`). Defaults to false. */
   iconOnly?: boolean;
 
-  /**
-   * The style of the button.
-   */
+  /** Style of the button's outer container. */
   style?: StyleProp<ViewStyle>;
 };