react-native-gifted-chat 2.8.2-alpha.0 → 2.8.2-alpha.1

package/src/GiftedChat/types.ts

@@ -12,9 +12,7 @@ import { LightboxProps } from 'react-native-lightbox-v2'
 import { ActionsProps } from '../Actions'
 import { AvatarProps } from '../Avatar'
 import { ComposerProps } from '../Composer'
-import { DayProps } from '../Day'
 import { InputToolbarProps } from '../InputToolbar'
-import { LoadEarlierProps } from '../LoadEarlier'
 import { MessageProps } from '../Message'
 import { MessageImageProps } from '../MessageImage'
 import { MessageTextProps } from '../MessageText'
@@ -23,14 +21,13 @@ import {
   LeftRightStyle,
   MessageAudioProps,
   MessageVideoProps,
-  Reply,
   User,
 } from '../types'
 import { QuickRepliesProps } from '../QuickReplies'
 import { SendProps } from '../Send'
 import { SystemMessageProps } from '../SystemMessage'
 import { TimeProps } from '../Time'
-import { AnimatedList, ListViewProps, MessageContainerProps } from '../MessageContainer'
+import { AnimatedList, MessageContainerProps } from '../MessageContainer'
 import { BubbleProps } from '../Bubble'
 
 export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessageContainerProps<TMessage>> {
@@ -38,27 +35,13 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   messageContainerRef?: RefObject<AnimatedList<TMessage>>
   /* text input ref */
   textInputRef?: RefObject<TextInput>
-  /* Messages to display */
-  messages?: TMessage[]
-  /* Typing Indicator state */
-  isTyping?: boolean
   /* Controls whether or not to show user.name property in the message bubble */
   renderUsernameOnMessage?: boolean
   /* Messages container style */
   messagesContainerStyle?: StyleProp<ViewStyle>
   /* Input text; default is undefined, but if specified, it will override GiftedChat's internal state */
   text?: string
-  /* Controls whether or not the message bubbles appear at the top of the chat */
-  alignTop?: boolean
-  /* enables the isScrollToBottomEnabled Component */
-  isScrollToBottomEnabled?: boolean
-  /* Scroll to bottom wrapper style */
-  scrollToBottomStyle?: StyleProp<ViewStyle>
   initialText?: string
-  /* Placeholder when text is empty; default is 'Type a message...' */
-  placeholder?: string
-  /* Makes the composer not editable */
-  disableComposer?: boolean
   /* User sending the messages: { _id, name, avatar } */
   user?: User
   /*  Locale to localize the dates */
@@ -69,10 +52,6 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   dateFormat?: string
   /* Format to use for rendering relative times; Today - for now. See more: https://day.js.org/docs/en/plugin/calendar */
   dateFormatCalendar?: object
-  /* Enables the "Load earlier messages" button */
-  loadEarlier?: boolean
-  /* Display an ActivityIndicator when loading earlier messages */
-  isLoadingEarlier?: boolean
   /* 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` */
   isKeyboardInternallyHandled?: boolean
   /* Completely disable react-native-keyboard-controller. Useful when using react-native-navigation or other conflicting keyboard libraries; default is `false` */
@@ -83,7 +62,6 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   showAvatarForEveryMessage?: boolean
   /* Render the message avatar at the top of consecutive messages, rather than the bottom; default is false */
   renderAvatarOnTop?: boolean
-  inverted?: boolean
   /* Extra props to be passed to the <Image> component created by the default renderMessageImage */
   imageProps?: MessageImageProps<TMessage>
   /* Extra props to be passed to the MessageImage's Lightbox */
@@ -94,20 +72,12 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   focusOnInputWhenOpeningKeyboard?: boolean
   /* Minimum height of the input toolbar; default is 44 */
   minInputToolbarHeight?: number
-  /* Extra props to be passed to the messages <ListView>; some props can't be overridden, see the code in MessageContainer.render() for details */
-  listViewProps?: ListViewProps
-  /*  Extra props to be passed to the <TextInput> */
-  textInputProps?: object
-  /* Determines whether the keyboard should stay visible after a tap; see <ScrollView> docs */
-  keyboardShouldPersistTaps?: 'always' | 'never' | 'handled'
-  /* Max message composer TextInput length */
-  maxInputLength?: number
+  /*  Extra props to be passed to the <TextInput>. See https://reactnative.dev/docs/textinput */
+  textInputProps?: Partial<React.ComponentProps<typeof TextInput>>
   /* Force send button */
   alwaysShowSend?: boolean
   /* Image style */
   imageStyle?: StyleProp<ViewStyle>
-  /* This can be used to pass unknown data which needs to be re-rendered */
-  extraData?: object
   /* composer min Height */
   minComposerHeight?: number
   /* composer min Height */
@@ -119,8 +89,6 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   quickReplyContainerStyle?: StyleProp<ViewStyle>
   /* optional prop used to place customView below text, image and video views; default is false */
   isCustomViewBottom?: boolean
-  /* infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist */
-  infiniteScroll?: boolean
   timeTextStyle?: LeftRightStyle<TextStyle>
   /* Custom action sheet */
   actionSheet?(): {
@@ -137,12 +105,8 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   messageIdGenerator?(message?: TMessage): string
   /* Callback when sending a message */
   onSend?(messages: TMessage[]): void
-  /* Callback when loading earlier messages */
-  onLoadEarlier?(): void
   /*  Render a loading view when initializing */
   renderLoading?(): React.ReactNode
-  /* Custom "Load earlier messages" button */
-  renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode
   /* Custom message avatar; set to null to not render any avatar for the message */
   renderAvatar?: null | ((props: AvatarProps<TMessage>) => React.ReactNode)
   /* Custom message bubble */
@@ -150,14 +114,12 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   /* Custom system message */
   renderSystemMessage?(props: SystemMessageProps<TMessage>): React.ReactNode
   /* Callback when a message bubble is pressed; default is to do nothing */
-  onPress?(context: unknown, message: TMessage): void
+  onPressMessage?(context: unknown, message: TMessage): void
   /* Callback when a message bubble is long-pressed; default is to show an ActionSheet with "Copy Text" (see example using showActionSheetWithOptions()) */
-  onLongPress?(context: unknown, message: TMessage): void
+  onLongPressMessage?(context: unknown, message: TMessage): void
   /* Custom Username container */
   renderUsername?(user: User): React.ReactNode
   /* Reverses display order of messages; default is true */
-  /* Custom message container */
-  renderMessage?(message: MessageProps<TMessage>): React.ReactElement
   /* Custom message text */
   renderMessageText?(messageText: MessageTextProps<TMessage>): React.ReactNode
   /* Custom message image */
@@ -168,14 +130,8 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   renderMessageAudio?(props: MessageAudioProps<TMessage>): React.ReactNode
   /* Custom view inside the bubble */
   renderCustomView?(props: BubbleProps<TMessage>): React.ReactNode
-  /* Custom day above a message */
-  renderDay?(props: DayProps): React.ReactNode
   /* Custom time inside a message */
   renderTime?(props: TimeProps<TMessage>): React.ReactNode
-  /* Custom footer component on the ListView, e.g. 'User is typing...' */
-  renderFooter?(props: MessageContainerProps<TMessage>): React.ReactNode
-  /* Custom component to render in the ListView when messages are empty */
-  renderChatEmpty?(): React.ReactNode
   /* Custom component to render below the MessageContainer (separate from the ListView) */
   renderChatFooter?(): React.ReactNode
   /* Custom message composer container */
@@ -194,13 +150,10 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   onInputTextChanged?(text: string): void
   /* Custom parse patterns for react-native-parsed-text used to linking message content (like URLs and phone numbers) */
   matchers?: MessageTextProps<TMessage>['matchers']
-  onQuickReply?(replies: Reply[]): void
   renderQuickReplies?(
     quickReplies: QuickRepliesProps<TMessage>,
   ): React.ReactNode
   renderQuickReplySend?(): React.ReactNode
-  /* Scroll to bottom custom component */
-  scrollToBottomComponent?(): React.ReactNode
   shouldUpdateMessage?(
     props: MessageProps<TMessage>,
     nextProps: MessageProps<TMessage>,

package/src/InputToolbar.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native'
+import { StyleSheet, View, StyleProp, ViewStyle, useColorScheme } from 'react-native'
 
 import { Composer, ComposerProps } from './Composer'
 import { Send, SendProps } from './Send'
@@ -38,6 +38,8 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
     containerStyle,
   } = props
 
+  const colorScheme = useColorScheme()
+
   const actionsFragment = useMemo(() => {
     const props = {
       onPressActionButton,
@@ -69,18 +71,29 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
     )
   }, [renderComposer, props])
 
+  const sendFragment = useMemo(() => {
+    return renderSend?.(props) || <Send {...props} />
+  }, [renderSend, props])
+
+  const accessoryFragment = useMemo(() => {
+    if (!renderAccessory)
+      return null
+
+    return (
+      <View style={[styles.accessory, props.accessoryStyle]}>
+        {renderAccessory(props)}
+      </View>
+    )
+  }, [renderAccessory, props])
+
   return (
-    <View style={[styles.container, containerStyle]}>
+    <View style={[styles.container, styles[`container_${colorScheme}`], containerStyle]}>
       <View style={[styles.primary, props.primaryStyle]}>
         {actionsFragment}
         {composerFragment}
-        {renderSend?.(props) || <Send {...props} />}
+        {sendFragment}
       </View>
-      {renderAccessory && (
-        <View style={[styles.accessory, props.accessoryStyle]}>
-          {renderAccessory(props)}
-        </View>
-      )}
+      {accessoryFragment}
     </View>
   )
 }
@@ -91,6 +104,10 @@ const styles = StyleSheet.create({
     borderTopColor: Color.defaultColor,
     backgroundColor: Color.white,
   },
+  container_dark: {
+    backgroundColor: '#1a1a1a',
+    borderTopColor: '#444',
+  },
   primary: {
     flexDirection: 'row',
     alignItems: 'flex-end',

package/src/LoadEarlier.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
   ActivityIndicator,
   Platform,
@@ -63,6 +63,23 @@ export function LoadEarlier ({
   activityIndicatorSize = 'small',
   activityIndicatorStyle,
 }: LoadEarlierProps): React.ReactElement {
+  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]}
@@ -71,22 +88,7 @@ export function LoadEarlier ({
       accessibilityRole='button'
     >
       <View style={[stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
-        {isLoadingEarlier
-          ? (
-            <View>
-              <Text style={[styles.text, textStyle, { opacity: 0 }]}>
-                {label}
-              </Text>
-              <ActivityIndicator
-                color={activityIndicatorColor!}
-                size={activityIndicatorSize!}
-                style={[styles.activityIndicator, activityIndicatorStyle]}
-              />
-            </View>
-          )
-          : (
-            <Text style={[styles.text, textStyle]}>{label}</Text>
-          )}
+        {isLoadingEarlier ? loadingContent : labelContent}
       </View>
     </TouchableOpacity>
   )

package/src/MessageAudio.tsx

@@ -1,16 +1,28 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import Color from './Color'
-import { View, Text } from 'react-native'
+import { View, Text, StyleSheet } from 'react-native'
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  text: {
+    color: Color.alizarin,
+    fontWeight: '600',
+  },
+})
 
 export function MessageAudio () {
-  return (
-    <View style={{ padding: 20 }}>
-      <Text style={{ color: Color.alizarin, fontWeight: '600' }}>
+  const content = useMemo(() => (
+    <View style={styles.container}>
+      <Text style={styles.text}>
         {'Audio is not implemented by GiftedChat.'}
       </Text>
-      <Text style={{ color: Color.alizarin, fontWeight: '600' }}>
+      <Text style={styles.text}>
         {'\nYou need to provide your own implementation by using renderMessageAudio prop.'}
       </Text>
     </View>
-  )
+  ), [])
+
+  return content
 }

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

@@ -114,6 +114,19 @@ const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages
     isLoadingEarlierAnim.value = isLoadingEarlier
   }, [isLoadingEarlierAnim, isLoadingEarlier])
 
+  const dayContent = useMemo(() => {
+    if (!createdAt)
+      return null
+
+    return renderDay
+      ? renderDay({ ...rest, createdAt })
+      : <Day
+        {...rest}
+        containerStyle={[styles.dayAnimatedDayContainerStyle, rest.containerStyle]}
+        createdAt={createdAt}
+      />
+  }, [createdAt, renderDay, rest])
+
   if (!createdAt)
     return null
 
@@ -126,15 +139,7 @@ const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages
         style={contentStyle}
         pointerEvents='none'
       >
-        {
-          renderDay
-            ? renderDay({ ...rest, createdAt })
-            : <Day
-              {...rest}
-              containerStyle={[styles.dayAnimatedDayContainerStyle, rest.containerStyle]}
-              createdAt={createdAt}
-            />
-        }
+        {dayContent}
       </Animated.View>
     </Animated.View>
   )

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

