Add scroll to bottom cb

README.md

@@ -407,6 +407,7 @@ interface QuickReplies {
 * **`scrollToBottomComponent`** _(Function)_ - Custom Scroll To Bottom Component container
 * **`scrollToBottomOffset`** _(Integer)_ - Custom Height Offset upon which to begin showing Scroll To Bottom Component (Default is 200)
 * **`scrollToBottomStyle`** _(Object)_ - Custom style for Bottom Component container
+- **`onScrolledToBottom`** _(Function)_ - Callback when the scroll to bottom component toggles visibility, must be used with `scrollToBottom`
 * **`alignTop`** _(Boolean)_ Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom)
 * **`onQuickReply`** _(Function)_ - Callback when sending a quick reply (to backend server)
 * **`renderQuickReplies`** _(Function)_ - Custom all quick reply view

src/GiftedChat.tsx

@@ -157,6 +157,8 @@ export interface GiftedChatProps<TMessage extends IMessage = IMessage> {
   onSend?(messages: TMessage[]): void
   /*Callback when loading earlier messages*/
   onLoadEarlier?(): void
+  /*Callback when scroll to bottom*/
+  onScrolledToBottom?(atBottom: boolean): void
   /*  Render a loading view when initializing */
   renderLoading?(): React.ReactNode
   /* Custom "Load earlier messages" button */
@@ -250,6 +252,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
     dateFormat: DATE_FORMAT,
     loadEarlier: false,
     onLoadEarlier: () => {},
+    onScrolledToBottom: () => {},
     isLoadingEarlier: false,
     renderLoading: null,
     renderLoadEarlier: null,
@@ -321,6 +324,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
     isKeyboardInternallyHandled: PropTypes.bool,
     loadEarlier: PropTypes.bool,
     onLoadEarlier: PropTypes.func,
+    onScrolledToBottom: PropTypes.func,
     isLoadingEarlier: PropTypes.bool,
     renderLoading: PropTypes.func,
     renderLoadEarlier: PropTypes.func,
@@ -694,6 +698,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
       >
         <MessageContainer<TMessage>
           {...messagesContainerProps}
+          onScrolledToBottom={this.props.onScrolledToBottom}
           invertibleScrollViewProps={this.invertibleScrollViewProps}
           messages={this.getMessages()}
           forwardRef={this._messageContainerRef}

src/MessageContainer.tsx

@@ -86,6 +86,7 @@ export interface MessageContainerProps<TMessage extends IMessage> {
   renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode
   scrollToBottomComponent?(): React.ReactNode
   onLoadEarlier?(): void
+  onScrolledToBottom?(atBottom: boolean): void
   onQuickReply?(replies: Reply[]): void
   infiniteScroll?: boolean
   isLoadingEarlier?: boolean
@@ -107,6 +108,7 @@ export default class MessageContainer<
     renderFooter: null,
     renderMessage: null,
     onLoadEarlier: () => {},
+    onScrolledToBottom: () => {},
     onQuickReply: () => {},
     inverted: true,
     loadEarlier: false,
@@ -130,6 +132,7 @@ export default class MessageContainer<
     renderMessage: PropTypes.func,
     renderLoadEarlier: PropTypes.func,
     onLoadEarlier: PropTypes.func,
+    onScrolledToBottom: PropTypes.func,
     listViewProps: PropTypes.object,
     inverted: PropTypes.bool,
     loadEarlier: PropTypes.bool,
@@ -148,6 +151,19 @@ export default class MessageContainer<
     hasScrolled: false,
   }
 
+  componentDidUpdate = (
+    _: MessageContainerProps<TMessage>,
+    prevState: State,
+  ) => {
+    if (
+      this.props.onScrolledToBottom &&
+      prevState.showScrollBottom !== this.state.showScrollBottom
+    ) {
+      if (this.props.onScrolledToBottom)
+        this.props.onScrolledToBottom(!this.state.showScrollBottom)
+    }
+  }
+
   renderTypingIndicator = () => {
     if (Platform.OS === 'web') {
       return null