react-native-gifted-chat 2.8.2-alpha.4 → 2.9.0-alpha.0

package/src/__tests__/__snapshots__/SystemMessage.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`SystemMessage should render <SystemMessage /> and compare with snapshot
       },
       {
         "marginBottom": 10,
+        "marginHorizontal": 20,
         "marginTop": 5,
       },
       undefined,
@@ -22,21 +23,50 @@ exports[`SystemMessage should render <SystemMessage /> and compare with snapshot
   }
 >
   <View>
-    <Text
+    <View
       style={
         [
           {
-            "backgroundColor": "transparent",
-            "color": "#b2b2b2",
-            "fontSize": 12,
-            "fontWeight": "300",
+            "marginBottom": 5,
+            "marginLeft": 10,
+            "marginRight": 10,
+            "marginTop": 5,
+          },
+          {
+            "backgroundColor": "rgba(0,0,0,0.05)",
+            "borderColor": "rgba(0,0,0,0.1)",
+            "borderRadius": 20,
+            "borderWidth": 1,
+            "paddingHorizontal": 10,
+            "paddingVertical": 10,
           },
-          undefined,
         ]
       }
     >
-      test
-    </Text>
+      <Text
+        style={
+          [
+            {
+              "color": "black",
+            },
+            undefined,
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontSize": 12,
+                "fontStyle": "italic",
+                "fontWeight": "300",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        <Text>
+          test
+        </Text>
+      </Text>
+    </View>
   </View>
 </View>
 `;

package/src/__tests__/data.ts

@@ -4,5 +4,5 @@ export const DEFAULT_TEST_MESSAGE: IMessage = {
   _id: 'test',
   text: 'test',
   user: { _id: 'test' },
-  createdAt: new Date(2022, 3, 17),
+  createdAt: new Date(2022, 3, 17).getTime(),
 }

package/src/components/TouchableOpacity.tsx

@@ -6,40 +6,51 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated'
 
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
-
-export interface TouchableOpacityProps extends React.ComponentProps<typeof AnimatedPressable> {
+export type TouchableOpacityProps = React.ComponentProps<typeof Pressable> & {
   activeOpacity?: number
-}
+} & React.ComponentProps<typeof Animated.View>
 
-export function TouchableOpacity({
+export const TouchableOpacity: React.FC<TouchableOpacityProps> = ({
   children,
   style,
   activeOpacity = 0.2,
+  onPress,
   ...rest
-}: TouchableOpacityProps) {
+}) => {
   const opacity = useSharedValue(1)
+  const isAnimationInFinished = useSharedValue(false)
 
   const handlePressIn = useCallback(() => {
-    opacity.value = withTiming(activeOpacity, { duration: 150 })
-  }, [activeOpacity, opacity])
+    opacity.value = withTiming(activeOpacity, { duration: 150 }, () => {
+      isAnimationInFinished.value = true
+    })
+  }, [activeOpacity, opacity, isAnimationInFinished])
 
   const handlePressOut = useCallback(() => {
-    opacity.value = withTiming(1, { duration: 150 })
-  }, [opacity])
+    setTimeout(() => {
+      'worklet'
+
+      opacity.value = withTiming(1, { duration: 150 })
+      isAnimationInFinished.value = false
+    }, isAnimationInFinished.value ? 0 : 150)
+  }, [opacity, isAnimationInFinished])
 
   const animatedStyle = useAnimatedStyle(() => ({
     opacity: opacity.value,
   }))
 
   return (
-    <AnimatedPressable
-      {...rest}
+    <Pressable
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
-      style={[style, animatedStyle]}
+      onPress={onPress}
     >
-      {children}
-    </AnimatedPressable>
+      <Animated.View
+        {...rest}
+        style={[style, animatedStyle]}
+      >
+        {children}
+      </Animated.View>
+    </Pressable>
   )
 }

package/src/index.ts

@@ -1,4 +1,22 @@
 export * from './GiftedChat'
 export * from './Constant'
-export * from './utils'
+export * as utils from './utils'
 export * from './GiftedChatContext'
+export * from './types'
+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 { MessageContainer } from './MessageContainer'
+export { Send } from './Send'
+export { Time } from './Time'
+export { GiftedAvatar } from './GiftedAvatar'
+export { MessageAudio } from './MessageAudio'
+export { MessageVideo } from './MessageVideo'

package/src/utils.ts

@@ -1,7 +1,28 @@
-import { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import dayjs from 'dayjs'
 import { IMessage } from './types'
 
+export function renderComponentOrElement<TProps extends Record<string, any>>(
+  component: React.ComponentType<TProps> | React.ReactElement | ((props: TProps) => React.ReactNode) | null | undefined,
+  props: TProps
+): React.ReactNode {
+  if (!component)
+    return null
+
+  if (React.isValidElement(component))
+    // If it's already a React element, clone it with props
+    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)
+  }
+
+  // If it's neither, return it as-is
+  return component
+}
+
 export function isSameDay (
   currentMessage: IMessage,
   diffMessage: IMessage | null | undefined

package/src/LoadEarlier.tsx

@@ -1,95 +0,0 @@
-import React, { useMemo } from 'react'
-import {
-  ActivityIndicator,
-  Platform,
-  StyleSheet,
-  Text,
-  View,
-  StyleProp,
-  ViewStyle,
-  TextStyle,
-} from 'react-native'
-import Color from './Color'
-import { TouchableOpacity } from './components/TouchableOpacity'
-import stylesCommon from './styles'
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    marginTop: 5,
-    marginBottom: 10,
-  },
-  wrapper: {
-    backgroundColor: Color.defaultColor,
-    borderRadius: 15,
-    height: 30,
-    paddingLeft: 10,
-    paddingRight: 10,
-  },
-  text: {
-    backgroundColor: Color.backgroundTransparent,
-    color: Color.white,
-    fontSize: 12,
-  },
-  activityIndicator: {
-    marginTop: Platform.select({
-      ios: -14,
-      android: -16,
-      default: -15,
-    }),
-  },
-})
-
-export interface LoadEarlierMessagesProps {
-  isLoadingEarlier?: boolean
-  label?: string
-  containerStyle?: StyleProp<ViewStyle>
-  wrapperStyle?: StyleProp<ViewStyle>
-  textStyle?: StyleProp<TextStyle>
-  activityIndicatorStyle?: StyleProp<ViewStyle>
-  activityIndicatorColor?: string
-  activityIndicatorSize?: number | 'small' | 'large'
-  onPress: () => void
-}
-
-export const LoadEarlierMessages: React.FC<LoadEarlierMessagesProps> = ({
-  isLoadingEarlier = false,
-  onPress,
-  label = 'Load earlier messages',
-  containerStyle,
-  wrapperStyle,
-  textStyle,
-  activityIndicatorColor = 'white',
-  activityIndicatorSize = 'small',
-  activityIndicatorStyle,
-}) => {
-  const loadingContent = useMemo(() => (
-    <View>
-      <Text style={[styles.text, textStyle, { opacity: 0 }]}>
-        {label}
-      </Text>
-      <ActivityIndicator
-        color={activityIndicatorColor!}
-        size={activityIndicatorSize!}
-        style={[styles.activityIndicator, activityIndicatorStyle]}
-      />
-    </View>
-  ), [label, textStyle, activityIndicatorColor, activityIndicatorSize, activityIndicatorStyle])
-
-  const labelContent = useMemo(() => (
-    <Text style={[styles.text, textStyle]}>{label}</Text>
-  ), [label, textStyle])
-
-  return (
-    <TouchableOpacity
-      style={[styles.container, containerStyle]}
-      onPress={onPress}
-      disabled={isLoadingEarlier}
-      accessibilityRole='button'
-    >
-      <View style={[stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
-        {isLoadingEarlier ? loadingContent : labelContent}
-      </View>
-    </TouchableOpacity>
-  )
-}