@@ -33,7 +33,13 @@ export const useRelativeScrolledPositionToBottomOfDay = (
   const absoluteScrolledPositionToBottomOfDay = useAbsoluteScrolledPositionToBottomOfDay(listHeight, scrolledY, containerHeight, dayBottomMargin, dayTopOffset)
 
   // sorted array of days positions by y
-  const daysPositionsArray = useDerivedValue(() => Object.values(daysPositions.value).sort((a, b) => a.y - b.y))
+  const daysPositionsArray = useDerivedValue(() => {
+    return Object.values(daysPositions.value).sort((a, b) => {
+      'worklet'
+
+      return a.y - b.y
+    })
+  })
 
   // find current day position by scrolled position
   const currentDayPosition = useDerivedValue(() => {

package/src/MessageContainer/index.tsx

@@ -10,7 +10,7 @@ import {
   CellRendererProps,
 } from 'react-native'
 import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
-import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes'
+import { ReanimatedScrollEvent } from '../reanimatedCompat'
 import DayAnimated from './components/DayAnimated'
 import Item from './components/Item'
 
@@ -39,9 +39,8 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     onLoadEarlier,
     inverted = true,
     loadEarlier = false,
-    listViewProps,
-    invertibleScrollViewProps,
-    extraData = null,
+    listProps,
+    extraData,
     isScrollToBottomEnabled = false,
     scrollToBottomOffset = 200,
     alignTop = false,
@@ -73,8 +72,8 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     if (renderTypingIndicatorProp)
       return renderTypingIndicatorProp()
 
-    return <TypingIndicator isTyping={isTyping} />
-  }, [isTyping, renderTypingIndicatorProp])
+    return <TypingIndicator isTyping={isTyping} style={props.typingIndicatorStyle} />
+  }, [isTyping, renderTypingIndicatorProp, props.typingIndicatorStyle])
 
   const ListFooterComponent = useMemo(() => {
     if (renderFooterProp)
@@ -151,6 +150,12 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
       changeScrollToBottomVisibility(false)
   }, [handleOnScrollProp, inverted, scrollToBottomOffset, changeScrollToBottomVisibility, isScrollingDown, lastScrolledY])
 
