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

package/src/Bubble/index.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { JSX, useCallback } from 'react'
 import {
   Text,
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
 
-import { GiftedChatContext } from '../GiftedChatContext'
+import { useChatContext } from '../GiftedChatContext'
 import { QuickReplies } from '../QuickReplies'
 import { MessageText } from '../MessageText'
 import { MessageImage } from '../MessageImage'
@@ -22,49 +22,41 @@ import styles from './styles'
 
 export * from './types'
 
-export default class Bubble<
-  TMessage extends IMessage = IMessage,
-> extends React.Component<BubbleProps<TMessage>> {
-  static contextType = GiftedChatContext
-
-  onPress = () => {
-    if (this.props.onPress)
-      this.props.onPress(this.context, this.props.currentMessage)
-  }
-
-  onLongPress = () => {
-    const {
-      currentMessage,
-      onLongPress,
-      optionTitles,
-    } = this.props
-
-    if (onLongPress) {
-      onLongPress(this.context, currentMessage)
-      return
-    }
-
-    if (!optionTitles?.length)
-      return
-
-    const options = optionTitles
-    const cancelButtonIndex = options.length - 1
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ;(this.context as any).actionSheet().showActionSheetWithOptions(
-      {
-        options,
-        cancelButtonIndex,
-      },
-      (buttonIndex: number) => {
-        console.log('onLongPress', { buttonIndex })
-      }
-    )
-  }
-
-  styledBubbleToNext () {
-    const { currentMessage, nextMessage, position, containerToNextStyle } =
-      this.props
+const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessage>): JSX.Element => {
+  const {
+    currentMessage,
+    nextMessage,
+    position,
+    containerToNextStyle,
+    previousMessage,
+    containerToPreviousStyle,
+    onQuickReply,
+    renderQuickReplySend,
+    quickReplyStyle,
+    quickReplyTextStyle,
+    quickReplyContainerStyle,
+    containerStyle,
+    wrapperStyle,
+    bottomContainerStyle,
+    onPress: onPressProp,
+    onLongPress: onLongPressProp,
+  } = props
+
+  const context = useChatContext()
+
+  const onPress = useCallback(() => {
+    onPressProp?.(context, currentMessage)
+  }, [onPressProp, context, currentMessage])
+
+  const onLongPress = useCallback(() => {
+    onLongPressProp?.(context, currentMessage)
+  }, [
+    currentMessage,
+    context,
+    onLongPressProp,
+  ])
+
+  const styledBubbleToNext = useCallback(() => {
     if (
       currentMessage &&
       nextMessage &&
@@ -78,15 +70,14 @@ export default class Bubble<
       ]
 
     return null
-  }
-
-  styledBubbleToPrevious () {
-    const {
-      currentMessage,
-      previousMessage,
-      position,
-      containerToPreviousStyle,
-    } = this.props
+  }, [
+    currentMessage,
+    nextMessage,
+    position,
+    containerToNextStyle,
+  ])
+
+  const styledBubbleToPrevious = useCallback(() => {
     if (
       currentMessage &&
       previousMessage &&
@@ -96,23 +87,18 @@ export default class Bubble<
     )
       return [
         styles[position].containerToPrevious,
-        containerToPreviousStyle && containerToPreviousStyle[position],
+        containerToPreviousStyle?.[position],
       ]
 
     return null
-  }
-
-  renderQuickReplies () {
-    const {
-      currentMessage,
-      onQuickReply,
-      nextMessage,
-      renderQuickReplySend,
-      quickReplyStyle,
-      quickReplyTextStyle,
-      quickReplyContainerStyle,
-    } = this.props
-
+  }, [
+    currentMessage,
+    previousMessage,
+    position,
+    containerToPreviousStyle,
+  ])
+
+  const renderQuickReplies = useCallback(() => {
     if (currentMessage?.quickReplies) {
       const {
         /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -120,10 +106,10 @@ export default class Bubble<
         wrapperStyle,
         /* eslint-enable @typescript-eslint/no-unused-vars */
         ...quickReplyProps
-      } = this.props
+      } = props
 
-      if (this.props.renderQuickReplies)
-        return this.props.renderQuickReplies(quickReplyProps)
+      if (props.renderQuickReplies)
+        return props.renderQuickReplies(quickReplyProps)
 
       return (
         <QuickReplies
@@ -139,46 +125,55 @@ export default class Bubble<
     }
 
     return null
-  }
-
-  renderMessageText () {
-    if (this.props.currentMessage?.text) {
+  }, [
+    currentMessage,
+    onQuickReply,
+    renderQuickReplySend,
+    quickReplyStyle,
+    quickReplyTextStyle,
+    quickReplyContainerStyle,
+    nextMessage,
+    props,
+  ])
+
+  const renderMessageText = useCallback(() => {
+    if (currentMessage?.text) {
       const {
         /* eslint-disable @typescript-eslint/no-unused-vars */
         containerStyle,
         wrapperStyle,
-        optionTitles,
         /* eslint-enable @typescript-eslint/no-unused-vars */
         ...messageTextProps
-      } = this.props
-      if (this.props.renderMessageText)
-        return this.props.renderMessageText(messageTextProps)
+      } = props
+
+      if (props.renderMessageText)
+        return props.renderMessageText(messageTextProps)
 
       return <MessageText {...messageTextProps} />
     }
     return null
-  }
+  }, [props, currentMessage])
 
-  renderMessageImage () {
-    if (this.props.currentMessage?.image) {
+  const renderMessageImage = useCallback(() => {
+    if (currentMessage?.image) {
       const {
         /* eslint-disable @typescript-eslint/no-unused-vars */
         containerStyle,
         wrapperStyle,
         /* eslint-enable @typescript-eslint/no-unused-vars */
         ...messageImageProps
-      } = this.props
+      } = props
 
-      if (this.props.renderMessageImage)
-        return this.props.renderMessageImage(messageImageProps)
+      if (props.renderMessageImage)
+        return props.renderMessageImage(messageImageProps)
 
       return <MessageImage {...messageImageProps} />
     }
     return null
-  }
+  }, [props, currentMessage])
 
-  renderMessageVideo () {
-    if (!this.props.currentMessage?.video)
+  const renderMessageVideo = useCallback(() => {
+    if (!currentMessage?.video)
       return null
 
     const {
@@ -187,16 +182,16 @@ export default class Bubble<
       wrapperStyle,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...messageVideoProps
-    } = this.props
+    } = props
 
-    if (this.props.renderMessageVideo)
-      return this.props.renderMessageVideo(messageVideoProps)
+    if (props.renderMessageVideo)
+      return props.renderMessageVideo(messageVideoProps)
 
     return <MessageVideo />
-  }
+  }, [props, currentMessage])
 
-  renderMessageAudio () {
-    if (!this.props.currentMessage?.audio)
+  const renderMessageAudio = useCallback(() => {
+    if (!currentMessage?.audio)
       return null
 
     const {
@@ -205,20 +200,19 @@ export default class Bubble<
       wrapperStyle,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...messageAudioProps
-    } = this.props
+    } = props
 
-    if (this.props.renderMessageAudio)
-      return this.props.renderMessageAudio(messageAudioProps)
+    if (props.renderMessageAudio)
+      return props.renderMessageAudio(messageAudioProps)
 
     return <MessageAudio />
-  }
+  }, [props, currentMessage])
 
