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

package/src/hooks/useStableCallback.ts

@@ -3,27 +3,17 @@ import { useCallback, useRef } from 'react';
 export type StableCallback<A extends unknown[], R> = (...args: A) => R;
 
 /**
- * A utility hook implementing a stable callback. It takes in an unstable method that
- * is supposed to be invoked somewhere deeper in the DOM tree without making it
- * change its reference every time the parent component rerenders. It will also return
- * the value of the callback if it does return one.
- * A common use-case would be having a function whose invocation depends on state
- * somewhere high up in the DOM tree and wanting to use the same function deeper
- * down, for example in a leaf node and simply using useCallback results in
- * cascading dependency hell. If we wrap it in useStableCallback, we would be able
- * to:
- * - Use the same function as a dependency of another hook (since it is stable)
- * - Still invoke it and get the latest state
+ * Returns a function with a stable reference that always calls the latest `callback` and returns
+ * its result. It can be a dependency of other hooks without invalidating them on every parent
+ * render.
  *
- * **Caveats:**
- * - Never wrap a function that is supposed to return a React.ReactElement in
- *   useStableCallback, since React will not know that the DOM needs to be updated
- *   whenever the callback value changes (for example, renderItem from FlatList must
- *   never be wrapped in this hook)
- * - Always prefer using a standard useCallback/stable function wherever possible
- *   (the purpose of useStableCallback is to bridge the gap between top level contexts
- *   and cascading rereders in downstream components - **not** as an escape hatch)
- * @param callback - the callback we want to stabilize
+ * Do not wrap a function that returns elements (such as FlatList's `renderItem`): React would not
+ * see an update when the callback changes. Prefer a plain `useCallback` where it works; this
+ * bridges top-level contexts and cascading re-renders in downstream components and is not an
+ * escape hatch.
+ *
+ * @param callback The callback to stabilize.
+ * @returns The stable callback.
  */
 export const useStableCallback = <A extends unknown[], R>(
   callback: StableCallback<A, R>,

package/src/hooks/useStreami18n.ts

@@ -10,11 +10,9 @@ import type { TranslationCatalog } from '../i18n/types';
 import { Streami18n } from '../utils/i18n/Streami18n';
 
 /**
- * This SDK's instantiation of core's state shape.
- *
- * Spelled out rather than left to `Streami18nState`'s defaults: those default the catalog to
- * `AnyTranslationCatalog`, and `t` is contravariant in its options, so the concrete store is not
- * assignable to the default-parameterized one.
+ * This SDK's instantiation of the `@stream-io/i18n` state shape. `Streami18nState` defaults its
+ * catalog to `AnyTranslationCatalog`, and `t` is contravariant in its options, so the concrete
+ * store is not assignable to the default-parameterized type.
  */
 type SDKStreami18nState = Streami18nState<TranslationCatalog, BundledTranslationKey>;
 

package/src/hooks/useTranslatedMessage.ts

@@ -3,17 +3,19 @@ import type { LocalMessage, MessageResponse } from 'stream-chat';
 import { useTranslationContext } from '../contexts/translationContext/TranslationContext';
 
 /**
- * The key auto-translated text lands under in `message.i18n`.
- *
- * Built from the UI language, which is any string an integrator registered, while `message.i18n`
- * only ever carries the languages the auto-translation endpoint supports. The `in` check below is
- * what reconciles the two: a UI language outside that set simply finds nothing and falls through
- * to the original text, which is the correct behaviour.
+ * The key under which auto-translated text lives in `message.i18n`. The UI language can be any
+ * registered string, while `message.i18n` only carries the languages the auto-translation endpoint
+ * supports: the `in` check below makes an unsupported language fall through to the original text.
  */
 type TranslationKey = `${string}_text`;
 
 /**
- * `message` with its text swapped for the auto-translation into `userLanguage`, when there is one.
+ * Returns a copy of `message` with its text swapped for the auto-translation into `userLanguage`,
+ * when there is one. Deleted messages keep their text.
+ *
+ * @param message The message to translate.
+ * @param userLanguage The language to translate into.
+ * @returns The message copy, or `undefined` without a message.
  */
 export const getTranslatedMessage = (
   message: LocalMessage | MessageResponse | undefined,

package/src/hooks/useViewport.ts

@@ -2,11 +2,11 @@ import { useCallback } from 'react';
 import { useWindowDimensions } from 'react-native';
 
 /**
- * A custom hook that provides functions to calculate dimensions based on
- * a percentage of the viewport height (vh) and viewport width (vw). It
- * dynamically updates dimensions on changes in device orientation.
+ * Returns `vh` and `vw` helpers that convert a percentage of the window height or width to points,
+ * updating when the window dimensions change.
  *
- * @returns {Object} An object containing functions vh and vw.
+ * @param rounded Rounds the results to whole points. Defaults to false.
+ * @returns An object with the `vh` and `vw` functions.
  */
 export const useViewport = (rounded?: boolean) => {
   const viewportDimensions = useWindowDimensions();

package/src/hooks/useWindowContentWidth.ts

@@ -3,21 +3,19 @@ import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-cont
 /**
  * Width available to a surface that spans the window, minus the horizontal safe area.
  *
- * Deliberately *not* measured. `onLayout` reports a frame after the window has already resized, so
- * anything sized from it - tile sizes in a grid, for instance - visibly resizes a frame late on a
- * rotation or a fold.
+ * The width is computed rather than measured: `onLayout` reports a frame after the window resizes,
+ * so anything sized from it (such as grid tiles) resizes a frame late on rotation or fold.
  *
- * The frame comes from `useSafeAreaFrame`, not `useWindowDimensions`: the frame and the insets are
- * delivered by the *same* native event and set in the same handler, so they update together in one
- * render. Mixing `Dimensions` with the insets desyncs them - the window width lands first and the
- * insets a render later, producing an extra intermediate size (and, for anything deriving an image
- * URL from it, an extra fetch).
+ * The frame comes from `useSafeAreaFrame`, not `useWindowDimensions`: the frame and the insets
+ * arrive in the same native event and update in one render. Mixing `Dimensions` with the insets
+ * lands the width a render before the insets, giving an extra intermediate size (and an extra fetch
+ * for anything that derives an image URL from it).
  *
- * Assumes the caller fills the window. A component rendered inside a narrower container must pass
- * that container's width via `containerWidth`, or measure it itself and accept the frame of lag
- * that comes with measuring.
+ * Assumes the caller fills the window. A component inside a narrower container passes that
+ * container's width via `containerWidth`.
  *
  * @param containerWidth Width of the surface, when it is known and narrower than the window.
+ * @returns The available width.
  *
  * @example
  * const contentWidth = useWindowContentWidth();

package/src/i18n/__tests__/catalog.fixture.json

@@ -118,8 +118,10 @@
   "channelDetails.editChannel.name.placeholder": "Channel name",
   "channelDetails.editChannel.upload.accessibilityLabel": "Upload channel image",
   "channelDetails.editChannel.upload.label": "Upload",
+  "channelDetails.editImageSheet.cameraPermission.text": "The camera is used to take the channel image.",
   "channelDetails.editImageSheet.chooseImage.label": "Choose Image",
   "channelDetails.editImageSheet.close.accessibilityLabel": "Close edit picture sheet",
+  "channelDetails.editImageSheet.galleryPermission.text": "Gallery access is used to choose the channel image.",
   "channelDetails.editImageSheet.resetPicture.label": "Reset Picture",
   "channelDetails.editImageSheet.takePhoto.label": "Take Photo",
   "channelDetails.editImageSheet.title": "Edit Group Picture",
@@ -170,13 +172,13 @@
   "channelPreview.unreadCount.accessibilityLabel_one": "{{count}} unread message",
   "channelPreview.unreadCount.accessibilityLabel_other": "{{count}} unread messages",
   "common.anonymousUser.label": "Anonymous",
-  "common.cameraPermission.text": "Device camera is used to take photos or videos.",
+  "common.cameraPermission.text": "The camera is used to take photos and videos.",
   "common.cameraPermission.title": "Allow camera access in device settings",
   "common.cancel.label": "Cancel",
   "common.close.accessibilityLabel": "Close",
   "common.draft.label": "Draft",
   "common.editMessageFailed.error": "Edit message request failed",
-  "common.galleryPermission.text": "Device gallery permissions is used to take photos or videos.",
+  "common.galleryPermission.text": "Gallery access is used to share photos and videos.",
   "common.galleryPermission.title": "Allow access to your Gallery",
   "common.linksDisabled.text": "Sending links is not allowed in this conversation",
   "common.linksDisabled.title": "Links are disabled",

package/src/i18n/keys.ts

@@ -129,8 +129,10 @@ export type TranslationCatalog = {
   'channelDetails.editChannel.name.placeholder': 'Channel name';
   'channelDetails.editChannel.upload.accessibilityLabel': 'Upload channel image';
   'channelDetails.editChannel.upload.label': 'Upload';
+  'channelDetails.editImageSheet.cameraPermission.text': 'The camera is used to take the channel image.';
   'channelDetails.editImageSheet.chooseImage.label': 'Choose Image';
   'channelDetails.editImageSheet.close.accessibilityLabel': 'Close edit picture sheet';
+  'channelDetails.editImageSheet.galleryPermission.text': 'Gallery access is used to choose the channel image.';
   'channelDetails.editImageSheet.resetPicture.label': 'Reset Picture';
   'channelDetails.editImageSheet.takePhoto.label': 'Take Photo';
   'channelDetails.editImageSheet.title': 'Edit Group Picture';
@@ -181,13 +183,13 @@ export type TranslationCatalog = {
   'channelPreview.unreadCount.accessibilityLabel_one': '{{count}} unread message';
   'channelPreview.unreadCount.accessibilityLabel_other': '{{count}} unread messages';
   'common.anonymousUser.label': 'Anonymous';
-  'common.cameraPermission.text': 'Device camera is used to take photos or videos.';
+  'common.cameraPermission.text': 'The camera is used to take photos and videos.';
   'common.cameraPermission.title': 'Allow camera access in device settings';
   'common.cancel.label': 'Cancel';
   'common.close.accessibilityLabel': 'Close';
   'common.draft.label': 'Draft';
   'common.editMessageFailed.error': 'Edit message request failed';
-  'common.galleryPermission.text': 'Device gallery permissions is used to take photos or videos.';
+  'common.galleryPermission.text': 'Gallery access is used to share photos and videos.';
   'common.galleryPermission.title': 'Allow access to your Gallery';
   'common.linksDisabled.text': 'Sending links is not allowed in this conversation';
   'common.linksDisabled.title': 'Links are disabled';

package/src/i18n/runtimeDefaults.ts

@@ -1,38 +1,33 @@
 /**
- * The only translation data bundled with the SDK. Hand-maintained.
+ * The only translation data bundled with the SDK, maintained by hand.
  *
- * Prose keys are not here — they pass their English copy inline at the call site
- * (`t('message.status.sent.text', 'Sent')`). These keys have no inline copy to fall back on:
- * they are formatter expressions, passed around as prop values and resolved by name at runtime
- * (`timestampTranslationKey`), so the extractor never sees a literal call site for them.
+ * Prose keys are not here: they pass their English copy inline at the call site. These keys have no
+ * inline copy because they are formatter expressions passed around as prop values and resolved by
+ * name at runtime (`timestampTranslationKey`), so the extractor never sees a literal call site.
  *
- * The leaf segment is the consuming component's name and stays PascalCase, matching the web SDK
- * and the `timestamp/<Component>` values these keys replace. Every other namespace is lower
- * camelCase.
+ * The leaf segment is the consuming component's name and stays PascalCase; every other namespace is
+ * lower camelCase.
  *
- * Two namespaces are typed into the catalog but supplied by `@stream-io/i18n` rather than declared
- * here. `language.*` (ISO language names, generated from core's `TranslationLanguage` union) is
- * merged in by the `Streami18n` subclass in `utils/i18n/Streami18n.ts`, underneath this file, so an
- * individual name stays overridable. `relativeTime.*` needs no data at all: core's
- * `timestampFormatter(relativeCompact: true)` passes its English inline the same way a call site
- * does. There is
- * no `translationBuilderTopic.*` — this SDK registers no i18next postProcessor; the formatter
- * registry in `@stream-io/i18n` is the whole extension surface.
+ * `language.*` and `relativeTime.*` are typed into the catalog but not declared here. `language.*`
+ * comes from `stream-chat` and is merged in by the `Streami18n` subclass in
+ * `utils/i18n/Streami18n.ts`, underneath this file, so individual names stay overridable.
+ * `relativeTime.*` needs no data: `@stream-io/i18n`'s `timestampFormatter(relativeCompact: true)`
+ * passes its English inline. The SDK registers no i18next postProcessor, so there is no
+ * `translationBuilderTopic.*`.
  *
  * `yarn build-translations` joins this file with the inline defaults to generate
  * `src/i18n/keys.ts`; `yarn i18n:export` writes the joined catalog as JSON.
  *
- * Three entries hide English inside a formatter expression, so `dayjsLocaleConfigForLanguage`
- * cannot reach them and an integrator has to override the key itself:
+ * Three entries hide English inside a formatter expression, out of reach of
+ * `dayjsLocaleConfigForLanguage`, so an integrator overrides the key itself:
  *
  * - `timestamp.ChannelPreviewStatus` and `timestamp.ThreadListItem` carry day words inside their
  *   own `calendarFormats` argument. A per-key `calendarFormats` replaces the locale's calendar
- *   wholesale — `getDateString` short-circuits to `t()` before the Day.js calendar path, and
- *   `timestampFormatter` then parses the calendar config out of the translation value itself.
+ *   wholesale: `getDateString` short-circuits to `t()` before the Day.js calendar path, and
+ *   `timestampFormatter` parses the calendar config out of the translation value itself.
  * - `timestamp.UserActivityStatus` puts prose (`Last seen`) beside the interpolation.
  *
- * Adding a fourth fails a guard in `src/utils/__tests__/Streami18n.test.ts` that keeps
- * `ai-docs/i18n-v10-migration.md` in sync.
+ * Adding a fourth fails a guard in `src/utils/__tests__/Streami18n.test.ts`.
  */
 export const runtimeDefaults = {
   'duration.messageReminder': '{{ milliseconds | durationFormatter(withSuffix: true) }}',
@@ -49,9 +44,9 @@ export const runtimeDefaults = {
     '{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {"lastDay":"[Yesterday]", "lastWeek":"dddd", "nextDay":"[Tomorrow]", "nextWeek":"dddd [at] LT", "sameDay":"LT", "sameElse":"L"}) }}',
   'timestamp.UserActivityStatus': 'Last seen {{ timestamp | fromNowFormatter }}',
 
-  // Screen-reader labels and lookup-table entries. These reach `t()` as runtime values — from a
-  // JSX prop, a ternary branch, or a table keyed by something other than the copy — so there is no
-  // call site at which an inline default could be written.
+  // Screen-reader labels and lookup-table entries. These reach `t()` as runtime values (from a JSX
+  // prop, a ternary branch, or a table keyed by something other than the copy), so no call site
+  // can carry an inline default.
   'attachment.gallery.doubleTapToOpen.accessibilityLabel': 'Double tap to open',
   'attachment.gallery.image.accessibilityLabel': 'Gallery image',
   'attachment.gallery.video.accessibilityLabel': 'Gallery video',

package/src/i18n/types.ts

@@ -12,15 +12,14 @@ import type { BundledTranslationKey, TranslationCatalog as GeneratedCatalog } fr
 /**
  * The SDK's i18n types, instantiated from the generic helpers in `@stream-io/i18n`.
  *
- * The derivations live in core so both UI SDKs share one implementation; the *catalog* stays here,
- * because it is generated from this SDK's own `t()` call sites. That split is why core's helpers are
- * generic over the catalog rather than driven by module augmentation — two catalogs have to be able to
- * coexist in one TypeScript program.
+ * The derivations live in `@stream-io/i18n` so both UI SDKs share one implementation, while the
+ * catalog is generated from this SDK's own `t()` call sites. The helpers are generic over the
+ * catalog rather than driven by module augmentation so that two catalogs can coexist in one
+ * TypeScript program.
  *
- * Two slices come from core, because core owns the code that renders them: `language.*` (derived from
- * the same `TranslationLanguage` union the API uses) and `relativeTime.*` (used by
- * `timestampFormatter(relativeCompact: true)`). Intersecting them in keeps both compile-checked and
- * overridable.
+ * `language.*` (from `stream-chat`, derived from the `TranslationLanguage` union) and
+ * `relativeTime.*` (from `@stream-io/i18n`, used by `timestampFormatter(relativeCompact: true)`)
+ * are intersected in, which keeps both compile-checked and overridable.
  */
 export type TranslationCatalog = GeneratedCatalog & LanguageNameCatalog & RelativeTimeCatalog;
 
@@ -29,16 +28,13 @@ export type TranslationDictionary = TranslationDictionaryOf<TranslationCatalog>;
 export type LooseTranslationDictionary = LooseTranslationDictionaryOf<TranslationCatalog>;
 
 /**
- * The SDK's translation function.
- *
- * `BundledTranslationKey` is generated: the screen-reader labels and lookup-table entries that reach
- * `t()` as runtime values, so there is nowhere to write an inline default. They are callable without one.
+ * The SDK's translation function. `BundledTranslationKey` covers the generated screen-reader labels
+ * and lookup-table entries that reach `t()` as runtime values, so they are callable without an
+ * inline default.
  */
 export type StreamTFunction = StreamTFunctionFor<TranslationCatalog, BundledTranslationKey>;
 
 export type {
-  // Both are documented in `ai-docs/i18n-v10-migration.md`'s type table and were exported before the
-  // runtime moved; re-exporting them here keeps the public surface unchanged.
   CalendarFormats,
   CustomFormatters,
   DateTimeParserModule,

package/src/i18n/utils.ts

@@ -8,24 +8,16 @@ import {
 import type { StreamTFunction } from './types';
 
 /**
- * The `t` in force before i18next has initialized, and the default value of the translation context.
+ * The `t` used before i18next has initialized, and the default value of the translation context.
  *
- * Core's factory, instantiated against this SDK's catalog so it is typed the same as the real `t`. It
- * honours the inline `defaultValue` at each call site, which is what stops raw dotted keys flashing on
- * the first frame — or rendering permanently for a component used outside `<OverlayProvider>`.
+ * The default translator from `@stream-io/i18n`, typed against this SDK's catalog. It honors the
+ * inline `defaultValue` at each call site, so raw dotted keys neither flash on the first frame nor
+ * render permanently in a component used outside `<OverlayProvider>`.
  */
 export const defaultTranslatorFunction: StreamTFunction =
   createDefaultTranslatorFunction() as StreamTFunction;
 
-/**
- * The date/time and key helpers now live in `@stream-io/i18n`, shared with the React SDK.
- *
- * Re-exported from here rather than rewritten at ~15 call sites, so the internal module path stays
- * stable. `getDateString` and the type guards behave identically; `predefinedFormatters` gains
- * `fromNowFormatter` and loses `relativeCompactDateFormatter` — that behaviour is
- * `timestampFormatter` with `relativeCompact: true`, whose wording goes through `t()` rather than being
- * hardcoded English as it was here.
- */
+/** The date/time and key helpers come from `@stream-io/i18n`, shared with the React SDK. */
 export {
   asDynamicKey,
   defaultDateTimeParser,
@@ -36,21 +28,21 @@ export {
 } from '@stream-io/i18n';
 
 /**
- * `null` means "nothing renderable", which every caller already handles by omitting the element.
- * `"Invalid Date"` is what Day.js formats an unparseable instance into, and it reaches the screen as
- * copy. Whatever shape produced it, showing nothing is the better failure.
+ * `null` means nothing renderable, which every caller handles by omitting the element. Day.js
+ * formats an unparseable instance as "Invalid Date", which must not reach the screen as copy.
  */
 const withoutInvalidDate = <T>(result: T) =>
   typeof result === 'string' && result.includes('Invalid Date') ? null : result;
 
 /**
- * This SDK's date formatters: core's, with an invalid result suppressed on the way out.
+ * This SDK's date formatters: the `@stream-io/i18n` ones, with an invalid result suppressed.
+ *
+ * Timestamps are not rescaled: server timestamps are nanosecond numbers converted with
+ * `convertTimestampToDate` where server data enters the tree, so a missed conversion surfaces
+ * instead of being masked.
  *
- * These used to also rescale a nanosecond timestamp on the way in, because `latest_votes_by_option`
- * reached the UI as a raw integer core's decoders did not convert. That rescale is gone: every
- * server-sent timestamp is now a nanosecond number by contract, and each call site converts with
- * `convertTimestampToDate` where core data enters the tree. Guessing from the magnitude here would
- * hide a missed conversion instead of surfacing it.
+ * @param params Same options as `getDateString` from `@stream-io/i18n`.
+ * @returns The formatted date, or `null` when there is nothing renderable.
  */
 export const getDateString: typeof coreGetDateString = ({ messageCreatedAt, ...rest }) =>
   withoutInvalidDate(coreGetDateString({ ...rest, messageCreatedAt }));

package/src/index.ts

@@ -1,4 +1,4 @@
-/** i18next polyfill to handle intl format for pluralization. For more info see https://www.i18next.com/misc/json-format#i-18-next-json-v4 */
+// Polyfill for i18next pluralization: https://www.i18next.com/misc/json-format#i-18-next-json-v4
 import 'intl-pluralrules';
 import './polyfills';
 

package/src/middlewares/__tests__/emojiControl.test.ts

@@ -0,0 +1,65 @@
+import type { Emoji } from '../../types/types';
+import {
+  createTextComposerEmojiMiddleware,
+  EmojiMiddleware,
+  EmojiSuggestion,
+} from '../emojiControl';
+
+type OnChangeParams = Parameters<EmojiMiddleware['handlers']['onChange']>[0];
+
+type EmojiSearchSource = {
+  query: (searchQuery: string) => Promise<{ items: EmojiSuggestion[] }>;
+};
+
+const runOnChange = async (emojis: Emoji[], text: string) => {
+  const middleware = createTextComposerEmojiMiddleware({
+    emojiSearchIndex: { search: () => emojis },
+  });
+  const complete = jest.fn((state: unknown) => state);
+
+  await middleware.handlers.onChange({
+    complete,
+    forward: jest.fn(),
+    next: jest.fn(),
+    state: { selection: { end: text.length, start: text.length }, text },
+  } as unknown as OnChangeParams);
+
+  return complete.mock.calls[0][0] as {
+    suggestions?: { searchSource: EmojiSearchSource };
+    text: string;
+  };
+};
+
+describe('createTextComposerEmojiMiddleware', () => {
+  it('skips an emoji that has neither a native glyph nor skins', async () => {
+    const state = await runOnChange(
+      [
+        { id: 'blank', name: 'Blank', skins: [] },
+        { id: 'smile', name: 'Smile', skins: [{ native: '😄' }] },
+      ],
+      ':sm',
+    );
+
+    const { items } = await state.suggestions!.searchSource.query('sm');
+
+    expect(items.map(({ id, native }) => ({ id, native }))).toEqual([
+      { id: 'smile', native: '😄' },
+    ]);
+  });
+
+  it('replaces an emoticon with the native glyph of its first skin', async () => {
+    const state = await runOnChange(
+      [
+        {
+          emoticons: [':)'],
+          id: 'slightly_smiling_face',
+          name: 'Smile',
+          skins: [{ native: '🙂' }],
+        },
+      ],
+      ':)',
+    );
+
+    expect(state.text).toBe('🙂');
+  });
+});

package/src/middlewares/attachments.ts

@@ -5,11 +5,8 @@ import {
 } from 'stream-chat';
 
 /**
- * Supplies a local video's preview URI.
- *
- * Every other attachment type gets `localMetadata.previewUri` from `toLocalUploadAttachment`,
- * which points it at the picked file itself. A video file is not renderable, so the preview has
- * to be the thumbnail the native picker extracted (`thumb_url`) instead.
+ * Sets a local video's `localMetadata.previewUri` to its `thumb_url`, because the picked video
+ * file itself cannot be rendered as a preview (other attachments preview the file URI).
  */
 const createVideoAttachmentPreviewMiddleware = (): AttachmentPreUploadMiddleware => ({
   id: 'stream-io/message-composer-ui-middleware/video-attachment-preview',

package/src/middlewares/emojiControl.ts

@@ -34,21 +34,19 @@ class EmojiSearchSource<T extends TextComposerSuggestion<Emoji>> extends BaseSea
     }
     const emojis = (await this.emojiSearchIndex.search(searchQuery)) ?? [];
 
-    // emojiIndex.search sometimes returns undefined values, so filter those out first
+    // emojiIndex.search sometimes returns undefined values, so filter those out first. An emoji with
+    // no native glyph, on itself or its first skin, has nothing to insert and is skipped too.
     return {
       items: emojis
         .filter(Boolean)
-        .slice(0, 7)
-        .map(({ emoticons = [], id, name, native, skins = [] }) => {
-          const [firstSkin] = skins;
-
-          return {
-            emoticons,
-            id,
-            name,
-            native: native ?? firstSkin.native,
-          };
-        }) as T[],
+        .map(({ emoticons = [], id, name, native, skins = [] }) => ({
+          emoticons,
+          id,
+          name,
+          native: native ?? skins[0]?.native,
+        }))
+        .filter(({ native }) => !!native)
+        .slice(0, 7) as T[],
       next: null, // todo: generate cursor
     };
   }
@@ -72,21 +70,12 @@ export type EmojiMiddleware<T extends Emoji = Emoji> = Middleware<
 >;
 
 /**
- * TextComposer middleware for mentions
- * Usage:
+ * Creates the TextComposer middleware that suggests emoji after the trigger character.
  *
- *  const textComposer = new TextComposer(options);
- *
- *  textComposer.use(new createTextComposerEmojiMiddleware(emojiSearchIndex, {
- *   minChars: 2
- *  }));
- *
- * @param emojiSearchIndex
- * @param {{
- *     minChars: number;
- *     trigger: string;
- *   }} options
- * @returns
+ * @param params.emojiSearchIndex Index searched for emoji matching the typed token.
+ * @param params.options Overrides for `minChars` and `trigger`. Defaults to
+ * `{ minChars: 1, trigger: ':' }`.
+ * @returns The emoji middleware.
  */
 export const createTextComposerEmojiMiddleware = ({
   emojiSearchIndex,
@@ -144,9 +133,7 @@ export const createTextComposerEmojiMiddleware = ({
               return null;
             }
 
-            const [firstSkin] = emoji.skins ?? [];
-
-            return emoji.native ?? firstSkin.native;
+            return emoji.native ?? emoji.skins?.[0]?.native ?? null;
           },
           text: state.text,
         });
@@ -154,7 +141,7 @@ export const createTextComposerEmojiMiddleware = ({
         if (textWithReplacedWord !== state.text) {
           return complete({
             ...state,
-            suggestions: undefined, // to prevent the TextComposerMiddlewareExecutor to run the first page query
+            suggestions: undefined, // Prevents the executor from running the first page query
             text: textWithReplacedWord,
           });
         }
@@ -183,7 +170,7 @@ export const createTextComposerEmojiMiddleware = ({
             text: state.text,
             trigger: finalOptions.trigger,
           }),
-          suggestions: undefined, // Clear suggestions after selection
+          suggestions: undefined,
         });
       },
     },

package/src/native.ts

@@ -95,8 +95,7 @@ type SetClipboardStringOptions = {
   onSuccess?: () => void;
 };
 // TODO(next-major): make this handler async and return the write outcome directly.
-// It's kept synchronous (void) for backwards compatibility, so success/failure are
-// reported via the `onSuccess`/`onFailure` callbacks instead of a Promise.
+// The handler is synchronous (void), so the outcome is reported via `onSuccess`/`onFailure`.
 type SetClipboardString = (text: string, options?: SetClipboardStringOptions) => void;
 
 type ShareOptions = {
@@ -243,9 +242,7 @@ export type AudioReturnType = {
 };
 
 export type RecordingOptions = {
-  /**
-   * A boolean that determines whether audio level information will be part of the status object under the "metering" key.
-   */
+  /** Whether the status object includes audio level information under the `metering` key. */
   isMeteringEnabled?: boolean;
 };
 
@@ -313,8 +310,8 @@ export type VideoType = {
   replayAsync?: () => void;
   resizeMode?: string;
   /**
-   * Absolute playback position in seconds. Assigning to it performs an absolute
-   * seek (expo-video's `VideoPlayer.currentTime`).
+   * Absolute playback position in seconds. Assigning to it seeks to that position (expo-video's
+   * `VideoPlayer.currentTime`).
    */
   currentTime?: number;
   seek?: (seconds: number) => void;
@@ -335,8 +332,8 @@ export type NativeShimmerViewProps = ViewProps & {
 };
 
 /**
- * Props of the Android-only native `PerfText` component used by `stream-chat-react-native/ai-components`
- * to render syntax highlighted code as a single native text view with colour spans.
+ * Props of the Android-only native `PerfText` view, which the `ai-components` entry point uses to
+ * render syntax-highlighted code as a single native text view with color spans.
  */
 export type NativePerfTextProps = ViewProps & {
   text: string;

package/src/nativeMultipartUpload.ts

@@ -37,7 +37,7 @@ export type NativeMultipartUploaderProgressConfig = {
 export type NativeMultipartUploadProgressConfig = NativeMultipartUploaderProgressConfig & {
   /**
    * Maximum progress percentage reported while the native request body is still being sent.
-   * Completion is represented by the upload request resolving and the upload indicator being removed.
+   * Completion is signaled by the upload request resolving.
    *
    * @default 90
    */
@@ -132,7 +132,7 @@ const createCanceledError = (): NativeMultipartCanceledError => {
   const error = new Error('Request aborted') as NativeMultipartCanceledError;
   error.name = 'CanceledError';
   error.code = CANCELED_ERROR_CODE;
-  // eslint-disable-next-line no-underscore-dangle -- Axios marks cancellation with this legacy field, and callers still use axios.isCancel.
+  // eslint-disable-next-line no-underscore-dangle -- sets the `__CANCEL__` flag that `axios.isCancel` checks, so callers see a cancellation.
   error.__CANCEL__ = true;
   return error;
 };
@@ -250,9 +250,9 @@ export const createNativeMultipartUploader = (
     return undefined;
   }
 
-  // Annotated with the SDK's own structural emitter type: React Native 0.87 made
-  // `NativeEventEmitter` generic over an event -> args map, so the inferred union of
-  // `options.eventEmitter` and a raw `NativeEventEmitter` no longer accepts a typed listener.
+  // Typed with the SDK's structural emitter type: from React Native 0.87 `NativeEventEmitter` is
+  // generic over an event map, so the inferred union with `options.eventEmitter` rejects typed
+  // listeners.
   const multipartUploadEventEmitter: NativeMultipartUploadEventEmitter =
     options.eventEmitter ??
     (new NativeEventEmitter(nativeModule) as unknown as NativeMultipartUploadEventEmitter);