react-native-gifted-chat 2.4.1 → 2.6.0

package/package.json

@@ -1,13 +1,7 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "2.4.1",
+  "version": "2.6.0",
   "description": "The most complete chat UI for React Native",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/FaridSafi/react-native-gifted-chat.git"
-  },
   "keywords": [
     "android",
     "ios",
@@ -18,72 +12,105 @@
     "message",
     "chat"
   ],
-  "author": "Farid Safi",
-  "license": "MIT",
+  "homepage": "https://github.com/FaridSafi/react-native-gifted-chat#readme",
   "bugs": {
     "url": "https://github.com/FaridSafi/react-native-gifted-chat/issues"
   },
-  "homepage": "https://github.com/FaridSafi/react-native-gifted-chat#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FaridSafi/react-native-gifted-chat.git"
+  },
+  "license": "MIT",
+  "author": "Farid Safi",
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "src",
+    "lib"
+  ],
   "scripts": {
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "lint:fix": "./node_modules/.bin/eslint ./src/*.{ts,tsx} --fix",
-    "tsc": "node_modules/.bin/tsc --noEmit",
-    "tsc:watch": "node_modules/.bin/tsc --watch --noEmit",
+    "build": "rm -rf lib/ && yarn tsc && cp flow-typedefs/*.js.flow lib/",
+    "lint": "yarn eslint src",
+    "lint:fix": "yarn eslint --cache --fix",
+    "prepublishOnly": "yarn lint && yarn build && yarn test",
     "start": "cd example && expo start",
     "start:web": "cd example && expo start -w --dev",
-    "build": "rm -rf lib/ && node_modules/.bin/tsc && cp flow-typedefs/*.js.flow lib/",
     "test": "TZ=Europe/Paris jest --no-watchman",
-    "test:watch": "TZ=Europe/Paris jest --watch",
     "test:coverage": "TZ=Europe/Paris jest --coverage",
-    "prepublishOnly": "yarn lint && yarn build && yarn test",
-    "prettier": "./node_modules/.bin/prettier --write \"src/**/*.{ts,tsx}\""
+    "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"
   },
-  "devDependencies": {
-    "@babel/core": "7.17.9",
-    "@babel/plugin-transform-flow-strip-types": "7.16.7",
-    "@babel/preset-env": "7.16.11",
-    "@babel/preset-typescript": "7.16.7",
-    "@types/jest": "27.4.1",
-    "@types/react": "~16.9.35",
-    "@types/react-native": "~0.63.2",
-    "@types/react-test-renderer": "16.9.2",
-    "@types/uuid": "3.4.9",
-    "@typescript-eslint/eslint-plugin": "5.18.0",
-    "@typescript-eslint/parser": "5.18.0",
-    "babel-jest": "27.5.1",
-    "eslint": "8.13.0",
-    "eslint-config-prettier": "8.5.0",
-    "flow-bin": "0.125.0",
-    "husky": "4.2.5",
-    "jest": "27.5.1",
-    "json": "9.0.6",
-    "metro-react-native-babel-preset": "0.70.1",
-    "prettier": "2.0.5",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-native": "0.63.4",
-    "react-test-renderer": "16.9.0",
-    "typescript": "4.6.3"
+  "lint-staged": {
+    "src/*.{json,js,jsx,ts,tsx}": [
+      "yarn lint:fix",
+      "bash -c 'yarn tsc:write'"
+    ]
   },
   "dependencies": {
-    "@expo/react-native-action-sheet": "4.0.1",
-    "dayjs": "1.8.26",
-    "prop-types": "15.7.2",
-    "react-native-communications": "2.2.1",
-    "react-native-iphone-x-helper": "1.3.1",
-    "react-native-lightbox-v2": "0.9.0",
-    "react-native-parsed-text": "0.0.22",
-    "react-native-typing-animation": "0.1.7",
-    "use-memo-one": "1.1.3",
-    "uuid": "3.4.0"
+    "@expo/react-native-action-sheet": "^4.1.0",
+    "@types/lodash.isequal": "^4.5.8",
+    "dayjs": "^1.11.13",
+    "lodash.isequal": "^4.5.0",
+    "prop-types": "^15.8.1",
+    "react-native-communications": "^2.2.1",
+    "react-native-get-random-values": "^1.11.0",
+    "react-native-iphone-x-helper": "^1.3.1",
+    "react-native-lightbox-v2": "^0.9.0",
+    "react-native-parsed-text": "^0.0.22",
+    "react-native-typing-animation": "^0.1.7",
+    "use-memo-one": "^1.1.3",
+    "uuid": "^10.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-transform-react-jsx": "^7.25.2",
+    "@babel/plugin-transform-unicode-property-regex": "^7.24.7",
+    "@babel/preset-env": "^7.25.4",
+    "@react-native/eslint-config": "^0.74.82",
+    "@stylistic/eslint-plugin": "^2.6.4",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.3",
+    "@types/react-native": "^0.72.8",
+    "@types/react-test-renderer": "^18.3.0",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.2.0",
+    "@typescript-eslint/parser": "^8.2.0",
+    "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.29.1",
+    "eslint-plugin-jest": "^28.8.0",
+    "eslint-plugin-json": "^4.0.1",
+    "eslint-plugin-n": "^17.10.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^7.1.0",
+    "eslint-plugin-react": "^7.35.0",
+    "flow-bin": "^0.244.0",
+    "husky": "^9.1.5",
+    "jest": "^29.7.0",
+    "json": "^11.0.0",
+    "lint-staged": "^15.2.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-native": "^0.74.5",
+    "react-native-reanimated": "^3.15.0",
+    "react-native-safe-area-context": "^4.10.9",
+    "react-test-renderer": "^18.3.1",
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn lint:fix && yarn prettier && yarn tsc"
-    }
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+  "engines": {
+    "node": ">=18"
   }
 }

