react-native-gifted-chat 2.9.0-alpha.0 → 3.0.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "2.9.0-alpha.0",
+  "version": "3.0.0-alpha.1",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",
@@ -94,7 +94,7 @@
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "^2.29.1",
-    "react-native-keyboard-controller": "^1.19.5",
+    "react-native-keyboard-controller": "^1.19.6",
     "react-native-reanimated": "^3.19.4",
     "react-native-safe-area-context": "^5.6.2",
     "react-test-renderer": "19.1.0",

package/src/Avatar.tsx

@@ -7,7 +7,7 @@ import {
   ViewStyle,
 } from 'react-native'
 import { GiftedAvatar } from './GiftedAvatar'
-import { IMessage, LeftRightStyle, User } from './types'
+import { IMessage, LeftRightStyle, User } from './Models'
 import { isSameUser, isSameDay } from './utils'
 
 interface Styles {
@@ -57,8 +57,8 @@ export interface AvatarProps<TMessage extends IMessage> {
   previousMessage?: TMessage
   nextMessage?: TMessage
   position: 'left' | 'right'
-  renderAvatarOnTop?: boolean
-  showAvatarForEveryMessage?: boolean
+  isAvatarOnTop?: boolean
+  isAvatarVisibleForEveryMessage?: boolean
   imageStyle?: LeftRightStyle<ImageStyle>
   containerStyle?: LeftRightStyle<ViewStyle>
   textStyle?: TextStyle
@@ -71,8 +71,8 @@ export function Avatar<TMessage extends IMessage = IMessage> (
   props: AvatarProps<TMessage>
 ) {
   const {
-    renderAvatarOnTop,
-    showAvatarForEveryMessage,
+    isAvatarOnTop,
+    isAvatarVisibleForEveryMessage,
     containerStyle,
     position,
     currentMessage,
@@ -84,13 +84,13 @@ export function Avatar<TMessage extends IMessage = IMessage> (
     onLongPressAvatar,
   } = props
 
-  const messageToCompare = renderAvatarOnTop ? previousMessage : nextMessage
+  const messageToCompare = isAvatarOnTop ? previousMessage : nextMessage
 
   const renderAvatarComponent = useCallback(() => {
     if (renderAvatar)
       return renderAvatar({
-        renderAvatarOnTop,
-        showAvatarForEveryMessage,
+        isAvatarOnTop,
+        isAvatarVisibleForEveryMessage,
         containerStyle,
         position,
         currentMessage,
@@ -117,8 +117,8 @@ export function Avatar<TMessage extends IMessage = IMessage> (
     return null
   }, [
     renderAvatar,
-    renderAvatarOnTop,
-    showAvatarForEveryMessage,
+    isAvatarOnTop,
+    isAvatarVisibleForEveryMessage,
     containerStyle,
     position,
     currentMessage,
@@ -133,7 +133,7 @@ export function Avatar<TMessage extends IMessage = IMessage> (
     return null
 
   if (
-    !showAvatarForEveryMessage &&
+    !isAvatarVisibleForEveryMessage &&
     currentMessage &&
     messageToCompare &&
     isSameUser(currentMessage, messageToCompare) &&
@@ -159,7 +159,7 @@ export function Avatar<TMessage extends IMessage = IMessage> (
     <View
       style={[
         styles[position].container,
-        renderAvatarOnTop && styles[position].onTop,
+        isAvatarOnTop && styles[position].onTop,
         containerStyle?.[position],
       ]}
     >

package/src/Bubble/index.tsx

@@ -10,11 +10,11 @@ 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, renderComponentOrElement } from '../utils'
 
 import styles from './styles'
@@ -284,7 +284,7 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
       renderUsername,
     } = props
 
-    if (props.renderUsernameOnMessage && currentMessage) {
+    if (props.isUsernameVisible && currentMessage) {
       if (user && currentMessage.user._id === user._id)
         return null
 

package/src/Bubble/types.ts

@@ -6,8 +6,6 @@ import {
 } from 'react-native'
 import { MessageImageProps } from '../MessageImage'
 import { MessageTextProps } from '../MessageText'
-import { QuickRepliesProps } from '../QuickReplies'
-import { TimeProps } from '../Time'
 import {
   User,
   IMessage,
@@ -16,7 +14,9 @@ import {
   Omit,
   MessageVideoProps,
   MessageAudioProps,
-} from '../types'
+} from '../Models'
+import { QuickRepliesProps } from '../QuickReplies'
+import { TimeProps } from '../Time'
 
 
 export type RenderMessageImageProps<TMessage extends IMessage> = Omit<
@@ -47,9 +47,9 @@ export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
 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
@@ -66,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/Composer.tsx

@@ -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/GiftedAvatar.tsx

@@ -10,8 +10,8 @@ import {
 } from 'react-native'
 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

@@ -19,23 +19,14 @@ import {
 import dayjs from 'dayjs'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
-import { KeyboardProvider, useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller'
-import Animated, {
-  useAnimatedStyle,
-  useAnimatedReaction,
-  useSharedValue,
-  withTiming,
-  runOnJS,
-} from 'react-native-reanimated'
+import { KeyboardAvoidingView, KeyboardProvider } from 'react-native-keyboard-controller'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { MAX_COMPOSER_HEIGHT, MIN_COMPOSER_HEIGHT, TEST_ID } from '../Constant'
 import { GiftedChatContext } from '../GiftedChatContext'
 import { InputToolbar } from '../InputToolbar'
 import { MessageContainer, AnimatedList } from '../MessageContainer'
+import { IMessage } from '../Models'
 import stylesCommon from '../styles'
-import {
-  IMessage,
-} from '../types'
 import { renderComponentOrElement } from '../utils'
 import styles from './styles'
 import { GiftedChatProps } from './types'
@@ -63,13 +54,9 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     textInputProps,
     renderChatFooter,
     renderInputToolbar,
-    keyboardBottomOffset = 0,
-    focusOnInputWhenOpeningKeyboard = true,
-    onInputTextChanged,
-    inverted = true,
+    isInverted = true,
     minComposerHeight = MIN_COMPOSER_HEIGHT,
     maxComposerHeight = MAX_COMPOSER_HEIGHT,
-    isKeyboardInternallyHandled = true,
   } = props
 
   const actionSheetRef = useRef<ActionSheetProviderRef>(null)
@@ -84,37 +71,12 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     [props.textInputRef]
   )
 
-  const isTextInputWasFocused: RefObject<boolean> = useRef(false)
-
   const [isInitialized, setIsInitialized] = useState<boolean>(false)
   const [composerHeight, setComposerHeight] = useState<number>(
     minComposerHeight!
   )
   const [text, setText] = useState<string | undefined>(() => props.text || '')
 
-  // Always call the hook, but conditionally use its data
-  const keyboardControllerData = useReanimatedKeyboardAnimation()
-
-  // Create a mock keyboard object when keyboard is not internally handled
-  const keyboard = useMemo(() => {
-    if (!isKeyboardInternallyHandled)
-      return { height: { value: 0 } }
-
-    return keyboardControllerData
-  }, [isKeyboardInternallyHandled, keyboardControllerData])
-
-  const trackingKeyboardMovement = useSharedValue(false)
-  const keyboardBottomOffsetAnim = useSharedValue(0)
-
-  const contentStyleAnim = useAnimatedStyle(
-    () => ({
-      transform: [
-        { translateY: keyboard.height.value + keyboardBottomOffsetAnim.value },
-      ],
-    }),
-    [keyboard, keyboardBottomOffsetAnim]
-  )
-
   const getTextFromProp = useCallback(
     (fallback: string) => {
       if (props.text === undefined)
@@ -125,40 +87,12 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     [props.text]
   )
 
-  /**
-   * Store text input focus status when keyboard hide to retrieve
-   * it afterwards if needed.
-   * `onKeyboardWillHide` may be called twice in sequence so we
-   * make a guard condition (eg. showing image picker)
-   */
-  const handleTextInputFocusWhenKeyboardHide = useCallback(() => {
-    if (!isTextInputWasFocused.current)
-      isTextInputWasFocused.current =
-        textInputRef.current?.isFocused() || false
-  }, [textInputRef])
-
-  /**
-   * Refocus the text input only if it was focused before showing keyboard.
-   * This is needed in some cases (eg. showing image picker).
-   */
-  const handleTextInputFocusWhenKeyboardShow = useCallback(() => {
-    if (
-      textInputRef.current &&
-      isTextInputWasFocused.current &&
-      !textInputRef.current.isFocused()
-    )
-      textInputRef.current.focus()
-
-    // Reset the indicator since the keyboard is shown
-    isTextInputWasFocused.current = false
-  }, [textInputRef])
-
   const scrollToBottom = useCallback(
     (isAnimated = true) => {
       if (!messageContainerRef?.current)
         return
 
-      if (inverted) {
+      if (isInverted) {
         messageContainerRef.current.scrollToOffset({
           offset: 0,
           animated: isAnimated,
@@ -168,7 +102,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
       messageContainerRef.current.scrollToEnd({ animated: isAnimated })
     },
-    [inverted, messageContainerRef]
+    [isInverted, messageContainerRef]
   )
 
   const renderMessages = useMemo(() => {
@@ -181,7 +115,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       <View style={[stylesCommon.fill, messagesContainerStyle]}>
         <MessageContainer<TMessage>
           {...messagesContainerProps}
-          inverted={inverted}
+          isInverted={isInverted}
           messages={messages}
           forwardRef={messageContainerRef}
           isTyping={isTyping}
@@ -194,14 +128,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()
@@ -253,15 +187,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(
@@ -293,9 +227,9 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       composerHeight: Math.max(minComposerHeight!, composerHeight),
       onSend: _onSend,
       onInputSizeChanged,
-      onTextChanged: _onInputTextChanged,
       textInputProps: {
         ...textInputProps,
+        onChangeText: _onChangeText,
         ref: textInputRef,
       },
     }
@@ -316,7 +250,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     composerHeight,
     textInputRef,
     textInputProps,
-    _onInputTextChanged,
+    _onChangeText,
   ])
 
   const contextValues = useMemo(
@@ -337,90 +271,67 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       setText(props.text)
   }, [props.text])
 
-  // Only set up keyboard animation when keyboard is internally handled
-  useAnimatedReaction(
-    () => isKeyboardInternallyHandled ? keyboard.height.value : 0,
-    (value, prevValue) => {
-      // Skip keyboard handling when not internally handled
-      if (!isKeyboardInternallyHandled)
-        return
-
-      if (prevValue !== null && value !== prevValue) {
-        const isKeyboardMovingUp = value < prevValue
-        if (isKeyboardMovingUp !== trackingKeyboardMovement.value) {
-          trackingKeyboardMovement.value = isKeyboardMovingUp
-          keyboardBottomOffsetAnim.value = withTiming(
-            isKeyboardMovingUp ? keyboardBottomOffset : 0,
-            {
-              // If `keyboardBottomOffset` exists, we change the duration to a smaller value to fix the delay in the keyboard animation speed
-              duration: keyboardBottomOffset ? 150 : 400,
-            }
-          )
-
-          if (focusOnInputWhenOpeningKeyboard)
-            if (isKeyboardMovingUp)
-              runOnJS(handleTextInputFocusWhenKeyboardShow)()
-            else
-              runOnJS(handleTextInputFocusWhenKeyboardHide)()
-        }
-      }
-    },
-    [
-      keyboard,
-      trackingKeyboardMovement,
-      focusOnInputWhenOpeningKeyboard,
-      handleTextInputFocusWhenKeyboardHide,
-      handleTextInputFocusWhenKeyboardShow,
-      keyboardBottomOffset,
-      isKeyboardInternallyHandled,
-    ]
-  )
-
   return (
     <GiftedChatContext.Provider value={contextValues}>
       <ActionSheetProvider ref={actionSheetRef}>
-        <View
-          testID={TEST_ID.WRAPPER}
-          style={[stylesCommon.fill, styles.contentContainer]}
-          onLayout={onInitialLayoutViewLayout}
+        {/* @ts-expect-error */}
+        <KeyboardAvoidingView
+          behavior='padding'
+          style={stylesCommon.fill}
+          {...props.keyboardAvoidingViewProps}
         >
-          {isInitialized
-            ? (
-              <Animated.View style={[stylesCommon.fill, isKeyboardInternallyHandled && contentStyleAnim]}>
-                {renderMessages}
-                {inputToolbarFragment}
-              </Animated.View>
-            )
-            : (
-              renderComponentOrElement(renderLoading, {})
-            )}
-        </View>
+          <View
+            testID={TEST_ID.WRAPPER}
+            style={[stylesCommon.fill, styles.contentContainer]}
+            onLayout={onInitialLayoutViewLayout}
+          >
+            {isInitialized
+              ? (
+                <>
+                  {renderMessages}
+                  {inputToolbarFragment}
+                </>
+              )
+              : (
+                renderComponentOrElement(renderLoading, {})
+              )}
+          </View>
+        </KeyboardAvoidingView>
       </ActionSheetProvider>
     </GiftedChatContext.Provider>
   )
 }
 
 function GiftedChatWrapper<TMessage extends IMessage = IMessage> (props: GiftedChatProps<TMessage>) {
+  const {
+    keyboardProviderProps,
+    ...rest
+  } = props
+
   return (
-    <KeyboardProvider>
-      <GestureHandlerRootView style={styles.fill}>
-        <SafeAreaProvider>
-          <GiftedChat<TMessage> {...props} />
-        </SafeAreaProvider>
-      </GestureHandlerRootView>
-    </KeyboardProvider>
+    <GestureHandlerRootView style={styles.fill}>
+      <SafeAreaProvider>
+        <KeyboardProvider
+          statusBarTranslucent
+          navigationBarTranslucent
+          {...keyboardProviderProps}
+        >
+          <GiftedChat<TMessage> {...rest} />
+        </KeyboardProvider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
   )
 }
 
 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)
 }
@@ -428,12 +339,12 @@ 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)
 }