+  const restProps = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { messages: _, ...rest } = props
+    return rest
+  }, [props])
+
   const renderItem = useCallback(({ item, index }: ListRenderItemInfo<unknown>): React.ReactElement | null => {
     const messageItem = item as TMessage
 
@@ -167,8 +172,6 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
       messageItem.user = { _id: 0 }
     }
 
-    const { messages, ...restProps } = props
-
     if (messages && user) {
       const previousMessage =
         (inverted ? messages[index + 1] : messages[index - 1]) || {}
@@ -192,22 +195,29 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     }
 
     return null
-  }, [props, inverted, scrolledY, daysPositions, listHeight, user])
+  }, [messages, restProps, inverted, scrolledY, daysPositions, listHeight, user])
+
+  const emptyContent = useMemo(() => {
+    if (!renderChatEmptyProp)
+      return null
+
+    return renderChatEmptyProp()
+  }, [renderChatEmptyProp])
 
   const renderChatEmpty = useCallback(() => {
     if (renderChatEmptyProp)
       return inverted
         ? (
-          renderChatEmptyProp()
+          emptyContent
         )
         : (
           <View style={[stylesCommon.fill, styles.emptyChatContainer]}>
-            {renderChatEmptyProp()}
+            {emptyContent}
           </View>
         )
 
     return <View style={stylesCommon.fill} />
-  }, [inverted, renderChatEmptyProp])
+  }, [inverted, renderChatEmptyProp, emptyContent])
 
   const ListHeaderComponent = useMemo(() => {
     const content = renderLoadEarlier()
@@ -227,6 +237,25 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     return <Text>{'V'}</Text>
   }, [scrollToBottomComponentProp])
 
