react-native-gifted-chat 3.3.2 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "3.3.2",
+  "version": "3.4.0",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",
@@ -23,22 +23,23 @@
   "license": "MIT",
   "author": "Farid Safi",
   "type": "module",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "files": [
-    "src"
+    "lib"
   ],
   "scripts": {
+    "typecheck": "yarn tsc --noEmit",
+    "build": "rm -rf lib && yarn tsc",
+    "tsc:watch": "yarn typecheck --watch",
     "lint": "yarn eslint src example",
     "lint:fix": "yarn eslint --cache --fix src example",
-    "prepublishOnly": "yarn lint && yarn test",
+    "prepublishOnly": "yarn lint && yarn test && yarn build",
     "start": "cd example && expo start",
     "start:web": "cd example && expo start -w --dev",
     "test": "TZ=Europe/Paris jest --no-watchman",
     "test:coverage": "TZ=Europe/Paris jest --coverage",
     "test:watch": "TZ=Europe/Paris jest --watch",
-    "tsc:write": "yarn tsc --project tsconfig.json",
-    "tsc:watch": "yarn tsc --watch --noEmit",
     "fresh": "yarn start --reset-cache",
     "prepare": "yarn husky"
   },
@@ -50,55 +51,56 @@
   "dependencies": {
     "@expo/react-native-action-sheet": "^4.1.1",
     "@types/lodash.isequal": "^4.5.8",
-    "dayjs": "^1.11.19",
+    "dayjs": "^1.11.21",
     "lodash.isequal": "^4.5.0",
-    "react-native-zoom-reanimated": "^1.5.2"
+    "react-native-zoom-reanimated": "^1.5.4"
   },
   "devDependencies": {
-    "@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",
+    "@babel/core": "^7.29.7",
+    "@babel/plugin-transform-react-jsx": "^7.29.7",
+    "@babel/plugin-transform-unicode-property-regex": "^7.29.7",
+    "@babel/preset-env": "^7.29.7",
+    "@react-native-community/cli": "20.1.3",
+    "@react-native-community/cli-platform-android": "20.1.3",
+    "@react-native-community/cli-platform-ios": "20.1.3",
+    "@react-native/babel-preset": "0.85.3",
+    "@react-native/eslint-config": "0.85.3",
+    "@react-native/jest-preset": "0.85.3",
+    "@react-native/metro-config": "0.85.3",
+    "@react-native/typescript-config": "0.85.3",
+    "@stylistic/eslint-plugin": "^5.10.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.2.5",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@types/react-native": "^0.72.8",
+    "@types/react-native": "^0.73.0",
     "@types/react-test-renderer": "^19.1.0",
-    "@typescript-eslint/eslint-plugin": "^8.46.4",
-    "@typescript-eslint/parser": "^8.46.4",
+    "@typescript-eslint/eslint-plugin": "^8.61.1",
+    "@typescript-eslint/parser": "^8.61.1",
     "babel-jest": "^29.7.0",
-    "eslint": "^9.18.0",
-    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint": "^9.39.4",
+    "eslint-import-resolver-typescript": "^4.4.5",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^28.11.0",
-    "eslint-plugin-perfectionist": "^4.15.1",
+    "eslint-plugin-perfectionist": "^5.9.1",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "json": "^11.0.0",
-    "lint-staged": "^15.5.0",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-native": "0.81.5",
-    "react-native-gesture-handler": "~2.30.0",
-    "react-native-keyboard-controller": "1.20.6",
-    "react-native-reanimated": "~4.2.1",
-    "react-native-safe-area-context": "~5.6.2",
-    "react-native-worklets": "0.7.2",
-    "react-test-renderer": "19.1.0",
-    "typescript": "^5.9.3"
+    "lint-staged": "^17.0.7",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-gesture-handler": "~2.31.1",
+    "react-native-keyboard-controller": "^1.21.11",
+    "react-native-reanimated": "^4.4.1",
+    "react-native-safe-area-context": "^5.8.0",
+    "react-native-worklets": "^0.9.2",
+    "react-test-renderer": "19.2.3",
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/src/Actions.tsx

@@ -1,110 +0,0 @@
-import React, { ReactNode, useCallback } from 'react'
-import {
-  StyleSheet,
-  View,
-  StyleProp,
-  ViewStyle,
-  TextStyle,
-} from 'react-native'
-import { Text } from 'react-native-gesture-handler'
-import { Color } from './Color'
-import { TouchableOpacity } from './components/TouchableOpacity'
-
-import { useChatContext } from './GiftedChatContext'
-import stylesCommon from './styles'
-
-export interface ActionsProps {
-  actions?: Array<{ title: string, action: () => void }>
-  actionSheetOptionTintColor?: string
-  icon?: () => ReactNode
-  wrapperStyle?: StyleProp<ViewStyle>
-  iconTextStyle?: StyleProp<TextStyle>
-  buttonStyle?: StyleProp<ViewStyle>
-  onPressActionButton?(): void
-}
-
-export function Actions ({
-  actions,
-  actionSheetOptionTintColor = Color.optionTintColor,
-  icon,
-  wrapperStyle,
-  iconTextStyle,
-  onPressActionButton,
-  buttonStyle,
-}: ActionsProps) {
-  const { actionSheet } = useChatContext()
-
-  const handlePress = useCallback(() => {
-    if (onPressActionButton) {
-      onPressActionButton()
-      return
-    }
-
-    if (!actions?.length)
-      return
-
-    const titles = actions.map(item => item.title)
-
-    actionSheet().showActionSheetWithOptions(
-      {
-        options: titles,
-        cancelButtonIndex: titles.length - 1,
-        tintColor: actionSheetOptionTintColor,
-      },
-      (buttonIndex?: number) => {
-        if (buttonIndex === undefined)
-          return
-
-        const item = actions[buttonIndex]
-        item.action?.()
-      }
-    )
-  }, [actionSheet, actions, actionSheetOptionTintColor, onPressActionButton])
-
-  const renderIcon = useCallback(() => {
-    if (icon)
-      return icon()
-
-    return (
-      <View style={[stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
-        <Text style={[styles.iconText, iconTextStyle]}>{'+'}</Text>
-      </View>
-    )
-  }, [icon, iconTextStyle, wrapperStyle])
-
-  return (
-    <View style={styles.container}>
-      <TouchableOpacity
-        onPress={handlePress}
-        style={[styles.button, buttonStyle]}
-      >
-        {renderIcon()}
-      </TouchableOpacity>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'flex-end',
-  },
-  button: {
-    paddingLeft: 10,
-    paddingRight: 4,
-    paddingVertical: 7,
-  },
-
-  wrapper: {
-    borderColor: Color.defaultColor,
-    borderWidth: 2,
-    width: 26,
-    height: 26,
-    borderRadius: 13,
-  },
-  iconText: {
-    color: Color.defaultColor,
-    fontWeight: 'bold',
-    fontSize: 16,
-    lineHeight: 16,
-  },
-})

package/src/Avatar.tsx

@@ -1,169 +0,0 @@
-import React, { ReactNode, useCallback } from 'react'
-import {
-  ImageStyle,
-  StyleSheet,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native'
-import { GiftedAvatar } from './GiftedAvatar'
-import { IMessage, LeftRightStyle, User } from './Models'
-import { isSameUser, isSameDay } from './utils'
-
-interface Styles {
-  left: {
-    container: ViewStyle
-    onTop: ViewStyle
-    image: ImageStyle
-  }
-  right: {
-    container: ViewStyle
-    onTop: ViewStyle
-    image: ImageStyle
-  }
-}
-
-const styles: Styles = {
-  left: StyleSheet.create({
-    container: {
-      marginRight: 8,
-    },
-    onTop: {
-      alignSelf: 'flex-start',
-    },
-    image: {
-      height: 36,
-      width: 36,
-      borderRadius: 18,
-    },
-  }),
-  right: StyleSheet.create({
-    container: {
-      marginLeft: 8,
-    },
-    onTop: {
-      alignSelf: 'flex-start',
-    },
-    image: {
-      height: 36,
-      width: 36,
-      borderRadius: 18,
-    },
-  }),
-}
-
-export interface AvatarProps<TMessage extends IMessage> {
-  currentMessage: TMessage
-  previousMessage?: TMessage
-  nextMessage?: TMessage
-  position: 'left' | 'right'
-  isAvatarOnTop?: boolean
-  isAvatarVisibleForEveryMessage?: boolean
-  imageStyle?: LeftRightStyle<ImageStyle>
-  containerStyle?: LeftRightStyle<ViewStyle>
-  textStyle?: TextStyle
-  renderAvatar?(props: Omit<AvatarProps<TMessage>, 'renderAvatar'>): ReactNode
-  onPressAvatar?: (user: User) => void
-  onLongPressAvatar?: (user: User) => void
-}
-
-export function Avatar<TMessage extends IMessage = IMessage> (
-  props: AvatarProps<TMessage>
-) {
-  const {
-    isAvatarOnTop,
-    isAvatarVisibleForEveryMessage,
-    containerStyle,
-    position,
-    currentMessage,
-    renderAvatar,
-    previousMessage,
-    nextMessage,
-    imageStyle,
-    onPressAvatar,
-    onLongPressAvatar,
-  } = props
-
-  const messageToCompare = isAvatarOnTop ? previousMessage : nextMessage
-
-  const renderAvatarComponent = useCallback(() => {
-    if (renderAvatar)
-      return renderAvatar({
-        isAvatarOnTop,
-        isAvatarVisibleForEveryMessage,
-        containerStyle,
-        position,
-        currentMessage,
-        previousMessage,
-        nextMessage,
-        imageStyle,
-        onPressAvatar,
-        onLongPressAvatar,
-      })
-
-    if (currentMessage)
-      return (
-        <GiftedAvatar
-          avatarStyle={[
-            styles[position].image,
-            imageStyle?.[position],
-          ]}
-          user={currentMessage.user}
-          onPress={() => onPressAvatar?.(currentMessage.user)}
-          onLongPress={() => onLongPressAvatar?.(currentMessage.user)}
-        />
-      )
-
-    return null
-  }, [
-    renderAvatar,
-    isAvatarOnTop,
-    isAvatarVisibleForEveryMessage,
-    containerStyle,
-    position,
-    currentMessage,
-    previousMessage,
-    nextMessage,
-    imageStyle,
-    onPressAvatar,
-    onLongPressAvatar,
-  ])
-
-  if (renderAvatar === null)
-    return null
-
-  if (
-    !isAvatarVisibleForEveryMessage &&
-    currentMessage &&
-    messageToCompare &&
-    isSameUser(currentMessage, messageToCompare) &&
-    isSameDay(currentMessage, messageToCompare)
-  )
-    return (
-      <View
-        style={[
-          styles[position].container,
-          containerStyle?.[position],
-        ]}
-      >
-        <GiftedAvatar
-          avatarStyle={[
-            styles[position].image,
-            imageStyle?.[position],
-          ]}
-        />
-      </View>
-    )
-
-  return (
-    <View
-      style={[
-        styles[position].container,
-        isAvatarOnTop && styles[position].onTop,
-        containerStyle?.[position],
-      ]}
-    >
-      {renderAvatarComponent()}
-    </View>
-  )
-}