-  renderTicks () {
+  const renderTicks = useCallback(() => {
     const {
-      currentMessage,
       renderTicks,
       user,
-    } = this.props
+    } = props
 
     if (renderTicks && currentMessage)
       return renderTicks(currentMessage)
@@ -237,17 +231,17 @@ export default class Bubble<
       return (
         <View style={styles.content.tickView}>
           {!!currentMessage.sent && (
-            <Text style={[styles.content.tick, this.props.tickStyle]}>
+            <Text style={[styles.content.tick, props.tickStyle]}>
               {'✓'}
             </Text>
           )}
           {!!currentMessage.received && (
-            <Text style={[styles.content.tick, this.props.tickStyle]}>
+            <Text style={[styles.content.tick, props.tickStyle]}>
               {'✓'}
             </Text>
           )}
           {!!currentMessage.pending && (
-            <Text style={[styles.content.tick, this.props.tickStyle]}>
+            <Text style={[styles.content.tick, props.tickStyle]}>
               {'🕓'}
             </Text>
           )}
@@ -255,10 +249,13 @@ export default class Bubble<
       )
 
     return null
-  }
+  }, [
+    props,
+    currentMessage,
+  ])
 
-  renderTime () {
-    if (this.props.currentMessage?.createdAt) {
+  const renderTime = useCallback(() => {
+    if (currentMessage?.createdAt) {
       const {
         /* eslint-disable @typescript-eslint/no-unused-vars */
         containerStyle,
@@ -266,24 +263,23 @@ export default class Bubble<
         textStyle,
         /* eslint-enable @typescript-eslint/no-unused-vars */
         ...timeProps
-      } = this.props
+      } = props
 
-      if (this.props.renderTime)
-        return this.props.renderTime(timeProps)
+      if (props.renderTime)
+        return props.renderTime(timeProps)
 
       return <Time {...timeProps} />
     }
     return null
-  }
+  }, [props, currentMessage])
 
