stream-chat-react-native-core 8.13.7 → 9.0.0-beta.2

package/lib/module/components/MessageList/MessageFlashList.js

@@ -8,15 +8,18 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _flashList = require("@shopify/flash-list");
 var _useMessageList2 = require("./hooks/useMessageList");
 var _useShouldScrollToRecentOnNewOwnMessage = require("./hooks/useShouldScrollToRecentOnNewOwnMessage");
+var _useTypingUsers = require("./hooks/useTypingUsers");
 var _InlineLoadingMoreIndicator = require("./InlineLoadingMoreIndicator");
 var _InlineLoadingMoreRecentIndicator = require("./InlineLoadingMoreRecentIndicator");
 var _InlineLoadingMoreRecentThreadIndicator = require("./InlineLoadingMoreRecentThreadIndicator");
 var _AttachmentPickerContext = require("../../contexts/attachmentPickerContext/AttachmentPickerContext");
 var _ChannelContext = require("../../contexts/channelContext/ChannelContext");
 var _ChatContext = require("../../contexts/chatContext/ChatContext");
-var _ImageGalleryContext = require("../../contexts/imageGalleryContext/ImageGalleryContext");
+var _MessageInputContext = require("../../contexts/messageInputContext/MessageInputContext");
 var _MessageListItemContext = require("../../contexts/messageListItemContext/MessageListItemContext");
 var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
 var _OwnCapabilitiesContext = require("../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext");
@@ -24,8 +27,8 @@ var _PaginatedMessageListContext = require("../../contexts/paginatedMessageListC
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
 var _hooks = require("../../hooks");
-var _types = require("../../types/types");
-var _MessageWrapper = require("../Message/MessageSimple/MessageWrapper");
+var _theme = require("../../theme");
+var _MessageWrapper = require("../Message/MessageItemView/MessageWrapper");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["contentContainerStyle", "style"];
 var _this = this,
@@ -69,6 +72,11 @@ var getPreviousLastMessage = function getPreviousLastMessage(messages, newMessag
   }
   return previousLastMessage;
 };
