react-native-gifted-chat 2.8.2-alpha.6 → 3.0.0-alpha.0

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

@@ -6,7 +6,7 @@ exports[`should render <Actions /> and compare with snapshot 1`] = `
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": undefined,
+      "disabled": false,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -20,97 +20,13 @@ exports[`should render <Actions /> and compare with snapshot 1`] = `
     }
   }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  onBlur={[Function]}
   onClick={[Function]}
-  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
->
-  <View
-    collapsable={false}
-    jestAnimatedProps={
-      {
-        "value": {},
-      }
-    }
-    jestAnimatedStyle={
-      {
-        "value": {
-          "opacity": 1,
-        },
-      }
-    }
-    jestInlineStyle={
-      [
-        [
-          {
-            "height": 26,
-            "marginBottom": 10,
-            "marginLeft": 10,
-            "width": 26,
-          },
-          undefined,
-        ],
-      ]
-    }
-    style={
-      [
-        {
-          "height": 26,
-          "marginBottom": 10,
-          "marginLeft": 10,
-          "width": 26,
-        },
-        undefined,
-        {
-          "opacity": 1,
-        },
-      ]
-    }
-  >
-    <View
-      style={
-        [
-          {
-            "flex": 1,
-          },
-          {
-            "alignItems": "center",
-            "justifyContent": "center",
-          },
-          {
-            "borderColor": "#b2b2b2",
-            "borderRadius": 13,
-            "borderWidth": 2,
-          },
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "color": "#b2b2b2",
-              "fontSize": 16,
-              "fontWeight": "bold",
-              "lineHeight": 16,
-              "textAlign": "center",
-            },
-            undefined,
-          ]
-        }
-      >
-        +
-      </Text>
-    </View>
-  </View>
-</View>
+/>
 `;

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

@@ -133,7 +133,7 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
                 ]
               }
             >
-              7:20 PM
+              12:00 AM
             </Text>
           </View>
         </View>

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

@@ -1,5 +1,99 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Day should not render <Day /> and compare with snapshot 1`] = `null`;
+exports[`Day should not render <Day /> and compare with snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "justifyContent": "center",
+      },
+      {
+        "marginBottom": 10,
+        "marginTop": 5,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgba(0, 0, 0, 0.75)",
+          "borderRadius": 15,
+          "paddingBottom": 6,
+          "paddingLeft": 10,
+          "paddingRight": 10,
+          "paddingTop": 6,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      style={
+        [
+          {
+            "color": "#fff",
+            "fontSize": 12,
+            "fontWeight": "600",
+          },
+          undefined,
+        ]
+      }
+    >
+      17 April 2022
+    </Text>
+  </View>
+</View>
+`;
 
-exports[`Day should render <Day /> and compare with snapshot 1`] = `null`;
+exports[`Day should render <Day /> and compare with snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "justifyContent": "center",
+      },
+      {
+        "marginBottom": 10,
+        "marginTop": 5,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgba(0, 0, 0, 0.75)",
+          "borderRadius": 15,
+          "paddingBottom": 6,
+          "paddingLeft": 10,
+          "paddingRight": 10,
+          "paddingTop": 6,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      style={
+        [
+          {
+            "color": "#fff",
+            "fontSize": 12,
+            "fontWeight": "600",
+          },
+          undefined,
+        ]
+      }
+    >
+      17 April 2022
+    </Text>
+  </View>
+</View>
+`;

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

@@ -9,7 +9,7 @@ exports[`should render <InputToolbar /> and compare with snapshot 1`] = `
         "borderTopColor": "#b2b2b2",
         "borderTopWidth": 0.5,
       },
-      undefined,
+      false,
       undefined,
     ]
   }

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

@@ -2,11 +2,12 @@
 
 exports[`should render <LoadEarlierMessages /> and compare with snapshot 1`] = `
 <View
+  accessibilityRole="button"
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": undefined,
+      "disabled": false,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -20,100 +21,13 @@ exports[`should render <LoadEarlierMessages /> and compare with snapshot 1`] = `
     }
   }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  onBlur={[Function]}
   onClick={[Function]}
-  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
->
-  <View
-    accessibilityRole="button"
-    collapsable={false}
-    disabled={false}
-    jestAnimatedProps={
-      {
-        "value": {},
-      }
-    }
-    jestAnimatedStyle={
-      {
-        "value": {
-          "opacity": 1,
-        },
-      }
-    }
-    jestInlineStyle={
-      [
-        [
-          {
-            "alignItems": "center",
-            "marginVertical": 10,
-          },
-          undefined,
-        ],
-      ]
-    }
-    style={
-      [
-        {
-          "alignItems": "center",
-          "marginVertical": 10,
-        },
-        undefined,
-        {
-          "opacity": 1,
-        },
-      ]
-    }
-  >
-    <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "center",
-          },
-          {
-            "backgroundColor": "#b2b2b2",
-            "borderRadius": 15,
-            "paddingHorizontal": 10,
-            "paddingVertical": 5,
-          },
-          undefined,
-        ]
-      }
-    >
-      <View
-        style={
-          {
-            "paddingBottom": 4,
-            "paddingTop": 3,
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "color": "#fff",
-                "fontSize": 12,
-                "lineHeight": 13,
-              },
-              undefined,
-            ]
-          }
-        >
-          Load earlier messages
-        </Text>
-      </View>
-    </View>
-  </View>
-</View>
+/>
 `;

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

@@ -305,7 +305,7 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
                 }
               >
                 <Text
-                  showUserAvatar={true}
+                  isUserAvatarVisible={true}
                   style={
                     [
                       {
@@ -362,7 +362,7 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
                     ]
                   }
                 >
-                  7:20 PM
+                  12:00 AM
                 </Text>
               </View>
             </View>
@@ -396,6 +396,45 @@ exports[`Message component should render null if user has no Avatar 1`] = `
       ]
     }
   >
+    <View
+      style={
+        [
+          {
+            "marginRight": 8,
+          },
+          undefined,
+          undefined,
+        ]
+      }
+    >
+      <View
+        accessibilityRole="image"
+        style={
+          [
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
+            },
+            {
+              "borderRadius": 20,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "backgroundColor": "transparent",
+            },
+            [
+              {
+                "borderRadius": 18,
+                "height": 36,
+                "width": 36,
+              },
+              undefined,
+            ],
+          ]
+        }
+      />
+    </View>
     <View
       style={
         [
@@ -472,7 +511,7 @@ exports[`Message component should render null if user has no Avatar 1`] = `
                 }
               >
                 <Text
-                  showUserAvatar={true}
+                  isUserAvatarVisible={true}
                   style={
                     [
                       {
@@ -529,7 +568,7 @@ exports[`Message component should render null if user has no Avatar 1`] = `
                     ]
                   }
                 >
-                  7:20 PM
+                  12:00 AM
                 </Text>
               </View>
             </View>

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

@@ -26,7 +26,7 @@ exports[`should render <MessageText /> and compare with snapshot 1`] = `
     }
   >
     <Text>
-      test message
+      test
     </Text>
   </Text>
 </View>

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

@@ -2,11 +2,13 @@
 
 exports[`Send should always render <Send /> and compare with snapshot 1`] = `
 <View
+  accessibilityLabel="send"
+  accessibilityRole="button"
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": undefined,
+      "disabled": false,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -20,95 +22,29 @@ exports[`Send should always render <Send /> and compare with snapshot 1`] = `
     }
   }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  onBlur={[Function]}
   onClick={[Function]}
-  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
->
-  <View
-    accessibilityLabel="send"
-    accessibilityRole="button"
-    accessible={true}
-    collapsable={false}
-    disabled={false}
-    jestAnimatedProps={
-      {
-        "value": {},
-      }
-    }
-    jestAnimatedStyle={
-      {
-        "value": {
-          "opacity": 1,
-        },
-      }
-    }
-    jestInlineStyle={
-      [
-        [
-          {
-            "height": 44,
-            "justifyContent": "flex-end",
-          },
-          undefined,
-        ],
-      ]
-    }
-    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>
+  testID="GC_SEND_TOUCHABLE"
+/>
 `;
 
 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": undefined,
+      "disabled": false,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -122,82 +58,14 @@ exports[`Send should render <Send /> where there is input and compare with snaps
     }
   }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  onBlur={[Function]}
   onClick={[Function]}
