fix: state synchronisity mismatch

examples/SampleApp/ios/Podfile.lock

@@ -2036,65 +2036,6 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - react-native-keyboard-controller (1.20.2):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-hermes
-    - React-ImageManager
-    - React-jsi
-    - react-native-keyboard-controller/common (= 1.20.2)
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-renderercss
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - SocketRocket
-    - Yoga
-  - react-native-keyboard-controller/common (1.20.2):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-hermes
-    - React-ImageManager
-    - React-jsi
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-renderercss
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - SocketRocket
-    - Yoga
   - react-native-maps (1.20.1):
     - React-Core
   - react-native-netinfo (11.4.1):
@@ -3338,7 +3279,6 @@ DEPENDENCIES:
   - "react-native-document-picker (from `../node_modules/@react-native-documents/picker`)"
   - "react-native-geolocation (from `../node_modules/@react-native-community/geolocation`)"
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
-  - react-native-keyboard-controller (from `../node_modules/react-native-keyboard-controller`)
   - react-native-maps (from `../node_modules/react-native-maps`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
@@ -3514,8 +3454,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/geolocation"
   react-native-image-picker:
     :path: "../node_modules/react-native-image-picker"
-  react-native-keyboard-controller:
-    :path: "../node_modules/react-native-keyboard-controller"
   react-native-maps:
     :path: "../node_modules/react-native-maps"
   react-native-netinfo:
@@ -3685,7 +3623,6 @@ SPEC CHECKSUMS:
   react-native-document-picker: c5fa18e9fc47b34cfbab3b0a4447d0df918a5621
   react-native-geolocation: eb39c815c9b58ddc3efb552cafdd4b035e4cf682
   react-native-image-picker: e479ec8884df9d99a62c1f53f2307055ad43ea85
-  react-native-keyboard-controller: 6fe65d5d011d88e651d5279396e95e9c1f9458ca
   react-native-maps: ee1e65647460c3d41e778071be5eda10e3da6225
   react-native-netinfo: f0a9899081c185db1de5bb2fdc1c88c202a059ac
   react-native-safe-area-context: 7fd4c2c8023da8e18eaa3424cb49d52f626debee

examples/SampleApp/ios/SampleApp-tvOS/Info.plist

@@ -50,4 +50,4 @@
 		<key>UIViewControllerBasedStatusBarAppearance</key>
 		<false />
 	</dict>
-</plist>
+</plist>

examples/SampleApp/ios/SampleApp/Info.plist

@@ -59,4 +59,4 @@
 		<key>UIViewControllerBasedStatusBarAppearance</key>
 		<false />
 	</dict>
-</plist>
+</plist>

examples/SampleApp/package.json

@@ -51,7 +51,6 @@
     "react-native-gesture-handler": "^2.26.0",
     "react-native-haptic-feedback": "^2.3.3",
     "react-native-image-picker": "^8.2.1",
-    "react-native-keyboard-controller": "^1.20.2",
     "react-native-maps": "1.20.1",
     "react-native-nitro-modules": "^0.31.3",
     "react-native-nitro-sound": "^0.2.9",

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import type { LocalMessage, Channel as StreamChatChannel } from 'stream-chat';
-import { useHeaderHeight } from '@react-navigation/elements';
 import { RouteProp, useFocusEffect, useNavigation } from '@react-navigation/native';
 import {
   Channel,
@@ -20,7 +19,7 @@ import {
   ChannelAvatar,
   useChannelPreviewDisplayPresence,
 } from 'stream-chat-react-native';
-import { Pressable, StyleSheet, View } from 'react-native';
+import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import { useAppContext } from '../context/AppContext';
@@ -230,7 +229,6 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
     },
     [chatClient, colors, t, handleMessageInfo],
   );
-  const headerHeight = useHeaderHeight();
 
   if (!channel || !chatClient) {
     return null;
@@ -247,7 +245,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
         disableTypingIndicator
         enforceUniqueReaction
         initialScrollToFirstUnreadMessage
-        keyboardVerticalOffset={headerHeight}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -300}
         messageActions={messageActions}
         MessageHeader={MessageReminderHeader}
         MessageLocation={MessageLocation}

