fix: ux for the scroll bottom button on floating state

examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx

@@ -133,7 +133,7 @@ export const MessageSearchList: React.FC<MessageSearchListProps> = React.forward
               style={[styles.itemContainer, { borderBottomColor: border.surfaceSubtle }]}
               testID='channel-preview-button'
             >
-              <UserAvatar user={item.user} size={'lg'} />
+              {item.user ? <UserAvatar user={item.user} size={'lg'} /> : null}
 
               <View style={styles.flex}>
                 <View style={styles.row}>

examples/SampleApp/src/components/SecretMenu.tsx

@@ -372,22 +372,24 @@ export const SecretMenu = ({
             </View>
           </View>
         </View>
-        <View style={[menuDrawerStyles.menuItem, { alignItems: 'flex-start' }]}>
-          <Folder height={20} pathFill={grey} width={20} />
-          <View>
-            <Text style={[menuDrawerStyles.menuTitle]}>Message Input Floating</Text>
-            <View style={{ marginLeft: 16 }}>
-              {messageInputFloatingConfigItems.map((item) => (
-                <SecretMenuMessageInputFloatingConfigItem
-                  key={item.value.toString()}
-                  messageInputFloatingConfigItem={item}
-                  storeMessageInputFloating={storeMessageInputFloating}
-                  isSelected={item.value === selectedMessageInputFloating}
-                />
-              ))}
+        {Platform.OS === 'ios' ? (
+          <View style={[menuDrawerStyles.menuItem, { alignItems: 'flex-start' }]}>
+            <Folder height={20} pathFill={grey} width={20} />
+            <View>
+              <Text style={[menuDrawerStyles.menuTitle]}>Message Input Floating</Text>
+              <View style={{ marginLeft: 16 }}>
+                {messageInputFloatingConfigItems.map((item) => (
+                  <SecretMenuMessageInputFloatingConfigItem
+                    key={item.value.toString()}
+                    messageInputFloatingConfigItem={item}
+                    storeMessageInputFloating={storeMessageInputFloating}
+                    isSelected={item.value === selectedMessageInputFloating}
+                  />
+                ))}
+              </View>
             </View>
           </View>
-        </View>
+        ) : null}
         <View style={[menuDrawerStyles.menuItem, { alignItems: 'flex-start' }]}>
           <Edit height={20} pathFill={grey} width={20} />
           <View>

package/src/components/Channel/Channel.tsx

@@ -110,6 +110,7 @@ import {
   ChannelUnreadStateStore,
   ChannelUnreadStateStoreType,
 } from '../../state-store/channel-unread-state';
+import { MessageInputHeightStore } from '../../state-store/message-input-height-store';
 import { FileTypes } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
 import { compressedImageURI } from '../../utils/compressImage';
@@ -785,6 +786,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
   const [threadHasMore, setThreadHasMore] = useState(true);
   const [threadLoadingMore, setThreadLoadingMore] = useState(false);
   const [channelUnreadStateStore] = useState(new ChannelUnreadStateStore());
+  const [messageInputHeightStore] = useState(new MessageInputHeightStore());
   // TODO: Think if we can remove this and just rely on the channelUnreadStateStore everywhere.
   const setChannelUnreadState = useCallback(
     (data: ChannelUnreadStateStoreType['channelUnreadState']) => {
@@ -1874,6 +1876,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     Input,
     InputButtons,
     messageInputFloating,
+    messageInputHeightStore,
     openPollCreationDialog,
     SendButton,
     sendMessage,

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -48,6 +48,7 @@ export const useCreateInputMessageInputContext = ({
   Input,
   InputButtons,
   messageInputFloating,
+  messageInputHeightStore,
   openPollCreationDialog,
   SendButton,
   sendMessage,
@@ -111,6 +112,7 @@ export const useCreateInputMessageInputContext = ({
       Input,
       InputButtons,
       messageInputFloating,
+      messageInputHeightStore,
       openPollCreationDialog,
       SendButton,
       sendMessage,

package/src/components/MessageInput/MessageInput.tsx

@@ -64,11 +64,7 @@ import {
 import { useKeyboardVisibility } from '../../hooks/useKeyboardVisibility';
 import { useStateStore } from '../../hooks/useStateStore';
 import { isAudioRecorderAvailable, NativeHandlers } from '../../native';
-import {
-  MessageInputHeightState,
-  messageInputHeightStore,
-  setMessageInputHeight,
-} from '../../state-store/message-input-height-store';
+import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 import { CreatePoll } from '../Poll/CreatePollContent';
 import { SafeAreaViewWrapper } from '../UIComponents/SafeAreaViewWrapper';
@@ -166,6 +162,7 @@ type MessageInputPropsWithContext = Pick<
     | 'CreatePollIcon'
     | 'FileSelectorIcon'
     | 'messageInputFloating'
+    | 'messageInputHeightStore'
     | 'ImageSelectorIcon'
     | 'VideoRecorderSelectorIcon'
     | 'CommandInput'
@@ -235,6 +232,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     editing,
     hasAttachments,
     messageInputFloating,
+    messageInputHeightStore,
     Input,
     inputBoxRef,
     InputButtons,
@@ -261,7 +259,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   const { command } = useStateStore(textComposer.state, textComposerStateSelector);
   const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateStoreSelector);
 
-  const { height } = useStateStore(messageInputHeightStore, messageInputHeightStoreSelector);
+  const { height } = useStateStore(messageInputHeightStore.store, messageInputHeightStoreSelector);
   const {
     theme: {
       colors: { border, grey_whisper, white, white_smoke },
@@ -465,7 +463,11 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
           nativeEvent: {
             layout: { height: newHeight },
           },
-        }) => setMessageInputHeight(messageInputFloating ? newHeight + BOTTOM_OFFSET : newHeight)} // 24 is the position of the input from the bottom of the screen
+        }) =>
+          messageInputHeightStore.setHeight(
+            messageInputFloating ? newHeight + BOTTOM_OFFSET : newHeight,
+          )
+        } // 24 is the position of the input from the bottom of the screen
         style={
           messageInputFloating
             ? [styles.floatingWrapper, { bottom: BOTTOM_OFFSET }, floatingWrapper]
@@ -856,6 +858,7 @@ export const MessageInput = (props: MessageInputProps) => {
     InputButtons,
     CommandInput,
     messageInputFloating,
+    messageInputHeightStore,
     openPollCreationDialog,
     SendButton,
     sendMessage,
@@ -933,6 +936,7 @@ export const MessageInput = (props: MessageInputProps) => {
         isOnline,
         members,
         messageInputFloating,
+        messageInputHeightStore,
         openPollCreationDialog,
         Reply,
         selectedPicker,

package/src/components/MessageList/MessageFlashList.tsx

@@ -52,10 +52,7 @@ import { mergeThemes, useTheme } from '../../contexts/themeContext/ThemeContext'
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
 import { useStableCallback, useStateStore } from '../../hooks';
-import {
-  MessageInputHeightState,
-  messageInputHeightStore,
-} from '../../state-store/message-input-height-store';
+import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { MessageWrapper } from '../Message/MessageSimple/MessageWrapper';
 
 let FlashList;
@@ -133,7 +130,7 @@ type MessageFlashListPropsWithContext = Pick<
     | 'maximumMessageLimit'
   > &
   Pick<ChatContextValue, 'client'> &
-  Pick<MessageInputContextValue, 'messageInputFloating'> &
+  Pick<MessageInputContextValue, 'messageInputFloating' | 'messageInputHeightStore'> &
   Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent'> &
   Pick<
     MessagesContextValue,
@@ -293,6 +290,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     markRead,
     maximumMessageLimit,
     messageInputFloating,
+    messageInputHeightStore,
     myMessageTheme,
     readEvents,
     NetworkDownIndicator,
@@ -318,7 +316,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   const flashListRef = useRef<FlashListRef<LocalMessage> | null>(null);
 
   const { height: messageInputHeight } = useStateStore(
-    messageInputHeightStore,
+    messageInputHeightStore.store,
     messageInputHeightStoreSelector,
   );
 
@@ -1158,7 +1156,7 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
   const { loadMore, loadMoreRecent } = usePaginatedMessageListContext();
   const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext();
   const { readEvents } = useOwnCapabilitiesContext();
-  const { messageInputFloating } = useMessageInputContext();
+  const { messageInputFloating, messageInputHeightStore } = useMessageInputContext();
 
   return (
     <MessageFlashListWithContext
@@ -1190,6 +1188,7 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
         maximumMessageLimit,
         Message,
         messageInputFloating,
+        messageInputHeightStore,
         MessageSystem,
         myMessageTheme,
         NetworkDownIndicator,

package/src/components/MessageList/MessageList.tsx

@@ -56,10 +56,7 @@ import { ThreadContextValue, useThreadContext } from '../../contexts/threadConte
 
 import { useStableCallback } from '../../hooks';
 import { useStateStore } from '../../hooks/useStateStore';
-import {
-  MessageInputHeightState,
-  messageInputHeightStore,
-} from '../../state-store/message-input-height-store';
+import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { MessageWrapper } from '../Message/MessageSimple/MessageWrapper';
 
 // This is just to make sure that the scrolling happens in a different task queue.
@@ -179,7 +176,7 @@ type MessageListPropsWithContext = Pick<
     | 'TypingIndicatorContainer'
     | 'UnreadMessagesNotification'
   > &
-  Pick<MessageInputContextValue, 'messageInputFloating'> &
+  Pick<MessageInputContextValue, 'messageInputFloating' | 'messageInputHeightStore'> &
   Pick<
     ThreadContextValue,
     'loadMoreRecentThread' | 'loadMoreThread' | 'thread' | 'threadInstance'
@@ -298,6 +295,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     markRead,
     maximumMessageLimit,
     messageInputFloating,
+    messageInputHeightStore,
     myMessageTheme,
     NetworkDownIndicator,
     noGroupByUser,
@@ -323,7 +321,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState<boolean>(false);
   const { theme } = useTheme();
   const { height: messageInputHeight } = useStateStore(
-    messageInputHeightStore,
+    messageInputHeightStore.store,
     messageInputHeightStoreSelector,
   );
 
@@ -1257,7 +1255,7 @@ export const MessageList = (props: MessageListProps) => {
     TypingIndicatorContainer,
     UnreadMessagesNotification,
   } = useMessagesContext();
-  const { messageInputFloating } = useMessageInputContext();
+  const { messageInputFloating, messageInputHeightStore } = useMessageInputContext();
   const { loadMore, loadMoreRecent } = usePaginatedMessageListContext();
   const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext();
 
@@ -1290,6 +1288,7 @@ export const MessageList = (props: MessageListProps) => {
         maximumMessageLimit,
         Message,
         messageInputFloating,
+        messageInputHeightStore,
         MessageSystem,
         myMessageTheme,
         NetworkDownIndicator,

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -59,6 +59,7 @@ import {
 } from '../../middlewares/attachments';
 
 import { isDocumentPickerAvailable, MediaTypes, NativeHandlers } from '../../native';
+import { MessageInputHeightStore } from '../../state-store/message-input-height-store';
 import { File } from '../../types/types';
 import { compressedImageURI } from '../../utils/compressImage';
 import {
@@ -384,6 +385,7 @@ export type InputMessageInputContextValue = {
    */
   setInputRef?: (ref: TextInput | null) => void;
   showPollCreationDialog?: boolean;
+  messageInputHeightStore: MessageInputHeightStore;
 };
 
 export type MessageInputContextValue = LocalMessageInputContext &

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -50,6 +50,7 @@ export const useCreateMessageInputContext = ({
   inputBoxRef,
   InputButtons,
   messageInputFloating,
+  messageInputHeightStore,
   openAttachmentPicker,
   openPollCreationDialog,
   pickAndUploadImageFromNativePicker,
@@ -121,6 +122,7 @@ export const useCreateMessageInputContext = ({
       inputBoxRef,
       InputButtons,
       messageInputFloating,
+      messageInputHeightStore,
       openAttachmentPicker,
       openPollCreationDialog,
       pickAndUploadImageFromNativePicker,

package/src/state-store/message-input-height-store.ts

@@ -8,8 +8,14 @@ const INITIAL_STATE: MessageInputHeightState = {
   height: 0,
 };
 
-export const messageInputHeightStore = new StateStore<MessageInputHeightState>(INITIAL_STATE);
+export class MessageInputHeightStore {
+  public store = new StateStore<MessageInputHeightState>(INITIAL_STATE);
 
-export const setMessageInputHeight = (height: number) => {
-  messageInputHeightStore.next({ height });
-};
+  constructor() {
+    this.store.next({ height: 0 });
+  }
+
+  setHeight(height: number) {
+    this.store.next({ height });
+  }
+}