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

package/src/components/MessageList/MessageFlashList.tsx

@@ -1,13 +1,5 @@
 import React, { PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  LayoutChangeEvent,
-  ScrollViewProps,
-  StyleSheet,
-  View,
-  useColorScheme,
-  ViewabilityConfig,
-  ViewToken,
-} from 'react-native';
+import { LayoutChangeEvent, ScrollViewProps, StyleSheet, View, useColorScheme } from 'react-native';
 
 import Animated from 'react-native-reanimated';
 
@@ -60,6 +52,7 @@ import { isVideoPlayerAvailable } from '../../native';
 import { bumpOverlayLayoutRevision, useHasActiveId } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
+import type { ScrollViewRef, ViewabilityConfig, ViewToken } from '../../types/react-native-compat';
 import { FileTypes } from '../../types/types';
 import { transitions } from '../../utils/animations/transitions';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
@@ -680,97 +673,103 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     threadList,
   ]);
 
-  const updateStickyHeaderDateIfNeeded = useStableCallback((viewableItems: ViewToken[]) => {
-    if (!viewableItems.length) {
-      return;
-    }
+  const updateStickyHeaderDateIfNeeded = useStableCallback(
+    (viewableItems: ViewToken<LocalMessage>[]) => {
+      if (!viewableItems.length) {
+        return;
+      }
 
-    const lastItem = viewableItems[0];
+      const lastItem = viewableItems[0];
 
-    if (!lastItem) return;
+      if (!lastItem) return;
 
-    if (
-      !channel.state.messagePagination.hasPrev &&
-      processedMessageList[0].id === lastItem.item.id
-    ) {
-      setStickyHeaderDate(undefined);
-      return;
-    }
-    const isMessageTypeDeleted = lastItem.item.type === 'deleted';
+      if (
+        !channel.state.messagePagination.hasPrev &&
+        processedMessageList[0].id === lastItem.item.id
+      ) {
+        setStickyHeaderDate(undefined);
+        return;
+      }
+      const isMessageTypeDeleted = lastItem.item.type === 'deleted';
 
-    if (
-      lastItem?.item?.created_at &&
-      !isMessageTypeDeleted &&
-      typeof lastItem.item.created_at !== 'string' &&
-      lastItem.item.created_at.toDateString() !== stickyHeaderDateRef.current?.toDateString()
-    ) {
-      stickyHeaderDateRef.current = lastItem.item.created_at;
-      setStickyHeaderDate(lastItem.item.created_at);
-    }
-  });
+      if (
+        lastItem?.item?.created_at &&
+        !isMessageTypeDeleted &&
+        typeof lastItem.item.created_at !== 'string' &&
+        lastItem.item.created_at.toDateString() !== stickyHeaderDateRef.current?.toDateString()
+      ) {
+        stickyHeaderDateRef.current = lastItem.item.created_at;
+        setStickyHeaderDate(lastItem.item.created_at);
+      }
+    },
+  );
 
   /**
    * This function should show or hide the unread indicator depending on the
    */
