react-native-gifted-chat 2.8.2-alpha.6 → 3.0.0-alpha.0

package/src/Bubble/index.tsx

@@ -10,19 +10,19 @@ import { MessageAudio } from '../MessageAudio'
 import { MessageImage } from '../MessageImage'
 import { MessageText } from '../MessageText'
 import { MessageVideo } from '../MessageVideo'
+import { IMessage } from '../Models'
 import { QuickReplies } from '../QuickReplies'
 import stylesCommon from '../styles'
 
 import { Time } from '../Time'
-import { IMessage } from '../types'
-import { isSameUser, isSameDay } from '../utils'
+import { isSameUser, isSameDay, renderComponentOrElement } from '../utils'
 
 import styles from './styles'
 import { BubbleProps, RenderMessageTextProps } from './types'
 
 export * from './types'
 
-const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessage>): JSX.Element => {
+export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessage>): JSX.Element => {
   const {
     currentMessage,
     nextMessage,
@@ -109,7 +109,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
       } = props
 
       if (props.renderQuickReplies)
-        return props.renderQuickReplies(quickReplyProps)
+        return renderComponentOrElement(props.renderQuickReplies, quickReplyProps)
 
       return (
         <QuickReplies
@@ -150,9 +150,9 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
       const combinedProps = { ...messageTextPropsRest, ...messageTextProps } as RenderMessageTextProps<TMessage>
 
       if (props.renderMessageText)
-        return props.renderMessageText(combinedProps)
+        return renderComponentOrElement(props.renderMessageText, combinedProps)
 
-      return <MessageText {...combinedProps} />
+      return <MessageText {...combinedProps as any} />
     }
 
     return null
@@ -169,7 +169,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
       } = props
 
       if (props.renderMessageImage)
-        return props.renderMessageImage(messageImageProps)
+        return renderComponentOrElement(props.renderMessageImage, messageImageProps)
 
       return <MessageImage {...messageImageProps} />
     }
@@ -190,7 +190,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
     } = props
 
     if (props.renderMessageVideo)
-      return props.renderMessageVideo(messageVideoProps)
+      return renderComponentOrElement(props.renderMessageVideo, messageVideoProps)
 
     return <MessageVideo />
   }, [props, currentMessage])
@@ -208,7 +208,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
     } = props
 
     if (props.renderMessageAudio)
-      return props.renderMessageAudio(messageAudioProps)
+      return renderComponentOrElement(props.renderMessageAudio, messageAudioProps)
 
     return <MessageAudio />
   }, [props, currentMessage])
@@ -220,7 +220,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
     } = props
 
     if (renderTicks && currentMessage)
-      return renderTicks(currentMessage)
+      return renderComponentOrElement(renderTicks, currentMessage)
 
     if (
       user &&
@@ -271,7 +271,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
       } = props
 
       if (props.renderTime)
-        return props.renderTime(timeProps)
+        return renderComponentOrElement(props.renderTime, timeProps)
 
       return <Time {...timeProps} />
     }
@@ -284,12 +284,12 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
       renderUsername,
     } = props
 
