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

package/README.md

@@ -85,21 +85,19 @@
 
 ## Features
 
-- 🎉 **_`react-native-web`able_ (since 0.10.0)** [web configuration](#react-native-web)
-- Write with **TypeScript** (since 0.8.0)
 - Fully customizable components
 - Composer actions (to attach photos, etc.)
 - Load earlier messages
 - Copy messages to clipboard
-- Touchable links using [react-native-parsed-text](https://github.com/taskrabbit/react-native-parsed-text)
+- Touchable links using [react-native-autolink](https://github.com/joshswan/react-native-autolink)
 - Avatar as user's initials
 - Localized dates
 - Multi-line TextInput
 - InputToolbar avoiding keyboard
-- Redux support
 - System message
 - Quick Reply messages (bot)
 - Typing indicator
+- react-native-web [web configuration](#react-native-web)
 
 # Getting started
 
@@ -117,18 +115,18 @@ Readme for this version: [2.6.5 readme](https://github.com/FaridSafi/react-nativ
 
 Yarn:
 ```bash
-yarn add react-native-gifted-chat react-native-reanimated react-native-keyboard-controller
+yarn add react-native-gifted-chat react-native-reanimated react-native-keyboard-controller react-native-gesture-handler react-native-safe-area-context
 ```
 
 Npm:
 
 ```bash
-npm install --save react-native-gifted-chat react-native-reanimated react-native-keyboard-controller
+npm install --save react-native-gifted-chat react-native-reanimated react-native-keyboard-controller react-native-gesture-handler react-native-safe-area-context
 ```
 
 Expo
 ```bash
-npx expo install react-native-gifted-chat react-native-reanimated react-native-keyboard-controller
+npx expo install react-native-gifted-chat react-native-reanimated react-native-keyboard-controller react-native-gesture-handler react-native-safe-area-context
 ```
 
 ### Non-expo users
@@ -173,9 +171,15 @@ fireEvent(loadingWrapper, 'layout', {
 ```jsx
 import React, { useState, useCallback, useEffect } from 'react'
 import { GiftedChat } from 'react-native-gifted-chat'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export function Example() {
   const [messages, setMessages] = useState([])
+  const insets = useSafeAreaInsets()
+
+  // If you have a tab bar, include its height
+  const tabbarHeight = 50
+  const keyboardBottomOffset = insets.bottom + tabbarHeight
 
   useEffect(() => {
     setMessages([
@@ -205,6 +209,7 @@ export function Example() {
       user={{
         _id: 1,
       }}
+      keyboardBottomOffset={keyboardBottomOffset}
     />
   )
 }
@@ -212,7 +217,7 @@ export function Example() {
 
 ## Advanced example
 
-See [`App.tsx`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master/example/App.tsx) for a working demo!
+See [`examples`](example) for a working demo!
 
 ## "Slack" example
 
@@ -354,10 +359,10 @@ interface QuickReplies {
 - **`textInputRef`** _(TextInput ref)_ - Ref to the text input
 - **`messages`** _(Array)_ - Messages to display
 - **`isTyping`** _(Bool)_ - Typing Indicator state; default `false`. If you use`renderFooter` it will override this.
+- **`keyboardBottomOffset`** _(Integer)_ - Distance between the bottom of the screen and bottom of the `GiftedChat` component. Useful when you have a tab bar or navigation bar; default is `0`. Needed for correct keyboard avoiding behavior. Without it you might see gap between the keyboard and the input toolbar if you have a tab bar, navigation bar, or safe area.
 - **`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 +385,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,9 +394,8 @@ 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`
 - **`renderCustomView`** _(Function)_ - Custom view inside the bubble
 - **`renderDay`** _(Function)_ - Custom day above a message
@@ -405,27 +409,42 @@ interface QuickReplies {
 - **`renderSend`** _(Function)_ - Custom send button; you can pass children to the original `Send` component quite easily, for example, to use a custom icon ([example](https://github.com/FaridSafi/react-native-gifted-chat/pull/487))
 - **`renderAccessory`** _(Function)_ - Custom second line of actions below the message composer
 - **`onPressActionButton`** _(Function)_ - Callback when the Action button is pressed (if set, the default `actionSheet` will not be used)
-- **`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
-- **`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.:
+- **`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).
+- **`messageTextProps`** _(Object)_ - Extra props to be passed to the MessageText component. Useful for customizing link parsing behavior, text styles, and matchers. Supports all [react-native-autolink](https://github.com/joshswan/react-native-autolink) props including:
+  - `matchers` - Custom matchers for linking message content (like URLs, phone numbers, hashtags, mentions)
+  - `linkStyle` - Custom style for links
+  - `email` - Enable/disable email parsing (default: true)
+  - `phone` - Enable/disable phone number parsing (default: true)
+  - `url` - Enable/disable URL parsing (default: true)
+
+Example:
 
 ```js
- <GiftedChat
-   matchers={[
-     { type: 'phone', style: linkStyle, onPress: onPressPhoneNumber },
-     { pattern: /#(\w+)/, style: [linkStyle, styles.hashtag], onPress: onPressHashtag },
-   ]}
- />
+<GiftedChat
+  messageTextProps={{
+    matchers: [
+      {
+        pattern: /#(\w+)/g,
+        style: { color: '#0084ff', fontWeight: 'bold' },
+        onPress: (match) => console.log('Hashtag:', match.getAnchorText()),
+      },
+      {
+        pattern: /(?<![\.\w])@(?!__ELEMENT-)([\w-]+)/g,
+        style: { color: '#0084ff', fontWeight: 'bold' },
+        onPress: (match) => console.log('Mention:', match.getAnchorText()),
+      },
+    ],
+    linkStyle: { left: { color: 'blue' }, right: { color: 'lightblue' } },
+    phone: false,
+  }}
+/>
 ```
 
+- **`matchers`** _(Array)_ - **Deprecated:** Use `messageTextProps.matchers` instead. Custom matchers for [react-native-autolink](https://github.com/joshswan/react-native-autolink) used to linking message content (like URLs and phone numbers).
+
 - **`extraData`** _(Object)_ - Extra props for re-rendering FlatList on demand. This will be useful for rendering footer etc.
 - **`minComposerHeight`** _(Object)_ - Custom min-height of the composer.
 - **`maxComposerHeight`** _(Object)_ - Custom max height of the composer.
@@ -441,6 +460,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 +494,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 }}>
@@ -518,7 +538,7 @@ If you use React Navigation, additional handling may be required to account for
 module.exports = function override(config, env) {
   config.module.rules.push({
     test: /\.js$/,
-    exclude: /node_modules[/\\](?!react-native-gifted-chat|react-native-lightbox|react-native-parsed-text)/,
+    exclude: /node_modules[/\\](?!react-native-gifted-chat)/,
     use: {
       loader: 'babel-loader',
       options: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "2.8.2-alpha.0",
+  "version": "2.8.2-alpha.2",
   "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,22 @@
   },
   "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"
+    "react-native-zoom-reanimated": "^1.4.10"
   },
   "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,24 +67,24 @@
     "@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",
-    "eslint-config-standard-jsx": "^11.0.0",
+    "eslint": "^9.18.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^28.11.0",
-    "eslint-plugin-json": "^4.0.1",
-    "eslint-plugin-n": "^17.23.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-perfectionist": "^4.15.1",
     "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "json": "^11.0.0",
@@ -98,16 +92,20 @@
     "react": "19.1.0",
     "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-reanimated": "^3.19.4",
+    "react-native-safe-area-context": "^5.6.2",
     "react-test-renderer": "19.1.0",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-native": "*",
+    "react-native-gesture-handler": ">=2.0.0",
     "react-native-keyboard-controller": ">=1.0.0",
-    "react-native-reanimated": ">=3.0.0"
+    "react-native-reanimated": ">=3.0.0 || ^4.0.0",
+    "react-native-safe-area-context": ">=5.0.0"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "engines": {

package/src/Actions.tsx

@@ -2,13 +2,13 @@ import React, { ReactNode, useCallback } from 'react'
 import {
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
   StyleProp,
   ViewStyle,
   TextStyle,
 } from 'react-native'
 import Color from './Color'
+import { TouchableOpacity } from './components/TouchableOpacity'
 import { useChatContext } from './GiftedChatContext'
 
 import stylesCommon from './styles'

package/src/Avatar.tsx

@@ -7,8 +7,8 @@ import {
   ViewStyle,
 } from 'react-native'
 import { GiftedAvatar } from './GiftedAvatar'
-import { isSameUser, isSameDay } from './utils'
 import { IMessage, LeftRightStyle, User } from './types'
+import { isSameUser, isSameDay } from './utils'
 
 interface Styles {
   left: {

package/src/Bubble/index.tsx

@@ -1,24 +1,24 @@
 import React, { JSX, useCallback } from 'react'
 import {
   Text,
-  TouchableWithoutFeedback,
+  Pressable,
   View,
 } from 'react-native'
 
 import { useChatContext } from '../GiftedChatContext'
-import { QuickReplies } from '../QuickReplies'
-import { MessageText } from '../MessageText'
+import { MessageAudio } from '../MessageAudio'
 import { MessageImage } from '../MessageImage'
+import { MessageText } from '../MessageText'
 import { MessageVideo } from '../MessageVideo'
-import { MessageAudio } from '../MessageAudio'
-import { Time } from '../Time'
+import { QuickReplies } from '../QuickReplies'
+import stylesCommon from '../styles'
 
-import { isSameUser, isSameDay } from '../utils'
+import { Time } from '../Time'
 import { IMessage } from '../types'
-import { BubbleProps } from './types'
+import { isSameUser, isSameDay } from '../utils'
 
-import stylesCommon from '../styles'
 import styles from './styles'
+import { BubbleProps, RenderMessageTextProps } from './types'
 
 export * from './types'
 
@@ -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(() => {
@@ -142,15 +142,19 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
         /* eslint-disable @typescript-eslint/no-unused-vars */
         containerStyle,
         wrapperStyle,
+        messageTextProps,
         /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...messageTextProps
+        ...messageTextPropsRest
       } = props
 
+      const combinedProps = { ...messageTextPropsRest, ...messageTextProps } as RenderMessageTextProps<TMessage>
+
       if (props.renderMessageText)
-        return props.renderMessageText(messageTextProps)
+        return props.renderMessageText(combinedProps)
 
-      return <MessageText {...messageTextProps} />
+      return <MessageText {...combinedProps} />
     }
+
     return null
   }, [props, currentMessage])
 
@@ -169,6 +173,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
 
       return <MessageImage {...messageImageProps} />
     }
+
     return null
   }, [props, currentMessage])
 
@@ -349,10 +354,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 +372,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
               {renderTicks()}
             </View>
           </View>
-        </TouchableWithoutFeedback>
+        </Pressable>
       </View>
       {renderQuickReplies()}
     </View>

package/src/Bubble/types.ts

@@ -4,9 +4,9 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native'
-import { QuickRepliesProps } from '../QuickReplies'
-import { MessageTextProps, MessageOption } from '../MessageText'
 import { MessageImageProps } from '../MessageImage'
+import { MessageTextProps, MessageOption } from '../MessageText'
+import { QuickRepliesProps } from '../QuickReplies'
 import { TimeProps } from '../Time'
 import {
   User,
@@ -18,7 +18,7 @@ import {
   MessageAudioProps,
 } from '../types'
 
-/* eslint-disable no-use-before-define */
+ 
 export type RenderMessageImageProps<TMessage extends IMessage> = Omit<
   BubbleProps<TMessage>,
   'containerStyle' | 'wrapperStyle'
@@ -42,7 +42,7 @@ export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
   'containerStyle' | 'wrapperStyle' | 'options'
 > &
   MessageTextProps<TMessage>
-/* eslint-enable no-use-before-define */
+ 
 
 export interface BubbleProps<TMessage extends IMessage> {
   user?: User
@@ -66,8 +66,9 @@ 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
+  messageTextProps?: Partial<MessageTextProps<TMessage>>
+  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 Color from './Color'
+import { MIN_COMPOSER_HEIGHT } from './Constant'
 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/Day/index.tsx

@@ -4,15 +4,15 @@ import {
   View,
 } from 'react-native'
 import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
 import calendar from 'dayjs/plugin/calendar'
+import relativeTime from 'dayjs/plugin/relativeTime'
 
 import { DATE_FORMAT } from '../Constant'
-import { DayProps } from './types'
-
 import { useChatContext } from '../GiftedChatContext'
+
 import stylesCommon from '../styles'
 import styles from './styles'
+import { DayProps } from './types'
 
 export * from './types'