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

package/README.md

@@ -78,6 +78,10 @@
     <a href="https://bit.ly/ethorachat" target="_blank">Check out our GitHub</a>
   </p>
 </p>
+<br>
+<p align="center">
+ <a href="https://amzn.to/3ZmTyb2" target="_blank">React Key Concepts: Consolidate your knowledge of React’s core features (2nd ed. Edition)</a>
+</p>
 
 ## Features
 
@@ -351,8 +355,9 @@ interface QuickReplies {
 - **`messages`** _(Array)_ - Messages to display
 - **`isTyping`** _(Bool)_ - Typing Indicator state; default `false`. If you use`renderFooter` it will override this.
 - **`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
@@ -360,7 +365,7 @@ interface QuickReplies {
 - **`locale`** _(String)_ - Locale to localize the dates. You need first to import the locale you need (ie. `require('dayjs/locale/de')` or `import 'dayjs/locale/fr'`)
 - **`timeFormat`** _(String)_ - Format to use for rendering times; default is `'LT'` (see [Day.js Format](https://day.js.org/docs/en/display/format))
 - **`dateFormat`** _(String)_ - Format to use for rendering dates; default is `'D MMMM'` (see [Day.js Format](https://day.js.org/docs/en/display/format))
-- **`dateFormatCalendar`** _(String)_ - Format to use for rendering relative times; Today - for now (see [Day.js Calendar](https://day.js.org/docs/en/plugin/calendar))
+- **`dateFormatCalendar`** _(Object)_ - Format to use for rendering relative times; default is `{ sameDay: '[Today]' }` (see [Day.js Calendar](https://day.js.org/docs/en/plugin/calendar))
 - **`loadEarlier`** _(Bool)_ - Enables the "load earlier messages" button, required for `infiniteScroll`
 - **`onLoadEarlier`** _(Function)_ - Callback when loading earlier messages
 - **`isLoadingEarlier`** _(Bool)_ - Display an `ActivityIndicator` when loading earlier messages
@@ -375,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
@@ -384,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`
@@ -403,20 +408,15 @@ 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
-- **`parsePatterns`** _(Function)_ - Custom parse patterns for [react-native-parsed-text](https://github.com/taskrabbit/react-native-parsed-text) 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).
+- **`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
  <GiftedChat
-   parsePatterns={(linkStyle) => [
-     { type: 'phone', style: linkStyle, onPress: this.onPressPhoneNumber },
-     { pattern: /#(\w+)/, style: { ...linkStyle, styles.hashtag }, onPress: this.onPressHashtag },
+   matchers={[
+     { type: 'phone', style: linkStyle, onPress: onPressPhoneNumber },
+     { pattern: /#(\w+)/, style: [linkStyle, styles.hashtag], onPress: onPressHashtag },
    ]}
  />
 ```
@@ -436,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)
 
@@ -469,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.1",
+  "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 && yarn test",
+    "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,64 +44,72 @@
   },
   "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.13",
+    "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-parsed-text": "^0.0.22"
+    "react-native-lightbox-v2": "^0.9.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/plugin-transform-react-jsx": "^7.25.9",
-    "@babel/plugin-transform-unicode-property-regex": "^7.25.9",
-    "@babel/preset-env": "^7.26.9",
-    "@react-native/eslint-config": "^0.76.6",
+    "@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.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",
+    "@react-native/babel-preset": "0.81.5",
+    "@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",
-    "@types/jest": "^29.5.14",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
+    "@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.2.5",
+    "@types/react-dom": "^19.2.3",
     "@types/react-native": "^0.72.8",
-    "@typescript-eslint/eslint-plugin": "^8.28.0",
-    "@typescript-eslint/parser": "^8.28.0",
+    "@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-plugin-import": "^2.31.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-json": "^4.0.1",
-    "eslint-plugin-n": "^17.17.0",
+    "eslint-plugin-n": "^17.23.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react": "^7.37.5",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "json": "^11.0.0",
     "lint-staged": "^15.5.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-native": "^0.76.6",
-    "react-native-keyboard-controller": "^1.16.8",
-    "react-native-reanimated": "^3.17.1",
-    "react-test-renderer": "^18.3.1",
-    "typescript": "^5.8.2"
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-keyboard-controller": "^1.19.5",
+    "react-native-reanimated": "^3.19.4",
+    "react-test-renderer": "19.1.0",
+    "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": {
-    "node": ">=18"
+    "node": ">=20"
   }
 }