-  const updateStickyUnreadIndicator = useStableCallback((viewableItems: ViewToken[]) => {
-    const channelUnreadState = channelUnreadStateStore.channelUnreadState;
-    // we need this check to make sure that regular list change do not trigger
-    // the unread notification to appear (for example if the old last read messages
-    // go out of the viewport).
-    const lastReadMessageId = channelUnreadState?.last_read_message_id;
-    const lastReadMessageVisible = viewableItems.some((item) => item.item.id === lastReadMessageId);
-
-    // Channels with disabled `read-events` (i.e livestreams) still surface the unread
-    // notification when the client opted into a local unread count, so the gate accepts
-    // either source.
-    const unreadNotificationSupported = readEvents || client.options.isLocalUnreadCountEnabled;
+  const updateStickyUnreadIndicator = useStableCallback(
+    (viewableItems: ViewToken<LocalMessage>[]) => {
+      const channelUnreadState = channelUnreadStateStore.channelUnreadState;
+      // we need this check to make sure that regular list change do not trigger
+      // the unread notification to appear (for example if the old last read messages
+      // go out of the viewport).
+      const lastReadMessageId = channelUnreadState?.last_read_message_id;
+      const lastReadMessageVisible = viewableItems.some(
+        (item) => item.item.id === lastReadMessageId,
+      );
 
-    if (
-      !viewableItems.length ||
-      !unreadNotificationSupported ||
-      lastReadMessageVisible ||
-      attachmentPickerStore.state.getLatestValue().selectedPicker === 'images'
-    ) {
-      setIsUnreadNotificationOpen(false);
-      return;
-    }
+      // Channels with disabled `read-events` (i.e livestreams) still surface the unread
+      // notification when the client opted into a local unread count, so the gate accepts
+      // either source.
+      const unreadNotificationSupported = readEvents || client.options.isLocalUnreadCountEnabled;
 
-    const lastItem = viewableItems[0];
+      if (
+        !viewableItems.length ||
+        !unreadNotificationSupported ||
+        lastReadMessageVisible ||
+        attachmentPickerStore.state.getLatestValue().selectedPicker === 'images'
+      ) {
+        setIsUnreadNotificationOpen(false);
+        return;
+      }
 
-    if (!lastItem) return;
+      const lastItem = viewableItems[0];
 
-    const lastItemMessage = lastItem.item;
-    const lastItemCreatedAt = lastItemMessage.created_at;
+      if (!lastItem) return;
 
-    const unreadIndicatorDate = channelUnreadState?.last_read?.getTime();
-    const lastItemDate = lastItemCreatedAt.getTime();
+      const lastItemMessage = lastItem.item;
+      const lastItemCreatedAt = lastItemMessage.created_at;
 
-    if (
-      !channel.state.messagePagination.hasPrev &&
-      processedMessageList[0].id === lastItemMessage.id
-    ) {
-      setIsUnreadNotificationOpen(false);
-      return;
-    }
-    /**
-     * This is a special case where there is a single long message by the sender.
-     * When a message is sent, we mark it as read before it actually has a `created_at` timestamp.
-     * This is a workaround to prevent the unread indicator from showing when the message is sent.
-     */
-    if (
-      viewableItems.length === 1 &&
-      channel.countUnread() === 0 &&
-      lastItemMessage.user.id === client.userID
-    ) {
-      setIsUnreadNotificationOpen(false);
-      return;
-    }
-    if (unreadIndicatorDate && lastItemDate > unreadIndicatorDate) {
-      setIsUnreadNotificationOpen(true);
-    } else {
-      setIsUnreadNotificationOpen(false);
-    }
-  });
+      const unreadIndicatorDate = channelUnreadState?.last_read?.getTime();
+      const lastItemDate = lastItemCreatedAt.getTime();
+
+      if (
+        !channel.state.messagePagination.hasPrev &&
+        processedMessageList[0].id === lastItemMessage.id
+      ) {
+        setIsUnreadNotificationOpen(false);
+        return;
+      }
+      /**
+       * This is a special case where there is a single long message by the sender.
+       * When a message is sent, we mark it as read before it actually has a `created_at` timestamp.
+       * This is a workaround to prevent the unread indicator from showing when the message is sent.
+       */
+      if (
+        viewableItems.length === 1 &&
+        channel.countUnread() === 0 &&
+        lastItemMessage.user?.id === client.userID
+      ) {
+        setIsUnreadNotificationOpen(false);
+        return;
+      }
+      if (unreadIndicatorDate && lastItemDate > unreadIndicatorDate) {
+        setIsUnreadNotificationOpen(true);
+      } else {
+        setIsUnreadNotificationOpen(false);
+      }
+    },
+  );
 
   /**
    * FlatList doesn't accept changeable function for onViewableItemsChanged prop.
@@ -779,7 +778,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   const unstableOnViewableItemsChanged = ({
     viewableItems,
   }: {
-    viewableItems: ViewToken[] | undefined;
+    viewableItems: ViewToken<LocalMessage>[] | undefined;
   }) => {
     if (!viewableItems) {
       return;
@@ -795,7 +794,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   onViewableItemsChanged.current = unstableOnViewableItemsChanged;
 
   const stableOnViewableItemsChanged = useCallback(
-    ({ viewableItems }: { viewableItems: ViewToken[] | undefined }) => {
+    ({ viewableItems }: { viewableItems: ViewToken<LocalMessage>[] | undefined }) => {
       onViewableItemsChanged.current({ viewableItems });
     },
     [],
@@ -1085,8 +1084,18 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     bumpOverlayLayoutRevision(closeCorrectionDeltaY);
 
     const changedBy = currentListHeightRef.current - height;
-    flashListRef.current?.getNativeScrollRef()?.setNativeProps({
-      contentOffset: { x: 0, y: flashListRef.current?.getAbsoluteLastScrollOffset() + changedBy },
+    // `getNativeScrollRef()` is typed as returning the `ScrollView` *component* by flash-list,
+    // which under React Native 0.87's Strict TypeScript API is a function type rather than the
+    // host instance it actually returns at runtime. Re-assert the instance type.
+    const nativeScrollRef = flashListRef.current?.getNativeScrollRef() as
+      | ScrollViewRef
+      | null
+      | undefined;
+    nativeScrollRef?.setNativeProps({
+      contentOffset: {
+        x: 0,
+        y: (flashListRef.current?.getAbsoluteLastScrollOffset() ?? 0) + changedBy,
+      },
     });
     currentListHeightRef.current = height;
   });

package/src/components/MessageList/MessageList.tsx

@@ -8,8 +8,6 @@ import {
   StyleSheet,
   View,
   useColorScheme,
-  ViewabilityConfig,
-  ViewToken,
 } from 'react-native';
 
 import Animated from 'react-native-reanimated';
@@ -72,6 +70,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 import { bumpOverlayLayoutRevision, useHasActiveId } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
+import type { ViewabilityConfig, ViewToken } from '../../types/react-native-compat';
 import { transitions } from '../../utils/animations/transitions';
 import { useIncomingMessageAnnouncements } from '../Accessibility/hooks/useIncomingMessageAnnouncements';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
@@ -515,99 +514,103 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const channelRef = useRef(channel);
   channelRef.current = channel;
 
-  const updateStickyHeaderDateIfNeeded = useStableCallback((viewableItems: ViewToken[]) => {
-    if (!viewableItems.length) {
-      return;
-    }
-
-    const lastMessage = viewableItems[viewableItems.length - 1].item?.message;
-
-    if (lastMessage) {
-      if (
-        !channel.state.messagePagination.hasPrev &&
-        processedMessageList[processedMessageList.length - 1].id === lastMessage.id
-      ) {
-        setStickyHeaderDate(undefined);
+  const updateStickyHeaderDateIfNeeded = useStableCallback(
+    (viewableItems: ViewToken<MessageListItemWithNeighbours>[]) => {
+      if (!viewableItems.length) {
         return;
       }
-      const isMessageTypeDeleted = lastMessage.type === 'deleted';
 
-      if (
-        lastMessage?.created_at &&
-        !isMessageTypeDeleted &&
-        typeof lastMessage.created_at !== 'string' &&
-        lastMessage.created_at.toDateString() !== stickyHeaderDateRef.current?.toDateString()
-      ) {
-        stickyHeaderDateRef.current = lastMessage.created_at;
-        setStickyHeaderDate(lastMessage.created_at);
+      const lastMessage = viewableItems[viewableItems.length - 1].item?.message;
+
+      if (lastMessage) {
+        if (
+          !channel.state.messagePagination.hasPrev &&
+          processedMessageList[processedMessageList.length - 1].id === lastMessage.id
+        ) {
+          setStickyHeaderDate(undefined);
+          return;
+        }
+        const isMessageTypeDeleted = lastMessage.type === 'deleted';
+
+        if (
+          lastMessage?.created_at &&
+          !isMessageTypeDeleted &&
+          typeof lastMessage.created_at !== 'string' &&
+          lastMessage.created_at.toDateString() !== stickyHeaderDateRef.current?.toDateString()
+        ) {
+          stickyHeaderDateRef.current = lastMessage.created_at;
+          setStickyHeaderDate(lastMessage.created_at);
+        }
       }
-    }
-  });
+    },
+  );
 
   /**
    * This function should show or hide the unread indicator depending on the
    */
