@droppii-org/chat-mobile 0.2.44 → 0.2.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@droppii-org/chat-mobile",
-  "version": "0.2.44",
+  "version": "0.2.46",
   "description": "Droppii chat mobile",
   "keywords": [
     "react-native",
@@ -85,6 +85,7 @@
     "@growthbook/growthbook-react": "*",
     "@jest/globals": "^30.0.0",
     "@react-native-clipboard/clipboard": "^1.16.3",
+    "@react-native-community/netinfo": "11.4.1",
     "@react-native-documents/picker": "^12.0.1",
     "@react-native/babel-preset": "0.85.0",
     "@react-native/eslint-config": "0.85.0",
@@ -117,7 +118,7 @@
     "react-native-file-viewer": "^2.1.5",
     "react-native-gesture-handler": "^3.0.0",
     "react-native-image-crop-picker": "^0.51.1",
-    "react-native-keyboard-controller": "1.19.0",
+    "react-native-keyboard-controller": "^1.21.9",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-mmkv": "4.0.0",
     "react-native-permissions": "^5.6.0",
@@ -139,6 +140,7 @@
   "peerDependencies": {
     "@droppii/libs": "*",
     "@react-native-clipboard/clipboard": "*",
+    "@react-native-community/netinfo": "*",
     "@react-native-documents/picker": "*",
     "@tanstack/react-query": "*",
     "react": "*",

package/src/core/index.ts

@@ -4,6 +4,7 @@ import { initBaseUrl } from '../config/configuration';
 import { useUserListener } from './useUserListener';
 import { useChatListener } from './useChatListener';
 import { useBackgroundStatusSync } from './notification/useBackgroundStatusSync';
+import { useNetworkStatusSync } from './useNetworkStatusSync';
 
 export * from './notification';
 
@@ -35,4 +36,5 @@ export const useChatSdk = () => {
   useUserListener();
   useChatListener();
   useBackgroundStatusSync();
+  useNetworkStatusSync();
 };

package/src/core/useChatListener.ts

@@ -70,8 +70,8 @@ export const useChatListener = () => {
             },
           });
         }
-        useConversationStore.getState().updateConversations(conversations);
       }
+      useConversationStore.getState().updateConversations(conversations);
     },
     [currentUserId, isShowFLashMessage, onPressFlashMessage]
   );
@@ -134,6 +134,10 @@ export const useChatListener = () => {
     relevant.forEach((msg) => useMessageStore.getState().pushNewMessage(msg));
   }, []);
 
+  const onRecvOfflineNewMessages = useCallback((messages: MessageItem[]) => {
+    console.log('[Listener] onRecvOfflineNewMessages', messages);
+  }, []);
+
   useEffect(() => {
     // Conversation
     OpenIMSDK.on(OpenIMEvent.OnConversationChanged, onConversationChanged);
@@ -148,6 +152,10 @@ export const useChatListener = () => {
     OpenIMSDK.on(OpenIMEvent.OnNewRecvMessageRevoked, onMessageRevoked);
     OpenIMSDK.on(OpenIMEvent.OnRecvMessagePinned, onMessagePinned);
     OpenIMSDK.on(OpenIMEvent.OnRecvNewMessages, onRecvNewMessages);
+    OpenIMSDK.on(
+      OpenIMEvent.OnRecvOfflineNewMessages,
+      onRecvOfflineNewMessages
+    );
 
     return () => {
       // Conversation
@@ -163,6 +171,10 @@ export const useChatListener = () => {
       OpenIMSDK.off(OpenIMEvent.OnRecvNewMessages, onRecvNewMessages);
       OpenIMSDK.off(OpenIMEvent.OnNewRecvMessageRevoked, onMessageRevoked);
       OpenIMSDK.off(OpenIMEvent.OnRecvMessagePinned, onMessagePinned);
+      OpenIMSDK.off(
+        OpenIMEvent.OnRecvOfflineNewMessages,
+        onRecvOfflineNewMessages
+      );
     };
   }, [
     onConversationChanged,
@@ -173,5 +185,6 @@ export const useChatListener = () => {
     onNewConversation,
     onSendMessageProgress,
     onRecvNewMessages,
+    onRecvOfflineNewMessages,
   ]);
 };

package/src/core/useNetworkStatusSync.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import NetInfo from '@react-native-community/netinfo';
+import OpenIMSDK from '@droppii/openim-rn-client-sdk';
+
+export const useNetworkStatusSync = () => {
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener(() => {
+      OpenIMSDK.networkStatusChanged();
+    });
+
+    return unsubscribe;
+  }, []);
+};