+var messageInputHeightStoreSelector = function messageInputHeightStoreSelector(state) {
+  return {
+    height: state.height
+  };
+};
 var WAIT_FOR_SCROLL_TIMEOUT = 0;
 var getItemTypeInternal = function getItemTypeInternal(message) {
   if (message.type === 'regular') {
@@ -101,7 +109,8 @@ var getItemTypeInternal = function getItemTypeInternal(message) {
 var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
   var _client$user4;
   var LoadingMoreRecentIndicator = props.threadList ? _InlineLoadingMoreRecentThreadIndicator.InlineLoadingMoreRecentThreadIndicator : _InlineLoadingMoreRecentIndicator.InlineLoadingMoreRecentIndicator;
-  var additionalFlashListProps = props.additionalFlashListProps,
+  var attachmentPickerStore = props.attachmentPickerStore,
+    additionalFlashListProps = props.additionalFlashListProps,
     channel = props.channel,
     channelUnreadStateStore = props.channelUnreadStateStore,
     client = props.client,
@@ -110,16 +119,12 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
     disabled = props.disabled,
     disableTypingIndicator = props.disableTypingIndicator,
     EmptyStateIndicator = props.EmptyStateIndicator,
-    _props$FooterComponen = props.FooterComponent,
-    FooterComponent = _props$FooterComponen === void 0 ? LoadingMoreRecentIndicator : _props$FooterComponen,
+    FooterComponent = props.FooterComponent,
     _props$HeaderComponen = props.HeaderComponent,
     HeaderComponent = _props$HeaderComponen === void 0 ? _InlineLoadingMoreIndicator.InlineLoadingMoreIndicator : _props$HeaderComponen,
     hideStickyDateHeader = props.hideStickyDateHeader,
-    _props$isListActive = props.isListActive,
-    isListActive = _props$isListActive === void 0 ? false : _props$isListActive,
     _props$isLiveStreamin = props.isLiveStreaming,
     isLiveStreaming = _props$isLiveStreamin === void 0 ? false : _props$isLiveStreamin,
-    legacyImageViewerSwipeBehaviour = props.legacyImageViewerSwipeBehaviour,
     loadChannelAroundMessage = props.loadChannelAroundMessage,
     loading = props.loading,
     LoadingIndicator = props.LoadingIndicator,
@@ -129,6 +134,8 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
     loadMoreThread = props.loadMoreThread,
     markRead = props.markRead,
     maximumMessageLimit = props.maximumMessageLimit,
+    messageInputFloating = props.messageInputFloating,
+    messageInputHeightStore = props.messageInputHeightStore,
     myMessageTheme = props.myMessageTheme,
     readEvents = props.readEvents,
     NetworkDownIndicator = props.NetworkDownIndicator,
@@ -137,11 +144,8 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
     onThreadSelect = props.onThreadSelect,
     reloadChannel = props.reloadChannel,
     ScrollToBottomButton = props.ScrollToBottomButton,
-    selectedPicker = props.selectedPicker,
     setChannelUnreadState = props.setChannelUnreadState,
     setFlatListRef = props.setFlatListRef,
-    setMessages = props.setMessages,
-    setSelectedPicker = props.setSelectedPicker,
     setTargetedMessage = props.setTargetedMessage,
     StickyHeader = props.StickyHeader,
     targetedMessage = props.targetedMessage,
@@ -153,6 +157,8 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
     TypingIndicatorContainer = props.TypingIndicatorContainer,
     UnreadMessagesNotification = props.UnreadMessagesNotification;
   var flashListRef = (0, _react.useRef)(null);
+  var _useStateStore = (0, _hooks.useStateStore)(messageInputHeightStore.store, messageInputHeightStoreSelector),
+    messageInputHeight = _useStateStore.height;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hasMoved = _useState2[0],
@@ -169,6 +175,10 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     stickyHeaderDate = _useState8[0],
     setStickyHeaderDate = _useState8[1];
+  var _useState9 = (0, _react.useState)(true),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    scrollEnabled = _useState10[0],
+    setScrollEnabled = _useState10[1];
   var stickyHeaderDateRef = (0, _react.useRef)(undefined);
   var onStartReachedTracker = (0, _react.useRef)({});
   var onEndReachedTracker = (0, _react.useRef)({});
@@ -178,11 +188,7 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
   var channelResyncScrollSet = (0, _react.useRef)(true);
   var _useTheme = (0, _ThemeContext.useTheme)(),
     theme = _useTheme.theme;
-  var white_snow = theme.colors.white_snow,
-    _theme$messageList = theme.messageList,
-    container = _theme$messageList.container,
-    contentContainer = _theme$messageList.contentContainer,
-    listContainer = _theme$messageList.listContainer;
+  var styles = useStyles();
   var myMessageThemeString = (0, _react.useMemo)(function () {
     return JSON.stringify(myMessageTheme);
   }, [myMessageTheme]);
@@ -195,7 +201,6 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
   var _useMessageList = (0, _useMessageList2.useMessageList)({
       isFlashList: true,
       isLiveStreaming: isLiveStreaming,
-      noGroupByUser: noGroupByUser,
       threadList: threadList
     }),
     processedMessageList = _useMessageList.processedMessageList,
@@ -208,8 +213,8 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
     var nextMessage = processedMessageList[index + 1];
     return (0, _jsxRuntime.jsx)(_MessageWrapper.MessageWrapper, {
       message: message,
-      nextMessage: nextMessage,
-      previousMessage: previousMessage
+      previousMessage: previousMessage,
+      nextMessage: nextMessage
     });
   }, [processedMessageList]);
   var topMessageBeforeUpdate = (0, _react.useRef)(undefined);
@@ -218,10 +223,10 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
   var messageListLengthBeforeUpdate = (0, _react.useRef)(0);
   var messageListLengthAfterUpdate = processedMessageList.length;
   var shouldScrollToRecentOnNewOwnMessageRef = (0, _useShouldScrollToRecentOnNewOwnMessage.useShouldScrollToRecentOnNewOwnMessage)(rawMessageList, client.userID);
-  var _useState9 = (0, _react.useState)(true),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    autoscrollToRecent = _useState10[0],
-    setAutoscrollToRecent = _useState10[1];
+  var _useState11 = (0, _react.useState)(true),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    autoscrollToRecent = _useState12[0],
+    setAutoscrollToRecent = _useState12[1];
   (0, _react.useEffect)(function () {
     if (autoscrollToRecent && flashListRef.current) {
       flashListRef.current.scrollToEnd({
@@ -412,7 +417,7 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
     var lastReadMessageVisible = viewableItems.some(function (item) {
       return item.item.id === lastReadMessageId;
     });
-    if (!viewableItems.length || !readEvents || lastReadMessageVisible || selectedPicker === 'images') {
+    if (!viewableItems.length || !readEvents || lastReadMessageVisible || attachmentPickerStore.state.getLatestValue().selectedPicker === 'images') {
       setIsUnreadNotificationOpen(false);
       return;
     }
@@ -458,36 +463,18 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
       viewableItems: viewableItems
     });
   }, []);
+  var setNativeScrollability = (0, _hooks.useStableCallback)(function (value) {
+    setScrollEnabled(value);
+  });
   var messageListItemContextValue = (0, _react.useMemo)(function () {
     return {
       goToMessage: goToMessage,
       modifiedTheme: modifiedTheme,
       noGroupByUser: noGroupByUser,
-      onThreadSelect: onThreadSelect
+      onThreadSelect: onThreadSelect,
+      setNativeScrollability: setNativeScrollability
     };
-  }, [goToMessage, modifiedTheme, noGroupByUser, onThreadSelect]);
-  var messagesWithImages = legacyImageViewerSwipeBehaviour && processedMessageList.filter(function (message) {
-    var isMessageTypeDeleted = message.type === 'deleted';
-    if (!isMessageTypeDeleted && message.attachments) {
-      return message.attachments.some(function (attachment) {
-        return attachment.type === _types.FileTypes.Image && !attachment.title_link && !attachment.og_scrape_url && (attachment.image_url || attachment.thumb_url);
-      });
-    }
-    return false;
-  });
-  var imageString = legacyImageViewerSwipeBehaviour && messagesWithImages && messagesWithImages.map(function (message) {
-    var _message$attachments2;
-    return (_message$attachments2 = message.attachments) == null ? void 0 : _message$attachments2.map(function (attachment) {
-      return attachment.image_url || attachment.thumb_url || '';
-    }).join();
-  }).join();
-  var numberOfMessagesWithImages = legacyImageViewerSwipeBehaviour && messagesWithImages && messagesWithImages.length;
-  var threadExists = !!thread;
-  (0, _react.useEffect)(function () {
-    if (legacyImageViewerSwipeBehaviour && isListActive && (threadList && thread || !threadList && !thread)) {
-      setMessages(messagesWithImages);
-    }
-  }, [imageString, isListActive, legacyImageViewerSwipeBehaviour, numberOfMessagesWithImages, threadExists, threadList]);
+  }, [goToMessage, modifiedTheme, noGroupByUser, onThreadSelect, setNativeScrollability]);
   var maybeCallOnStartReached = (0, _hooks.useStableCallback)((0, _asyncToGenerator2.default)(function* () {
     if (processedMessageList != null && processedMessageList.length && onStartReachedTracker.current[processedMessageList.length]) {
       return;
@@ -559,7 +546,7 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
     currentScrollOffsetRef.current = offset;
     var visibleLength = nativeEvent.layoutMeasurement.height;
     var contentLength = nativeEvent.contentSize.height;
-    var isScrollAtStart = contentLength - visibleLength - offset < 150;
+    var isScrollAtStart = contentLength - visibleLength - offset < messageInputHeight;
     var notLatestSet = channel.state.messages !== channel.state.latestMessages;
     var showScrollToBottomButton = messageListHasMessages && (!threadList && notLatestSet || !isScrollAtStart);
     setScrollToBottomButtonVisible(showScrollToBottomButton);
@@ -583,17 +570,17 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
     });
   }));
   var dismissImagePicker = (0, _hooks.useStableCallback)(function () {
-    if (selectedPicker) {
-      setSelectedPicker(undefined);
+    if (attachmentPickerStore.state.getLatestValue().selectedPicker) {
+      attachmentPickerStore.setSelectedPicker(undefined);
       closePicker();
     }
   });
   var onScrollBeginDrag = (0, _hooks.useStableCallback)(function (event) {
-    !hasMoved && selectedPicker && setHasMoved(true);
+    !hasMoved && attachmentPickerStore.state.getLatestValue().selectedPicker && setHasMoved(true);
     onUserScrollEvent(event);
   });
   var onScrollEndDrag = (0, _hooks.useStableCallback)(function (event) {
-    hasMoved && selectedPicker && setHasMoved(false);
+    hasMoved && attachmentPickerStore.state.getLatestValue().selectedPicker && setHasMoved(false);
     onUserScrollEvent(event);
   });
   var refCallback = (0, _hooks.useStableCallback)(function (ref) {
@@ -614,30 +601,44 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
     additionalFlashListPropsExcludingStyle = rest;
   }
   var flatListStyle = (0, _react.useMemo)(function () {
-    return [styles.listContainer, listContainer, additionalFlashListProps == null ? void 0 : additionalFlashListProps.style];
-  }, [additionalFlashListProps == null ? void 0 : additionalFlashListProps.style, listContainer]);
+    return [styles.listContainer, additionalFlashListProps == null ? void 0 : additionalFlashListProps.style];
+  }, [additionalFlashListProps == null ? void 0 : additionalFlashListProps.style, styles.listContainer]);
   var flatListContentContainerStyle = (0, _react.useMemo)(function () {
-    return [styles.contentContainer, contentContainer, additionalFlashListProps == null ? void 0 : additionalFlashListProps.contentContainerStyle];
-  }, [additionalFlashListProps == null ? void 0 : additionalFlashListProps.contentContainerStyle, contentContainer]);
+    return [styles.contentContainer, {
+      paddingBottom: messageInputFloating ? messageInputHeight : 0
+    }, additionalFlashListProps == null ? void 0 : additionalFlashListProps.contentContainerStyle];
+  }, [additionalFlashListProps == null ? void 0 : additionalFlashListProps.contentContainerStyle, styles.contentContainer, messageInputFloating, messageInputHeight]);
   var currentListHeightRef = (0, _react.useRef)(undefined);
   var onLayout = (0, _hooks.useStableCallback)(function (e) {
-    var _flashListRef$current3;
+    var _flashListRef$current3, _flashListRef$current4;
     var height = e.nativeEvent.layout.height;
     if (!currentListHeightRef.current) {
       currentListHeightRef.current = height;
       return;
     }
     var changedBy = currentListHeightRef.current - height;
-    (_flashListRef$current3 = flashListRef.current) == null || _flashListRef$current3.scrollToOffset({
-      offset: currentScrollOffsetRef.current + changedBy
+    (_flashListRef$current3 = flashListRef.current) == null || (_flashListRef$current3 = _flashListRef$current3.getNativeScrollRef()) == null || _flashListRef$current3.setNativeProps({
+      contentOffset: {
+        x: 0,
+        y: ((_flashListRef$current4 = flashListRef.current) == null ? void 0 : _flashListRef$current4.getAbsoluteLastScrollOffset()) + changedBy
+      }
     });
     currentListHeightRef.current = height;
   });
+  var ListFooterComponent = (0, _react.useCallback)(function () {
+    if (FooterComponent) {
+      return (0, _jsxRuntime.jsx)(FooterComponent, {});
+    }
+    return (0, _jsxRuntime.jsxs)(FlashListFooterTypingAdapter, {
+      enabled: !disableTypingIndicator && !!TypingIndicator,
+      children: [(0, _jsxRuntime.jsx)(LoadingMoreRecentIndicator, {}), !disableTypingIndicator && TypingIndicator && (0, _jsxRuntime.jsx)(TypingIndicatorContainer, {
+        children: (0, _jsxRuntime.jsx)(TypingIndicator, {})
+      })]
+    });
+  }, [FooterComponent, LoadingMoreRecentIndicator, TypingIndicator, TypingIndicatorContainer, disableTypingIndicator]);
   if (loading) {
     return (0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.container, {
-        backgroundColor: white_snow
-      }, container],
+      style: styles.container,
       children: (0, _jsxRuntime.jsx)(LoadingIndicator, {
         listType: "message"
       })
@@ -648,14 +649,10 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
   }
   return (0, _jsxRuntime.jsxs)(_reactNative.View, {
     onLayout: onLayout,
-    style: [styles.container, {
-      backgroundColor: white_snow
-    }, container],
+    style: styles.container,
     testID: "message-flat-list-wrapper",
     children: [processedMessageList.length === 0 && !thread ? (0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.flex, {
-        backgroundColor: white_snow
-      }],
+      style: styles.flex,
       testID: "empty-state",
       children: EmptyStateIndicator ? (0, _jsxRuntime.jsx)(EmptyStateIndicator, {
         listType: "message"
@@ -670,7 +667,7 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
         initialScrollIndex: indexToScrollToRef.current === -1 ? undefined : indexToScrollToRef.current,
         keyboardShouldPersistTaps: "handled",
         keyExtractor: keyExtractor,
-        ListFooterComponent: FooterComponent,
+        ListFooterComponent: ListFooterComponent,
         ListHeaderComponent: HeaderComponent,
         maintainVisibleContentPosition: maintainVisibleContentPosition,
         onMomentumScrollEnd: onUserScrollEvent,
@@ -681,6 +678,7 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
         onViewableItemsChanged: stableOnViewableItemsChanged,
         ref: refCallback,
         renderItem: renderItem,
+        scrollEnabled: scrollEnabled,
         scrollEventThrottle: isLiveStreaming ? 16 : undefined,
         showsVerticalScrollIndicator: false,
         style: flatListStyle,
@@ -688,30 +686,62 @@ var MessageFlashListWithContext = function MessageFlashListWithContext(props) {
         viewabilityConfig: flatListViewabilityConfig
       }, additionalFlashListPropsExcludingStyle))
     }), (0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.stickyHeader,
+      style: styles.stickyHeaderContainer,
       children: messageListLengthAfterUpdate && StickyHeader ? (0, _jsxRuntime.jsx)(StickyHeader, {
         date: stickyHeaderDate,
         DateHeader: DateHeader
       }) : null
-    }), !disableTypingIndicator && TypingIndicator && (0, _jsxRuntime.jsx)(TypingIndicatorContainer, {
-      children: (0, _jsxRuntime.jsx)(TypingIndicator, {})
-    }), (0, _jsxRuntime.jsx)(ScrollToBottomButton, {
-      onPress: goToNewMessages,
-      showNotification: scrollToBottomButtonVisible,
-      unreadCount: threadList ? 0 : channel == null ? void 0 : channel.countUnread()
-    }), (0, _jsxRuntime.jsx)(NetworkDownIndicator, {}), isUnreadNotificationOpen && !threadList ? (0, _jsxRuntime.jsx)(UnreadMessagesNotification, {
-      onCloseHandler: onUnreadNotificationClose
+    }), (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      layout: _reactNativeReanimated.LinearTransition.duration(200),
+      style: [styles.scrollToBottomButtonContainer, {
+        bottom: messageInputFloating ? messageInputHeight + _theme.primitives.spacingMd : _theme.primitives.spacingMd
+      }],
+      children: (0, _jsxRuntime.jsx)(ScrollToBottomButton, {
+        onPress: goToNewMessages,
+        showNotification: scrollToBottomButtonVisible,
+        unreadCount: threadList ? 0 : channel == null ? void 0 : channel.countUnread()
+      })
+    }), (0, _jsxRuntime.jsx)(NetworkDownIndicator, {}), isUnreadNotificationOpen && !threadList ? (0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.unreadMessagesNotificationContainer,
+      children: (0, _jsxRuntime.jsx)(UnreadMessagesNotification, {
+        onCloseHandler: onUnreadNotificationClose,
+        channelUnreadStateStore: channelUnreadStateStore
+      })
     }) : null]
   });
 };