-  renderUsername () {
+  const renderUsername = useCallback(() => {
     const {
-      currentMessage,
       user,
       renderUsername,
-    } = this.props
+    } = props
 
-    if (this.props.renderUsernameOnMessage && currentMessage) {
+    if (props.renderUsernameOnMessage && currentMessage) {
       if (user && currentMessage.user._id === user._id)
         return null
 
@@ -294,7 +290,7 @@ export default class Bubble<
         <View style={styles.content.usernameView}>
           <Text
             style={
-              [styles.content.username, this.props.usernameStyle]
+              [styles.content.username, props.usernameStyle]
             }
           >
             {'~ '}
@@ -305,75 +301,78 @@ export default class Bubble<
     }
 
     return null
-  }
+  }, [
+    currentMessage,
+    props,
+  ])
 
-  renderCustomView () {
-    if (this.props.renderCustomView)
-      return this.props.renderCustomView(this.props)
+  const renderCustomView = useCallback(() => {
+    if (props.renderCustomView)
+      return props.renderCustomView(props)
 
     return null
-  }
+  }, [props])
 
-  renderBubbleContent () {
+  const renderBubbleContent = useCallback(() => {
     return (
       <View>
-        {!this.props.isCustomViewBottom && this.renderCustomView()}
-        {this.renderMessageImage()}
-        {this.renderMessageVideo()}
-        {this.renderMessageAudio()}
-        {this.renderMessageText()}
-        {this.props.isCustomViewBottom && this.renderCustomView()}
+        {!props.isCustomViewBottom && renderCustomView()}
+        {renderMessageImage()}
+        {renderMessageVideo()}
+        {renderMessageAudio()}
+        {renderMessageText()}
+        {props.isCustomViewBottom && renderCustomView()}
       </View>
     )
-  }
-
-  render () {
-    const {
-      position,
-      containerStyle,
-      wrapperStyle,
-      bottomContainerStyle,
-    } = this.props
-
-    return (
+  }, [
+    renderCustomView,
+    renderMessageImage,
+    renderMessageVideo,
+    renderMessageAudio,
+    renderMessageText,
+    props.isCustomViewBottom,
+  ])
+
+  return (
+    <View
+      style={[
+        stylesCommon.fill,
+        styles[position].container,
+        containerStyle && containerStyle[position],
+      ]}
+    >
       <View
         style={[
-          stylesCommon.fill,
-          styles[position].container,
-          containerStyle && containerStyle[position],
+          styles[position].wrapper,
+          styledBubbleToNext(),
+          styledBubbleToPrevious(),
+          wrapperStyle && wrapperStyle[position],
         ]}
       >
-        <View
-          style={[
-            styles[position].wrapper,
-            this.styledBubbleToNext(),
-            this.styledBubbleToPrevious(),
-            wrapperStyle && wrapperStyle[position],
-          ]}
+        <TouchableWithoutFeedback
+          onPress={onPress}
+          onLongPress={onLongPress}
+          accessibilityRole='text'
+          {...props.touchableProps}
         >
-          <TouchableWithoutFeedback
-            onPress={this.onPress}
-            onLongPress={this.onLongPress}
-            accessibilityRole='text'
-            {...this.props.touchableProps}
-          >
-            <View>
-              {this.renderBubbleContent()}
-              <View
-                style={[
-                  styles[position].bottom,
-                  bottomContainerStyle && bottomContainerStyle[position],
-                ]}
-              >
-                {this.renderUsername()}
-                {this.renderTime()}
-                {this.renderTicks()}
-              </View>
+          <View>
+            {renderBubbleContent()}
+            <View
+              style={[
+                styles[position].bottom,
+                bottomContainerStyle?.[position],
+              ]}
+            >
+              {renderUsername()}
+              {renderTime()}
+              {renderTicks()}
             </View>
-          </TouchableWithoutFeedback>
-        </View>
-        {this.renderQuickReplies()}
+          </View>
+        </TouchableWithoutFeedback>
       </View>
-    )
-  }
+      {renderQuickReplies()}
+    </View>
+  )
 }