-    if (props.renderUsernameOnMessage && currentMessage) {
+    if (props.isUsernameVisible && currentMessage) {
       if (user && currentMessage.user._id === user._id)
         return null
 
       if (renderUsername)
-        return renderUsername(currentMessage.user)
+        return renderComponentOrElement(renderUsername, currentMessage.user)
 
       return (
         <View style={styles.content.usernameView}>
@@ -313,7 +313,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
 
   const renderCustomView = useCallback(() => {
     if (props.renderCustomView)
-      return props.renderCustomView(props)
+      return renderComponentOrElement(props.renderCustomView, props)
 
     return null
   }, [props])
@@ -378,5 +378,3 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
     </View>
   )
 }
-
-export default Bubble

package/src/Bubble/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import Color from '../Color'
+import { Color } from '../Color'
 
 const styles = {
   left: StyleSheet.create({

package/src/Bubble/types.ts

@@ -5,9 +5,7 @@ import {
   TextStyle,
 } from 'react-native'
 import { MessageImageProps } from '../MessageImage'
-import { MessageTextProps, MessageOption } from '../MessageText'
-import { QuickRepliesProps } from '../QuickReplies'
-import { TimeProps } from '../Time'
+import { MessageTextProps } from '../MessageText'
 import {
   User,
   IMessage,
@@ -16,9 +14,11 @@ import {
   Omit,
   MessageVideoProps,
   MessageAudioProps,
-} from '../types'
+} from '../Models'
+import { QuickRepliesProps } from '../QuickReplies'
+import { TimeProps } from '../Time'
+
 
- 
 export type RenderMessageImageProps<TMessage extends IMessage> = Omit<
   BubbleProps<TMessage>,
   'containerStyle' | 'wrapperStyle'
@@ -39,22 +39,21 @@ export type RenderMessageAudioProps<TMessage extends IMessage> = Omit<
 
 export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
   BubbleProps<TMessage>,
-  'containerStyle' | 'wrapperStyle' | 'options'
+  'containerStyle' | 'wrapperStyle'
 > &
   MessageTextProps<TMessage>
- 
+
 
 export interface BubbleProps<TMessage extends IMessage> {
   user?: User
   touchableProps?: object
-  renderUsernameOnMessage?: boolean
+  isUsernameVisible?: boolean
   isCustomViewBottom?: boolean
-  inverted?: boolean
+  isInverted?: boolean
   position: 'left' | 'right'
   currentMessage: TMessage
   nextMessage?: TMessage
   previousMessage?: TMessage
-  options?: MessageOption[]
   containerStyle?: LeftRightStyle<ViewStyle>
   wrapperStyle?: LeftRightStyle<ViewStyle>
   textStyle?: LeftRightStyle<TextStyle>
@@ -67,25 +66,25 @@ export interface BubbleProps<TMessage extends IMessage> {
   quickReplyTextStyle?: StyleProp<TextStyle>
   quickReplyContainerStyle?: StyleProp<ViewStyle>
   messageTextProps?: Partial<MessageTextProps<TMessage>>
-  onPressMessage?(context?: unknown, message?: unknown): void
-  onLongPressMessage?(context?: unknown, message?: unknown): void
-  onQuickReply?(replies: Reply[]): void
-  renderMessageImage?(
+  onPressMessage?: (context?: unknown, message?: unknown) => void
+  onLongPressMessage?: (context?: unknown, message?: unknown) => void
+  onQuickReply?: (replies: Reply[]) => void
+  renderMessageImage?: (
     props: RenderMessageImageProps<TMessage>,
-  ): React.ReactNode
-  renderMessageVideo?(
+  ) => React.ReactNode
+  renderMessageVideo?: (
     props: RenderMessageVideoProps<TMessage>,
-  ): React.ReactNode
-  renderMessageAudio?(
+  ) => React.ReactNode
+  renderMessageAudio?: (
     props: RenderMessageAudioProps<TMessage>,
-  ): React.ReactNode
-  renderMessageText?(props: RenderMessageTextProps<TMessage>): React.ReactNode
-  renderCustomView?(bubbleProps: BubbleProps<TMessage>): React.ReactNode
-  renderTime?(timeProps: TimeProps<TMessage>): React.ReactNode
-  renderTicks?(currentMessage: TMessage): React.ReactNode
-  renderUsername?(user?: TMessage['user']): React.ReactNode
-  renderQuickReplySend?(): React.ReactNode
-  renderQuickReplies?(
+  ) => React.ReactNode
+  renderMessageText?: (props: RenderMessageTextProps<TMessage>) => React.ReactNode
+  renderCustomView?: (bubbleProps: BubbleProps<TMessage>) => React.ReactNode
+  renderTime?: (timeProps: TimeProps<TMessage>) => React.ReactNode
+  renderTicks?: (currentMessage: TMessage) => React.ReactNode
+  renderUsername?: (user?: TMessage['user']) => React.ReactNode
+  renderQuickReplySend?: () => React.ReactNode
+  renderQuickReplies?: (
     quickReplies: QuickRepliesProps<TMessage>,
-  ): React.ReactNode
+  ) => React.ReactNode
 }

package/src/Color.ts

@@ -1,4 +1,4 @@
-export default {
+export const Color = {
   defaultColor: '#b2b2b2',
   backgroundTransparent: 'transparent',
   defaultBlue: '#0084ff',

package/src/Composer.tsx

@@ -8,7 +8,7 @@ import {
   TextInputContentSizeChangeEventData,
   useColorScheme,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 import { MIN_COMPOSER_HEIGHT } from './Constant'
 import stylesCommon from './styles'
 
@@ -16,14 +16,12 @@ export interface ComposerProps {
   composerHeight?: number
   text?: string
   textInputProps?: Partial<TextInputProps>
-  onTextChanged?(text: string): void
   onInputSizeChanged?(layout: { width: number, height: number }): void
 }
 
 export function Composer ({
   composerHeight = MIN_COMPOSER_HEIGHT,
   onInputSizeChanged,
-  onTextChanged,
   text = '',
   textInputProps,
 }: ComposerProps): React.ReactElement {
@@ -67,7 +65,6 @@ export function Composer ({
       accessibilityLabel={placeholder}
       placeholderTextColor={textInputProps?.placeholderTextColor ?? (isDark ? '#888' : Color.defaultColor)}
       onContentSizeChange={handleContentSizeChange}
-      onChangeText={onTextChanged}
       value={text}
       enablesReturnKeyAutomatically
       underlineColorAndroid='transparent'

package/src/Day/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import Color from '../Color'
+import { Color } from '../Color'
 
 export default StyleSheet.create({
   container: {

package/src/GiftedAvatar.tsx

@@ -8,10 +8,10 @@ import {
   ImageStyle,
   TextStyle,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
+import { User } from './Models'
 import stylesCommon from './styles'
-import { User } from './types'
 
 const {
   carrot,

package/src/GiftedChat/index.tsx

@@ -28,29 +28,13 @@ import Animated, {
   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'
-import { Composer } from '../Composer'
 import { MAX_COMPOSER_HEIGHT, MIN_COMPOSER_HEIGHT, TEST_ID } from '../Constant'
-import { Day } from '../Day'
-import { GiftedAvatar } from '../GiftedAvatar'
 import { GiftedChatContext } from '../GiftedChatContext'
 import { InputToolbar } from '../InputToolbar'
-import { LoadEarlierMessages } from '../LoadEarlierMessages'
-import Message from '../Message'
-import MessageContainer, { AnimatedList } from '../MessageContainer'
-import { MessageImage } from '../MessageImage'
-import { MessageText } from '../MessageText'
-import { Send } from '../Send'
+import { MessageContainer, AnimatedList } from '../MessageContainer'
+import { IMessage } from '../Models'
 import stylesCommon from '../styles'
-import { SystemMessage } from '../SystemMessage'
-import { Time } from '../Time'
-
-import {
-  IMessage,
-} from '../types'
-import * as utils from '../utils'
+import { renderComponentOrElement } from '../utils'
 import styles from './styles'
 import { GiftedChatProps } from './types'
 
@@ -78,9 +62,8 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     renderChatFooter,
     renderInputToolbar,
     keyboardBottomOffset = 0,
-    focusOnInputWhenOpeningKeyboard = true,
-    onInputTextChanged,
-    inverted = true,
+    shouldFocusInputOnKeyboardOpen = true,
+    isInverted = true,
     minComposerHeight = MIN_COMPOSER_HEIGHT,
     maxComposerHeight = MAX_COMPOSER_HEIGHT,
     isKeyboardInternallyHandled = true,
@@ -172,7 +155,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       if (!messageContainerRef?.current)
         return
 
-      if (inverted) {
+      if (isInverted) {
         messageContainerRef.current.scrollToOffset({
           offset: 0,
           animated: isAnimated,
@@ -182,7 +165,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
       messageContainerRef.current.scrollToEnd({ animated: isAnimated })
     },
-    [inverted, messageContainerRef]
+    [isInverted, messageContainerRef]
   )
 
   const renderMessages = useMemo(() => {
@@ -195,12 +178,12 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       <View style={[stylesCommon.fill, messagesContainerStyle]}>
         <MessageContainer<TMessage>
           {...messagesContainerProps}
-          inverted={inverted}
+          isInverted={isInverted}
           messages={messages}
           forwardRef={messageContainerRef}
           isTyping={isTyping}
         />
-        {renderChatFooter?.()}
+        {renderComponentOrElement(renderChatFooter, {})}
       </View>
     )
   }, [
@@ -208,14 +191,14 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     isTyping,
     messages,
     props,
-    inverted,
+    isInverted,
     messageContainerRef,
     renderChatFooter,
   ])
 
   const notifyInputTextReset = useCallback(() => {
-    onInputTextChanged?.('')
-  }, [onInputTextChanged])
+    props.textInputProps?.onChangeText?.('')
+  }, [props.textInputProps])
 
   const resetInputToolbar = useCallback(() => {
     textInputRef.current?.clear()
@@ -267,15 +250,15 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     [maxComposerHeight, minComposerHeight]
   )
 
-  const _onInputTextChanged = useCallback(
+  const _onChangeText = useCallback(
     (text: string) => {
-      onInputTextChanged?.(text)
+      props.textInputProps?.onChangeText?.(text)
 
       // Only set state if it's not being overridden by a prop.
       if (props.text === undefined)
         setText(text)
     },
-    [onInputTextChanged, props.text]
+    [props.text, props.textInputProps]
   )
 
   const onInitialLayoutViewLayout = useCallback(
@@ -307,15 +290,15 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       composerHeight: Math.max(minComposerHeight!, composerHeight),
       onSend: _onSend,
       onInputSizeChanged,
-      onTextChanged: _onInputTextChanged,
       textInputProps: {
         ...textInputProps,
+        onChangeText: _onChangeText,
         ref: textInputRef,
       },
     }
 
     if (renderInputToolbar)
-      return renderInputToolbar(inputToolbarProps)
+      return renderComponentOrElement(renderInputToolbar, inputToolbarProps)
 
     return <InputToolbar {...inputToolbarProps} />
   }, [
@@ -330,7 +313,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     composerHeight,
     textInputRef,
     textInputProps,
-    _onInputTextChanged,
+    _onChangeText,
   ])
 
   const contextValues = useMemo(
@@ -371,7 +354,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
             }
           )
 
-          if (focusOnInputWhenOpeningKeyboard)
+          if (shouldFocusInputOnKeyboardOpen)
             if (isKeyboardMovingUp)
               runOnJS(handleTextInputFocusWhenKeyboardShow)()
             else
@@ -382,7 +365,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     [
       keyboard,
       trackingKeyboardMovement,
-      focusOnInputWhenOpeningKeyboard,
+      shouldFocusInputOnKeyboardOpen,
       handleTextInputFocusWhenKeyboardHide,
       handleTextInputFocusWhenKeyboardShow,
       keyboardBottomOffset,
@@ -406,7 +389,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
               </Animated.View>
             )
             : (
-              renderLoading?.()
+              renderComponentOrElement(renderLoading, {})
             )}
         </View>
       </ActionSheetProvider>
@@ -429,12 +412,12 @@ function GiftedChatWrapper<TMessage extends IMessage = IMessage> (props: GiftedC
 GiftedChatWrapper.append = <TMessage extends IMessage>(
   currentMessages: TMessage[] = [],
   messages: TMessage[],
-  inverted = true
+  isInverted = true
 ) => {
   if (!Array.isArray(messages))
     messages = [messages]
 
-  return inverted
+  return isInverted
     ? messages.concat(currentMessages)
     : currentMessages.concat(messages)
 }
@@ -442,34 +425,16 @@ GiftedChatWrapper.append = <TMessage extends IMessage>(
 GiftedChatWrapper.prepend = <TMessage extends IMessage>(
   currentMessages: TMessage[] = [],
   messages: TMessage[],
-  inverted = true
+  isInverted = true
 ) => {
   if (!Array.isArray(messages))
     messages = [messages]
 
-  return inverted
+  return isInverted
     ? currentMessages.concat(messages)
     : messages.concat(currentMessages)
 }
 
-export * from '../types'
-
 export {
-  GiftedChatWrapper as GiftedChat,
-  Actions,
-  Avatar,
-  Bubble,
-  SystemMessage,
-  MessageImage,
-  MessageText,
-  Composer,
-  Day,
-  InputToolbar,
-  LoadEarlierMessages,
-  Message,
-  MessageContainer,
-  Send,
-  Time,
-  GiftedAvatar,
-  utils
+  GiftedChatWrapper as GiftedChat
 }

package/src/GiftedChat/types.ts

@@ -13,21 +13,20 @@ import { AvatarProps } from '../Avatar'
 import { BubbleProps } from '../Bubble'
 import { ComposerProps } from '../Composer'
 import { InputToolbarProps } from '../InputToolbar'
-import { MessageProps } from '../Message'
 import { AnimatedList, MessageContainerProps } from '../MessageContainer'
 import { MessageImageProps } from '../MessageImage'
 import { MessageTextProps } from '../MessageText'
-import { QuickRepliesProps } from '../QuickReplies'
-import { SendProps } from '../Send'
-import { SystemMessageProps } from '../SystemMessage'
-import { TimeProps } from '../Time'
 import {
   IMessage,
   LeftRightStyle,
   MessageAudioProps,
   MessageVideoProps,
   User,
-} from '../types'
+} from '../Models'
+import { QuickRepliesProps } from '../QuickReplies'
+import { SendProps } from '../Send'
+import { SystemMessageProps } from '../SystemMessage'
+import { TimeProps } from '../Time'
 
 export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessageContainerProps<TMessage>> {
   /* Message container ref */
@@ -35,7 +34,7 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   /* text input ref */
   textInputRef?: RefObject<TextInput>
   /* Controls whether or not to show user.name property in the message bubble */
-  renderUsernameOnMessage?: boolean
+  isUsernameVisible?: boolean
   /* Messages container style */
   messagesContainerStyle?: StyleProp<ViewStyle>
   /* Input text; default is undefined, but if specified, it will override GiftedChat's internal state */
@@ -54,23 +53,23 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   /* 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
   /* Whether to render an avatar for the current user; default is false, only show avatars for other users */
-  showUserAvatar?: boolean
+  isUserAvatarVisible?: boolean
   /* When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is false */
-  showAvatarForEveryMessage?: boolean
+  isAvatarVisibleForEveryMessage?: boolean
   /* Render the message avatar at the top of consecutive messages, rather than the bottom; default is false */
-  renderAvatarOnTop?: boolean
+  isAvatarOnTop?: boolean
   /* Extra props to be passed to the <Image> component created by the default renderMessageImage */
   imageProps?: MessageImageProps<TMessage>
   /* Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar); default is 0 */
   keyboardBottomOffset?: number
   /* Focus on <TextInput> automatically when opening the keyboard; default is true */
-  focusOnInputWhenOpeningKeyboard?: boolean
+  shouldFocusInputOnKeyboardOpen?: boolean
   /* Minimum height of the input toolbar; default is 44 */
   minInputToolbarHeight?: 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
+  isSendButtonAlwaysVisible?: boolean
   /* Image style */
   imageStyle?: StyleProp<ViewStyle>
   /* composer min Height */
@@ -86,73 +85,65 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   isCustomViewBottom?: boolean
   timeTextStyle?: LeftRightStyle<TextStyle>
   /* Custom action sheet */
-  actionSheet?(): {
+  actionSheet?: () => {
     showActionSheetWithOptions: (
       options: ActionSheetOptions,
       callback: (buttonIndex: number) => void | Promise<void>,
     ) => void
   }
   /* Callback when a message avatar is tapped */
-  onPressAvatar?(user: User): void
+  onPressAvatar?: (user: User) => void
   /* Callback when a message avatar is tapped */
-  onLongPressAvatar?(user: User): void
-  /* Generate an id for new messages. Defaults to UUID v4, generated by uuid */
-  messageIdGenerator?(message?: TMessage): string
+  onLongPressAvatar?: (user: User) => void
+  /* Generate an id for new messages. Defaults to a simple random string generator */
+  messageIdGenerator?: (message?: TMessage) => string
   /* Callback when sending a message */
-  onSend?(messages: TMessage[]): void
+  onSend?: (messages: TMessage[]) => void
   /*  Render a loading view when initializing */
-  renderLoading?(): React.ReactNode
+  renderLoading?: () => 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 */
-  renderBubble?(props: BubbleProps<TMessage>): React.ReactNode
+  renderBubble?: (props: BubbleProps<TMessage>) => React.ReactNode
   /* Custom system message */
-  renderSystemMessage?(props: SystemMessageProps<TMessage>): React.ReactNode
+  renderSystemMessage?: (props: SystemMessageProps<TMessage>) => React.ReactNode
   /* Callback when a message bubble is pressed; default is to do nothing */
-  onPressMessage?(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()) */
-  onLongPressMessage?(context: unknown, message: TMessage): void
+  onLongPressMessage?: (context: unknown, message: TMessage) => void
   /* Custom Username container */
-  renderUsername?(user: User): React.ReactNode
+  renderUsername?: (user: User) => React.ReactNode
   /* Reverses display order of messages; default is true */
   /* Custom message text */
-  renderMessageText?(messageText: MessageTextProps<TMessage>): React.ReactNode
+  renderMessageText?: (messageText: MessageTextProps<TMessage>) => React.ReactNode
   /* Custom message image */
-  renderMessageImage?(props: MessageImageProps<TMessage>): React.ReactNode
+  renderMessageImage?: (props: MessageImageProps<TMessage>) => React.ReactNode
   /* Custom message video */
-  renderMessageVideo?(props: MessageVideoProps<TMessage>): React.ReactNode
+  renderMessageVideo?: (props: MessageVideoProps<TMessage>) => React.ReactNode
   /* Custom message video */
-  renderMessageAudio?(props: MessageAudioProps<TMessage>): React.ReactNode
+  renderMessageAudio?: (props: MessageAudioProps<TMessage>) => React.ReactNode
   /* Custom view inside the bubble */
-  renderCustomView?(props: BubbleProps<TMessage>): React.ReactNode
+  renderCustomView?: (props: BubbleProps<TMessage>) => React.ReactNode
   /* Custom time inside a message */
-  renderTime?(props: TimeProps<TMessage>): React.ReactNode
+  renderTime?: (props: TimeProps<TMessage>) => React.ReactNode
   /* Custom component to render below the MessageContainer (separate from the ListView) */
-  renderChatFooter?(): React.ReactNode
-  /* Custom message composer container */
-  renderInputToolbar?(props: InputToolbarProps<TMessage>): React.ReactNode
+  renderChatFooter?: () => React.ReactNode
+  /* Custom message composer container. Can be a component, element, render function, or null */
+  renderInputToolbar?: React.ComponentType<InputToolbarProps<TMessage>> | React.ReactElement | ((props: InputToolbarProps<TMessage>) => React.ReactNode) | null
   /*  Custom text input message composer */
-  renderComposer?(props: ComposerProps): React.ReactNode
+  renderComposer?: (props: ComposerProps) => React.ReactNode
   /* Custom action button on the left of the message composer */
-  renderActions?(props: ActionsProps): React.ReactNode
+  renderActions?: (props: ActionsProps) => React.ReactNode
   /* Custom send button; you can pass children to the original Send component quite easily, for example to use a custom icon (example) */
-  renderSend?(props: SendProps<TMessage>): React.ReactNode
+  renderSend?: (props: SendProps<TMessage>) => React.ReactNode
   /* Custom second line of actions below the message composer */
-  renderAccessory?(props: InputToolbarProps<TMessage>): React.ReactNode
+  renderAccessory?: (props: InputToolbarProps<TMessage>) => React.ReactNode
   /* Callback when the Action button is pressed (if set, the default actionSheet will not be used) */
-  onPressActionButton?(): void
-  /* Callback when the input text changes */
-  onInputTextChanged?(text: string): void
+  onPressActionButton?: () => void
   /* Extra props to be passed to the MessageText component */
   messageTextProps?: Partial<MessageTextProps<TMessage>>
-  /* Custom parse patterns for react-native-autolink used to linking message content (like URLs and phone numbers) */
-  matchers?: MessageTextProps<TMessage>['matchers']
-  renderQuickReplies?(
+  renderQuickReplies?: (
     quickReplies: QuickRepliesProps<TMessage>,
-  ): React.ReactNode
-  renderQuickReplySend?(): React.ReactNode
-  shouldUpdateMessage?(
-    props: MessageProps<TMessage>,
-    nextProps: MessageProps<TMessage>,
-  ): boolean
+  ) => React.ReactNode
+  renderQuickReplySend?: () => React.ReactNode
 }