package/src/Bubble/index.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback } from 'react'
+import React, { JSX, useCallback } from 'react'
 import {
   Text,
-  TouchableWithoutFeedback,
+  Pressable,
   View,
 } from 'react-native'
 
@@ -22,7 +22,7 @@ import styles from './styles'
 
 export * from './types'
 
-const Bubble: React.FC<BubbleProps<IMessage>> = (props: BubbleProps<IMessage>) => {
+const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessage>): JSX.Element => {
   const {
     currentMessage,
     nextMessage,
@@ -38,46 +38,22 @@ const Bubble: React.FC<BubbleProps<IMessage>> = (props: BubbleProps<IMessage>) =
     containerStyle,
     wrapperStyle,
     bottomContainerStyle,
+    onPressMessage: onPressMessageProp,
+    onLongPressMessage: onLongPressMessageProp,
   } = props
 
   const context = useChatContext()
 
   const onPress = useCallback(() => {
-    if (props.onPress)
-      props.onPress(context, currentMessage)
-  }, [context, props, currentMessage])
+    onPressMessageProp?.(context, currentMessage)
+  }, [onPressMessageProp, context, currentMessage])
 
   const onLongPress = useCallback(() => {
-    const {
-      onLongPress,
-      optionTitles,
-    } = props
-
-    if (onLongPress) {
-      onLongPress(context, currentMessage)
-      return
-    }
-
-    if (!optionTitles?.length)
-      return
-
-    const options = optionTitles
-    const cancelButtonIndex = options.length - 1
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ;(context as any).actionSheet().showActionSheetWithOptions(
-      {
-        options,
-        cancelButtonIndex,
-      },
-      (buttonIndex: number) => {
-        console.log('onLongPress', { buttonIndex })
-      }
-    )
+    onLongPressMessageProp?.(context, currentMessage)
   }, [
     currentMessage,
     context,
-    props,
+    onLongPressMessageProp,
   ])
 
   const styledBubbleToNext = useCallback(() => {
@@ -111,7 +87,7 @@ const Bubble: React.FC<BubbleProps<IMessage>> = (props: BubbleProps<IMessage>) =
     )
       return [
         styles[position].containerToPrevious,
-        containerToPreviousStyle && containerToPreviousStyle[position],
+        containerToPreviousStyle?.[position],
       ]
 
     return null
@@ -166,7 +142,6 @@ const Bubble: React.FC<BubbleProps<IMessage>> = (props: BubbleProps<IMessage>) =
         /* eslint-disable @typescript-eslint/no-unused-vars */
         containerStyle,
         wrapperStyle,
-        optionTitles,
         /* eslint-enable @typescript-eslint/no-unused-vars */
         ...messageTextProps
       } = props
@@ -176,6 +151,7 @@ const Bubble: React.FC<BubbleProps<IMessage>> = (props: BubbleProps<IMessage>) =
 
       return <MessageText {...messageTextProps} />
     }
+
     return null
   }, [props, currentMessage])
 
@@ -194,6 +170,7 @@ const Bubble: React.FC<BubbleProps<IMessage>> = (props: BubbleProps<IMessage>) =
 
       return <MessageImage {...messageImageProps} />
     }
+
     return null
   }, [props, currentMessage])
 
@@ -374,10 +351,9 @@ const Bubble: React.FC<BubbleProps<IMessage>> = (props: BubbleProps<IMessage>) =
           wrapperStyle && wrapperStyle[position],
         ]}
       >
-        <TouchableWithoutFeedback
+        <Pressable
           onPress={onPress}
           onLongPress={onLongPress}
-          accessibilityRole='text'
           {...props.touchableProps}
         >
           <View>
@@ -385,7 +361,7 @@ const Bubble: React.FC<BubbleProps<IMessage>> = (props: BubbleProps<IMessage>) =
             <View
               style={[
                 styles[position].bottom,
-                bottomContainerStyle && bottomContainerStyle[position],
+                bottomContainerStyle?.[position],
               ]}
             >
               {renderUsername()}
@@ -393,7 +369,7 @@ const Bubble: React.FC<BubbleProps<IMessage>> = (props: BubbleProps<IMessage>) =
               {renderTicks()}
             </View>
           </View>
-        </TouchableWithoutFeedback>
+        </Pressable>
       </View>
       {renderQuickReplies()}
     </View>

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>
@@ -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 (