+
+export default Bubble

package/src/Bubble/types.ts

@@ -5,7 +5,7 @@ import {
   TextStyle,
 } from 'react-native'
 import { QuickRepliesProps } from '../QuickReplies'
-import { MessageTextProps } from '../MessageText'
+import { MessageTextProps, MessageOption } from '../MessageText'
 import { MessageImageProps } from '../MessageImage'
 import { TimeProps } from '../Time'
 import {
@@ -39,7 +39,7 @@ export type RenderMessageAudioProps<TMessage extends IMessage> = Omit<
 
 export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
   BubbleProps<TMessage>,
-  'containerStyle' | 'wrapperStyle'
+  'containerStyle' | 'wrapperStyle' | 'options'
 > &
   MessageTextProps<TMessage>
 /* eslint-enable no-use-before-define */
@@ -54,7 +54,7 @@ export interface BubbleProps<TMessage extends IMessage> {
   currentMessage: TMessage
   nextMessage?: TMessage
   previousMessage?: TMessage
-  optionTitles?: string[]
+  options?: MessageOption[]
   containerStyle?: LeftRightStyle<ViewStyle>
   wrapperStyle?: LeftRightStyle<ViewStyle>
   textStyle?: LeftRightStyle<TextStyle>

package/src/GiftedChat/index.tsx

@@ -89,6 +89,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     minComposerHeight = MIN_COMPOSER_HEIGHT,
     maxComposerHeight = MAX_COMPOSER_HEIGHT,
     isKeyboardInternallyHandled = true,
+    disableKeyboardController = false,
   } = props
 
   const actionSheetRef = useRef<ActionSheetProviderRef>(null)
@@ -112,7 +113,16 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
   const [text, setText] = useState<string | undefined>(() => props.text || '')
   const [isTypingDisabled, setIsTypingDisabled] = useState<boolean>(false)
 
-  const keyboard = useReanimatedKeyboardAnimation()
+  // Always call the hook, but conditionally use its data
+  const keyboardControllerData = useReanimatedKeyboardAnimation()
+
+  // Create a mock keyboard object when disabled
+  const keyboard = useMemo(() => {
+    if (disableKeyboardController)
+      return { height: { value: 0 } }
+    return keyboardControllerData
+  }, [disableKeyboardController, keyboardControllerData])
+
   const trackingKeyboardMovement = useSharedValue(false)
   const debounceEnableTypingTimeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
   const keyboardOffsetBottom = useSharedValue(0)
@@ -380,9 +390,14 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       setText(props.text)
   }, [props.text])
 
