react-native-gifted-chat 2.8.2-alpha.4 → 2.8.2-alpha.6

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

@@ -2,13 +2,11 @@
 
 exports[`Send should always render <Send /> and compare with snapshot 1`] = `
 <View
-  accessibilityLabel="send"
-  accessibilityRole="button"
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": false,
+      "disabled": undefined,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -24,29 +22,6 @@ exports[`Send should always render <Send /> and compare with snapshot 1`] = `
   accessible={true}
   collapsable={false}
   focusable={true}
-  jestAnimatedProps={
-    {
-      "value": {},
-    }
-  }
-  jestAnimatedStyle={
-    {
-      "value": {
-        "opacity": 1,
-      },
-    }
-  }
-  jestInlineStyle={
-    [
-      [
-        {
-          "height": 44,
-          "justifyContent": "flex-end",
-        },
-        undefined,
-      ],
-    ]
-  }
   onBlur={[Function]}
   onClick={[Function]}
   onFocus={[Function]}
@@ -56,40 +31,71 @@ exports[`Send should always render <Send /> and compare with snapshot 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    [
+>
+  <View
+    accessibilityLabel="send"
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    disabled={false}
+    jestAnimatedProps={
       {
-        "height": 44,
-        "justifyContent": "flex-end",
-      },
-      undefined,
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
       {
-        "opacity": 1,
-      },
-    ]
-  }
-  testID="GC_SEND_TOUCHABLE"
->
-  <View>
-    <Text
-      style={
+        "value": {
+          "opacity": 1,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
         [
           {
-            "backgroundColor": "transparent",
-            "color": "#0084ff",
-            "fontSize": 17,
-            "fontWeight": "600",
-            "marginBottom": 12,
-            "marginLeft": 10,
-            "marginRight": 10,
+            "height": 44,
+            "justifyContent": "flex-end",
           },
           undefined,
-          undefined,
-        ]
-      }
-    >
-      Send
-    </Text>
+        ],
+      ]
+    }
+    style={
+      [
+        {
+          "height": 44,
+          "justifyContent": "flex-end",
+        },
+        undefined,
+        {
+          "opacity": 1,
+        },
+      ]
+    }
+    testID="GC_SEND_TOUCHABLE"
+  >
+    <View>
+      <Text
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "color": "#0084ff",
+              "fontSize": 17,
+              "fontWeight": "600",
+              "marginBottom": 12,
+              "marginLeft": 10,
+              "marginRight": 10,
+            },
+            undefined,
+            undefined,
+          ]
+        }
+      >
+        Send
+      </Text>
+    </View>
   </View>
 </View>
 `;
@@ -98,13 +104,11 @@ exports[`Send should not render <Send /> and compare with snapshot 1`] = `null`;
 
 exports[`Send should render <Send /> where there is input and compare with snapshot 1`] = `
 <View
-  accessibilityLabel="send"
-  accessibilityRole="button"
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": false,
+      "disabled": undefined,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -120,29 +124,6 @@ exports[`Send should render <Send /> where there is input and compare with snaps
   accessible={true}
   collapsable={false}
   focusable={true}
-  jestAnimatedProps={
-    {
-      "value": {},
-    }
-  }
-  jestAnimatedStyle={
-    {
-      "value": {
-        "opacity": 1,
-      },
-    }
-  }
-  jestInlineStyle={
-    [
-      [
-        {
-          "height": 44,
-          "justifyContent": "flex-end",
-        },
-        undefined,
-      ],
-    ]
-  }
   onBlur={[Function]}
   onClick={[Function]}
   onFocus={[Function]}
@@ -152,40 +133,71 @@ exports[`Send should render <Send /> where there is input and compare with snaps
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    [
+>
+  <View
+    accessibilityLabel="send"
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    disabled={false}
+    jestAnimatedProps={
       {
-        "height": 44,
-        "justifyContent": "flex-end",
-      },
-      undefined,
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
       {
-        "opacity": 1,
-      },
-    ]
-  }
-  testID="GC_SEND_TOUCHABLE"
->
-  <View>
-    <Text
-      style={
+        "value": {
+          "opacity": 1,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
         [
           {
-            "backgroundColor": "transparent",
-            "color": "#0084ff",
-            "fontSize": 17,
-            "fontWeight": "600",
-            "marginBottom": 12,
-            "marginLeft": 10,
-            "marginRight": 10,
+            "height": 44,
+            "justifyContent": "flex-end",
           },
           undefined,
-          undefined,
-        ]
-      }
-    >
-      Send
-    </Text>
+        ],
+      ]
+    }
+    style={
+      [
+        {
+          "height": 44,
+          "justifyContent": "flex-end",
+        },
+        undefined,
+        {
+          "opacity": 1,
+        },
+      ]
+    }
+    testID="GC_SEND_TOUCHABLE"
+  >
+    <View>
+      <Text
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "color": "#0084ff",
+              "fontSize": 17,
+              "fontWeight": "600",
+              "marginBottom": 12,
+              "marginLeft": 10,
+              "marginRight": 10,
+            },
+            undefined,
+            undefined,
+          ]
+        }
+      >
+        Send
+      </Text>
+    </View>
   </View>
 </View>
 `;

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/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/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>
-  )
-}