examples/SampleApp/src/screens/ThreadScreen.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { useHeaderHeight } from '@react-navigation/elements';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import {
   Channel,
@@ -86,8 +85,7 @@ export const ThreadScreen: React.FC<ThreadScreenProps> = ({
   const { client: chatClient } = useChatContext();
   const { t } = useTranslationContext();
   const { setThread } = useStreamChatContext();
-  const { messageInputFloating } = useAppContext();
-  const headerHeight = useHeaderHeight();
+  const { messageInputFloating, messageListImplementation } = useAppContext();
 
   const onPressMessage: NonNullable<React.ComponentProps<typeof Channel>['onPressMessage']> = (
     payload,
@@ -125,7 +123,7 @@ export const ThreadScreen: React.FC<ThreadScreenProps> = ({
         AttachmentPickerSelectionBar={CustomAttachmentPickerSelectionBar}
         channel={channel}
         enforceUniqueReaction
-        keyboardVerticalOffset={headerHeight}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -300}
         messageActions={messageActions}
         messageInputFloating={messageInputFloating}
         MessageHeader={MessageReminderHeader}
@@ -135,7 +133,7 @@ export const ThreadScreen: React.FC<ThreadScreenProps> = ({
         threadList
       >
         <ThreadHeader thread={thread} />
-        <Thread onThreadDismount={onThreadDismount} />
+        <Thread onThreadDismount={onThreadDismount} shouldUseFlashList={messageListImplementation === 'flashlist'} />
       </Channel>
     </View>
   );

examples/SampleApp/yarn.lock

@@ -1580,10 +1580,10 @@
     "@gorhom/portal" "1.0.14"
     invariant "^2.2.4"
 
-"@gorhom/bottom-sheet@^5.1.8":
-  version "5.1.8"
-  resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-5.1.8.tgz#65547917f5b1dae5a1291dabd4ea8bfee09feba4"
-  integrity sha512-QuYIVjn3K9bW20n5bgOSjvxBYoWG4YQXiLGOheEAMgISuoT6sMcA270ViSkkb0fenPxcIOwzCnFNuxmr739T9A==
+"@gorhom/bottom-sheet@^5.2.8":
+  version "5.2.8"
+  resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-5.2.8.tgz#25e49122c30ffe83d3813b3bcf3dec39f3359aeb"
+  integrity sha512-+N27SMpbBxXZQ/IA2nlEV6RGxL/qSFHKfdFKcygvW+HqPG5jVNb1OqehLQsGfBP+Up42i0gW5ppI+DhpB7UCzA==
   dependencies:
     "@gorhom/portal" "1.0.14"
     invariant "^2.2.4"
@@ -7658,13 +7658,6 @@ react-native-is-edge-to-edge@^1.2.1:
   resolved "https://registry.yarnpkg.com/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.2.1.tgz#64e10851abd9d176cbf2b40562f751622bde3358"
   integrity sha512-FLbPWl/MyYQWz+KwqOZsSyj2JmLKglHatd3xLZWskXOpRaio4LfEDEz8E/A6uD8QoTHW6Aobw1jbEwK7KMgR7Q==
 
-react-native-keyboard-controller@^1.20.2:
-  version "1.20.2"
-  resolved "https://registry.yarnpkg.com/react-native-keyboard-controller/-/react-native-keyboard-controller-1.20.2.tgz#2953341f48e25fec20dd732241cb8152251fd4d1"
-  integrity sha512-3xvPTIfasAbosDxT3Mc6b5Xr/M+yq99ECCM4iGnSAngziIVUZsZuPpfYL7nN1UiN9rQjWKvjdul/jq9E0V1s2w==
-  dependencies:
-    react-native-is-edge-to-edge "^1.2.1"
-
 react-native-lightbox@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/react-native-lightbox/-/react-native-lightbox-0.7.0.tgz#e52b4d7fcc141f59d7b23f0180de535e35b20ec9"

package/src/components/KeyboardCompatibleView/KeyboardControllerAvoidingView.tsx

@@ -1,47 +1,45 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import {
   Keyboard,
   Platform,
   KeyboardAvoidingViewProps as ReactNativeKeyboardAvoidingViewProps,
 } from 'react-native';
 
-import {
-  KeyboardAvoidingView as KeyboardControllerPackageKeyboardAvoidingView,
-  KeyboardController as KeyboardControllerPackageKeyboardController,
-  KeyboardEvents,
-  KeyboardProvider,
-} from 'react-native-keyboard-controller';
-
 import { KeyboardCompatibleView as KeyboardCompatibleViewDefault } from './KeyboardCompatibleView';
 
 type ExtraKeyboardControllerProps = {
   behavior?: 'translate-with-padding';
 };
 
+type KeyboardControllerModule = typeof import('react-native-keyboard-controller');
+
+const optionalRequire = <T,>(): T | undefined => {
+  try {
+    return require('react-native-keyboard-controller') as T;
+  } catch {
+    return undefined;
+  }
+};
+
 export type KeyboardCompatibleViewProps = ReactNativeKeyboardAvoidingViewProps &
   ExtraKeyboardControllerProps;
 
-let KeyboardControllerPackage:
-  | {
-      KeyboardAvoidingView: typeof KeyboardControllerPackageKeyboardAvoidingView;
-      KeyboardController: typeof KeyboardControllerPackageKeyboardController;
-      KeyboardProvider: typeof KeyboardProvider;
-      KeyboardEvents: typeof KeyboardEvents;
-    }
-  | undefined;
+const KeyboardControllerPackage = optionalRequire<KeyboardControllerModule>();
 
-try {
-  KeyboardControllerPackage = require('react-native-keyboard-controller');
-} catch (e) {
-  KeyboardControllerPackage = undefined;
-}
+const { AndroidSoftInputModes, KeyboardController, KeyboardProvider, KeyboardAvoidingView } =
+  KeyboardControllerPackage ?? {};
 
 export const KeyboardCompatibleView = (props: KeyboardCompatibleViewProps) => {
   const { behavior = 'translate-with-padding', children, ...rest } = props;
 
-  const KeyboardProvider = KeyboardControllerPackage?.KeyboardProvider;
-  const KeyboardAvoidingView = KeyboardControllerPackage?.KeyboardAvoidingView;
+  useEffect(() => {
+    if (AndroidSoftInputModes) {
+      KeyboardController?.setInputMode(AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE);
+    }
+
+    return () => KeyboardController?.setDefaultMode();
+  }, []);
 
   if (KeyboardProvider && KeyboardAvoidingView) {
     return (

package/src/components/Message/MessageSimple/MessageWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import { View } from 'react-native';
 
@@ -14,7 +14,6 @@ import { ThemeProvider, useTheme } from '../../../contexts/themeContext/ThemeCon
 
 import { useStateStore } from '../../../hooks/useStateStore';
 import { ChannelUnreadStateStoreType } from '../../../state-store/channel-unread-state';
-import { MessagePreviousAndNextMessageStoreType } from '../../../state-store/message-list-prev-next-state';
 
 const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({
   first_unread_message_id: state.channelUnreadState?.first_unread_message_id,
@@ -25,10 +24,12 @@ const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({
 
 export type MessageWrapperProps = {
   message: LocalMessage;
+  previousMessage?: LocalMessage;
+  nextMessage?: LocalMessage;
 };
 
 export const MessageWrapper = React.memo((props: MessageWrapperProps) => {
-  const { message } = props;
+  const { message, previousMessage, nextMessage } = props;
   const { client } = useChatContext();
   const {
     channelUnreadStateStore,
@@ -47,34 +48,22 @@ export const MessageWrapper = React.memo((props: MessageWrapperProps) => {
     myMessageTheme,
     shouldShowUnreadUnderlay,
   } = useMessagesContext();
-  const {
-    goToMessage,
-    onThreadSelect,
-    noGroupByUser,
-    modifiedTheme,
-    messageListPreviousAndNextMessageStore,
-  } = useMessageListItemContext();
+  const { goToMessage, onThreadSelect, noGroupByUser, modifiedTheme } = useMessageListItemContext();
 
   const dateSeparatorDate = useMessageDateSeparator({
     hideDateSeparators,
     message,
-    messageListPreviousAndNextMessageStore,
+    previousMessage,
   });
 
-  const selector = useCallback(
-    (state: MessagePreviousAndNextMessageStoreType) => ({
-      nextMessage: state.messageList[message.id]?.nextMessage,
-    }),
-    [message.id],
-  );
-  const { nextMessage } = useStateStore(messageListPreviousAndNextMessageStore.state, selector);
   const isNewestMessage = nextMessage === undefined;
   const groupStyles = useMessageGroupStyles({
     dateSeparatorDate,
     getMessageGroupStyle,
     maxTimeBetweenGroupedMessages,
     message,
-    messageListPreviousAndNextMessageStore,
+    previousMessage,
+    nextMessage,
     noGroupByUser,
   });
 

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap

@@ -36,12 +36,16 @@ exports[`MessageAvatar should render message avatar 1`] = `
           {
             "backgroundColor": undefined,
           },
-          undefined,
+          {
+            "borderColor": "hsla(0, 0%, 0%, 0.1)",
+            "borderWidth": 1,
+          },
         ]
       }
       testID="avatar-image"
     >
       <Image
+        onError={[Function]}
         source={
           {
             "uri": "https://i.imgur.com/ytIyojl.png",