react-native-gifted-chat 3.3.0 → 3.3.3

package/src/__tests__/utils.test.ts

@@ -1,31 +0,0 @@
-import { isSameDay, isSameUser } from '../utils'
-
-it('should test if same day', () => {
-  const now = new Date()
-  expect(
-    isSameDay(
-      {
-        _id: 1,
-        text: 'test',
-        createdAt: now,
-        user: { _id: 1 },
-      },
-      {
-        _id: 2,
-        text: 'test2',
-        createdAt: now,
-        user: { _id: 2 },
-      }
-    )
-  ).toBe(true)
-})
-
-it('should test if same user', () => {
-  const message = {
-    _id: 1,
-    text: 'test',
-    createdAt: new Date(),
-    user: { _id: 1 },
-  }
-  expect(isSameUser(message, message)).toBe(true)
-})

package/src/components/MessageReply.tsx

@@ -1,156 +0,0 @@
-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

@@ -1,230 +0,0 @@
-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/components/TouchableOpacity.tsx

@@ -1,67 +0,0 @@
-import React, { useCallback } from 'react'
-import { BaseButton } from 'react-native-gesture-handler'
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated'
-
-export type TouchableOpacityProps = Omit<React.ComponentProps<typeof BaseButton>, 'onPress'> & {
-  activeOpacity?: number
-  onPress?: () => void
-} & React.ComponentProps<typeof Animated.View>
-
-export const TouchableOpacity: React.FC<TouchableOpacityProps> = ({
-  children,
-  style,
-  activeOpacity = 0.2,
-  onPress,
-  ...rest
-}) => {
-  const opacity = useSharedValue(1)
-  const isAnimationInFinished = useSharedValue(false)
-
-  const handlePressIn = useCallback(() => {
-    opacity.value = withTiming(activeOpacity, { duration: 150 }, () => {
-      isAnimationInFinished.value = true
-    })
-  }, [activeOpacity, opacity, isAnimationInFinished])
-
-  const handlePressOut = useCallback(() => {
-    setTimeout(() => {
-      'worklet'
-
-      opacity.value = withTiming(1, { duration: 150 })
-      isAnimationInFinished.value = false
-    }, isAnimationInFinished.value ? 0 : 150)
-  }, [opacity, isAnimationInFinished])
-
-  const handleActiveStateChange = useCallback((isActive: boolean) => {
-    if (isActive)
-      handlePressIn()
-    else
-      handlePressOut()
-  }, [handlePressIn, handlePressOut])
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-  }))
-
-  const handlePress = useCallback(() => {
-    onPress?.()
-  }, [onPress])
-
-  return (
-    <BaseButton
-      {...rest}
-      onPress={handlePress}
-      onActiveStateChange={handleActiveStateChange}
-    >
-      <Animated.View
-        style={[style, animatedStyle]}
-      >
-        {children}
-      </Animated.View>
-    </BaseButton>
-  )
-}

package/src/hooks/useColorScheme.ts

@@ -1,18 +0,0 @@
-import { useColorScheme as useRNColorScheme } from 'react-native'
-import { useChatContext } from '../GiftedChatContext'
-
-/**
- * Custom hook that returns the color scheme from GiftedChat context if provided,
- * otherwise falls back to the system color scheme from React Native.
- * 
- * @returns The current color scheme ('light', 'dark', null, or undefined)
- */
-export function useColorScheme() {
-  const { getColorScheme } = useChatContext()
-  const contextColorScheme = getColorScheme()
-  const systemColorScheme = useRNColorScheme()
-  
-  return contextColorScheme !== undefined && contextColorScheme !== null
-    ? contextColorScheme
-    : systemColorScheme
-}

package/src/hooks/useUpdateLayoutEffect.ts

@@ -1,21 +0,0 @@
-import { DependencyList, useLayoutEffect, useRef } from 'react'
-
-/**
- * A custom useEffect hook that only triggers on updates, not on initial mount
- * Idea stolen from: https://stackoverflow.com/a/55075818/1526448
- * @param {()=>void} effect the function to call
- * @param {DependencyList} dependencies the state(s) that fires the update
- */
-export function useUpdateLayoutEffect (
-  effect: () => void,
-  dependencies: DependencyList = []
-) {
-  const isInitialMount = useRef(true)
-
-  useLayoutEffect(() => {
-    if (isInitialMount.current)
-      isInitialMount.current = false
-    else
-      effect()
-  }, dependencies)
-}

package/src/index.ts

@@ -1,29 +0,0 @@
-import * as utils from './utils'
-
-export * from './GiftedChat'
-export * from './Constant'
-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'
-export { SystemMessage } from './SystemMessage'
-export { MessageImage } from './MessageImage'
-export { MessageText } from './MessageText'
-export { Composer } from './Composer'
-export { Day } from './Day'
-export { InputToolbar } from './InputToolbar'
-export { LoadEarlierMessages } from './LoadEarlierMessages'
-export { Message } from './Message'
-export { MessagesContainer } from './MessagesContainer'
-export { Send } from './Send'
-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'