diff --git a/README.md b/README.md index 426cd506b..ae9b6ad62 100644 --- a/README.md +++ b/README.md @@ -317,6 +317,7 @@ function ChatScreen() { - **`renderLoading`** _(Component | Function)_ - Render a loading view when initializing - **`renderChatEmpty`** _(Component | Function)_ - Custom component to render in the ListView when messages are empty - **`renderChatFooter`** _(Component | Function)_ - Custom component to render below the MessagesContainer (separate from the ListView) +- **`messagesContainerInsets`** _(Object)_ - Content insets for the messages container FlatList. Accepts `{ top, left, bottom, right }`. - **`listProps`** _(Object)_ - Extra props to be passed to the messages [``](https://reactnative.dev/docs/flatlist). Supports all FlatList props including `maintainVisibleContentPosition` for keeping scroll position when new messages arrive (useful for AI chatbots). ### Message Bubbles & Content diff --git a/src/MessagesContainer/index.tsx b/src/MessagesContainer/index.tsx index 0d085135c..0b1b98d02 100644 --- a/src/MessagesContainer/index.tsx +++ b/src/MessagesContainer/index.tsx @@ -43,6 +43,7 @@ export const MessagesContainer = (props: MessagesCont scrollToBottomComponent: scrollToBottomComponentProp, renderDay: renderDayProp, isDayAnimationEnabled = true, + messagesContainerInsets, } = props const listPropsOnScrollProp = listProps?.onScroll @@ -397,6 +398,7 @@ export const MessagesContainer = (props: MessagesCont renderItem={renderItem} inverted={isInverted} automaticallyAdjustContentInsets={false} + contentInset={messagesContainerInsets} style={stylesCommon.fill} contentContainerStyle={styles.messagesContainer} ListEmptyComponent={renderChatEmpty} diff --git a/src/MessagesContainer/types.ts b/src/MessagesContainer/types.ts index b36b7c7d3..26aa92440 100644 --- a/src/MessagesContainer/types.ts +++ b/src/MessagesContainer/types.ts @@ -1,6 +1,7 @@ import { RefObject } from 'react' import { FlatListProps, + Insets, StyleProp, ViewStyle, } from 'react-native' @@ -83,6 +84,8 @@ export interface MessagesContainerProps typingIndicatorStyle?: StyleProp /** Enable animated day label that appears on scroll; default is true */ isDayAnimationEnabled?: boolean + /** Content insets for the messages container FlatList */ + messagesContainerInsets?: Insets /** Reply functionality configuration */ reply?: ReplyProps }