-  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
->
-  <View
-    accessibilityLabel="send"
-    accessibilityRole="button"
-    accessible={true}
-    collapsable={false}
-    disabled={false}
-    jestAnimatedProps={
-      {
-        "value": {},
-      }
-    }
-    jestAnimatedStyle={
-      {
-        "value": {
-          "opacity": 1,
-        },
-      }
-    }
-    jestInlineStyle={
-      [
-        [
-          {
-            "height": 44,
-            "justifyContent": "flex-end",
-          },
-          undefined,
-        ],
-      ]
-    }
-    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>
+  testID="GC_SEND_TOUCHABLE"
+/>
 `;

package/src/__tests__/data.ts

@@ -1,8 +1,8 @@
-import { IMessage } from '../types'
+import { IMessage } from '../Models'
 
 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

@@ -1,13 +1,14 @@
 import React, { useCallback } from 'react'
-import { Pressable } from 'react-native-gesture-handler'
+import { BaseButton } from 'react-native-gesture-handler'
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated'
 
-export type TouchableOpacityProps = React.ComponentProps<typeof Pressable> & {
+export type TouchableOpacityProps = Omit<React.ComponentProps<typeof BaseButton>, 'onPress'> & {
   activeOpacity?: number
+  onPress?: () => void
 } & React.ComponentProps<typeof Animated.View>
 
 export const TouchableOpacity: React.FC<TouchableOpacityProps> = ({
@@ -35,22 +36,32 @@ export const TouchableOpacity: React.FC<TouchableOpacityProps> = ({
     }, 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 (
-    <Pressable
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      onPress={onPress}
+    <BaseButton
+      {...rest}
+      onPress={handlePress}
+      onActiveStateChange={handleActiveStateChange}
     >
       <Animated.View
-        {...rest}
         style={[style, animatedStyle]}
       >
         {children}
       </Animated.View>
-    </Pressable>
+    </BaseButton>
   )
 }