+var FlashListFooterTypingAdapter = function FlashListFooterTypingAdapter(_ref10) {
+  var enabled = _ref10.enabled,
+    children = _ref10.children;
+  var api = (0, _flashList.useFlashListContext)();
+  var typingUsers = (0, _useTypingUsers.useTypingUsers)();
+  var typingUsersLengthRef = (0, _react.useRef)(typingUsers.length);
+  (0, _react.useEffect)(function () {
+    var listApi = api == null ? void 0 : api.getRef();
+    if (!enabled || !listApi) {
+      return;
+    }
+    var lastScrollOffset = listApi.getAbsoluteLastScrollOffset();
+    var contentSize = listApi.getChildContainerDimensions();
+    var windowSize = listApi.getWindowSize();
+    var visibleLength = windowSize.height;
+    var contentLength = contentSize.height + listApi.getFirstItemOffset();
+    var isNearEnd = Math.ceil(lastScrollOffset + visibleLength) >= contentLength;
+    if (listApi && typingUsersLengthRef.current === 0 && typingUsers.length > 0 && isNearEnd) {
+      listApi.scrollToEnd({
+        animated: true
+      });
+    }
+    typingUsersLengthRef.current = typingUsers.length;
+  }, [enabled, api, typingUsers.length]);
+  return children;
+};
 var MessageFlashList = exports.MessageFlashList = function MessageFlashList(props) {
   var _useAttachmentPickerC = (0, _AttachmentPickerContext.useAttachmentPickerContext)(),
     closePicker = _useAttachmentPickerC.closePicker,
-    selectedPicker = _useAttachmentPickerC.selectedPicker,
-    setSelectedPicker = _useAttachmentPickerC.setSelectedPicker;
+    attachmentPickerStore = _useAttachmentPickerC.attachmentPickerStore;
   var _useChannelContext = (0, _ChannelContext.useChannelContext)(),
     channel = _useChannelContext.channel,
-    channelUnreadState = _useChannelContext.channelUnreadState,
     channelUnreadStateStore = _useChannelContext.channelUnreadStateStore,
     disabled = _useChannelContext.disabled,
     EmptyStateIndicator = _useChannelContext.EmptyStateIndicator,
@@ -735,15 +765,12 @@ var MessageFlashList = exports.MessageFlashList = function MessageFlashList(prop
     threadList = _useChannelContext.threadList;
   var _useChatContext = (0, _ChatContext.useChatContext)(),
     client = _useChatContext.client;
-  var _useImageGalleryConte = (0, _ImageGalleryContext.useImageGalleryContext)(),
-    setMessages = _useImageGalleryConte.setMessages;
   var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
     DateHeader = _useMessagesContext.DateHeader,
     disableTypingIndicator = _useMessagesContext.disableTypingIndicator,
     FlatList = _useMessagesContext.FlatList,
     InlineDateSeparator = _useMessagesContext.InlineDateSeparator,
     InlineUnreadIndicator = _useMessagesContext.InlineUnreadIndicator,
-    legacyImageViewerSwipeBehaviour = _useMessagesContext.legacyImageViewerSwipeBehaviour,
     Message = _useMessagesContext.Message,
     MessageSystem = _useMessagesContext.MessageSystem,
     myMessageTheme = _useMessagesContext.myMessageTheme,
@@ -762,9 +789,12 @@ var MessageFlashList = exports.MessageFlashList = function MessageFlashList(prop
     threadInstance = _useThreadContext.threadInstance;
   var _useOwnCapabilitiesCo = (0, _OwnCapabilitiesContext.useOwnCapabilitiesContext)(),
     readEvents = _useOwnCapabilitiesCo.readEvents;
+  var _useMessageInputConte = (0, _MessageInputContext.useMessageInputContext)(),
+    messageInputFloating = _useMessageInputConte.messageInputFloating,
+    messageInputHeightStore = _useMessageInputConte.messageInputHeightStore;
   return (0, _jsxRuntime.jsx)(MessageFlashListWithContext, Object.assign({
+    attachmentPickerStore: attachmentPickerStore,
     channel: channel,
-    channelUnreadState: channelUnreadState,
     channelUnreadStateStore: channelUnreadStateStore,
     client: client,
     closePicker: closePicker,
@@ -780,7 +810,6 @@ var MessageFlashList = exports.MessageFlashList = function MessageFlashList(prop
     InlineDateSeparator: InlineDateSeparator,
     InlineUnreadIndicator: InlineUnreadIndicator,
     isListActive: isChannelActive,
-    legacyImageViewerSwipeBehaviour: legacyImageViewerSwipeBehaviour,
     loadChannelAroundMessage: loadChannelAroundMessage,
     loading: loading,
     LoadingIndicator: LoadingIndicator,
@@ -791,6 +820,8 @@ var MessageFlashList = exports.MessageFlashList = function MessageFlashList(prop
     markRead: markRead,
     maximumMessageLimit: maximumMessageLimit,
     Message: Message,
+    messageInputFloating: messageInputFloating,
+    messageInputHeightStore: messageInputHeightStore,
     MessageSystem: MessageSystem,
     myMessageTheme: myMessageTheme,
     NetworkDownIndicator: NetworkDownIndicator,
@@ -798,10 +829,7 @@ var MessageFlashList = exports.MessageFlashList = function MessageFlashList(prop
     reloadChannel: reloadChannel,
     ScrollToBottomButton: ScrollToBottomButton,
     scrollToFirstUnreadThreshold: scrollToFirstUnreadThreshold,
-    selectedPicker: selectedPicker,
     setChannelUnreadState: setChannelUnreadState,
-    setMessages: setMessages,
-    setSelectedPicker: setSelectedPicker,
     setTargetedMessage: setTargetedMessage,
     shouldShowUnreadUnderlay: shouldShowUnreadUnderlay,
     StickyHeader: StickyHeader,
@@ -816,25 +844,54 @@ var MessageFlashList = exports.MessageFlashList = function MessageFlashList(prop
     noGroupByUser: !enableMessageGroupingByUser || props.noGroupByUser
   }));
 };
-var styles = _reactNative.StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    flex: 1,
-    width: '100%'
-  },
-  contentContainer: {
-    paddingBottom: 4
-  },
-  flex: {
-    flex: 1
-  },
-  listContainer: {
-    flex: 1,
-    width: '100%'
-  },
-  stickyHeader: {
-    position: 'absolute',
-    top: 0
-  }
-});
+var useStyles = function useStyles() {
+  var _useTheme2 = (0, _ThemeContext.useTheme)(),
+    _useTheme2$theme = _useTheme2.theme,
+    semantics = _useTheme2$theme.semantics,
+    _useTheme2$theme$mess = _useTheme2$theme.messageList,
+    container = _useTheme2$theme$mess.container,
+    contentContainer = _useTheme2$theme$mess.contentContainer,
+    listContainer = _useTheme2$theme$mess.listContainer,
+    stickyHeaderContainer = _useTheme2$theme$mess.stickyHeaderContainer,
+    scrollToBottomButtonContainer = _useTheme2$theme$mess.scrollToBottomButtonContainer,
+    unreadMessagesNotificationContainer = _useTheme2$theme$mess.unreadMessagesNotificationContainer;
+  var backgroundCoreApp = semantics.backgroundCoreApp;
+  return (0, _react.useMemo)(function () {
+    return _reactNative.StyleSheet.create({
+      container: Object.assign({
+        flex: 1,
+        width: '100%',
+        backgroundColor: backgroundCoreApp
+      }, container),
+      contentContainer: Object.assign({
+        paddingBottom: 4
+      }, contentContainer),
+      flex: {
+        flex: 1,
+        backgroundColor: backgroundCoreApp
+      },
+      listContainer: Object.assign({
+        flex: 1,
+        width: '100%'
+      }, listContainer),
+      scrollToBottomButtonContainer: Object.assign({
+        position: 'absolute',
+        right: 16
+      }, scrollToBottomButtonContainer),
+      stickyHeaderContainer: Object.assign({
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: _theme.primitives.spacingMd
+      }, stickyHeaderContainer),
+      unreadMessagesNotificationContainer: Object.assign({
+        position: 'absolute',
+        top: _theme.primitives.spacingMd,
+        left: 0,
+        right: 0,
+        alignItems: 'center'
+      }, unreadMessagesNotificationContainer)
+    });
+  }, [backgroundCoreApp, container, contentContainer, listContainer, scrollToBottomButtonContainer, stickyHeaderContainer, unreadMessagesNotificationContainer]);
+};
 //# sourceMappingURL=MessageFlashList.js.map