react-native-gifted-chat 3.2.3 → 3.3.0

package/src/components/MessageReply.tsx

@@ -0,0 +1,156 @@
+import React, { useMemo } from 'react'
+import {
+  Image,
+  ImageStyle,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native'
+
+import { IMessage, ReplyMessage } from '../Models'
+import { isSameUser } from '../utils'
+
+export interface MessageReplyProps<TMessage extends IMessage = IMessage> {
+  /** The reply message to display */
+  replyMessage: ReplyMessage
+  /** The current message containing the reply */
+  currentMessage: TMessage
+  /** Position of the bubble (left or right) */
+  position: 'left' | 'right'
+  /** Container style for the reply */
+  containerStyle?: StyleProp<ViewStyle>
+  /** Container style for left position */
+  containerStyleLeft?: StyleProp<ViewStyle>
+  /** Container style for right position */
+  containerStyleRight?: StyleProp<ViewStyle>
+  /** Text style for the reply */
+  textStyle?: StyleProp<TextStyle>
+  /** Text style for left position */
+  textStyleLeft?: StyleProp<TextStyle>
+  /** Text style for right position */
+  textStyleRight?: StyleProp<TextStyle>
+  /** Image style for the reply */
+  imageStyle?: StyleProp<ImageStyle>
+  /** Callback when reply is pressed */
+  onPress?: (replyMessage: ReplyMessage) => void
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+    marginBottom: 4,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  containerLeft: {
+    backgroundColor: 'rgba(0, 0, 0, 0.06)',
+    borderLeftColor: '#0084ff',
+    borderLeftWidth: 3,
+  },
+  containerRight: {
+    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    borderLeftColor: 'rgba(255, 255, 255, 0.6)',
+    borderLeftWidth: 3,
+  },
+  image: {
+    borderRadius: 4,
+    height: 40,
+    marginTop: 4,
+    width: 40,
+  },
+  text: {
+    fontSize: 13,
+  },
+  textLeft: {
+    color: '#333',
+  },
+  textRight: {
+    color: 'rgba(255, 255, 255, 0.9)',
+  },
+  username: {
+    fontWeight: '600',
+    marginBottom: 2,
+  },
+  usernameLeft: {
+    color: '#0084ff',
+  },
+  usernameRight: {
+    color: 'rgba(255, 255, 255, 0.9)',
+  },
+})
+
+export function MessageReply<TMessage extends IMessage = IMessage> ({
+  replyMessage,
+  currentMessage,
+  position,
+  containerStyle,
+  containerStyleLeft,
+  containerStyleRight,
+  textStyle,
+  textStyleLeft,
+  textStyleRight,
+  imageStyle,
+  onPress,
+}: MessageReplyProps<TMessage>) {
+  const isCurrentUser = useMemo(
+    () => isSameUser(currentMessage, { user: replyMessage.user } as TMessage),
+    [currentMessage, replyMessage.user]
+  )
+
+  const displayName = useMemo(() => {
+    if (isCurrentUser)
+      return 'You'
+
+    return replyMessage.user?.name || 'Unknown'
+  }, [isCurrentUser, replyMessage.user?.name])
+
+  const handlePress = () => {
+    onPress?.(replyMessage)
+  }
+
+  const containerStyles = [
+    styles.container,
+    position === 'left' ? styles.containerLeft : styles.containerRight,
+    containerStyle,
+    position === 'left' ? containerStyleLeft : containerStyleRight,
+  ]
+
+  const usernameStyles = [
+    styles.username,
+    position === 'left' ? styles.usernameLeft : styles.usernameRight,
+    textStyle,
+    position === 'left' ? textStyleLeft : textStyleRight,
+  ]
+
+  const textStyles = [
+    styles.text,
+    position === 'left' ? styles.textLeft : styles.textRight,
+    textStyle,
+    position === 'left' ? textStyleLeft : textStyleRight,
+  ]
+
+  return (
+    <Pressable onPress={handlePress}>
+      <View style={containerStyles}>
+        <Text style={usernameStyles} numberOfLines={1}>
+          {displayName}
+        </Text>
+        {replyMessage.text && (
+          <Text style={textStyles} numberOfLines={2}>
+            {replyMessage.text}
+          </Text>
+        )}
+        {replyMessage.image && (
+          <Image
+            source={{ uri: replyMessage.image }}
+            style={[styles.image, imageStyle]}
+          />
+        )}
+      </View>
+    </Pressable>
+  )
+}

package/src/components/ReplyPreview.tsx