package/src/Actions.tsx

@@ -0,0 +1,114 @@
+import PropTypes from 'prop-types'
+import React, { ReactNode, useCallback } from 'react'
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native'
+import Color from './Color'
+import { StylePropType } from './utils'
+import { useChatContext } from './GiftedChatContext'
+
+export interface ActionsProps {
+  options?: { [key: string]: () => void }
+  optionTintColor?: string
+  icon?: () => ReactNode
+  wrapperStyle?: StyleProp<ViewStyle>
+  iconTextStyle?: StyleProp<TextStyle>
+  containerStyle?: StyleProp<ViewStyle>
+  onPressActionButton?(): void
+}
+
+export function Actions ({
+  options,
+  optionTintColor = Color.optionTintColor,
+  icon,
+  wrapperStyle,
+  iconTextStyle,
+  onPressActionButton,
+  containerStyle,
+}: ActionsProps) {
+  const { actionSheet } = useChatContext()
+
+  const onActionsPress = useCallback(() => {
+    if (!options)
+      return
+
+    const optionKeys = Object.keys(options)
+    const cancelButtonIndex = optionKeys.indexOf('Cancel')
+
+    actionSheet().showActionSheetWithOptions(
+      {
+        options: optionKeys,
+        cancelButtonIndex,
+        tintColor: optionTintColor,
+      },
+      (buttonIndex: number | undefined) => {
+        if (buttonIndex === undefined)
+          return
+
+        const key = optionKeys[buttonIndex]
+        if (key)
+          options[key]()
+      }
+    )
+  }, [actionSheet, options, optionTintColor])
+
+  const renderIcon = useCallback(() => {
+    if (icon)
+      return icon()
+
+    return (
+      <View style={[styles.wrapper, wrapperStyle]}>
+        <Text style={[styles.iconText, iconTextStyle]}>{'+'}</Text>
+      </View>
+    )
+  }, [icon, iconTextStyle, wrapperStyle])
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, containerStyle]}
+      onPress={onPressActionButton || onActionsPress}
+    >
+      {renderIcon()}
+    </TouchableOpacity>
+  )
+}
+
+Actions.propTypes = {
+  options: PropTypes.object,
+  optionTintColor: PropTypes.string,
+  icon: PropTypes.func,
+  onPressActionButton: PropTypes.func,
+  wrapperStyle: StylePropType,
+  containerStyle: StylePropType,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 26,
+    height: 26,
+    marginLeft: 10,
+    marginBottom: 10,
+  },
+  wrapper: {
+    borderRadius: 13,
+    borderColor: Color.defaultColor,
+    borderWidth: 2,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconText: {
+    color: Color.defaultColor,
+    fontWeight: 'bold',
+    fontSize: 16,
+    lineHeight: 16,
+    backgroundColor: Color.backgroundTransparent,
+    textAlign: 'center',
+  },
+})

package/src/Avatar.tsx

@@ -0,0 +1,178 @@
+import PropTypes from 'prop-types'
+import React, { ReactNode } from 'react'
+import {
+  ImageStyle,
+  StyleSheet,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native'
+import GiftedAvatar from './GiftedAvatar'
+import { StylePropType, isSameUser, isSameDay } from './utils'
+import { IMessage, LeftRightStyle, User } from './Models'
+
+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'
+  renderAvatarOnTop?: boolean
+  showAvatarForEveryMessage?: 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 {
+    renderAvatarOnTop,
+    showAvatarForEveryMessage,
+    containerStyle,
+    position,
+    currentMessage,
+    renderAvatar,
+    previousMessage,
+    nextMessage,
+    imageStyle,
+    onPressAvatar,
+    onLongPressAvatar,
+  } = props
+
+  const messageToCompare = renderAvatarOnTop ? previousMessage : nextMessage
+
+  if (renderAvatar === null)
+    return null
+
+  if (
+    !showAvatarForEveryMessage &&
+    currentMessage &&
+    messageToCompare &&
+    isSameUser(currentMessage, messageToCompare) &&
+    isSameDay(currentMessage, messageToCompare)
+  )
+    return (
+      <View
+        style={[
+          styles[position].container,
+          containerStyle?.[position],
+        ]}
+      >
+        <GiftedAvatar
+          avatarStyle={[
+            styles[position].image,
+            imageStyle?.[position],
+          ]}
+        />
+      </View>
+    )
+
+  const renderAvatarComponent = () => {
+    if (renderAvatar)
+      return renderAvatar({
+        renderAvatarOnTop,
+        showAvatarForEveryMessage,
+        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
+  }
+
+  return (
+    <View
+      style={[
+        styles[position].container,
+        renderAvatarOnTop && styles[position].onTop,
+        containerStyle?.[position],
+      ]}
+    >
+      {renderAvatarComponent()}
+    </View>
+  )
+}
+
+Avatar.propTypes = {
+  renderAvatarOnTop: PropTypes.bool,
+  showAvatarForEveryMessage: PropTypes.bool,
+  position: PropTypes.oneOf(['left', 'right']),
+  currentMessage: PropTypes.object,
+  previousMessage: PropTypes.object,
+  nextMessage: PropTypes.object,
+  onPressAvatar: PropTypes.func,
+  onLongPressAvatar: PropTypes.func,
+  renderAvatar: PropTypes.func,
+  containerStyle: PropTypes.shape({
+    left: StylePropType,
+    right: StylePropType,
+  }),
+  imageStyle: PropTypes.shape({
+    left: StylePropType,
+    right: StylePropType,
+  }),
+}