+  // Only set up keyboard animation when keyboard controller is enabled
   useAnimatedReaction(
-    () => -keyboard.height.value,
+    () => disableKeyboardController ? 0 : -keyboard.height.value,
     (value, prevValue) => {
+      // Skip keyboard handling when disabled
+      if (disableKeyboardController)
+        return
+
       if (prevValue !== null && value !== prevValue) {
         const isKeyboardMovingUp = value > prevValue
         if (isKeyboardMovingUp !== trackingKeyboardMovement.value) {
@@ -420,6 +435,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       disableTyping,
       debounceEnableTyping,
       bottomOffset,
+      disableKeyboardController,
     ]
   )
 
@@ -433,7 +449,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
         >
           {isInitialized
             ? (
-              <Animated.View style={[stylesCommon.fill, isKeyboardInternallyHandled && contentStyleAnim]}>
+              <Animated.View style={[stylesCommon.fill, (isKeyboardInternallyHandled && !disableKeyboardController) && contentStyleAnim]}>
                 {renderMessages}
                 {inputToolbarFragment}
               </Animated.View>
@@ -448,6 +464,10 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 }
 
 function GiftedChatWrapper<TMessage extends IMessage = IMessage> (props: GiftedChatProps<TMessage>) {
+  // Don't use KeyboardProvider when keyboard controller is disabled
+  if (props.disableKeyboardController)
+    return <GiftedChat<TMessage> {...props} />
+
   return (
     <KeyboardProvider>
       <GiftedChat<TMessage> {...props} />

package/src/GiftedChat/types.ts

@@ -31,7 +31,7 @@ import { SendProps } from '../Send'
 import { SystemMessageProps } from '../SystemMessage'
 import { TimeProps } from '../Time'
 import { AnimatedList, ListViewProps, MessageContainerProps } from '../MessageContainer'
-import Bubble from '../Bubble'
+import { BubbleProps } from '../Bubble'
 
 export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessageContainerProps<TMessage>> {
   /* Message container ref */
@@ -75,6 +75,8 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   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` */
+  disableKeyboardController?: boolean
   /* Whether to render an avatar for the current user; default is false, only show avatars for other users */
   showUserAvatar?: boolean
   /* When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is false */
@@ -144,7 +146,7 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   /* 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: Bubble<TMessage>['props']): React.ReactNode
+  renderBubble?(props: BubbleProps<TMessage>): React.ReactNode
   /* Custom system message */
   renderSystemMessage?(props: SystemMessageProps<TMessage>): React.ReactNode
   /* Callback when a message bubble is pressed; default is to do nothing */
@@ -165,7 +167,7 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   /* Custom message video */
   renderMessageAudio?(props: MessageAudioProps<TMessage>): React.ReactNode
   /* Custom view inside the bubble */
-  renderCustomView?(props: Bubble<TMessage>['props']): React.ReactNode
+  renderCustomView?(props: BubbleProps<TMessage>): React.ReactNode
   /* Custom day above a message */
   renderDay?(props: DayProps): React.ReactNode
   /* Custom time inside a message */
@@ -191,7 +193,7 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   /* Callback when the input text changes */
   onInputTextChanged?(text: string): void
   /* Custom parse patterns for react-native-parsed-text used to linking message content (like URLs and phone numbers) */
-  parsePatterns?: (linkStyle?: TextStyle) => { type?: string, pattern?: RegExp, style?: StyleProp<TextStyle> | object, onPress?: unknown, renderText?: unknown }[]
+  matchers?: MessageTextProps<TMessage>['matchers']
   onQuickReply?(replies: Reply[]): void
   renderQuickReplies?(
     quickReplies: QuickRepliesProps<TMessage>,

package/src/Message/index.tsx

@@ -114,22 +114,16 @@ let Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>)
 }
 
 Message = memo(Message, (props, nextProps) => {
-  const next = nextProps.currentMessage!
-  const current = props.currentMessage!
-  const { previousMessage, nextMessage } = props
-  const nextPropsMessage = nextProps.nextMessage
-  const nextPropsPreviousMessage = nextProps.previousMessage
-
-  let shouldUpdate =
-    props.shouldUpdateMessage?.(props, nextProps) || false
-
-  shouldUpdate =
-    shouldUpdate ||
-    !isEqual(current, next) ||
-    !isEqual(previousMessage, nextPropsPreviousMessage) ||
-    !isEqual(nextMessage, nextPropsMessage)
-
-  return shouldUpdate
+  const shouldUpdate =
+    props.shouldUpdateMessage?.(props, nextProps) ||
+    !isEqual(props.currentMessage!, nextProps.currentMessage!) ||
+    !isEqual(props.previousMessage, nextProps.previousMessage) ||
+    !isEqual(props.nextMessage, nextProps.nextMessage)
+
+  if (shouldUpdate)
+    return false
+
+  return true
 })
 
 export default Message