@@ -0,0 +1,230 @@
+import React, { useEffect } from 'react'
+import {
+  Image,
+  ImageStyle,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  Easing,
+  interpolate,
+  runOnJS,
+} from 'react-native-reanimated'
+
+import { useColorScheme } from '../hooks/useColorScheme'
+import { ReplyMessage } from '../Models'
+
+const ANIMATION_DURATION = 200
+const ANIMATION_EASING = Easing.bezier(0.25, 0.1, 0.25, 1)
+const DEFAULT_HEIGHT = 68
+
+export interface ReplyPreviewProps {
+  /** The reply message to preview */
+  replyMessage: ReplyMessage
+  /** Callback to clear the reply */
+  onClearReply?: () => void
+  /** Container style */
+  containerStyle?: StyleProp<ViewStyle>
+  /** Text style */
+  textStyle?: StyleProp<TextStyle>
+  /** Image style */
+  imageStyle?: StyleProp<ImageStyle>
+}
+
+const styles = StyleSheet.create({
+  borderIndicator: {
+    backgroundColor: '#0084ff',
+    borderTopLeftRadius: 4,
+    height: '100%',
+    width: 4,
+  },
+  clearButton: {
+    alignItems: 'center',
+    borderRadius: 12,
+    height: 24,
+    justifyContent: 'center',
+    width: 24,
+  },
+  clearButtonText: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  container: {
+    borderRadius: 8,
+    flexDirection: 'row',
+    marginBottom: 8,
+    marginHorizontal: 10,
+    overflow: 'hidden',
+  },
+  containerDark: {
+    backgroundColor: '#2c2c2e',
+  },
+  containerLight: {
+    backgroundColor: '#e9e9eb',
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+  },
+  image: {
+    borderRadius: 4,
+    height: 40,
+    marginRight: 8,
+    width: 40,
+  },
+  row: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  text: {
+    fontSize: 14,
+  },
+  textDark: {
+    color: '#fff',
+  },
+  textLight: {
+    color: '#333',
+  },
+  username: {
+    color: '#0084ff',
+    fontSize: 13,
+    fontWeight: '600',
+    marginBottom: 2,
+  },
+  wrapper: {
+    overflow: 'hidden',
+  },
+})
+
+export function ReplyPreview ({
+  replyMessage,
+  onClearReply,
+  containerStyle,
+  textStyle,
+  imageStyle,
+}: ReplyPreviewProps) {
+  const colorScheme = useColorScheme()
+  const isDark = colorScheme === 'dark'
+
+  const animationProgress = useSharedValue(0)
+  const contentHeight = useSharedValue(DEFAULT_HEIGHT)
+
+  // Animate in on mount
+  useEffect(() => {
+    animationProgress.value = withTiming(1, {
+      duration: ANIMATION_DURATION,
+      easing: ANIMATION_EASING,
+    })
+  }, [animationProgress])
+
+  const handleClear = () => {
+    'worklet'
+    animationProgress.value = withTiming(0, {
+      duration: ANIMATION_DURATION,
+      easing: ANIMATION_EASING,
+    }, finished => {
+      if (finished && onClearReply)
+        runOnJS(onClearReply)()
+    })
+  }
+
+  const wrapperAnimatedStyle = useAnimatedStyle(() => {
+    const height = interpolate(
+      animationProgress.value,
+      [0, 1],
+      [0, contentHeight.value]
+    )
+
+    const opacity = interpolate(
+      animationProgress.value,
+      [0, 0.5, 1],
+      [0, 0.5, 1]
+    )
+
+    const translateY = interpolate(
+      animationProgress.value,
+      [0, 1],
+      [10, 0]
+    )
+
+    return {
+      height,
+      opacity,
+      transform: [{ translateY }],
+    }
+  })
+
+  const displayName = replyMessage.user?.name || 'Unknown'
+
+  return (
+    <Animated.View style={[styles.wrapper, wrapperAnimatedStyle]}>
+      <View
+        style={[
+          styles.container,
+          isDark ? styles.containerDark : styles.containerLight,
+          containerStyle,
+        ]}
+        onLayout={e => {
+          const newHeight = e.nativeEvent.layout.height + 8
+          // Animate height change smoothly when content changes
+          contentHeight.value = withTiming(newHeight, {
+            duration: ANIMATION_DURATION,
+            easing: ANIMATION_EASING,
+          })
+        }}
+      >
+        <View style={styles.borderIndicator} />
+        <View style={styles.content}>
+          <View style={styles.row}>
+            {replyMessage.image && (
+              <Image
+                source={{ uri: replyMessage.image }}
+                style={[styles.image, imageStyle]}
+              />
+            )}
+            <View style={{ flex: 1 }}>
+              <Text style={styles.username} numberOfLines={1}>
+                Replying to {displayName}
+              </Text>
+              {replyMessage.text && (
+                <Text
+                  style={[
+                    styles.text,
+                    isDark ? styles.textDark : styles.textLight,
+                    textStyle,
+                  ]}
+                  numberOfLines={2}
+                >
+                  {replyMessage.text}
+                </Text>
+              )}
+            </View>
+          </View>
+        </View>
+        <Pressable
+          style={styles.clearButton}
+          onPress={handleClear}
+          hitSlop={8}
+        >
+          <Text
+            style={[
+              styles.clearButtonText,
+              isDark ? styles.textDark : styles.textLight,
+            ]}
+          >
+            ×
+          </Text>
+        </Pressable>
+      </View>
+    </Animated.View>
+  )
+}