+  const handleScrollToBottomPress = useCallback(() => {
+    doScrollToBottom()
+  }, [doScrollToBottom])
+
+  const scrollToBottomContent = useMemo(() => {
+    return (
+      <Animated.View
+        style={[
+          stylesCommon.centerItems,
+          styles.scrollToBottomContent,
+          scrollToBottomStyle,
+          scrollToBottomStyleAnim,
+        ]}
+      >
+        {renderScrollBottomComponent()}
+      </Animated.View>
+    )
+  }, [scrollToBottomStyle, scrollToBottomStyleAnim, renderScrollBottomComponent])
+
   const ScrollToBottomWrapper = useCallback(() => {
     if (!isScrollToBottomEnabled)
       return null
@@ -237,21 +266,12 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     return (
       <Pressable
         style={styles.scrollToBottom}
-        onPress={() => doScrollToBottom()}
+        onPress={handleScrollToBottomPress}
       >
-        <Animated.View
-          style={[
-            stylesCommon.centerItems,
-            styles.scrollToBottomContent,
-            scrollToBottomStyle,
-            scrollToBottomStyleAnim,
-          ]}
-        >
-          {renderScrollBottomComponent()}
-        </Animated.View>
+        {scrollToBottomContent}
       </Pressable>
     )
-  }, [scrollToBottomStyle, renderScrollBottomComponent, doScrollToBottom, scrollToBottomStyleAnim, isScrollToBottomEnabled, isScrollToBottomVisible])
+  }, [isScrollToBottomEnabled, isScrollToBottomVisible, handleScrollToBottomPress, scrollToBottomContent])
 
   const onLayoutList = useCallback((event: LayoutChangeEvent) => {
     listHeight.value = event.nativeEvent.layout.height
@@ -265,8 +285,8 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         doScrollToBottom(false)
       }, 500)
 
