react-native-gifted-chat 2.8.2-alpha.2 → 2.8.2-alpha.4

package/README.md

@@ -26,10 +26,7 @@
 </p>
 
 <p align="center">
-  <a href="https://reverent-bardeen-47c862.netlify.com/" target="_blank">Demo Web 🖥</a>
-</p>
-<p align="center">
-  <a href="https://snack.expo.io/@xcarpentier/giftedchat-playground" target="_blank">Snack GiftedChat playground</a>
+  <a href="https://snack.expo.dev/@kesha-antonov/gifted-chat-playground" target="_blank">Snack GiftedChat playground</a>
   <img height="18" src="https://snack.expo.io/favicon.ico" />
 </p>
 
@@ -358,10 +355,12 @@ interface QuickReplies {
 - **`messageContainerRef`** _(FlatList ref)_ - Ref to the flatlist
 - **`textInputRef`** _(TextInput ref)_ - Ref to the text input
 - **`messages`** _(Array)_ - Messages to display
+- **`messagesContainerStyle`** _(Object)_ - Custom style for the messages container
 - **`isTyping`** _(Bool)_ - Typing Indicator state; default `false`. If you use`renderFooter` it will override this.
 - **`keyboardBottomOffset`** _(Integer)_ - Distance between the bottom of the screen and bottom of the `GiftedChat` component. Useful when you have a tab bar or navigation bar; default is `0`. Needed for correct keyboard avoiding behavior. Without it you might see gap between the keyboard and the input toolbar if you have a tab bar, navigation bar, or safe area.
 - **`isKeyboardInternallyHandled`** _(Bool)_ - Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is `true`
 - **`text`** _(String)_ - Input text; default is `undefined`, but if specified, it will override GiftedChat's internal state (e.g. for redux; [see notes below](#notes-for-redux))
+- **`initialText`** _(String)_ - Initial text to display in the input field
 - **`onInputTextChanged`** _(Function)_ - Callback when the input text changes
 - **`messageIdGenerator`** _(Function)_ - Generate an id for new messages. Defaults to UUID v4, generated by [uuid](https://github.com/kelektiv/node-uuid)
 - **`user`** _(Object)_ - User sending the messages: `{ _id, name, avatar }`
@@ -371,9 +370,18 @@ interface QuickReplies {
 - **`timeFormat`** _(String)_ - Format to use for rendering times; default is `'LT'` (see [Day.js Format](https://day.js.org/docs/en/display/format))
 - **`dateFormat`** _(String)_ - Format to use for rendering dates; default is `'D MMMM'` (see [Day.js Format](https://day.js.org/docs/en/display/format))
 - **`dateFormatCalendar`** _(Object)_ - Format to use for rendering relative times; default is `{ sameDay: '[Today]' }` (see [Day.js Calendar](https://day.js.org/docs/en/plugin/calendar))
-- **`loadEarlier`** _(Bool)_ - Enables the "load earlier messages" button, required for `infiniteScroll`
-- **`onLoadEarlier`** _(Function)_ - Callback when loading earlier messages
-- **`isLoadingEarlier`** _(Bool)_ - Display an `ActivityIndicator` when loading earlier messages
+- **`loadEarlierMessagesProps`** _(Object)_ - Props to pass to the LoadEarlierMessages component. The button is only visible when `isAvailable` is `true`. Supports the following props:
+  - `isAvailable` - Controls button visibility (default: false)
+  - `onPress` - Callback when button is pressed
+  - `isLoading` - Display loading indicator (default: false)
+  - `isInfiniteScrollEnabled` - Enable infinite scroll up when reaching the top of messages container, automatically calls `onPress` (not yet supported for web)
+  - `label` - Override the default "Load earlier messages" text
+  - `containerStyle` - Custom style for the button container
+  - `wrapperStyle` - Custom style for the button wrapper
+  - `textStyle` - Custom style for the button text
+  - `activityIndicatorStyle` - Custom style for the loading indicator
+  - `activityIndicatorColor` - Color of the loading indicator (default: 'white')
+  - `activityIndicatorSize` - Size of the loading indicator (default: 'small')
 - **`renderLoading`** _(Function)_ - Render a loading view when initializing
 - **`renderLoadEarlier`** _(Function)_ - Custom "Load earlier messages" button
 - **`renderAvatar`** _(Function)_ - Custom message avatar; set to `null` to not render any avatar for the message
@@ -394,13 +402,17 @@ interface QuickReplies {
 - **`renderMessageText`** _(Function)_ - Custom message text
 - **`renderMessageImage`** _(Function)_ - Custom message image
 - **`renderMessageVideo`** _(Function)_ - Custom message video
+- **`renderMessageAudio`** _(Function)_ - Custom message audio
 - **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://reactnative.dev/docs/image.html) component created by the default `renderMessageImage`
+- **`imageStyle`** _(Object)_ - Custom style for message images
 - **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`
 - **`isCustomViewBottom`** _(Bool)_ - Determine whether renderCustomView is displayed before or after the text, image and video views; default is `false`
 - **`renderCustomView`** _(Function)_ - Custom view inside the bubble
 - **`renderDay`** _(Function)_ - Custom day above a message
 - **`renderTime`** _(Function)_ - Custom time inside a message
+- **`timeTextStyle`** _(Object)_ - Custom text style for time inside messages (supports left/right styles)
 - **`renderFooter`** _(Function)_ - Custom footer component on the ListView, e.g. `'User is typing...'`; see [App.tsx](/example/App.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true.
+- **`renderTypingIndicator`** _(Function)_ - Custom typing indicator component
 - **`renderChatEmpty`** _(Function)_ - Custom component to render in the ListView when messages are empty
 - **`renderChatFooter`** _(Function)_ - Custom component to render below the MessageContainer (separate from the ListView)
 - **`renderInputToolbar`** _(Function)_ - Custom message composer container
@@ -409,6 +421,9 @@ interface QuickReplies {
 - **`renderSend`** _(Function)_ - Custom send button; you can pass children to the original `Send` component quite easily, for example, to use a custom icon ([example](https://github.com/FaridSafi/react-native-gifted-chat/pull/487))
 - **`renderAccessory`** _(Function)_ - Custom second line of actions below the message composer
 - **`onPressActionButton`** _(Function)_ - Callback when the Action button is pressed (if set, the default `actionSheet` will not be used)
+- **`actionSheet`** _(Function)_ - Custom action sheet interface for showing action options
+- **`actions`** _(Array)_ - Custom action options for the input toolbar action button; array of objects with `title` (string) and `action` (function) properties
+- **`actionSheetOptionTintColor`** _(String)_ - Tint color for action sheet options
 - **`focusOnInputWhenOpeningKeyboard`** _(Bool)_ - Focus on <TextInput> automatically when opening the keyboard; default `true`
 - **`minInputToolbarHeight`** _(Integer)_ - Minimum height of the input toolbar; default is `44`
 - **`listProps`** _(Object)_ - Extra props to be passed to the messages [`<FlatList>`](https://reactnative.dev/docs/flatlist.html); some props can't be overridden, see the code in `MessageContainer.render()` for details
@@ -457,10 +472,12 @@ Example:
 * **`onQuickReply`** _(Function)_ - Callback when sending a quick reply (to backend server)
 * **`renderQuickReplies`** _(Function)_ - Custom all quick reply view
 * **`quickReplyStyle`** _(StyleProp<ViewStyle>)_ - Custom quick reply view style
+* **`quickReplyTextStyle`** _(StyleProp<TextStyle>)_ - Custom text style for quick reply buttons
+* **`quickReplyContainerStyle`** _(StyleProp<ViewStyle>)_ - Custom container style for quick replies
 * **`renderQuickReplySend`** _(Function)_ - Custom quick reply **send** view
 * **`shouldUpdateMessage`** _(Function)_ - Lets the message component know when to update outside of normal cases.
-* **`infiniteScroll`** _(Bool)_ - infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist (not yet supported for the web). You need to add `loadEarlier` prop too.
 * **`typingIndicatorStyle`** _(StyleProp<ViewStyle>)_ - Custom style for the TypingIndicator component.
+* **`handleOnScroll`** _(Function)_ - Custom scroll event handler for the message list
 
 ## Notes for [Redux](https://github.com/reactjs/redux)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "2.8.2-alpha.2",
+  "version": "2.8.2-alpha.4",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",

package/src/Actions.tsx

@@ -14,8 +14,8 @@ import { useChatContext } from './GiftedChatContext'
 import stylesCommon from './styles'
 
 export interface ActionsProps {
-  options?: { [key: string]: () => void }
-  optionTintColor?: string
+  actions?: Array<{ title: string, action: () => void }>
+  actionSheetOptionTintColor?: string
   icon?: () => ReactNode
   wrapperStyle?: StyleProp<ViewStyle>
   iconTextStyle?: StyleProp<TextStyle>
@@ -24,8 +24,8 @@ export interface ActionsProps {
 }
 
 export function Actions ({
-  options,
-  optionTintColor = Color.optionTintColor,
+  actions,
+  actionSheetOptionTintColor = Color.optionTintColor,
   icon,
   wrapperStyle,
   iconTextStyle,
@@ -35,28 +35,26 @@ export function Actions ({
   const { actionSheet } = useChatContext()
 
   const onActionsPress = useCallback(() => {
-    if (!options)
+    if (!actions?.length)
       return
 
-    const optionKeys = Object.keys(options)
-    const cancelButtonIndex = optionKeys.indexOf('Cancel')
+    const titles = actions.map(item => item.title)
 
     actionSheet().showActionSheetWithOptions(
       {
-        options: optionKeys,
-        cancelButtonIndex,
-        tintColor: optionTintColor,
+        options: titles,
+        cancelButtonIndex: titles.length - 1,
+        tintColor: actionSheetOptionTintColor,
       },
-      (buttonIndex: number | undefined) => {
+      (buttonIndex?: number) => {
         if (buttonIndex === undefined)
           return
 
-        const key = optionKeys[buttonIndex]
-        if (key)
-          options[key]()
+        const item = actions[buttonIndex]
+        item.action?.()
       }
     )
-  }, [actionSheet, options, optionTintColor])
+  }, [actionSheet, actions, actionSheetOptionTintColor])
 
   const renderIcon = useCallback(() => {
     if (icon)

package/src/GiftedChat/index.tsx

@@ -27,6 +27,7 @@ import Animated, {
   withTiming,
   runOnJS,
 } from 'react-native-reanimated'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { Actions } from '../Actions'
 import { Avatar } from '../Avatar'
 import Bubble from '../Bubble'
@@ -36,7 +37,7 @@ import { Day } from '../Day'
 import { GiftedAvatar } from '../GiftedAvatar'
 import { GiftedChatContext } from '../GiftedChatContext'
 import { InputToolbar } from '../InputToolbar'
-import { LoadEarlier } from '../LoadEarlier'
+import { LoadEarlierMessages } from '../LoadEarlierMessages'
 import Message from '../Message'
 import MessageContainer, { AnimatedList } from '../MessageContainer'
 import { MessageImage } from '../MessageImage'
@@ -45,10 +46,10 @@ import { Send } from '../Send'
 import stylesCommon from '../styles'
 import { SystemMessage } from '../SystemMessage'
 import { Time } from '../Time'
+
 import {
   IMessage,
 } from '../types'
-
 import * as utils from '../utils'
 import styles from './styles'
 import { GiftedChatProps } from './types'
@@ -421,9 +422,11 @@ function GiftedChatWrapper<TMessage extends IMessage = IMessage> (props: GiftedC
 
   return (
     <GestureHandlerRootView style={styles.fill}>
-      <KeyboardProvider>
-        <GiftedChat<TMessage> {...props} />
-      </KeyboardProvider>
+      <SafeAreaProvider>
+        <KeyboardProvider>
+          <GiftedChat<TMessage> {...props} />
+        </KeyboardProvider>
+      </SafeAreaProvider>
     </GestureHandlerRootView>
   )
 }
@@ -467,7 +470,7 @@ export {
   Composer,
   Day,
   InputToolbar,
-  LoadEarlier,
+  LoadEarlierMessages,
   Message,
   MessageContainer,
   Send,

package/src/GiftedChat/types.ts

@@ -77,8 +77,8 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   minComposerHeight?: number
   /* composer min Height */
   maxComposerHeight?: number
-  options?: { [key: string]: () => void }
-  optionTintColor?: string
+  actions?: Array<{ title: string, action: () => void }>
+  actionSheetOptionTintColor?: string
   quickReplyStyle?: StyleProp<ViewStyle>
   quickReplyTextStyle?: StyleProp<TextStyle>
   quickReplyContainerStyle?: StyleProp<ViewStyle>

package/src/InputToolbar.tsx

@@ -8,8 +8,8 @@ import { Send, SendProps } from './Send'
 import { IMessage } from './types'
 
 export interface InputToolbarProps<TMessage extends IMessage> {
-  options?: { [key: string]: () => void }
-  optionTintColor?: string
+  actions?: Array<{ title: string, action: () => void }>
+  actionSheetOptionTintColor?: string
   containerStyle?: StyleProp<ViewStyle>
   primaryStyle?: StyleProp<ViewStyle>
   accessoryStyle?: StyleProp<ViewStyle>
@@ -31,8 +31,8 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
     renderComposer,
     renderSend,
     renderAccessory,
-    options,
-    optionTintColor,
+    actions,
+    actionSheetOptionTintColor,
     icon,
     wrapperStyle,
     containerStyle,
@@ -43,8 +43,8 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
   const actionsFragment = useMemo(() => {
     const props = {
       onPressActionButton,
-      options,
-      optionTintColor,
+      actions,
+      actionSheetOptionTintColor,
       icon,
       wrapperStyle,
       containerStyle,
@@ -56,8 +56,8 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
   }, [
     renderActions,
     onPressActionButton,
-    options,
-    optionTintColor,
+    actions,
+    actionSheetOptionTintColor,
     icon,
     wrapperStyle,
     containerStyle,

package/src/LoadEarlier.tsx

@@ -40,7 +40,7 @@ const styles = StyleSheet.create({
   },
 })
 
-export interface LoadEarlierProps {
+export interface LoadEarlierMessagesProps {
   isLoadingEarlier?: boolean
   label?: string
   containerStyle?: StyleProp<ViewStyle>
@@ -49,12 +49,12 @@ export interface LoadEarlierProps {
   activityIndicatorStyle?: StyleProp<ViewStyle>
   activityIndicatorColor?: string
   activityIndicatorSize?: number | 'small' | 'large'
-  onLoadEarlier?(): void
+  onPress: () => void
 }
 
-export const LoadEarlier: React.FC<LoadEarlierProps> = ({
+export const LoadEarlierMessages: React.FC<LoadEarlierMessagesProps> = ({
   isLoadingEarlier = false,
-  onLoadEarlier = () => {},
+  onPress,
   label = 'Load earlier messages',
   containerStyle,
   wrapperStyle,
@@ -83,7 +83,7 @@ export const LoadEarlier: React.FC<LoadEarlierProps> = ({
   return (
     <TouchableOpacity
       style={[styles.container, containerStyle]}
-      onPress={onLoadEarlier}
+      onPress={onPress}
       disabled={isLoadingEarlier}
       accessibilityRole='button'
     >

package/src/LoadEarlierMessages.tsx

@@ -0,0 +1,97 @@
+import React, { useMemo } from 'react'
+import {
+  ActivityIndicator,
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native'
+import Color from './Color'
+import { TouchableOpacity } from './components/TouchableOpacity'
+import stylesCommon from './styles'
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    marginTop: 5,
+    marginBottom: 10,
+  },
+  wrapper: {
+    backgroundColor: Color.defaultColor,
+    borderRadius: 15,
+    height: 30,
+    paddingLeft: 10,
+    paddingRight: 10,
+  },
+  text: {
+    backgroundColor: Color.backgroundTransparent,
+    color: Color.white,
+    fontSize: 12,
+  },
+  activityIndicator: {
+    marginTop: Platform.select({
+      ios: -14,
+      android: -16,
+      default: -15,
+    }),
+  },
+})
+
+export interface LoadEarlierMessagesProps {
+  isAvailable?: boolean
+  isLoading?: boolean
+  isInfiniteScrollEnabled?: boolean
+  label?: string
+  containerStyle?: StyleProp<ViewStyle>
+  wrapperStyle?: StyleProp<ViewStyle>
+  textStyle?: StyleProp<TextStyle>
+  activityIndicatorStyle?: StyleProp<ViewStyle>
+  activityIndicatorColor?: string
+  activityIndicatorSize?: number | 'small' | 'large'
+  onPress: () => void
+}
+
+export const LoadEarlierMessages: React.FC<LoadEarlierMessagesProps> = ({
+  isLoading = false,
+  onPress,
+  label = 'Load earlier messages',
+  containerStyle,
+  wrapperStyle,
+  textStyle,
+  activityIndicatorColor = 'white',
+  activityIndicatorSize = 'small',
+  activityIndicatorStyle,
+}) => {
+  const loadingContent = useMemo(() => (
+    <View>
+      <Text style={[styles.text, textStyle, { opacity: 0 }]}>
+        {label}
+      </Text>
+      <ActivityIndicator
+        color={activityIndicatorColor!}
+        size={activityIndicatorSize!}
+        style={[styles.activityIndicator, activityIndicatorStyle]}
+      />
+    </View>
+  ), [label, textStyle, activityIndicatorColor, activityIndicatorSize, activityIndicatorStyle])
+
+  const labelContent = useMemo(() => (
+    <Text style={[styles.text, textStyle]}>{label}</Text>
+  ), [label, textStyle])
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, containerStyle]}
+      onPress={onPress}
+      disabled={isLoading}
+      accessibilityRole='button'
+    >
+      <View style={[stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
+        {isLoading ? loadingContent : labelContent}
+      </View>
+    </TouchableOpacity>
+  )
+}

package/src/MessageContainer/components/DayAnimated/index.tsx

@@ -11,13 +11,13 @@ import { DayAnimatedProps } from './types'
 
 export * from './types'
 
-const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages, isLoadingEarlier, ...rest }: DayAnimatedProps) => {
+const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages, isLoading, ...rest }: DayAnimatedProps) => {
   const opacity = useSharedValue(0)
   const fadeOutOpacityTimeoutId = useSharedValue<ReturnType<typeof setTimeout> | undefined>(undefined)
   const containerHeight = useSharedValue(0)
 
   const isScrolledOnMount = useSharedValue(false)
-  const isLoadingEarlierAnim = useSharedValue(isLoadingEarlier)
+  const isLoadingAnim = useSharedValue(isLoading)
 
   const daysPositionsArray = useDerivedValue(() => Object.values(daysPositions.value).sort((a, b) => a.y - b.y))
 
@@ -57,11 +57,11 @@ const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages
   const style = useAnimatedStyle(() => ({
     top: interpolate(
       relativeScrolledPositionToBottomOfDay.value,
-      [-dayTopOffset, -0.0001, 0, isLoadingEarlierAnim.value ? 0 : containerHeight.value + dayTopOffset],
-      [dayTopOffset, dayTopOffset, -containerHeight.value, isLoadingEarlierAnim.value ? -containerHeight.value : dayTopOffset],
+      [-dayTopOffset, -0.0001, 0, isLoadingAnim.value ? 0 : containerHeight.value + dayTopOffset],
+      [dayTopOffset, dayTopOffset, -containerHeight.value, isLoadingAnim.value ? -containerHeight.value : dayTopOffset],
       'clamp'
     ),
-  }), [relativeScrolledPositionToBottomOfDay, containerHeight, dayTopOffset, isLoadingEarlierAnim])
+  }), [relativeScrolledPositionToBottomOfDay, containerHeight, dayTopOffset, isLoadingAnim])
 
   const contentStyle = useAnimatedStyle(() => ({
     opacity: opacity.value,
@@ -111,8 +111,8 @@ const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages
   )
 
   useEffect(() => {
-    isLoadingEarlierAnim.value = isLoadingEarlier
-  }, [isLoadingEarlierAnim, isLoadingEarlier])
+    isLoadingAnim.value = isLoading
+  }, [isLoadingAnim, isLoading])
 
   const dayContent = useMemo(() => {
     if (!createdAt)

package/src/MessageContainer/components/DayAnimated/types.ts

@@ -8,5 +8,5 @@ export interface DayAnimatedProps extends Omit<DayProps, 'createdAt'> {
   listHeight: { value: number }
   renderDay?: (props: DayProps) => React.ReactNode
   messages: IMessage[]
-  isLoadingEarlier: boolean
+  isLoading: boolean
 }

package/src/MessageContainer/index.tsx

@@ -3,14 +3,13 @@ import {
   View,
   Pressable,
   Text,
-  Platform,
   LayoutChangeEvent,
   ListRenderItemInfo,
   CellRendererProps,
 } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
 import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
-import { LoadEarlier } from '../LoadEarlier'
+import { LoadEarlierMessages } from '../LoadEarlierMessages'
 import { warning } from '../logging'
 import { ReanimatedScrollEvent } from '../reanimatedCompat'
 
@@ -27,7 +26,7 @@ import { MessageContainerProps, DaysPositions } from './types'
 
 export * from './types'
 
- 
+
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) as React.ComponentType<any>
 
 function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageContainerProps<TMessage>) {
@@ -36,17 +35,14 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     user,
     isTyping = false,
     renderChatEmpty: renderChatEmptyProp,
-    onLoadEarlier,
     inverted = true,
-    loadEarlier = false,
     listProps,
     extraData,
     isScrollToBottomEnabled = false,
     scrollToBottomOffset = 200,
     alignTop = false,
     scrollToBottomStyle,
-    infiniteScroll = false,
-    isLoadingEarlier = false,
+    loadEarlierMessagesProps,
     renderTypingIndicator: renderTypingIndicatorProp,
     renderFooter: renderFooterProp,
     renderLoadEarlier: renderLoadEarlierProp,
@@ -83,15 +79,15 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
   }, [renderFooterProp, renderTypingIndicator, props])
 
   const renderLoadEarlier = useCallback(() => {
-    if (loadEarlier) {
+    if (loadEarlierMessagesProps?.onPress && loadEarlierMessagesProps?.isAvailable) {
       if (renderLoadEarlierProp)
-        return renderLoadEarlierProp(props)
+        return renderLoadEarlierProp(loadEarlierMessagesProps)
 
-      return <LoadEarlier {...props} />
+      return <LoadEarlierMessages {...loadEarlierMessagesProps} />
     }
 
     return null
-  }, [loadEarlier, renderLoadEarlierProp, props])
+  }, [loadEarlierMessagesProps, renderLoadEarlierProp])
 
   const changeScrollToBottomVisibility: (isVisible: boolean) => void = useCallbackThrottled((isVisible: boolean) => {
     if (isScrollingDown.value && isVisible)
@@ -290,14 +286,13 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
 
   const onEndReached = useCallback(() => {
     if (
-      infiniteScroll &&
-      loadEarlier &&
-      onLoadEarlier &&
-      !isLoadingEarlier &&
-      Platform.OS !== 'web'
+      loadEarlierMessagesProps?.isInfiniteScrollEnabled &&
+      loadEarlierMessagesProps?.onPress &&
+      loadEarlierMessagesProps?.isAvailable &&
+      !loadEarlierMessagesProps?.isLoading
     )
-      onLoadEarlier()
-  }, [infiniteScroll, loadEarlier, onLoadEarlier, isLoadingEarlier])
+      loadEarlierMessagesProps.onPress()
+  }, [loadEarlierMessagesProps])
 
   const keyExtractor = useCallback((item: unknown) => (item as TMessage)._id.toString(), [])
 
@@ -420,7 +415,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         listHeight={listHeight}
         renderDay={renderDayProp}
         messages={messages}
-        isLoadingEarlier={isLoadingEarlier}
+        isLoading={loadEarlierMessagesProps?.isLoading ?? false}
       />
     </View>
   )

package/src/MessageContainer/types.ts

@@ -6,7 +6,7 @@ import {
 } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
 
-import { LoadEarlierProps } from '../LoadEarlier'
+import { LoadEarlierMessagesProps } from '../LoadEarlierMessages'
 import { MessageProps } from '../Message'
 import { ReanimatedScrollEvent } from '../reanimatedCompat'
 import { User, IMessage, Reply, DayProps } from '../types'
@@ -28,8 +28,6 @@ export interface MessageContainerProps<TMessage extends IMessage = IMessage>
   listProps?: ListProps<TMessage>
   /** Reverses display order of messages; default is true */
   inverted?: boolean
-  /** Enables the "Load earlier messages" button */
-  loadEarlier?: boolean
   /** Controls whether or not the message bubbles appear at the top of the chat */
   alignTop?: boolean
   /** Enables the isScrollToBottomEnabled Component */
@@ -49,19 +47,15 @@ export interface MessageContainerProps<TMessage extends IMessage = IMessage>
   /** Custom day above a message */
   renderDay?(props: DayProps): React.ReactNode
   /** Custom "Load earlier messages" button */
-  renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode
+  renderLoadEarlier?(props: LoadEarlierMessagesProps): React.ReactNode
   /** Custom typing indicator */
   renderTypingIndicator?(): React.ReactNode
   /** Scroll to bottom custom component */
   scrollToBottomComponent?(): React.ReactNode
-  /** Callback when loading earlier messages */
-  onLoadEarlier?(): void
   /** Callback when quick reply is sent */
   onQuickReply?(replies: Reply[]): void
-  /** Infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist */
-  infiniteScroll?: boolean
-  /** Display an ActivityIndicator when loading earlier messages */
-  isLoadingEarlier?: boolean
+  /** Props to pass to the LoadEarlierMessages component. The LoadEarlierMessages button is only visible when isAvailable is true. Includes isAvailable (controls button visibility), isInfiniteScrollEnabled (infinite scroll up when reach the top of messages container, automatically call onPress function if it exists - not yet supported for web), onPress (callback when button is pressed), isLoading (display loading indicator), label (override default "Load earlier messages" text), and styling props (containerStyle, wrapperStyle, textStyle, activityIndicatorStyle, activityIndicatorColor, activityIndicatorSize). */
+  loadEarlierMessagesProps?: LoadEarlierMessagesProps
   /** Custom scroll event handler */
   handleOnScroll?(event: ReanimatedScrollEvent): void
   /** Style for TypingIndicator component */

package/src/__tests__/DayAnimated.test.tsx

@@ -23,7 +23,7 @@ describe('DayAnimated', () => {
         daysPositions={mockDaysPositions}
         listHeight={mockListHeight}
         messages={[mockMessage]}
-        isLoadingEarlier={false}
+        isLoading={false}
       />
     )
     expect(toJSON()).toMatchSnapshot()
@@ -42,7 +42,7 @@ describe('DayAnimated', () => {
         daysPositions={mockDaysPositions}
         listHeight={mockListHeight}
         messages={[mockMessage]}
-        isLoadingEarlier={false}
+        isLoading={false}
         renderDay={customRenderDay}
       />
     )

package/src/__tests__/LoadEarlier.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { LoadEarlier } from '../GiftedChat'
+import { LoadEarlierMessages } from '../GiftedChat'
 
-it('should render <LoadEarlier /> and compare with snapshot', () => {
-  const { toJSON } = render(<LoadEarlier />)
+it('should render <LoadEarlierMessages /> and compare with snapshot', () => {
+  const { toJSON } = render(<LoadEarlierMessages />)
 
   expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/MessageContainer.test.tsx

@@ -5,13 +5,6 @@ import { MessageContainer } from '../GiftedChat'
 import { DEFAULT_TEST_MESSAGE } from './data'
 
 it('should render <MessageContainer /> without crashing', () => {
-  render(
-    <MessageContainer
-      messages={[DEFAULT_TEST_MESSAGE]}
-      user={{ _id: 'test' }}
-    />
-  )
-
   // Just verify it renders without throwing
   expect(() => render(
     <MessageContainer

package/src/__tests__/__snapshots__/LoadEarlier.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render <LoadEarlier /> and compare with snapshot 1`] = `
+exports[`should render <LoadEarlierMessages /> and compare with snapshot 1`] = `
 <View
   accessibilityRole="button"
   accessibilityState={

package/src/types.ts

@@ -13,7 +13,7 @@ export { ComposerProps } from './Composer'
 export { DayProps } from './Day'
 export { GiftedAvatarProps } from './GiftedAvatar'
 export { InputToolbarProps } from './InputToolbar'
-export { LoadEarlierProps } from './LoadEarlier'
+export { LoadEarlierMessagesProps } from './LoadEarlierMessages'
 export { MessageProps } from './Message'
 export { MessageContainerProps } from './MessageContainer'
 export { MessageImageProps } from './MessageImage'

package/src/utils.ts

@@ -46,7 +46,6 @@ function processCallbackArguments (args: unknown[]): unknown[] {
   return params
 }
 
- 
 export function useCallbackDebounced<T extends (...args: any[]) => any>(callbackFunc: T, deps: React.DependencyList = [], time: number): (...args: Parameters<T>) => void {
   const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
 
@@ -70,7 +69,6 @@ export function useCallbackDebounced<T extends (...args: any[]) => any>(callback
   return savedFunc
 }
 
- 
 export function useCallbackThrottled<T extends (...args: any[]) => any>(callbackFunc: T, deps: React.DependencyList = [], time: number): (...args: Parameters<T>) => void {
   const lastExecution = useRef<number>(0)
   const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)