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

package/README.md

@@ -357,7 +357,7 @@ interface QuickReplies {
 - **`isKeyboardInternallyHandled`** _(Bool)_ - Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is `true`
 - **`disableKeyboardController`** _(Bool)_ - Completely disable react-native-keyboard-controller. Useful when using react-native-navigation or other conflicting keyboard libraries; default is `false`
 - **`text`** _(String)_ - Input text; default is `undefined`, but if specified, it will override GiftedChat's internal state (e.g. for redux; [see notes below](#notes-for-redux))
-- **`placeholder`** _(String)_ - Placeholder when `text` is empty; default is `'Type a message...'`
+- **`onInputTextChanged`** _(Function)_ - Callback when the input text changes
 - **`messageIdGenerator`** _(Function)_ - Generate an id for new messages. Defaults to UUID v4, generated by [uuid](https://github.com/kelektiv/node-uuid)
 - **`user`** _(Object)_ - User sending the messages: `{ _id, name, avatar }`
 - **`onSend`** _(Function)_ - Callback when sending a message
@@ -380,8 +380,8 @@ interface QuickReplies {
 - **`renderBubble`** _(Function)_ - Custom message bubble
 - **`renderTicks`** _(Function(`message`))_ - Custom ticks indicator to display message status
 - **`renderSystemMessage`** _(Function)_ - Custom system message
-- **`onPress`** _(Function(`context`, `message`))_ - Callback when a message bubble is pressed
-- **`onLongPress`** _(Function(`context`, `message`))_ - Callback when a message bubble is long-pressed (see [example using `showActionSheetWithOptions()`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master@%7B2017-09-25%7D/src/Bubble.js#L96-L119))
+- **`onPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is pressed
+- **`onLongPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is long-pressed (see [example using `showActionSheetWithOptions()`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master@%7B2017-09-25%7D/src/Bubble.js#L96-L119))
 - **`inverted`** _(Bool)_ - Reverses display order of `messages`; default is `true`
 - **`renderUsernameOnMessage`** _(Bool)_ - Indicate whether to show the user's username inside the message bubble; default is `false`
 - **`renderUsername`** _(Function)_ - Custom Username container
@@ -389,7 +389,7 @@ interface QuickReplies {
 - **`renderMessageText`** _(Function)_ - Custom message text
 - **`renderMessageImage`** _(Function)_ - Custom message image
 - **`renderMessageVideo`** _(Function)_ - Custom message video
-- **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://facebook.github.io/react-native/docs/image.html) component created by the default `renderMessageImage`
+- **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://reactnative.dev/docs/image.html) component created by the default `renderMessageImage`
 - **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`
 - **`lightboxProps`** _(Object)_ - Extra props to be passed to the `MessageImage`'s [Lightbox](https://github.com/oblador/react-native-lightbox)
 - **`isCustomViewBottom`** _(Bool)_ - Determine whether renderCustomView is displayed before or after the text, image and video views; default is `false`
@@ -408,13 +408,8 @@ interface QuickReplies {
 - **`bottomOffset`** _(Integer)_ - Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar)
 - **`focusOnInputWhenOpeningKeyboard`** _(Bool)_ - Focus on <TextInput> automatically when opening the keyboard; default `true`
 - **`minInputToolbarHeight`** _(Integer)_ - Minimum height of the input toolbar; default is `44`
-- **`listViewProps`** _(Object)_ - Extra props to be passed to the messages [`<ListView>`](https://facebook.github.io/react-native/docs/listview.html); some props can't be overridden, see the code in `MessageContainer.render()` for details
-- **`textInputProps`** _(Object)_ - Extra props to be passed to the [`<TextInput>`](https://facebook.github.io/react-native/docs/textinput.html)
-- **`textInputStyle`** _(Object)_ - Custom style to be passed to the [`<TextInput>`](https://facebook.github.io/react-native/docs/textinput.html)
-- **`multiline`** _(Bool)_ - Indicates whether to allow the [`<TextInput>`](https://facebook.github.io/react-native/docs/textinput.html) to be multiple lines or not; default `true`.
-- **`keyboardShouldPersistTaps`** _(Enum)_ - Determines whether the keyboard should stay visible after a tap; see [`<ScrollView>`](https://facebook.github.io/react-native/docs/scrollview.html) docs
-- **`onInputTextChanged`** _(Function)_ - Callback when the input text changes
-- **`maxInputLength`** _(Integer)_ - Max message composer TextInput length
+- **`listProps`** _(Object)_ - Extra props to be passed to the messages [`<FlatList>`](https://reactnative.dev/docs/flatlist.html); some props can't be overridden, see the code in `MessageContainer.render()` for details
+- **`textInputProps`** _(Object)_ - props to be passed to the [`<TextInput>`](https://reactnative.dev/docs/textinput.html).
 - **`matchers`** _(Array)_ - Custom matchers for [react-native-autolink](https://github.com/joshswan/react-native-autolink) used to linking message content (like URLs and phone numbers), e.g.:
 
 ```js
@@ -441,6 +436,7 @@ interface QuickReplies {
 * **`renderQuickReplySend`** _(Function)_ - Custom quick reply **send** view
 * **`shouldUpdateMessage`** _(Function)_ - Lets the message component know when to update outside of normal cases.
 * **`infiniteScroll`** _(Bool)_ - infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist (not yet supported for the web). You need to add `loadEarlier` prop too.
+* **`typingIndicatorStyle`** _(StyleProp<ViewStyle>)_ - Custom style for the TypingIndicator component.
 
 ## Notes for [Redux](https://github.com/reactjs/redux)
 
@@ -474,7 +470,7 @@ If you are using Create React Native App / Expo, no Android specific installatio
 
 - For **Expo**, there are at least 2 solutions to fix it:
 
-  - Append [`KeyboardAvoidingView`](https://facebook.github.io/react-native/docs/keyboardavoidingview) after GiftedChat. This should only be done for Android, as `KeyboardAvoidingView` may conflict with the iOS keyboard avoidance already built into GiftedChat, e.g.:
+  - Append [`KeyboardAvoidingView`](https://reactnative.dev/docs/keyboardavoidingview) after GiftedChat. This should only be done for Android, as `KeyboardAvoidingView` may conflict with the iOS keyboard avoidance already built into GiftedChat, e.g.:
 
 ```
 <View style={{ flex: 1 }}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "2.8.2-alpha.0",
+  "version": "2.8.2-alpha.1",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",
@@ -23,17 +23,15 @@
   "license": "MIT",
   "author": "Farid Safi",
   "type": "module",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
   "files": [
-    "src",
-    "lib"
+    "src"
   ],
   "scripts": {
-    "build": "rm -rf lib/ && yarn tsc",
     "lint": "yarn eslint src",
     "lint:fix": "yarn eslint --cache --fix",
-    "prepublishOnly": "yarn lint && yarn build",
+    "prepublishOnly": "yarn lint && yarn test",
     "start": "cd example && expo start",
     "start:web": "cd example && expo start -w --dev",
     "test": "TZ=Europe/Paris jest --no-watchman",
@@ -46,26 +44,23 @@
   },
   "lint-staged": {
     "src/*.{json,js,jsx,ts,tsx}": [
-      "yarn lint:fix",
-      "bash -c 'yarn tsc:write'"
+      "yarn lint:fix"
     ]
   },
   "dependencies": {
     "@expo/react-native-action-sheet": "^4.1.1",
     "@types/lodash.isequal": "^4.5.8",
-    "dayjs": "^1.11.18",
+    "dayjs": "^1.11.19",
     "lodash.isequal": "^4.5.0",
     "react-native-autolink": "^4.2.0",
     "react-native-communications": "^2.2.1",
-    "react-native-iphone-x-helper": "^1.3.1",
     "react-native-lightbox-v2": "^0.9.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
+    "@babel/core": "^7.28.5",
     "@babel/plugin-transform-react-jsx": "^7.27.1",
     "@babel/plugin-transform-unicode-property-regex": "^7.27.1",
-    "@babel/preset-env": "^7.28.3",
-    "@stylistic/eslint-plugin": "^3.1.0",
+    "@babel/preset-env": "^7.28.5",
     "@react-native-community/cli": "20.0.0",
     "@react-native-community/cli-platform-android": "20.0.0",
     "@react-native-community/cli-platform-ios": "20.0.0",
@@ -73,13 +68,17 @@
     "@react-native/eslint-config": "0.81.5",
     "@react-native/metro-config": "0.81.5",
     "@react-native/typescript-config": "0.81.5",
+    "@stylistic/eslint-plugin": "^3.1.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.13",
-    "@types/react": "^19.1.0",
-    "@types/react-test-renderer": "^19.1.0",
-    "@types/react-dom": "^19.1.9",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
     "@types/react-native": "^0.72.8",
-    "@typescript-eslint/eslint-plugin": "^8.44.1",
-    "@typescript-eslint/parser": "^8.44.1",
+    "@types/react-test-renderer": "^19.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.4",
+    "@typescript-eslint/parser": "^8.46.4",
     "babel-jest": "^29.7.0",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
@@ -101,13 +100,13 @@
     "react-native-keyboard-controller": "^1.19.5",
     "react-native-reanimated": "^3.19.4",
     "react-test-renderer": "19.1.0",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-native": "*",
     "react-native-keyboard-controller": ">=1.0.0",
-    "react-native-reanimated": ">=3.0.0"
+    "react-native-reanimated": ">=3.0.0 || ^4.0.0"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "engines": {

package/src/Bubble/index.tsx

@@ -1,7 +1,7 @@
 import React, { JSX, useCallback } from 'react'
 import {
   Text,
-  TouchableWithoutFeedback,
+  Pressable,
   View,
 } from 'react-native'
 
@@ -38,22 +38,22 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
     containerStyle,
     wrapperStyle,
     bottomContainerStyle,
-    onPress: onPressProp,
-    onLongPress: onLongPressProp,
+    onPressMessage: onPressMessageProp,
+    onLongPressMessage: onLongPressMessageProp,
   } = props
 
   const context = useChatContext()
 
   const onPress = useCallback(() => {
-    onPressProp?.(context, currentMessage)
-  }, [onPressProp, context, currentMessage])
+    onPressMessageProp?.(context, currentMessage)
+  }, [onPressMessageProp, context, currentMessage])
 
   const onLongPress = useCallback(() => {
-    onLongPressProp?.(context, currentMessage)
+    onLongPressMessageProp?.(context, currentMessage)
   }, [
     currentMessage,
     context,
-    onLongPressProp,
+    onLongPressMessageProp,
   ])
 
   const styledBubbleToNext = useCallback(() => {
@@ -151,6 +151,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
 
       return <MessageText {...messageTextProps} />
     }
+
     return null
   }, [props, currentMessage])
 
@@ -169,6 +170,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
 
       return <MessageImage {...messageImageProps} />
     }
+
     return null
   }, [props, currentMessage])
 
@@ -349,10 +351,9 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
           wrapperStyle && wrapperStyle[position],
         ]}
       >
-        <TouchableWithoutFeedback
+        <Pressable
           onPress={onPress}
           onLongPress={onLongPress}
-          accessibilityRole='text'
           {...props.touchableProps}
         >
           <View>
@@ -368,7 +369,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
               {renderTicks()}
             </View>
           </View>
-        </TouchableWithoutFeedback>
+        </Pressable>
       </View>
       {renderQuickReplies()}
     </View>

package/src/Bubble/types.ts

@@ -66,8 +66,8 @@ export interface BubbleProps<TMessage extends IMessage> {
   quickReplyStyle?: StyleProp<ViewStyle>
   quickReplyTextStyle?: StyleProp<TextStyle>
   quickReplyContainerStyle?: StyleProp<ViewStyle>
-  onPress?(context?: unknown, message?: unknown): void
-  onLongPress?(context?: unknown, message?: unknown): void
+  onPressMessage?(context?: unknown, message?: unknown): void
+  onLongPressMessage?(context?: unknown, message?: unknown): void
   onQuickReply?(replies: Reply[]): void
   renderMessageImage?(
     props: RenderMessageImageProps<TMessage>,

package/src/Composer.tsx

@@ -6,41 +6,30 @@ import {
   TextInputProps,
   NativeSyntheticEvent,
   TextInputContentSizeChangeEventData,
+  useColorScheme,
 } from 'react-native'
-import { MIN_COMPOSER_HEIGHT, DEFAULT_PLACEHOLDER } from './Constant'
+import { MIN_COMPOSER_HEIGHT } from './Constant'
 import Color from './Color'
 import stylesCommon from './styles'
 
 export interface ComposerProps {
   composerHeight?: number
   text?: string
-  placeholder?: string
-  placeholderTextColor?: string
   textInputProps?: Partial<TextInputProps>
-  textInputStyle?: TextInputProps['style']
-  textInputAutoFocus?: boolean
-  keyboardAppearance?: TextInputProps['keyboardAppearance']
-  multiline?: boolean
-  disableComposer?: boolean
   onTextChanged?(text: string): void
   onInputSizeChanged?(layout: { width: number, height: number }): void
 }
 
 export function Composer ({
   composerHeight = MIN_COMPOSER_HEIGHT,
-  disableComposer = false,
-  keyboardAppearance = 'default',
-  multiline = true,
   onInputSizeChanged,
   onTextChanged,
-  placeholder = DEFAULT_PLACEHOLDER,
-  placeholderTextColor = Color.defaultColor,
   text = '',
-  textInputAutoFocus = false,
   textInputProps,
-  textInputStyle,
 }: ComposerProps): React.ReactElement {
   const dimensionsRef = useRef<{ width: number, height: number }>(null)
+  const colorScheme = useColorScheme()
+  const isDark = colorScheme === 'dark'
 
   const determineInputSizeChange = useCallback(
     (dimensions: { width: number, height: number }) => {
@@ -69,21 +58,28 @@ export function Composer ({
     [determineInputSizeChange]
   )
 
+  const placeholder = textInputProps?.placeholder ?? 'Type a message...'
+
   return (
     <TextInput
       testID={placeholder}
       accessible
       accessibilityLabel={placeholder}
-      placeholder={placeholder}
-      placeholderTextColor={placeholderTextColor}
-      multiline={multiline}
-      editable={!disableComposer}
+      placeholderTextColor={textInputProps?.placeholderTextColor ?? (isDark ? '#888' : Color.defaultColor)}
       onContentSizeChange={handleContentSizeChange}
       onChangeText={onTextChanged}
+      value={text}
+      enablesReturnKeyAutomatically
+      underlineColorAndroid='transparent'
+      keyboardAppearance={isDark ? 'dark' : 'default'}
+      multiline
+      placeholder={placeholder}
+      {...textInputProps}
       style={[
         stylesCommon.fill,
         styles.textInput,
-        textInputStyle,
+        styles[`textInput_${colorScheme}`],
+        textInputProps?.style,
         {
           height: composerHeight,
           ...Platform.select({
@@ -95,12 +91,6 @@ export function Composer ({
           }),
         },
       ]}
-      autoFocus={textInputAutoFocus}
-      value={text}
-      enablesReturnKeyAutomatically
-      underlineColorAndroid='transparent'
-      keyboardAppearance={keyboardAppearance}
-      {...textInputProps}
     />
   )
 }
@@ -127,4 +117,7 @@ const styles = StyleSheet.create({
       web: 4,
     }),
   },
+  textInput_dark: {
+    color: '#fff',
+  },
 })

package/src/Constant.ts

@@ -7,7 +7,6 @@ export const MIN_COMPOSER_HEIGHT = Platform.select({
   windows: 34,
 })
 export const MAX_COMPOSER_HEIGHT = 200
-export const DEFAULT_PLACEHOLDER = 'Type a message...'
 export const DATE_FORMAT = 'D MMMM'
 export const TIME_FORMAT = 'LT'
 

package/src/GiftedAvatar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import {
   Image,
   Text,
@@ -51,9 +51,6 @@ export interface GiftedAvatarProps {
 export function GiftedAvatar (
   props: GiftedAvatarProps
 ) {
-  const [avatarName, setAvatarName] = useState<string | undefined>(undefined)
-  const [backgroundColor, setBackgroundColor] = useState<string | undefined>(undefined)
-
   const {
     user,
     avatarStyle,
@@ -61,23 +58,23 @@ export function GiftedAvatar (
     onPress,
   } = props
 
-  const setAvatarColor = useCallback(() => {
-    if (backgroundColor)
-      return
-
+  const avatarName = useMemo(() => {
     const userName = user?.name || ''
     const name = userName.toUpperCase().split(' ')
 
     if (name.length === 1)
-      setAvatarName(`${name[0].charAt(0)}`)
+      return `${name[0].charAt(0)}`
     else if (name.length > 1)
-      setAvatarName(`${name[0].charAt(0)}${name[1].charAt(0)}`)
+      return `${name[0].charAt(0)}${name[1].charAt(0)}`
     else
-      setAvatarName('')
+      return ''
+  }, [user?.name])
 
+  const backgroundColor = useMemo(() => {
     let sumChars = 0
-    for (let i = 0; i < userName.length; i += 1)
-      sumChars += userName.charCodeAt(i)
+    if (user?.name)
+      for (let i = 0; i < user.name.length; i += 1)
+        sumChars += user.name.charCodeAt(i)
 
     // inspired by https://github.com/wbinnssmith/react-user-avatar
     // colors from https://flatuicolors.com/
@@ -91,8 +88,8 @@ export function GiftedAvatar (
       midnightBlue,
     ]
 
-    setBackgroundColor(colors[sumChars % colors.length])
-  }, [user?.name, backgroundColor])
+    return colors[sumChars % colors.length]
+  }, [user?.name])
 
   const renderAvatar = useCallback(() => {
     switch (typeof user?.avatar) {
@@ -125,17 +122,16 @@ export function GiftedAvatar (
     )
   }, [textStyle, avatarName])
 
-  const handleOnPress = () => {
+  const handleOnPress = useCallback(() => {
     const {
       onPress,
       ...rest
     } = props
 
-    if (onPress)
-      onPress(rest)
-  }
+    onPress?.(rest)
+  }, [props])
 
-  const handleOnLongPress = () => {
+  const handleOnLongPress = useCallback(() => {
     const {
       onLongPress,
       ...rest
@@ -143,25 +139,22 @@ export function GiftedAvatar (
 
     if (onLongPress)
       onLongPress(rest)
-  }
+  }, [props])
 
-  useEffect(() => {
-    setAvatarColor()
-  }, [setAvatarColor])
+  const placeholderView = useMemo(() => (
+    <View
+      style={[
+        stylesCommon.centerItems,
+        styles.avatarStyle,
+        styles.avatarTransparent,
+        avatarStyle,
+      ]}
+      accessibilityRole='image'
+    />
+  ), [avatarStyle])
 
   if (!user || (!user.name && !user.avatar))
-    // render placeholder
-    return (
-      <View
-        style={[
-          stylesCommon.centerItems,
-          styles.avatarStyle,
-          styles.avatarTransparent,
-          avatarStyle,
-        ]}
-        accessibilityRole='image'
-      />
-    )
+    return placeholderView
 
   if (user.avatar)
     return (

package/src/GiftedChat/index.tsx

@@ -14,7 +14,6 @@ import {
 import dayjs from 'dayjs'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
 import {
-  Platform,
   TextInput,
   View,
   LayoutChangeEvent,
@@ -72,19 +71,13 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     onSend,
     locale = 'en',
     renderLoading,
-    actionSheet = null,
+    actionSheet,
     textInputProps,
-    renderChatFooter = null,
-    renderInputToolbar = null,
+    renderChatFooter,
+    renderInputToolbar,
     bottomOffset = 0,
     focusOnInputWhenOpeningKeyboard = true,
-    keyboardShouldPersistTaps = Platform.select({
-      ios: 'never',
-      android: 'always',
-      default: 'never',
-    }),
-    onInputTextChanged = null,
-    maxInputLength = null,
+    onInputTextChanged,
     inverted = true,
     minComposerHeight = MIN_COMPOSER_HEIGHT,
     maxComposerHeight = MAX_COMPOSER_HEIGHT,
@@ -111,7 +104,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     minComposerHeight!
   )
   const [text, setText] = useState<string | undefined>(() => props.text || '')
-  const [isTypingDisabled, setIsTypingDisabled] = useState<boolean>(false)
 
   // Always call the hook, but conditionally use its data
   const keyboardControllerData = useReanimatedKeyboardAnimation()
@@ -124,7 +116,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
   }, [disableKeyboardController, keyboardControllerData])
 
   const trackingKeyboardMovement = useSharedValue(false)
-  const debounceEnableTypingTimeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
   const keyboardOffsetBottom = useSharedValue(0)
 
   const contentStyleAnim = useAnimatedStyle(
@@ -174,23 +165,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     isTextInputWasFocused.current = false
   }, [textInputRef])
 
-  const disableTyping = useCallback(() => {
-    clearTimeout(debounceEnableTypingTimeoutId.current)
-    setIsTypingDisabled(true)
-  }, [])
-
-  const enableTyping = useCallback(() => {
-    clearTimeout(debounceEnableTypingTimeoutId.current)
-    setIsTypingDisabled(false)
-  }, [])
-
-  const debounceEnableTyping = useCallback(() => {
-    clearTimeout(debounceEnableTypingTimeoutId.current)
-    debounceEnableTypingTimeoutId.current = setTimeout(() => {
-      enableTyping()
-    }, 50)
-  }, [enableTyping])
-
   const scrollToBottom = useCallback(
     (isAnimated = true) => {
       if (!messageContainerRef?.current)
@@ -219,10 +193,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       <View style={[stylesCommon.fill, messagesContainerStyle]}>
         <MessageContainer<TMessage>
           {...messagesContainerProps}
-          invertibleScrollViewProps={{
-            inverted,
-            keyboardShouldPersistTaps,
-          }}
+          inverted={inverted}
           messages={messages}
           forwardRef={messageContainerRef}
           isTyping={isTyping}
@@ -236,7 +207,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     messages,
     props,
     inverted,
-    keyboardShouldPersistTaps,
     messageContainerRef,
     renderChatFooter,
   ])
@@ -252,13 +222,11 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
     setComposerHeight(minComposerHeight!)
     setText(getTextFromProp(''))
-    enableTyping()
   }, [
     minComposerHeight,
     getTextFromProp,
     textInputRef,
     notifyInputTextReset,
-    enableTyping,
   ])
 
   const _onSend = useCallback(
@@ -275,17 +243,14 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
         }
       })
 
-      if (shouldResetInputToolbar === true) {
-        disableTyping()
-
+      if (shouldResetInputToolbar === true)
         resetInputToolbar()
-      }
 
       onSend?.(newMessages)
 
       setTimeout(() => scrollToBottom(), 10)
     },
-    [messageIdGenerator, onSend, user, resetInputToolbar, disableTyping, scrollToBottom]
+    [messageIdGenerator, onSend, user, resetInputToolbar, scrollToBottom]
   )
 
   const onInputSizeChanged = useCallback(
@@ -301,17 +266,14 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
   )
 
   const _onInputTextChanged = useCallback(
-    (_text: string) => {
-      if (isTypingDisabled)
-        return
-
-      onInputTextChanged?.(_text)
+    (text: string) => {
+      onInputTextChanged?.(text)
 
       // Only set state if it's not being overridden by a prop.
       if (props.text === undefined)
-        setText(_text)
+        setText(text)
     },
-    [onInputTextChanged, isTypingDisabled, props.text]
+    [onInputTextChanged, props.text]
   )
 
   const onInitialLayoutViewLayout = useCallback(
@@ -347,7 +309,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       textInputProps: {
         ...textInputProps,
         ref: textInputRef,
-        maxLength: isTypingDisabled ? 0 : maxInputLength,
       },
     }
 
@@ -359,14 +320,12 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     isInitialized,
     _onSend,
     getTextFromProp,
-    maxInputLength,
     minComposerHeight,
     onInputSizeChanged,
     props,
     text,
     renderInputToolbar,
     composerHeight,
-    isTypingDisabled,
     textInputRef,
     textInputProps,
     _onInputTextChanged,
@@ -415,13 +374,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
               runOnJS(handleTextInputFocusWhenKeyboardShow)()
             else
               runOnJS(handleTextInputFocusWhenKeyboardHide)()
-
-          if (value === 0) {
-            runOnJS(enableTyping)()
-          } else {
-            runOnJS(disableTyping)()
-            runOnJS(debounceEnableTyping)()
-          }
         }
       }
     },
@@ -431,9 +383,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       focusOnInputWhenOpeningKeyboard,
       handleTextInputFocusWhenKeyboardHide,
       handleTextInputFocusWhenKeyboardShow,
-      enableTyping,
-      disableTyping,
-      debounceEnableTyping,
       bottomOffset,
       disableKeyboardController,
     ]