-    listViewProps?.onLayout?.(event)
-  }, [inverted, messages, doScrollToBottom, listHeight, listViewProps, isScrollToBottomEnabled])
+    listProps?.onLayout?.(event)
+  }, [inverted, messages, doScrollToBottom, listHeight, listProps, isScrollToBottomEnabled])
 
   const onEndReached = useCallback(() => {
     if (
@@ -378,7 +398,6 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         inverted={inverted}
         automaticallyAdjustContentInsets={false}
         style={stylesCommon.fill}
-        {...invertibleScrollViewProps}
         ListEmptyComponent={renderChatEmpty}
         ListFooterComponent={
           inverted ? ListHeaderComponent : ListFooterComponent
@@ -390,7 +409,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         scrollEventThrottle={1}
         onEndReached={onEndReached}
         onEndReachedThreshold={0.1}
-        {...listViewProps}
+        {...listProps}
         onLayout={onLayoutList}
         CellRendererComponent={renderCell}
       />

package/src/MessageContainer/types.ts

@@ -9,38 +9,63 @@ import {
 import { LoadEarlierProps } from '../LoadEarlier'
 import { MessageProps } from '../Message'
 import { User, IMessage, Reply, DayProps } from '../types'
-import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes'
+import { ReanimatedScrollEvent } from '../reanimatedCompat'
+import { TypingIndicatorProps } from '../TypingIndicator/types'
 
-export type ListViewProps<TMessage extends IMessage = IMessage> = Partial<FlatListProps<TMessage>>
+export type ListProps<TMessage extends IMessage = IMessage> = Partial<FlatListProps<TMessage>>
 
 export type AnimatedList<TMessage> = FlatList<TMessage>
 
-export interface MessageContainerProps<TMessage extends IMessage = IMessage> {
+export interface MessageContainerProps<TMessage extends IMessage = IMessage>
+  extends Omit<TypingIndicatorProps, 'style'> {
+  /** Ref for the FlatList message container */
   forwardRef?: RefObject<AnimatedList<TMessage>>
+  /** Messages to display */
   messages?: TMessage[]
-  isTyping?: boolean
+  /** User sending the messages: { _id, name, avatar } */
   user?: User
-  listViewProps?: ListViewProps
+  /** Additional props for FlatList */
+  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 */
   isScrollToBottomEnabled?: boolean
+  /** Scroll to bottom wrapper style */
   scrollToBottomStyle?: StyleProp<ViewStyle>
-  invertibleScrollViewProps?: object
+  /** This can be used to pass unknown data which needs to be re-rendered */
   extraData?: object
+  /** Distance from bottom before showing scroll to bottom button */
   scrollToBottomOffset?: number
+  /** Custom component to render when messages are empty */
   renderChatEmpty?(): React.ReactNode
+  /** Custom footer component on the ListView, e.g. 'User is typing...' */
   renderFooter?(props: MessageContainerProps<TMessage>): React.ReactNode
+  /** Custom message container */
   renderMessage?(props: MessageProps<TMessage>): React.ReactElement
+  /** Custom day above a message */
   renderDay?(props: DayProps): React.ReactNode
+  /** Custom "Load earlier messages" button */
   renderLoadEarlier?(props: LoadEarlierProps): 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
+  /** Custom scroll event handler */
   handleOnScroll?(event: ReanimatedScrollEvent): void
+  /** Style for TypingIndicator component */
+  typingIndicatorStyle?: StyleProp<ViewStyle>
 }
 
 export interface State {

package/src/MessageImage.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
   Image,
   StyleSheet,
@@ -44,6 +44,20 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
   imageStyle,
   currentMessage,
 }: MessageImageProps<TMessage>) {
+  const imageSource = useMemo(() => ({
+    ...imageSourceProps,
+    uri: currentMessage?.image,
+  }), [imageSourceProps, currentMessage?.image])
+
+  const computedImageStyle = useMemo(() => [
+    styles.image,
+    imageStyle,
+  ], [imageStyle])
+
+  const activePropsStyle = useMemo(() => [{
+    style: [stylesCommon.fill, styles.imageActive],
+  }], [])
+
   if (currentMessage == null)
     return null
 
@@ -51,15 +65,13 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
     <View style={containerStyle}>
       {/* @ts-expect-error: Lightbox types are not fully compatible */}
       <Lightbox
-        activeProps={{
-          style: [stylesCommon.fill, styles.imageActive],
-        }}
+        activeProps={activePropsStyle}
         {...lightboxProps}
       >
         <Image
           {...imageProps}
-          style={[styles.image, imageStyle]}
-          source={{ ...imageSourceProps, uri: currentMessage.image }}
+          style={computedImageStyle}
+          source={imageSource}
         />
       </Lightbox>
     </View>