stream-chat-react-native-core 9.8.0 → 9.8.1-beta.2

package/src/components/UIComponents/SafeAreaViewWrapper.tsx

@@ -6,7 +6,19 @@ import {
   SafeAreaViewProps,
 } from 'react-native-safe-area-context';
 
-export const SafeAreaView = SafeAreaViewOriginal ?? RNFSafeAreaView;
+/**
+ * `react-native-safe-area-context`'s `SafeAreaView`, keeping React Native's own as a defensive
+ * runtime fallback.
+ *
+ * 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.
+ */
+export const SafeAreaView = (SafeAreaViewOriginal ??
+  RNFSafeAreaView) as typeof SafeAreaViewOriginal;
 
 export const SafeAreaViewWrapper = ({
   children,

package/src/components/UIComponents/SearchInput.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react';
-import { StyleSheet, TextInput, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { Pressable } from 'react-native-gesture-handler';
 
@@ -7,6 +7,7 @@ import { useComponentsContext } from '../../contexts/componentsContext/Component
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { primitives } from '../../theme';
+import type { TextInputRef } from '../../types/react-native-compat';
 import type { IconRenderer } from '../ui/Button/Button';
 import { Input, InputProps } from '../ui/Input/Input';
 
@@ -19,7 +20,7 @@ export const SearchInput = ({ onChangeText, ...props }: SearchInputProps) => {
     theme: { semantics },
   } = useTheme();
 
-  const inputRef = useRef<TextInput>(null);
+  const inputRef = useRef<TextInputRef>(null);
   const [hasText, setHasText] = useState(() => Boolean(props.value || props.defaultValue));
 
   const handleChangeText = useCallback(

package/src/components/UIComponents/StreamBottomSheetModalFlatList.tsx

@@ -1,10 +1,12 @@
 import React, { useRef } from 'react';
 import { FlatListProps } from 'react-native';
+
 import { FlatList } from 'react-native-gesture-handler';
 import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
 
 import { useBottomSheetContext } from '../../contexts/bottomSheetContext/BottomSheetContext';
 import { useStableCallback } from '../../hooks';
+import type { FlatListRef } from '../../types/react-native-compat';
 
 type StreamBottomSheetModalFlatListProps<ItemT> = FlatListProps<ItemT>;
 
@@ -13,7 +15,7 @@ export const StreamBottomSheetModalFlatList = <ItemT,>({
   ...props
 }: StreamBottomSheetModalFlatListProps<ItemT>) => {
   const { currentSnapIndex, topSnapIndex } = useBottomSheetContext();
-  const listRef = useRef<FlatList<ItemT>>(null);
+  const listRef = useRef<FlatListRef<ItemT>>(null);
 
   const setNativeScrollEnabled = useStableCallback((value: boolean) =>
     listRef.current?.setNativeProps({ scrollEnabled: value }),

package/src/components/UIComponents/SvgAwareImage.tsx

@@ -6,7 +6,7 @@ import { SvgUri } from 'react-native-svg';
 import { useIsSvg } from '../../hooks/useIsSvg';
 
 const getSourceUri = (source: ImageProps['source']): string | undefined => {
-  if (!source || typeof source !== 'object' || Array.isArray(source)) {
+  if (!source || typeof source !== 'object' || Array.isArray(source) || !('uri' in source)) {
     return undefined;
   }
   return source.uri;

package/src/components/ui/Input/Input.tsx

@@ -16,6 +16,7 @@ import {
 import { useTheme } from '../../../contexts';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { primitives } from '../../../theme';
+import type { TextInputRef } from '../../../types/react-native-compat';
 import { IconRenderer } from '../Button';
 
 const inputAccessibilityStates = {
@@ -51,7 +52,11 @@ export type InputProps = TextInputProps & {
   containerStyle?: StyleProp<ViewStyle>;
 };
 
-export const Input = React.forwardRef<TextInput, InputProps>(function Input(
+// Explicitly annotated: the inferred type of a `forwardRef` component inlines React Native's
+// internal style/instance helper types, which cannot be named in the emitted declarations (TS2883).
+export const Input: React.ForwardRefExoticComponent<
+  InputProps & React.RefAttributes<TextInputRef>
+> = React.forwardRef<TextInputRef, InputProps>(function Input(
   {
     title,
     description,

package/src/contexts/messageContext/MessageContext.tsx

@@ -1,5 +1,4 @@
 import React, { PropsWithChildren, useContext } from 'react';
-import type { View } from 'react-native';
 
 import type { Attachment, LocalMessage } from 'stream-chat';
 
@@ -16,6 +15,7 @@ import type { MessageContentType } from '../../contexts/messagesContext/Messages
 import type { DeepPartial } from '../../contexts/themeContext/ThemeContext';
 import type { Theme } from '../../contexts/themeContext/utils/theme';
 import type { Rect } from '../../state-store/message-overlay-store';
+import type { ViewRef } from '../../types/react-native-compat';
 
 import type { MessageComposerAPIContextValue } from '../messageComposerContext/MessageComposerAPIContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
@@ -73,7 +73,7 @@ export type MessageContextValue = {
    * Ref to the view that the message context menu should align with.
    * Custom message renderers can attach this to a different subview if needed.
    */
-  contextMenuAnchorRef: React.RefObject<View | null>;
+  contextMenuAnchorRef: React.RefObject<ViewRef | null>;
   /**
    * Stable UI-instance identifier for the rendered message.
    * Used for overlay state so two rendered instances of the same message do not collide.
@@ -114,7 +114,7 @@ export type MessageContextValue = {
    * Registers the subtree that should be measured and portaled into the message overlay.
    * Custom message renderers typically interact with this via `MessageOverlayWrapper`.
    */
-  registerMessageOverlayTarget: (params: { id: string; view: View | null }) => void;
+  registerMessageOverlayTarget: (params: { id: string; view: ViewRef | null }) => void;
   unregisterMessageOverlayTarget: (id: string) => void;
   reactions: ReactionSummary[];
   /** Read count of the message */

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -7,7 +7,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Alert, Linking, TextInput, TextInputProps } from 'react-native';
+import { Alert, Linking, TextInputProps } from 'react-native';
 
 import { lookup as lookupMimeType } from 'mime-types';
 import {
@@ -37,6 +37,7 @@ import {
 import { isDocumentPickerAvailable, MediaTypes, NativeHandlers } from '../../native';
 import { AudioRecorderManager } from '../../state-store/audio-recorder-manager';
 import { MessageInputHeightStore } from '../../state-store/message-input-height-store';
+import { TextInputRef } from '../../types/react-native-compat';
 import { File } from '../../types/types';
 import { compressedImageURI } from '../../utils/compressImage';
 import { useAttachmentPickerContext } from '../attachmentPickerContext/AttachmentPickerContext';
@@ -78,7 +79,7 @@ export type LocalMessageInputContext = {
   stopVoiceRecording: () => Promise<void>;
 };
 
-export type InputBoxRef = TextInput & {
+export type InputBoxRef = TextInputRef & {
   clearState: () => void;
   restoreState: (text: string) => void;
 };
@@ -202,7 +203,7 @@ export type InputMessageInputContextValue = {
    *
    * @overrideType Function
    */
-  setInputRef?: (ref: TextInput | null) => void;
+  setInputRef?: (ref: TextInputRef | null) => void;
   showPollCreationDialog?: boolean;
   messageInputHeightStore: MessageInputHeightStore;
 };

package/src/contexts/themeContext/ThemeContext.tsx

@@ -16,15 +16,27 @@ export type DeepPartial<T> = {
   [P in keyof T]?: DeepPartial<T[P]>;
 };
 
+/**
+ * A custom theme passed to `<Chat style={...}>` / `<ThemeProvider style={...}>`: either a partial
+ * override tree or a complete `Theme`.
+ *
+ * `Theme` is listed first deliberately. A full `Theme` *is* structurally a valid `DeepPartial<Theme>`,
+ * but from React Native 0.87 the style types underpinning `Theme` are deep enough that asking
+ * TypeScript to prove it exceeds its instantiation depth limit (TS2589). Accepting `Theme` directly
+ * means neither the SDK nor integrators need the `as DeepPartial<Theme>` cast that used to be
+ * required, and the cheap branch is matched first.
+ */
+export type ThemeStyle = Theme | DeepPartial<Theme>;
+
 export type ThemeProviderInputValue = {
   mergedStyle?: Theme;
-  style?: DeepPartial<Theme>;
+  style?: ThemeStyle;
 };
 
 export type MergedThemesParams = {
-  style?: DeepPartial<Theme>;
+  style?: ThemeStyle;
   theme?: Theme;
-  scheme?: ColorSchemeName;
+  scheme?: ColorSchemeName | null;
 };
 
 export type ThemeContextValue = {

package/src/hooks/useAppStateListener.ts

@@ -2,7 +2,12 @@ import { useEffect, useRef } from 'react';
 import { AppState, AppStateStatus } from 'react-native';
 
 export const useAppStateListener = (onForeground?: () => void, onBackground?: () => void) => {
-  const appStateRef = useRef(AppState.currentState);
+  // React Native 0.87 widened `AppState.currentState` to `string | null | undefined` (it was
+  // `AppStateStatus` up to 0.86). Normalise once here so the comparisons below stay total on
+  // every supported version.
+  const appStateRef = useRef<AppStateStatus>(
+    (AppState.currentState as AppStateStatus | null | undefined) ?? 'unknown',
+  );
   const onForegroundRef = useRef(onForeground);
   const onBackgroundRef = useRef(onBackground);
 

package/src/hooks/usePrunableMessageList.ts

@@ -1,12 +1,11 @@
 import { useRef } from 'react';
 
-import { ViewToken } from 'react-native';
-
 import { Channel } from 'stream-chat';
 
 import { useStableCallback } from './useStableCallback';
 
 import { ChannelPropsWithContext } from '../components';
+import type { ViewToken } from '../types/react-native-compat';
 
 export type VisibleRangeConfig = { first: number; last: number; inverted: boolean };
 export type ViewabilityChangedCallbackInput = {

package/src/index.ts

@@ -17,6 +17,7 @@ export * from './icons';
 
 export * from './middlewares';
 
+export * from './types/react-native-compat';
 export * from './types/types';
 
 export * from './utils/patchMessageTextCommand';

package/src/nativeMultipartUpload.ts

@@ -250,7 +250,12 @@ export const createNativeMultipartUploader = (
     return undefined;
   }
 
-  const multipartUploadEventEmitter = options.eventEmitter ?? new NativeEventEmitter(nativeModule);
+  // 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.
+  const multipartUploadEventEmitter: NativeMultipartUploadEventEmitter =
+    options.eventEmitter ??
+    (new NativeEventEmitter(nativeModule) as unknown as NativeMultipartUploadEventEmitter);
 
   return async ({
     headers,

package/src/store/SqliteClient.ts

@@ -93,7 +93,7 @@ export class SqliteClient {
    * LogBox turns red.
    */
   private static recordError = (e: SqliteClientError) => {
-    this.logger?.('error', e.message, { tag: e.code });
+    SqliteClient.logger?.('error', e.message, { tag: e.code });
 
     throw e;
   };
@@ -109,10 +109,10 @@ export class SqliteClient {
    */
   static preflightEncryption = async () => {
     try {
-      this.preflightedKey = await this.resolveEncryptionKey();
+      SqliteClient.preflightedKey = await SqliteClient.resolveEncryptionKey();
     } catch (e) {
       if (e instanceof SqliteClientError) {
-        this.recordError(e);
+        SqliteClient.recordError(e);
       }
       throw e;
     }
@@ -125,7 +125,7 @@ export class SqliteClient {
    * cache of its users' messages.
    */
   private static resolveEncryptionKey = async () => {
-    const { getEncryptionKey } = this;
+    const { getEncryptionKey } = SqliteClient;
 
     if (!getEncryptionKey) {
       return undefined;
@@ -185,10 +185,11 @@ export class SqliteClient {
           'Please install "@op-engineering/op-sqlite" package to enable offline support',
         );
       }
-      const encryptionKey = this.preflightedKey ?? (await this.resolveEncryptionKey());
-      this.preflightedKey = undefined;
+      const encryptionKey =
+        SqliteClient.preflightedKey ?? (await SqliteClient.resolveEncryptionKey());
+      SqliteClient.preflightedKey = undefined;
 
-      this.db = sqlite.open({
+      SqliteClient.db = sqlite.open({
         location: SqliteClient.dbLocation,
         name: SqliteClient.dbName,
         ...(encryptionKey ? { encryptionKey } : {}),
@@ -198,12 +199,12 @@ export class SqliteClient {
       // any pages, but rather look at a connection level flag. The first failure
       // is going to be whatever actually reads something, which is going to be
       // the user_version read in initializeDatabase.
-      await this.db?.execute('PRAGMA foreign_keys = ON', []);
+      await SqliteClient.db?.execute('PRAGMA foreign_keys = ON', []);
     } catch (e) {
       if (e instanceof SqliteClientError) {
         throw e;
       }
-      this.logger?.('error', `Error opening database ${SqliteClient.dbName}`, {
+      SqliteClient.logger?.('error', `Error opening database ${SqliteClient.dbName}`, {
         error: e,
       });
       console.error(`Error opening database ${SqliteClient.dbName}: ${e}`);
@@ -212,13 +213,13 @@ export class SqliteClient {
 
   static closeDB = () => {
     try {
-      if (!this.db) {
+      if (!SqliteClient.db) {
         throw new Error('DB is not open or initialized.');
       }
-      this.db.close();
-      this.db = undefined;
+      SqliteClient.db.close();
+      SqliteClient.db = undefined;
     } catch (e) {
-      this.logger?.('error', `Error closing database ${SqliteClient.dbName}`, {
+      SqliteClient.logger?.('error', `Error closing database ${SqliteClient.dbName}`, {
         error: e,
       });
       console.error(`Error closing database ${SqliteClient.dbName}: ${e}`);
@@ -231,7 +232,7 @@ export class SqliteClient {
     }
 
     try {
-      if (!this.db) {
+      if (!SqliteClient.db) {
         throw new Error('DB is not open or initialized.');
       }
       // This is a workaround to make the executeBatch method work.
@@ -244,9 +245,9 @@ export class SqliteClient {
         }
         return query;
       });
-      await this.db.executeBatch(finalQueries);
+      await SqliteClient.db.executeBatch(finalQueries);
     } catch (e) {
-      this.logger?.('error', 'SqlBatch queries failed', {
+      SqliteClient.logger?.('error', 'SqlBatch queries failed', {
         error: e,
         queries,
       });
@@ -256,14 +257,14 @@ export class SqliteClient {
 
   static executeSql = async (query: string, params?: Scalar[]) => {
     try {
-      if (!this.db) {
+      if (!SqliteClient.db) {
         throw new Error('DB is not open or initialized.');
       }
-      const { rows } = await this.db.execute(query, params);
+      const { rows } = await SqliteClient.db.execute(query, params);
 
       return rows ? (rows as Record<string, string>[]) : [];
     } catch (e) {
-      this.logger?.('error', 'Sql single query failed', {
+      SqliteClient.logger?.('error', 'Sql single query failed', {
         error: e,
         query,
       });
@@ -276,24 +277,24 @@ export class SqliteClient {
       `DROP TABLE IF EXISTS ${table}`,
       [],
     ]);
-    this.logger?.('info', 'Dropping tables', {
+    SqliteClient.logger?.('info', 'Dropping tables', {
       tables: Object.keys(tables),
     });
     await SqliteClient.executeSqlBatch(queries);
   };
 
   static deleteDatabase = () => {
-    this.logger?.('info', 'deleteDatabase', {
+    SqliteClient.logger?.('info', 'deleteDatabase', {
       dbLocation: SqliteClient.dbLocation,
       dbname: SqliteClient.dbName,
     });
     try {
-      if (!this.db) {
+      if (!SqliteClient.db) {
         throw new Error('DB is not open or initialized.');
       }
-      this.db.delete();
+      SqliteClient.db.delete();
     } catch (e) {
-      this.logger?.('error', 'Error deleting DB', {
+      SqliteClient.logger?.('error', 'Error deleting DB', {
         dbLocation: SqliteClient.dbLocation,
         dbname: SqliteClient.dbName,
         error: e,
@@ -313,11 +314,11 @@ export class SqliteClient {
   static isUnreadableDbError = (e: unknown) => {
     const message = String((e as Error)?.message ?? e);
 
-    if (this.TRANSIENT_ERROR.test(message)) {
+    if (SqliteClient.TRANSIENT_ERROR.test(message)) {
       return false;
     }
 
-    return this.UNREADABLE_ERROR.test(message);
+    return SqliteClient.UNREADABLE_ERROR.test(message);
   };
 
   static initializeDatabase = async (): Promise<boolean> => {
@@ -347,11 +348,11 @@ export class SqliteClient {
       return true;
     } catch (e) {
       if (e instanceof SqliteClientError) {
-        this.recordError(e);
+        SqliteClient.recordError(e);
       }
 
-      if (this.isUnreadableDbError(e)) {
-        this.recordError(
+      if (SqliteClient.isUnreadableDbError(e)) {
+        SqliteClient.recordError(
           new SqliteClientError(
             'OFFLINE_DB_UNREADABLE',
             'The offline database exists but could not be read. Usually the encryption ' +
@@ -365,7 +366,7 @@ export class SqliteClient {
       }
 
       console.log('Error initializing DB', e);
-      this.logger?.('error', 'Error initializing DB', {
+      SqliteClient.logger?.('error', 'Error initializing DB', {
         dbLocation: SqliteClient.dbLocation,
         dbname: SqliteClient.dbName,
         error: e,
@@ -377,20 +378,20 @@ export class SqliteClient {
 
   static updateUserPragmaVersion = async (version: number) => {
     SqliteClient.logger?.('info', `updateUserPragmaVersion to ${version}`);
-    if (!this.db) {
+    if (!SqliteClient.db) {
       throw new Error('DB is not open or initialized.');
     }
-    await this.db.execute(`PRAGMA user_version = ${version}`, []);
+    await SqliteClient.db.execute(`PRAGMA user_version = ${version}`, []);
   };
 
   static getUserPragmaVersion = async () => {
     try {
-      if (!this.db) {
+      if (!SqliteClient.db) {
         throw new Error('DB is not open or initialized.');
       }
-      const { rows } = await this.db.execute('PRAGMA user_version', []);
+      const { rows } = await SqliteClient.db.execute('PRAGMA user_version', []);
       const result = rows ? rows : [];
-      this.logger?.('info', 'getUserPragmaVersion', {
+      SqliteClient.logger?.('info', 'getUserPragmaVersion', {
         result,
       });
       return result[0].user_version as number;
@@ -401,8 +402,8 @@ export class SqliteClient {
   };
 
   static resetDB = async () => {
-    this.logger?.('info', 'resetDB');
-    if (this.db) {
+    SqliteClient.logger?.('info', 'resetDB');
+    if (SqliteClient.db) {
       await SqliteClient.dropTables();
       SqliteClient.closeDB();
     }

package/src/types/react-native-compat.ts

@@ -0,0 +1,83 @@
+import type * as React from 'react';
+import type {
+  FlatList,
+  KeyboardEvent,
+  ScrollView,
+  SectionList,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+/**
+ * Portable React Native ref (host instance) types.
+ *
+ * React Native 0.87 made the Strict TypeScript API the default. Under it the core components are
+ * function components rather than classes, so a component type is no longer usable as its own ref
+ * type - `useRef<View>(null)` no longer type checks against `<View ref={...} />`. React Native now
+ * publishes dedicated instance types (`ViewInstance`, `TextInputInstance`, ...) instead.
+ *
+ * Those `*Instance` types do not exist on React Native < 0.87 and this SDK supports `>=0.76`, so we
+ * cannot import them directly. `React.ComponentRef<typeof X>` resolves to the correct instance type
+ * on *both* type generations - it is exactly how React Native itself defines `ViewInstance` and
+ * friends internally - so it is the portable spelling and the one to use throughout the SDK.
+ *
+ * When the SDK's minimum supported React Native reaches 0.87, these aliases can be swapped for the
+ * upstream `*Instance` types in a single edit.
+ */
+
+export type ViewRef = React.ComponentRef<typeof View>;
+export type TextRef = React.ComponentRef<typeof Text>;
+export type TextInputRef = React.ComponentRef<typeof TextInput>;
+export type ScrollViewRef = React.ComponentRef<typeof ScrollView>;
+export type FlatListRef<ItemT = unknown> = React.ComponentRef<typeof FlatList<ItemT>>;
+export type SectionListRef<ItemT = unknown> = React.ComponentRef<typeof SectionList<ItemT>>;
+
+/**
+ * `KeyboardEventListener` was dropped from React Native's root type exports in 0.87. It was only ever
+ * an alias for a handler taking a `KeyboardEvent`, so we re-declare it here rather than deep importing.
+ */
+export type KeyboardEventListener = (event: KeyboardEvent) => void;
+
+/**
+ * `ViewToken` and `ViewabilityConfig` are no longer exported from the `react-native` root under the
+ * Strict TypeScript API - `ViewToken` moved to `@react-native/virtualized-lists` (re-exported from
+ * the root as `ListViewToken`) and `ViewabilityConfig` is no longer re-exported at all. Both appear
+ * in this SDK's public message list surface, and neither spelling exists across the whole `>=0.76`
+ * range, so we declare them structurally. The shapes are stable and shared by `FlatList` and
+ * `@shopify/flash-list`.
+ *
+ * `index` is deliberately widened to `number | null | undefined`: React Native typed it `number | null`
+ * up to 0.86 and `number | undefined` from 0.87, and as consumers of the callback we must accept
+ * whichever the running version hands us.
+ */
+export type ViewToken<ItemT = unknown> = {
+  index: number | null | undefined;
+  isViewable: boolean;
+  item: ItemT;
+  key: string;
+  section?: unknown;
+};
+
+export type ViewabilityConfig = {
+  /**
+   * Minimum amount of time (in milliseconds) that an item must be physically viewable before the
+   * viewability callback will be fired.
+   */
+  minimumViewTime?: number | undefined;
+  /**
+   * Percent of viewport that must be covered for a partially occluded item to count as "viewable",
+   * 0-100. Fully visible items are always considered viewable.
+   */
+  viewAreaCoveragePercentThreshold?: number | undefined;
+  /**
+   * Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is
+   * visible rather than the fraction of the viewable area it covers.
+   */
+  itemVisiblePercentThreshold?: number | undefined;
+  /**
+   * Nothing is considered viewable until the user scrolls or `recordInteraction` is called after
+   * render.
+   */
+  waitForInteraction?: boolean | undefined;
+};

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.8.0"
+  "version": "9.8.1-beta.2"
 }