package/src/hooks/message/usePinMessage.ts

@@ -8,13 +8,13 @@ import { useUserStore } from '../../store/user';
 import { UIUtils } from '../../utils/UIUtils';
 import { trans } from '../../translation';
 
-const MAX_PINNED_MESSAGES = 5;
+const PINNED_MESSAGES_PAGE_SIZE = 5;
 
 export const fetchPinnedMessages = async (conversationID: string) => {
   const result = await OpenIMSDK.getPinnedMessageList({
     conversationID,
     offset: 0,
-    pageSize: MAX_PINNED_MESSAGES,
+    pageSize: PINNED_MESSAGES_PAGE_SIZE,
   });
 
   const previouslyPinnedIds = new Set(
@@ -24,7 +24,11 @@ export const fetchPinnedMessages = async (conversationID: string) => {
 
   usePinnedMessageStore
     .getState()
-    .setMessages(result.messageList, result.totalCount);
+    .setMessages(
+      result.messageList,
+      result.totalCount,
+      result.remainingPinCount
+    );
 
   // Reconcile the per-message `isPinned` flag (used by the toolbox and the
   // pinned badge) with the authoritative list from the server — messages
@@ -41,10 +45,10 @@ export const fetchPinnedMessages = async (conversationID: string) => {
   });
 };
 
-const showPinLimitReachedModal = () => {
+const showPinLimitReachedModal = (maxCount: number) => {
   UIUtils.alert.open({
     title: trans('chat:pin_limit_title'),
-    message: trans('chat:pin_limit_desc'),
+    message: trans('chat:pin_limit_desc', { maxCount }),
     primaryIndex: 0,
     buttons: [
       {
@@ -58,6 +62,10 @@ const showPinLimitReachedModal = () => {
 
 export const usePinMessage = (conversationID?: string) => {
   const pinnedMessages = usePinnedMessageStore((state) => state.messages);
+  const totalCount = usePinnedMessageStore((state) => state.totalCount);
+  const remainingPinCount = usePinnedMessageStore(
+    (state) => state.remainingPinCount
+  );
   const addMessage = usePinnedMessageStore((state) => state.addMessage);
   const removeMessage = usePinnedMessageStore((state) => state.removeMessage);
   const reset = usePinnedMessageStore((state) => state.reset);
@@ -78,8 +86,8 @@ export const usePinMessage = (conversationID?: string) => {
     async (message: MessageItem) => {
       if (!conversationID) return;
 
-      if (pinnedMessages.length >= MAX_PINNED_MESSAGES) {
-        showPinLimitReachedModal();
+      if (remainingPinCount <= 0) {
+        showPinLimitReachedModal(totalCount + remainingPinCount);
         return;
       }
 
@@ -104,7 +112,7 @@ export const usePinMessage = (conversationID?: string) => {
         });
       }
     },
-    [conversationID, pinnedMessages.length, addMessage]
+    [conversationID, remainingPinCount, totalCount, addMessage]
   );
 
   const unpinMessage = useCallback(

package/src/screens/chat-detail/ChatComposer.tsx

@@ -1,7 +1,21 @@
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { Platform, StyleSheet } from 'react-native';
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+import {
+  Platform,
+  StyleSheet,
+  type LayoutChangeEvent,
+  type View,
+} from 'react-native';
 import { debounce } from 'lodash';
 import Reanimated from 'react-native-reanimated';
+import { KeyboardStickyView } from 'react-native-keyboard-controller';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { KContainer, KColors, KImage, KButton, KLabel } from '@droppii/libs';
 
@@ -38,6 +52,8 @@ interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
   pannelActions?: DChatPannelAction[];
   isDisableCompose?: boolean;
+  composerRef?: RefObject<View | null>;
+  onComposerLayout?: (event: LayoutChangeEvent) => void;
 }
 
 export const ChatComposer = memo(
@@ -45,6 +61,8 @@ export const ChatComposer = memo(
     isEmptyMessage = false,
     pannelActions,
     isDisableCompose = false,
+    composerRef,
+    onComposerLayout,
   }: ChatComposerInternalProps) => {
     const insets = useSafeAreaInsets();
 
@@ -70,7 +88,6 @@ export const ChatComposer = memo(
 
     const { accessorySlotStyle, toggleAttachmentVisibility, closeAttachment } =
       useChatComposerAnimation({
-        isAttachmentOpen,
         panelHeight,
         onAttachmentOpenChange: setIsAttachmentOpen,
       });
@@ -86,7 +103,7 @@ export const ChatComposer = memo(
 
     const handleInputFocus = useCallback(() => {
       setIsInputFocused(true);
-      if (isAttachmentOpen) closeAttachment();
+      if (isAttachmentOpen) closeAttachment(true);
     }, [closeAttachment, isAttachmentOpen, setIsInputFocused]);
 
     const handleInputBlur = useCallback(() => {
@@ -177,8 +194,14 @@ export const ChatComposer = memo(
       [compose]
     );
 
+    let content: ReactNode;
+    const isNewBotConversation =
+      isBotConversation &&
+      conversationFlow?.flowCurrentStep?.type === ReactFlowsNodeTypes.Start &&
+      isEmptyMessage;
+
     if (isDisableCompose) {
-      return (
+      content = (
         <KContainer.View row alignItems justifyContent>
           <KContainer.View marginR="0.25rem">
             <KImage.VectorIcons
@@ -192,13 +215,8 @@ export const ChatComposer = memo(
           </KLabel.Text>
         </KContainer.View>
       );
-    }
-    if (
-      isBotConversation &&
-      conversationFlow?.flowCurrentStep?.type === ReactFlowsNodeTypes.Start &&
-      isEmptyMessage
-    ) {
-      return (
+    } else if (isNewBotConversation) {
+      content = (
         <KContainer.View padding={'1.5rem'} paddingB={0}>
           <KButton.Solid
             size="md"
@@ -210,102 +228,117 @@ export const ChatComposer = memo(
           />
         </KContainer.View>
       );
-    }
-
-    return (
-      <KContainer.View background={'rgba(131, 137, 157, 0.05)'}>
-        <ChatCurrentQuotedMessage />
-        <ChatQuickActions
-          visible
-          actions={DEFAULT_QUICK_ACTIONS}
-          onActionPress={(action) =>
-            console.log('[ChatComposer] quick action:', action.id)
-          }
-        />
-
-        {compose.showLinkPreview && (
-          <ChatLinkPreview
-            metadata={compose.urlMetadata}
-            isLoading={compose.isMetadataLoading}
-            onDismiss={compose.dismissPreview}
+    } else {
+      content = (
+        <KContainer.View background={'#F9F9FA'}>
+          <ChatCurrentQuotedMessage />
+          <ChatQuickActions
+            visible
+            actions={DEFAULT_QUICK_ACTIONS}
+            onActionPress={(action) =>
+              console.log('[ChatComposer] quick action:', action.id)
+            }
           />
-        )}
-
-        <AttachmentPreview
-          visible={
-            compose.isImagePreviewVisible || compose.isFilePreviewVisible
-          }
-          attachments={attachments}
-          onRemove={onRemove}
-        />
-
-        <KContainer.View
-          row
-          alignItems
-          paddingH="0.75rem"
-          paddingT="0.75rem"
-          paddingB="0.75rem"
-          style={inputRowStyle}
-        >
-          <KContainer.Touchable
-            onPress={toggleAttachmentVisibility}
-            center
-            br="round"
-          >
-            <KImage.VectorIcons
-              name={isAttachmentOpen ? 'close-circle-o' : 'plus-circle-o'}
-              size={24}
-              color={
-                isAttachmentOpen
-                  ? KColors.palette.primary.w400
-                  : KColors.palette.gray.w600
-              }
+
+          {compose.showLinkPreview && (
+            <ChatLinkPreview
+              metadata={compose.urlMetadata}
+              isLoading={compose.isMetadataLoading}
+              onDismiss={compose.dismissPreview}
             />
-          </KContainer.Touchable>
-
-          <ChatMessageInput
-            value={compose.text}
-            placeholder="Nhập tin nhắn..."
-            onChangeText={handleChangeText}
-            onFocus={handleInputFocus}
-            onBlur={handleInputBlur}
-            onContentSizeChange={handleInputContentSizeChange}
-            isInputFocused={isInputFocused}
-            isMultilineInput={isMultilineInput}
-            inputRef={inputRef}
-          />
+          )}
 
-          <KContainer.Touchable
-            onPress={compose.isUploading ? undefined : handleSend}
-            pointerEvents={compose.isUploading ? 'none' : 'auto'}
-            width={40}
-            height={40}
-            center
-            br="round"
-            background={
-              compose.isUploading
-                ? KColors.palette.gray.w400
-                : KColors.palette.primary.w400
+          <AttachmentPreview
+            visible={
+              compose.isImagePreviewVisible || compose.isFilePreviewVisible
             }
-            marginL="0.75rem"
-            opacity={compose.isUploading ? 0.6 : 1}
+            attachments={attachments}
+            onRemove={onRemove}
+          />
+
+          <KContainer.View
+            row
+            alignItems
+            paddingH="0.75rem"
+            paddingT="0.75rem"
+            paddingB="0.75rem"
+            style={inputRowStyle}
           >
-            <KImage.VectorIcons
-              name="send"
-              provider="MaterialCommunityIcons"
-              size={20}
-              color={KColors.white}
+            <KContainer.Touchable
+              onPress={toggleAttachmentVisibility}
+              center
+              br="round"
+            >
+              <KImage.VectorIcons
+                name={isAttachmentOpen ? 'close-circle-o' : 'plus-circle-o'}
+                size={24}
+                color={
+                  isAttachmentOpen
+                    ? KColors.palette.primary.w400
+                    : KColors.palette.gray.w600
+                }
+              />
+            </KContainer.Touchable>
+
+            <ChatMessageInput
+              value={compose.text}
+              placeholder="Nhập tin nhắn..."
+              onChangeText={handleChangeText}
+              onFocus={handleInputFocus}
+              onBlur={handleInputBlur}
+              onContentSizeChange={handleInputContentSizeChange}
+              isInputFocused={isInputFocused}
+              isMultilineInput={isMultilineInput}
+              inputRef={inputRef}
             />
-          </KContainer.Touchable>
+
+            <KContainer.Touchable
+              onPress={compose.isUploading ? undefined : handleSend}
+              pointerEvents={compose.isUploading ? 'none' : 'auto'}
+              width={40}
+              height={40}
+              center
+              br="round"
+              background={
+                compose.isUploading
+                  ? KColors.palette.gray.w400
+                  : KColors.palette.primary.w400
+              }
+              marginL="0.75rem"
+              opacity={compose.isUploading ? 0.6 : 1}
+            >
+              <KImage.VectorIcons
+                name="send"
+                provider="MaterialCommunityIcons"
+                size={20}
+                color={KColors.white}
+              />
+            </KContainer.Touchable>
+          </KContainer.View>
         </KContainer.View>
+      );
+    }
 
-        <Reanimated.View
-          style={[styles.accessorySlot, accessorySlotStyle]}
-          pointerEvents={isAttachmentOpen ? 'auto' : 'none'}
+    return (
+      <>
+        <KeyboardStickyView
+          ref={composerRef}
+          onLayout={onComposerLayout}
+          offset={{ closed: 0, opened: insets.bottom }}
+        >
+          {content}
+        </KeyboardStickyView>
+        <KContainer.VisibleView
+          visible={!isDisableCompose && !isNewBotConversation}
         >
-          <ChatAttachmentPanel actions={resolvedPannelActons} />
-        </Reanimated.View>
-      </KContainer.View>
+          <Reanimated.View
+            style={[styles.accessorySlot, accessorySlotStyle]}
+            pointerEvents={isAttachmentOpen ? 'auto' : 'none'}
+          >
+            <ChatAttachmentPanel actions={resolvedPannelActons} />
+          </Reanimated.View>
+        </KContainer.VisibleView>
+      </>
     );
   }
 );

package/src/screens/chat-detail/ChatDetail.tsx

@@ -1,7 +1,11 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { DeviceEventEmitter, Platform, StyleSheet } from 'react-native';
+import { DeviceEventEmitter, View } from 'react-native';
 
-import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
+import {
+  useKeyboardChatComposerInset,
+  useKeyboardScrollToEnd,
+} from '@legendapp/list/keyboard';
+import type { LegendListRef } from '@legendapp/list/react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { KContainer } from '@droppii/libs';
 import { useNavigation } from '@react-navigation/native';
@@ -123,10 +127,13 @@ const ChatDetail = memo(
 
     const insets = useSafeAreaInsets();
 
-    const keyboardVerticalOffset = useMemo(
-      () => Platform.select({ android: insets.bottom, default: 0 }),
-      [insets.bottom]
-    );
+    const listRef = useRef<LegendListRef>(null);
+    const composerRef = useRef<View>(null);
+    const { contentInsetEndAdjustment, onComposerLayout } =
+      useKeyboardChatComposerInset(listRef, composerRef);
+    const { freeze, scrollMessageToEnd } = useKeyboardScrollToEnd({
+      listRef,
+    });
 
     const handlePressUrl = useCallback(
       (url: string) => {
@@ -173,33 +180,34 @@ const ChatDetail = memo(
           onPress={handlePressPinnedMessageBar}
         />
 
-        <KeyboardAvoidingView
-          style={styles.keyboardAvoiding}
-          behavior="padding"
-          keyboardVerticalOffset={keyboardVerticalOffset}
-        >
-          <ChatListLegend
-            messages={messages}
-            conversationId={conversationId}
-            customMessageItemFactory={customMessageItemFactory}
-            isLoading={initLoading || isLoadingConversation}
-            onLoadMoreOld={getMoreOldMessages}
-            hasMoreOld={hasMoreOld}
-            moreOldLoading={moreOldLoading}
-            onLoadMoreNew={getMoreNewMessages}
-            hasMoreNew={hasMoreNew}
-            moreNewLoading={moreNewLoading}
-            onMediaPress={handleMediaPress}
-            onPressUrl={handlePressUrl}
-            onLongPress={handleMessageLongPress}
-          />
-
-          <ChatComposer
-            isEmptyMessage={messages?.length === 0}
-            pannelActions={pannelActions}
-            isDisableCompose={botStatus === DBotStatusValue.INACTIVE}
-          />
-        </KeyboardAvoidingView>
+        <ChatListLegend
+          messages={messages}
+          conversationId={conversationId}
+          customMessageItemFactory={customMessageItemFactory}
+          isLoading={initLoading || isLoadingConversation}
+          onLoadMoreOld={getMoreOldMessages}
+          hasMoreOld={hasMoreOld}
+          moreOldLoading={moreOldLoading}
+          onLoadMoreNew={getMoreNewMessages}
+          hasMoreNew={hasMoreNew}
+          moreNewLoading={moreNewLoading}
+          onMediaPress={handleMediaPress}
+          onPressUrl={handlePressUrl}
+          onLongPress={handleMessageLongPress}
+          listRef={listRef}
+          contentInsetEndAdjustment={contentInsetEndAdjustment}
+          freeze={freeze}
+          scrollMessageToEnd={scrollMessageToEnd}
+          keyboardOffset={insets.bottom}
+        />
+
+        <ChatComposer
+          isEmptyMessage={messages?.length === 0}
+          pannelActions={pannelActions}
+          isDisableCompose={botStatus === DBotStatusValue.INACTIVE}
+          composerRef={composerRef}
+          onComposerLayout={onComposerLayout}
+        />
 
         <MediaViewerModal ref={mediaViewerRef} />
         <MessageToolboxOverlay
@@ -216,8 +224,4 @@ const ChatDetail = memo(
 
 ChatDetail.displayName = 'ChatDetail';
 
-const styles = StyleSheet.create({
-  keyboardAvoiding: { flex: 1 },
-});
-
 export default ChatDetail;

package/src/screens/chat-detail/ChatListLegend.tsx

@@ -1,11 +1,21 @@
-import { memo, useCallback, useMemo, useEffect, useRef, useState } from 'react';
+import {
+  memo,
+  useCallback,
+  useMemo,
+  useEffect,
+  useRef,
+  useState,
+  type RefObject,
+} from 'react';
 import { DeviceEventEmitter, StyleSheet, type View } from 'react-native';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
   withSpring,
+  type SharedValue,
 } from 'react-native-reanimated';
-import { LegendList, type LegendListRef } from '@legendapp/list/react-native';
+import { KeyboardAwareLegendList } from '@legendapp/list/keyboard';
+import type { LegendListRef } from '@legendapp/list/react-native';
 import { KContainer, KColors, KSpacingValue, KLabel } from '@droppii/libs';
 import { precomputeLegendListData } from '../../utils/legendListMessage';
 import type { ChatListProps } from './types';
@@ -26,6 +36,17 @@ import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import { useUserStore } from '../../store';
 import { ChatMessageAPI } from '../../services';
 
+interface ChatListLegendInternalProps extends ChatListProps {
+  listRef: RefObject<LegendListRef | null>;
+  contentInsetEndAdjustment: SharedValue<number>;
+  freeze: SharedValue<boolean>;
+  scrollMessageToEnd: (opts: {
+    animated: boolean;
+    closeKeyboard: boolean;
+  }) => Promise<void>;
+  keyboardOffset: number;
+}
+
 export const ChatListLegend = memo(
   ({
     messages = [],
@@ -40,7 +61,12 @@ export const ChatListLegend = memo(
     onMediaPress,
     onPressUrl,
     onLongPress,
-  }: ChatListProps) => {
+    listRef,
+    contentInsetEndAdjustment,
+    freeze,
+    scrollMessageToEnd,
+    keyboardOffset,
+  }: ChatListLegendInternalProps) => {
     const currentUserId = useUserStore((s) => s.user?.userID);
     // Precompute all message data in single pass (O(n))
     const messageDataMap = useMemo(
@@ -58,7 +84,6 @@ export const ChatListLegend = memo(
     const { mutate: runFlow } = useRunFlow();
     const { mutate: resetFlow } = useResetFlow();
 
-    const listRef = useRef<LegendListRef>(null);
     const buttonOpacity = useSharedValue(0);
     const isAtBottomRef = useRef(true);
     const scrollDebounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
@@ -285,12 +310,12 @@ export const ChatListLegend = memo(
       if (hasMoreNew) {
         onLoadMoreOld?.(false);
       } else {
-        listRef.current?.scrollToEnd({ animated: true });
+        scrollMessageToEnd({ animated: true, closeKeyboard: false });
         buttonOpacity.value = withSpring(0, { duration: 300 });
         isAtBottomRef.current = true;
         setShowBadge(false);
       }
-    }, [buttonOpacity, onLoadMoreOld, hasMoreNew]);
+    }, [hasMoreNew, onLoadMoreOld, scrollMessageToEnd, buttonOpacity]);
 
     const animatedButtonStyle = useAnimatedStyle(() => ({
       opacity: buttonOpacity.value,
@@ -359,6 +384,7 @@ export const ChatListLegend = memo(
       conversationId,
       buttonOpacity,
       handleScrollToBottom,
+      listRef,
     ]);
 
     // if (isLoading) {
@@ -374,7 +400,7 @@ export const ChatListLegend = memo(
 
     return (
       <KContainer.View flex background={KColors.white} style={styles.container}>
-        <LegendList
+        <KeyboardAwareLegendList
           ref={listRef}
           data={messages}
           renderItem={renderItem}
@@ -385,6 +411,9 @@ export const ChatListLegend = memo(
           alignItemsAtEnd
           maintainVisibleContentPosition={maintainVisiblePositionConfig}
           maintainScrollAtEnd={maintainScrollConfig}
+          contentInsetEndAdjustment={contentInsetEndAdjustment}
+          freeze={freeze}
+          keyboardOffset={keyboardOffset}
           scrollEventThrottle={16}
           onScroll={handleScroll}
           contentContainerStyle={styles.content}