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

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

@@ -1,13 +1,12 @@
 import React from 'react';
 
-import type { TextInput } from 'react-native';
-
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
 import { OverlayProvider } from '../../../contexts';
 import type { InputBoxRef } from '../../../contexts/messageInputContext/MessageInputContext';
 import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels';
+import type { TextInputRef } from '../../../types/react-native-compat';
 import type { ChannelProps } from '../../Channel/Channel';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
@@ -136,7 +135,7 @@ describe('AutoCompleteInput', () => {
     const text = 'hello';
     const channelProps = {
       channel,
-      setInputRef: (ref: TextInput | null) => {
+      setInputRef: (ref: TextInputRef | null) => {
         inputRef = ref as InputBoxRef | null;
       },
     };

package/src/components/ChannelDetails/components/members/ChannelMemberList.tsx

@@ -149,7 +149,7 @@ const ChannelMemberListContent = ({
         keyExtractor={keyExtractor}
         ListEmptyComponent={emptyState}
         ListFooterComponent={
-          loading && members && members.length > 0 ? <ActivityIndicator /> : null
+          loading && members && members.length > 0 ? <ActivityIndicator /> : undefined
         }
         onEndReached={loadMore}
         onEndReachedThreshold={0.2}

package/src/components/ChannelDetails/components/navigation-section/MediaItem.tsx

@@ -7,6 +7,7 @@ import { useChatConfigContext } from '../../../../contexts/chatConfigContext/Cha
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../../theme';
+import type { ViewRef } from '../../../../types/react-native-compat';
 import { FileTypes } from '../../../../types/types';
 import { getResizedImageUrl } from '../../../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../../../utils/getUrlOfImageAttachment';
@@ -49,7 +50,7 @@ export const MediaItem = (props: MediaItemProps) => {
   } = useTheme();
   const { resizableCDNHosts } = useChatConfigContext();
   const styles = useStyles();
-  const containerRef = useRef<View>(null);
+  const containerRef = useRef<ViewRef>(null);
 
   const isVideo = attachment.type === FileTypes.Video;
   const url = attachment.thumb_url || getUrlOfImageAttachment(attachment);
@@ -65,7 +66,11 @@ export const MediaItem = (props: MediaItemProps) => {
       onPress={
         onPress
           ? () =>
-              onPress({ attachment, message, requesterNode: findNodeHandle(containerRef.current) })
+              onPress({
+                attachment,
+                message,
+                requesterNode: findNodeHandle(containerRef.current) ?? null,
+              })
           : undefined
       }
       ref={containerRef}

package/src/components/ChannelList/ChannelListView.tsx

@@ -133,7 +133,7 @@ const ChannelListViewWithContext = (props: ChannelListViewPropsWithContext) => {
     <>
       <FlatList
         contentContainerStyle={styles.flatListContentContainer}
-        data={channels}
+        data={channels ?? undefined}
         extraData={forceUpdate}
         keyExtractor={keyExtractor}
         ListEmptyComponent={

package/src/components/Chat/Chat.tsx

@@ -13,8 +13,7 @@ import { ChannelsStateProvider } from '../../contexts/channelsStateContext/Chann
 import { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useDebugContext } from '../../contexts/debugContext/DebugContext';
-import { DeepPartial, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
-import type { Theme } from '../../contexts/themeContext/utils/theme';
+import { ThemeProvider, ThemeStyle, useTheme } from '../../contexts/themeContext/ThemeContext';
 import {
   DEFAULT_USER_LANGUAGE,
   TranslationProvider,
@@ -201,7 +200,7 @@ export type ChatProps = Pick<ChatContextValue, 'client'> &
      *
      * @overrideType object
      */
-    style?: DeepPartial<Theme>;
+    style?: ThemeStyle;
   };
 
 const selector = (nextValue: OfflineDBState) =>
@@ -366,5 +365,5 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
 export const Chat = (props: PropsWithChildren<ChatProps>) => {
   const { theme } = useTheme();
 
-  return <ChatWithContext style={theme as DeepPartial<Theme>} {...props} />;
+  return <ChatWithContext style={theme} {...props} />;
 };

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -17,9 +17,21 @@ import { FileTypes } from '../../../types/types';
 import { Button } from '../../ui/Button/Button';
 import { SafeAreaView } from '../../UIComponents/SafeAreaViewWrapper';
 
-const ReanimatedSafeAreaView = Animated.createAnimatedComponent
-  ? Animated.createAnimatedComponent(SafeAreaView)
-  : SafeAreaView;
+// Never called - it exists only so `ReturnType` below can name the animated component's type.
+// Spelling it as `ReturnType<typeof Animated.createAnimatedComponent<typeof SafeAreaView>>`
+// directly resolves against the wrong overload (the `FlatList` one).
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used in type position only
+const createAnimatedSafeAreaViewType = () => Animated.createAnimatedComponent(SafeAreaView);
+
+/**
+ * `createAnimatedComponent` is guarded because a stripped-down Reanimated mock may not provide it.
+ * The result is asserted back to the animated component type on purpose: written as a bare ternary
+ * this types as the *union* of the animated and the plain component, so its `style` prop becomes
+ * their intersection - which from React Native 0.87 no longer accepts an animated style.
+ */
+const ReanimatedSafeAreaView = (
+  Animated.createAnimatedComponent ? Animated.createAnimatedComponent(SafeAreaView) : SafeAreaView
+) as ReturnType<typeof createAnimatedSafeAreaViewType>;
 
 export type ImageGalleryFooterCustomComponent = ({
   openGridView,

package/src/components/ImageGallery/hooks/useAnimatedGalleryStyle.tsx

@@ -15,6 +15,13 @@ type Props = {
 
 const oneEighth = 1 / 8;
 
+/**
+ * Named via `ReturnType` because Reanimated does not export `AnimatedStyleHandle` from its root.
+ * Without an explicit annotation the inferred return type inlines React Native's internal style
+ * helper types, which cannot be written into the emitted declarations (TS2883).
+ */
+type GalleryAnimatedStyle = ReturnType<typeof useAnimatedStyle<ImageStyle>>;
+
 export const useAnimatedGalleryStyle = ({
   currentIndexShared,
   index,
@@ -23,7 +30,7 @@ export const useAnimatedGalleryStyle = ({
   screenHeight,
   translateX,
   translateY,
-}: Props) => {
+}: Props): [GalleryAnimatedStyle, GalleryAnimatedStyle] => {
   const { vw } = useViewport();
 
   const screenWidth = vw(100);
@@ -64,7 +71,7 @@ export const useAnimatedGalleryStyle = ({
     };
   }, []);
 
-  const animatedStyles = useAnimatedStyle(() => {
+  const animatedStyles = useAnimatedStyle<ImageStyle>(() => {
     const xScaleOffset = 7 * screenWidth * (0.5 + index);
     const yScaleOffset = -screenHeight * 3.5;
     return {

package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx

@@ -8,7 +8,6 @@ import {
   Keyboard,
   KeyboardAvoidingViewProps,
   KeyboardEvent,
-  KeyboardEventListener,
   KeyboardMetrics,
   LayoutAnimation,
   LayoutChangeEvent,
@@ -22,6 +21,7 @@ import {
 } from 'react-native';
 
 import { KeyboardProvider } from '../../contexts/keyboardContext/KeyboardContext';
+import type { KeyboardEventListener, ViewRef } from '../../types/react-native-compat';
 
 export type KeyboardCompatibleViewProps = KeyboardAvoidingViewProps;
 
@@ -84,14 +84,14 @@ export class KeyboardCompatibleView extends React.Component<
   _keyboardEvent: KeyboardEvent | null = null;
   _subscriptions: EmitterSubscription[] = [];
   _appStateSubscription: NativeEventSubscription | null = null;
-  viewRef: React.RefObject<View | null>;
+  viewRef: React.RefObject<ViewRef | null>;
   _initialFrameHeight = 0;
   _bottom: number = 0;
 
   constructor(props: KeyboardAvoidingViewProps) {
     super(props);
     this.state = {
-      appState: AppState.currentState,
+      appState: (AppState.currentState as AppStateStatus | null | undefined) ?? 'unknown',
       bottom: 0,
       isKeyboardOpen: false,
     };

package/src/components/Message/Message.tsx

@@ -68,6 +68,7 @@ import {
   useIsOverlayActive,
 } from '../../state-store';
 import { primitives } from '../../theme';
+import type { ViewRef } from '../../types/react-native-compat';
 import { FileTypes } from '../../types/types';
 import {
   checkMessageEquality,
@@ -359,10 +360,10 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
 
   const rectRef = useRef<Rect>(undefined);
   const bubbleRect = useRef<Rect>(undefined);
-  const contextMenuAnchorRef = useRef<View>(null);
-  const messageOverlayTargetsRef = useRef<Record<string, View | null>>({});
+  const contextMenuAnchorRef = useRef<ViewRef>(null);
+  const messageOverlayTargetsRef = useRef<Record<string, ViewRef | null>>({});
   const registerMessageOverlayTarget = useStableCallback(
-    ({ id, view }: { id: string; view: View | null }) => {
+    ({ id, view }: { id: string; view: ViewRef | null }) => {
       messageOverlayTargetsRef.current[id] = view;
     },
   );

package/src/components/Message/MessageItemView/MessageContent.tsx

@@ -197,14 +197,16 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
       }
     }
 
+    // Built in one literal rather than by mutation: React Native 0.87 types style objects as
+    // `Readonly`, so assigning onto an already-typed `ViewStyle` no longer compiles.
     const style: ViewStyle = {
       backgroundColor,
       borderBottomLeftRadius: borderBottomLeftRadius ?? computedBottomLeftRadius,
       borderBottomRightRadius: borderBottomRightRadius ?? computedBottomRightRadius,
+      ...(borderRadius !== undefined ? { borderRadius } : {}),
+      ...(borderTopLeftRadius !== undefined ? { borderTopLeftRadius } : {}),
+      ...(borderTopRightRadius !== undefined ? { borderTopRightRadius } : {}),
     };
-    if (borderRadius !== undefined) style.borderRadius = borderRadius;
-    if (borderTopLeftRadius !== undefined) style.borderTopLeftRadius = borderTopLeftRadius;
-    if (borderTopRightRadius !== undefined) style.borderTopRightRadius = borderTopRightRadius;
 
     return style;
   }, [

package/src/components/Message/MessageItemView/__tests__/MessageAuthor.test.tsx

@@ -3,8 +3,6 @@ import React from 'react';
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 import type { StreamChat } from 'stream-chat';
 
-import type { DeepPartial } from '../../../../contexts/themeContext/ThemeContext';
-import type { Theme } from '../../../../contexts/themeContext/utils/theme';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
 import {
   generateMessage,
@@ -30,7 +28,7 @@ describe('MessageAuthor', () => {
       user: { ...staticUser, image: undefined },
     });
     render(
-      <Chat client={chatClient} style={defaultTheme as DeepPartial<Theme>}>
+      <Chat client={chatClient} style={defaultTheme}>
         <MessageAuthor message={message} />
       </Chat>,
     );
@@ -40,7 +38,7 @@ describe('MessageAuthor', () => {
     });
 
     screen.rerender(
-      <Chat client={chatClient} style={defaultTheme as DeepPartial<Theme>}>
+      <Chat client={chatClient} style={defaultTheme}>
         <MessageAuthor message={message} />
       </Chat>,
     );
@@ -55,7 +53,7 @@ describe('MessageAuthor', () => {
     });
 
     screen.rerender(
-      <Chat client={chatClient} style={defaultTheme as DeepPartial<Theme>}>
+      <Chat client={chatClient} style={defaultTheme}>
         <MessageAuthor message={staticMessage} showAvatar />
       </Chat>,
     );

package/src/components/Message/MessageItemView/__tests__/MessagePinnedHeader.test.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
-import type { DeepPartial } from '../../../../contexts/themeContext/ThemeContext';
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
-import type { Theme } from '../../../../contexts/themeContext/utils/theme';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
 import {
   generateMessage,
@@ -23,7 +21,7 @@ describe('MessagePinnedHeader', () => {
       pinned: true,
     });
     render(
-      <ThemeProvider style={defaultTheme as DeepPartial<Theme>}>
+      <ThemeProvider style={defaultTheme}>
         <MessagePinnedHeader message={message} />
       </ThemeProvider>,
     );
@@ -33,7 +31,7 @@ describe('MessagePinnedHeader', () => {
     });
 
     screen.rerender(
-      <ThemeProvider style={defaultTheme as DeepPartial<Theme>}>
+      <ThemeProvider style={defaultTheme}>
         <MessagePinnedHeader message={message} />
       </ThemeProvider>,
     );
@@ -44,7 +42,7 @@ describe('MessagePinnedHeader', () => {
     });
 
     screen.rerender(
-      <ThemeProvider style={defaultTheme as DeepPartial<Theme>}>
+      <ThemeProvider style={defaultTheme}>
         <MessagePinnedHeader message={staticMessage} />
       </ThemeProvider>,
     );

package/src/components/Message/MessageItemView/__tests__/MessageReplies.test.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 
 import { cleanup, render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
-import type { DeepPartial } from '../../../../contexts/themeContext/ThemeContext';
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
-import type { Theme } from '../../../../contexts/themeContext/utils/theme';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
 import type { TranslationContextValue } from '../../../../contexts/translationContext/TranslationContext';
 import { TranslationProvider } from '../../../../contexts/translationContext/TranslationContext';
@@ -26,7 +24,7 @@ describe('MessageReplies', () => {
     });
     render(
       <TranslationProvider value={{ t } as unknown as TranslationContextValue}>
-        <ThemeProvider style={defaultTheme as DeepPartial<Theme>}>
+        <ThemeProvider style={defaultTheme}>
           <MessageReplies alignment='right' message={message} />
         </ThemeProvider>
       </TranslationProvider>,
@@ -51,7 +49,7 @@ describe('MessageReplies', () => {
 
     screen.rerender(
       <TranslationProvider value={{ t } as unknown as TranslationContextValue}>
-        <ThemeProvider style={defaultTheme as DeepPartial<Theme>}>
+        <ThemeProvider style={defaultTheme}>
           <MessageReplies alignment='left' message={message2} onPress={onPressMock} />
         </ThemeProvider>
       </TranslationProvider>,
@@ -79,7 +77,7 @@ describe('MessageReplies', () => {
     });
     render(
       <TranslationProvider value={{ t } as unknown as TranslationContextValue}>
-        <ThemeProvider style={defaultTheme as DeepPartial<Theme>}>
+        <ThemeProvider style={defaultTheme}>
           <MessageReplies alignment='right' message={message} onPress={() => null} />
         </ThemeProvider>
       </TranslationProvider>,
@@ -96,7 +94,7 @@ describe('MessageReplies', () => {
 
     screen.rerender(
       <TranslationProvider value={{ t } as unknown as TranslationContextValue}>
-        <ThemeProvider style={defaultTheme as DeepPartial<Theme>}>
+        <ThemeProvider style={defaultTheme}>
           <MessageReplies alignment='right' message={message2} onPress={() => null} threadList />
         </ThemeProvider>
       </TranslationProvider>,

package/src/components/Message/MessageItemView/utils/renderText.tsx

@@ -333,7 +333,11 @@ export const renderText = (params: RenderTextParams) => {
   const onLink = (url: string) =>
     onLinkParams
       ? onLinkParams(url)
-      : Linking.canOpenURL(url).then((canOpenUrl) => canOpenUrl && Linking.openURL(url));
+      : Linking.canOpenURL(url).then(async (canOpenUrl) => {
+          if (canOpenUrl) {
+            await Linking.openURL(url);
+          }
+        });
 
   let previousLink: string | undefined;
   const linkReact: ReactNodeOutput = (node, output, { ...state }) => {

package/src/components/Message/MessageOverlayWrapper.tsx

@@ -8,6 +8,7 @@ import {
   useMessageContext,
   useMessageOverlayRuntimeContext,
 } from '../../contexts/messageContext/MessageContext';
+import type { ViewRef } from '../../types/react-native-compat';
 
 export type MessageOverlayWrapperProps = PropsWithChildren<{
   /**
@@ -37,7 +38,7 @@ export const MessageOverlayWrapper = ({
   const placeholderLayout = overlayTargetRectRef.current;
 
   const handleTargetRef = useCallback(
-    (view: View | null) => {
+    (view: ViewRef | null) => {
       registerMessageOverlayTarget({
         id: targetId,
         view,

package/src/components/Message/utils/__tests__/measureInWindow.test.ts

@@ -1,7 +1,9 @@
-import { Dimensions, Platform, View } from 'react-native';
+import { Dimensions, Platform } from 'react-native';
 
 import type { EdgeInsets } from 'react-native-safe-area-context';
 
+import type { ViewRef } from '../../../../types/react-native-compat';
+
 import { isMeasuredRectBogus, measureInWindow } from '../measureInWindow';
 
 // `measureInWindow` is globally mocked in jest-setup so other suites don't hit native
@@ -42,14 +44,14 @@ const makeNode = ({
 }: {
   measure?: MeasureTuple;
   measureInWindow: MeasureInWindowTuple;
-}): { current: View | null } => {
+}): { current: ViewRef | null } => {
   const handle: Record<string, unknown> = {
     measureInWindow: (cb: (...args: MeasureInWindowTuple) => void) => cb(...miw),
   };
   if (measure) {
     handle.measure = (cb: (...args: MeasureTuple) => void) => cb(...measure);
   }
-  return { current: handle as unknown as View };
+  return { current: handle as unknown as ViewRef };
 };
 
 describe('isMeasuredRectBogus', () => {

package/src/components/Message/utils/measureInWindow.ts

@@ -1,7 +1,10 @@
 import React from 'react';
-import { Dimensions, Platform, View } from 'react-native';
+import { Dimensions, Platform } from 'react-native';
+
 import { EdgeInsets } from 'react-native-safe-area-context';
 
+import type { ViewRef } from '../../../types/react-native-compat';
+
 import { isRN86OrGreater } from '../../../utils/react-native-constants';
 
 type MeasuredRect = { x: number; y: number; w: number; h: number };
@@ -49,7 +52,7 @@ export const isMeasuredRectBogus = (x: number, y: number, w: number, h: number):
 };
 
 export const measureInWindow = (
-  node: React.RefObject<View | null>,
+  node: React.RefObject<ViewRef | null>,
   insets: EdgeInsets,
 ): Promise<MeasuredRect> => {
   return new Promise((resolve, reject) => {

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx

@@ -32,6 +32,7 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useLazyRef } from '../../../../hooks/useLazyRef';
 import { isSoundPackageAvailable } from '../../../../native';
 import { primitives } from '../../../../theme';
+import type { ScrollViewRef } from '../../../../types/react-native-compat';
 
 const END_ANCHOR_THRESHOLD = 16;
 const ATTACHMENT_PREVIEW_ANIMATION_DURATION = 200;
@@ -97,7 +98,7 @@ const UnMemoizedAttachmentUploadPreviewList = () => {
   const { attachmentManager } = useMessageComposer();
   const { attachments } = useAttachmentManagerState();
   const isRTL = I18nManager.isRTL;
-  const attachmentListRef = useRef<ScrollView>(null);
+  const attachmentListRef = useRef<ScrollViewRef>(null);
   const soundPackageAvailable = useMemo(() => isSoundPackageAvailable(), []);
   const isAudioAttachmentPreview = useMemo(
     () => getIsAudioAttachmentPreview(soundPackageAvailable),