-  const updateStickyUnreadIndicator = useStableCallback((viewableItems: ViewToken[]) => {
-    const channelUnreadState = channelUnreadStateStore.channelUnreadState;
-    // we need this check to make sure that regular list change do not trigger
-    // the unread notification to appear (for example if the old last read messages
-    // go out of the viewport).
-    const lastReadMessageId = channelUnreadState?.last_read_message_id;
-    const lastReadMessageVisible = viewableItems.some(
-      (item) => item.item.message.id === lastReadMessageId,
-    );
-
-    // Channels with disabled `read-events` (i.e livestreams) still surface the unread
-    // notification when the client opted into a local unread count, so the gate accepts
-    // either source.
-    const unreadNotificationSupported = readEvents || client.options.isLocalUnreadCountEnabled;
-
-    if (
-      !viewableItems.length ||
-      !unreadNotificationSupported ||
-      lastReadMessageVisible ||
-      attachmentPickerStore.state.getLatestValue().selectedPicker === 'images'
-    ) {
-      setIsUnreadNotificationOpen(false);
-      return;
-    }
-
-    const lastItem = viewableItems[viewableItems.length - 1].item;
-
-    if (lastItem) {
-      const lastItemMessage = lastItem.message;
-      const lastItemCreatedAt = lastItemMessage.created_at;
+  const updateStickyUnreadIndicator = useStableCallback(
+    (viewableItems: ViewToken<MessageListItemWithNeighbours>[]) => {
+      const channelUnreadState = channelUnreadStateStore.channelUnreadState;
+      // we need this check to make sure that regular list change do not trigger
+      // the unread notification to appear (for example if the old last read messages
+      // go out of the viewport).
+      const lastReadMessageId = channelUnreadState?.last_read_message_id;
+      const lastReadMessageVisible = viewableItems.some(
+        (item) => item.item.message.id === lastReadMessageId,
+      );
 
-      const unreadIndicatorDate = channelUnreadState?.last_read?.getTime();
-      const lastItemDate = lastItemCreatedAt.getTime();
+      // Channels with disabled `read-events` (i.e livestreams) still surface the unread
+      // notification when the client opted into a local unread count, so the gate accepts
+      // either source.
+      const unreadNotificationSupported = readEvents || client.options.isLocalUnreadCountEnabled;
 
       if (
-        !channel.state.messagePagination.hasPrev &&
-        processedMessageList[processedMessageList.length - 1].id === lastItemMessage.id
-      ) {
-        setIsUnreadNotificationOpen(false);
-        return;
-      }
-      /**
-       * This is a special case where there is a single long message by the sender.
-       * When a message is sent, we mark it as read before it actually has a `created_at` timestamp.
-       * This is a workaround to prevent the unread indicator from showing when the message is sent.
-       */
-      if (
-        viewableItems.length === 1 &&
-        channel.countUnread() === 0 &&
-        lastItemMessage.user.id === client.userID
+        !viewableItems.length ||
+        !unreadNotificationSupported ||
+        lastReadMessageVisible ||
+        attachmentPickerStore.state.getLatestValue().selectedPicker === 'images'
       ) {
         setIsUnreadNotificationOpen(false);
         return;
       }
-      if (unreadIndicatorDate && lastItemDate > unreadIndicatorDate) {
-        setIsUnreadNotificationOpen(true);
-      } else {
-        setIsUnreadNotificationOpen(false);
+
+      const lastItem = viewableItems[viewableItems.length - 1].item;
+
+      if (lastItem) {
+        const lastItemMessage = lastItem.message;
+        const lastItemCreatedAt = lastItemMessage.created_at;
+
+        const unreadIndicatorDate = channelUnreadState?.last_read?.getTime();
+        const lastItemDate = lastItemCreatedAt.getTime();
+
+        if (
+          !channel.state.messagePagination.hasPrev &&
+          processedMessageList[processedMessageList.length - 1].id === lastItemMessage.id
+        ) {
+          setIsUnreadNotificationOpen(false);
+          return;
+        }
+        /**
+         * This is a special case where there is a single long message by the sender.
+         * When a message is sent, we mark it as read before it actually has a `created_at` timestamp.
+         * This is a workaround to prevent the unread indicator from showing when the message is sent.
+         */
+        if (
+          viewableItems.length === 1 &&
+          channel.countUnread() === 0 &&
+          lastItemMessage.user?.id === client.userID
+        ) {
+          setIsUnreadNotificationOpen(false);
+          return;
+        }
+        if (unreadIndicatorDate && lastItemDate > unreadIndicatorDate) {
+          setIsUnreadNotificationOpen(true);
+        } else {
+          setIsUnreadNotificationOpen(false);
+        }
       }
-    }
-  });
+    },
+  );
 
   /**
    * FlatList doesn't accept changeable function for onViewableItemsChanged prop.
@@ -616,7 +619,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const unstableOnViewableItemsChanged = ({
     viewableItems,
   }: {
-    viewableItems: ViewToken[] | undefined;
+    viewableItems: ViewToken<MessageListItemWithNeighbours>[] | undefined;
   }) => {
     viewabilityChangedCallback({ inverted, viewableItems });
 
@@ -633,7 +636,11 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   onViewableItemsChanged.current = unstableOnViewableItemsChanged;
 
   const stableOnViewableItemsChanged = useCallback(
-    ({ viewableItems }: { viewableItems: ViewToken[] | undefined }) => {
+    ({
+      viewableItems,
+    }: {
+      viewableItems: ViewToken<MessageListItemWithNeighbours>[] | undefined;
+    }) => {
       onViewableItemsChanged.current({ viewableItems });
     },
     [],
@@ -1199,6 +1206,17 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     [additionalFlatListProps?.style, styles.listContainer],
   );
 
+  /**
+   * `strictMode` only became a `FlatList` prop in React Native 0.87, and this SDK supports `>=0.76`.
+   * Passed via spread rather than as a literal attribute because JSX excess-property checking does
+   * not apply to spreads, so this compiles on every supported version. A `@ts-expect-error` cannot
+   * work here: it is required below 0.87 and reported as unused from 0.87 onwards.
+   */
+  const liveStreamingListProps = useMemo(
+    () => ({ strictMode: isLiveStreaming }),
+    [isLiveStreaming],
+  );
+
   const flatListContentContainerStyle = useMemo(
     () => [
       { paddingTop: messageInputFloating ? messageInputHeight : 0 },
@@ -1337,11 +1355,10 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
             renderItem={renderItem}
             scrollEventThrottle={isLiveStreaming ? 16 : undefined}
             showsVerticalScrollIndicator={false}
-            // @ts-expect-error Safe to do for now
-            strictMode={isLiveStreaming}
             style={flatListStyle}
             testID='message-flat-list'
             viewabilityConfig={flatListViewabilityConfig}
+            {...liveStreamingListProps}
             {...additionalFlatListPropsExcludingStyle}
             accessibilityActions={messageListAccessibilityActions}
             onAccessibilityAction={messageListOnAccessibilityAction}

package/src/components/MessageList/hooks/useScrollToBottomAccessibilityAction.ts

@@ -1,6 +1,6 @@
 import { useContext, useMemo } from 'react';
 
-import type { AccessibilityActionEvent, AccessibilityProps } from 'react-native';
+import type { AccessibilityActionEvent, ViewProps } from 'react-native';
 
 import { mergeAccessibilityActions } from '../../../a11y/a11yUtils';
 import { useAccessibilityContext } from '../../../contexts/accessibilityContext/AccessibilityContext';
@@ -13,8 +13,20 @@ import {
 
 export const SCROLL_TO_BOTTOM_ACCESSIBILITY_ACTION_NAME = 'streamScrollToBottom';
 
-type AccessibilityActions = AccessibilityProps['accessibilityActions'];
-type OnAccessibilityAction = AccessibilityProps['onAccessibilityAction'];
+type AccessibilityActions = ViewProps['accessibilityActions'];
+type OnAccessibilityAction = ViewProps['onAccessibilityAction'];
+
+/**
+ * Declared explicitly rather than inferred. Left to inference, TypeScript expands
+ * `AccessibilityActionEvent` into its structural shape when emitting the declaration, and that
+ * shape names `HostInstance` - which React Native only exports from 0.78, while this SDK supports
+ * `>=0.76`. Naming the props here keeps the emitted `.d.ts` referring to `ViewProps[...]`, which
+ * resolves against whichever React Native the consumer actually has.
+ */
+export type UseScrollToBottomAccessibilityActionResult = {
+  accessibilityActions: AccessibilityActions;
+  onAccessibilityAction: OnAccessibilityAction;
+};
 
 type UseScrollToBottomAccessibilityActionParams = {
   accessibilityActions?: AccessibilityActions;
@@ -30,7 +42,7 @@ export const useScrollToBottomAccessibilityAction = ({
   onScrollToBottom,
   unreadCount,
   visible,
-}: UseScrollToBottomAccessibilityActionParams) => {
+}: UseScrollToBottomAccessibilityActionParams): UseScrollToBottomAccessibilityActionResult => {
   const { enabled } = useAccessibilityContext();
   const { t } = useContext(TranslationContext);
 

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+
 import { FlatList } from 'react-native-gesture-handler';
 
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
@@ -25,6 +26,7 @@ import { useTranslationContext } from '../../contexts/translationContext/Transla
 import { useStableCallback } from '../../hooks';
 import { IconProps } from '../../icons';
 import { primitives } from '../../theme';
+import type { FlatListRef } from '../../types/react-native-compat';
 import { Reaction } from '../../types/types';
 import { ReactionData } from '../../utils/utils';
 import { Button } from '../ui';
@@ -100,7 +102,7 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
     selectedReaction: propSelectedReaction,
     supportedReactions: propSupportedReactions,
   } = props;
-  const selectorListRef = useRef<FlatList>(null);
+  const selectorListRef = useRef<FlatListRef<ReactionSelectorItemType>>(null);
   const { close } = useBottomSheetContext();
   const reactionTypes = useMemo(
     () => Object.keys(message?.reaction_groups ?? {}),

package/src/components/MessageMenu/__tests__/MessageUserReactionsAvatar.test.tsx

@@ -4,8 +4,6 @@ import { render } 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 { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Chat } from '../../Chat/Chat';
@@ -21,7 +19,7 @@ describe('MessageUserReactionsAvatar', () => {
 
   it('should render Avatar with correct image, name, and default size', () => {
     const { queryByTestId } = render(
-      <Chat client={chatClient} style={defaultTheme as DeepPartial<Theme>}>
+      <Chat client={chatClient} style={defaultTheme}>
         <MessageUserReactionsAvatar reaction={reaction} />
       </Chat>,
     );
@@ -32,7 +30,7 @@ describe('MessageUserReactionsAvatar', () => {
 
   it('should render Avatar with correct image, name, and custom size', () => {
     const { queryByTestId } = render(
-      <Chat client={chatClient} style={defaultTheme as DeepPartial<Theme>}>
+      <Chat client={chatClient} style={defaultTheme}>
         <MessageUserReactionsAvatar reaction={reaction} size={'lg'} />
       </Chat>,
     );

package/src/components/Poll/components/CreatePollOptions.tsx

@@ -8,6 +8,7 @@ import {
   TextInput,
   View,
 } from 'react-native';
+
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   interpolate,
@@ -29,6 +30,7 @@ import { useComponentsContext } from '../../../contexts/componentsContext/Compon
 import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useStateStore } from '../../../hooks/useStateStore';
 import { primitives } from '../../../theme';
+import type { ViewRef } from '../../../types/react-native-compat';
 
 export type CurrentOptionPositionsCache = {
   inverseIndexCache: {
@@ -295,7 +297,7 @@ export const CreatePollOption = ({
       normalizedCreatePollOptionGap,
     );
   const top = useSharedValue(initialTop);
-  const optionContainerRef = useRef<View>(null);
+  const optionContainerRef = useRef<ViewRef>(null);
   const isMeasurementScheduledRef = useRef(false);
   const isDraggingDerived = useDerivedValue(() => isDragging.value);
 

package/src/components/Poll/components/MultipleVotesSettings.tsx

@@ -11,6 +11,7 @@ import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/
 import { useStableCallback } from '../../../hooks';
 import { useStateStore } from '../../../hooks/useStateStore';
 import { primitives } from '../../../theme';
+import type { TextInputRef } from '../../../types/react-native-compat';
 import { useRtlMirrorSwitchStyle } from '../../../utils/rtlMirrorSwitchStyle';
 import { Button } from '../../ui';
 
@@ -35,7 +36,7 @@ const MaxVotesTextInput = () => {
     },
   } = useTheme();
   const hasSelectedInitialValueRef = useRef(false);
-  const inputRef = useRef<TextInput>(null);
+  const inputRef = useRef<TextInputRef>(null);
 
   const styles = useStyles();
 

package/src/components/ThreadList/ThreadList.tsx

@@ -70,7 +70,7 @@ export const DefaultThreadListComponent = () => {
         data={threads}
         keyExtractor={(props) => props.id}
         ListEmptyComponent={ThreadListEmptyPlaceholder}
-        ListFooterComponent={isLoadingNext ? ThreadListLoadingMoreIndicator : null}
+        ListFooterComponent={isLoadingNext ? ThreadListLoadingMoreIndicator : undefined}
         onEndReached={loadMore}
         renderItem={renderItem}
         testID='thread-flatlist'

package/src/components/UIComponents/PortalWhileClosingView.tsx

@@ -15,6 +15,7 @@ import {
   useHasActiveId,
   useIsOverlayClosing,
 } from '../../state-store';
+import type { ViewRef } from '../../types/react-native-compat';
 
 type PortalWhileClosingViewProps = {
   /**
@@ -114,7 +115,7 @@ export const PortalWhileClosingView = ({
 };
 
 const useSyncingApi = (portalHostName: string, registrationId: string) => {
-  const containerRef = useRef<View | null>(null);
+  const containerRef = useRef<ViewRef | null>(null);
   const placeholderLayout = useSharedValue({ h: 0, w: 0 });
   const insets = useSafeAreaInsets();
   const hasActiveId = useHasActiveId();