package/src/index.ts

@@ -1,9 +1,12 @@
+import * as utils from './utils'
+
 export * from './GiftedChat'
 export * from './Constant'
-export * as utils from './utils'
+export { utils }
 export * from './GiftedChatContext'
 export * from './types'
 export * from './linkParser'
+export * from './Reply'
 export { Actions } from './Actions'
 export { Avatar } from './Avatar'
 export { Bubble } from './Bubble'
@@ -21,4 +24,6 @@ export { Time } from './Time'
 export { GiftedAvatar } from './GiftedAvatar'
 export { MessageAudio } from './MessageAudio'
 export { MessageVideo } from './MessageVideo'
+export { MessageReply } from './components/MessageReply'
+export { ReplyPreview } from './components/ReplyPreview'
 export { useColorScheme } from './hooks/useColorScheme'

package/src/types.ts

@@ -1,24 +1,25 @@
 export * from './Models'
 
-export { ActionsProps } from './Actions'
-export { AvatarProps } from './Avatar'
-export {
+export type { ActionsProps } from './Actions'
+export type { AvatarProps } from './Avatar'
+export type {
   BubbleProps,
   RenderMessageImageProps,
   RenderMessageVideoProps,
   RenderMessageAudioProps,
   RenderMessageTextProps
 } from './Bubble'
-export { ComposerProps } from './Composer'
-export { DayProps } from './Day'
-export { GiftedAvatarProps } from './GiftedAvatar'
-export { InputToolbarProps } from './InputToolbar'
-export { LoadEarlierMessagesProps } from './LoadEarlierMessages'
-export { MessageProps } from './Message'
-export { MessagesContainerProps } from './MessagesContainer'
-export { MessageImageProps } from './MessageImage'
-export { MessageTextProps } from './MessageText'
-export { QuickRepliesProps } from './QuickReplies'
-export { SendProps } from './Send'
-export { SystemMessageProps } from './SystemMessage'
-export { TimeProps } from './Time'
+export type { ComposerProps } from './Composer'
+export type { DayProps } from './Day'
+export type { GiftedAvatarProps } from './GiftedAvatar'
+export type { InputToolbarProps, ReplyPreviewProps } from './InputToolbar'
+export type { LoadEarlierMessagesProps } from './LoadEarlierMessages'
+export type { MessageProps } from './Message'
+export type { MessagesContainerProps } from './MessagesContainer'
+export type { MessageImageProps } from './MessageImage'
+export type { MessageTextProps } from './MessageText'
+export type { MessageReplyProps } from './components/MessageReply'
+export type { QuickRepliesProps } from './QuickReplies'
+export type { SendProps } from './Send'
+export type { SystemMessageProps } from './SystemMessage'
+export type { TimeProps } from './Time'

package/src/utils.ts

@@ -14,9 +14,17 @@ export function renderComponentOrElement<TProps extends Record<string, any>>(
     return React.cloneElement(component, props as any)
 
   if (typeof component === 'function') {
-    // If it's a component or render function
-    const Component = component as React.ComponentType<TProps>
-    return React.createElement(Component, props as any)
+    // Check if it's a class component (has prototype.isReactComponent)
+    // Class components must use React.createElement
+    const isClassComponent = component.prototype && component.prototype.isReactComponent
+
+    if (isClassComponent)
+      return React.createElement(component as React.ComponentType<TProps>, props as any)
+
+    // For function components and render functions, call directly
+    // Using createElement with inline arrow functions causes unmount/remount
+    // when function reference changes, this matches v2.x behavior
+    return (component as (props: TProps) => React.ReactNode)(props)
   }
 
   // If it's neither, return it as-is