react-native-gifted-chat 3.0.0 → 3.1.0

package/src/MessageVideo.tsx

@@ -1,10 +1,11 @@
 import React, { useMemo } from 'react'
-import { View, Text, StyleSheet } from 'react-native'
+import { View, StyleSheet } from 'react-native'
+import { Text } from 'react-native-gesture-handler'
 import { Color } from './Color'
 
 const styles = StyleSheet.create({
   container: {
-    padding: 20,
+    padding: 10,
   },
   text: {
     color: Color.alizarin,

package/src/MessagesContainer/index.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   View,
-  Text,
   LayoutChangeEvent,
   ListRenderItemInfo,
   CellRendererProps,
 } from 'react-native'
-import { FlatList, Pressable } from 'react-native-gesture-handler'
+import { FlatList, Pressable, Text } from 'react-native-gesture-handler'
 import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
 import { LoadEarlierMessages } from '../LoadEarlierMessages'
 import { warning } from '../logging'

package/src/QuickReplies.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useMemo, useCallback } from 'react'
 import {
-  Text,
   StyleSheet,
   View,
   StyleProp,
   ViewStyle,
   TextStyle,
 } from 'react-native'
+import { Text } from 'react-native-gesture-handler'
 import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
 import { warning } from './logging'

package/src/Send.tsx

@@ -1,15 +1,15 @@
 import React, { useMemo, useCallback, useEffect } from 'react'
 import {
   StyleSheet,
-  Text,
   StyleProp,
   ViewStyle,
   TextStyle,
   useColorScheme,
 } from 'react-native'
+import { Text } from 'react-native-gesture-handler'
 import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated'
-import { Color } from './Color'
 
+import { Color } from './Color'
 import { TouchableOpacity, TouchableOpacityProps } from './components/TouchableOpacity'
 import { TEST_ID } from './Constant'
 import { IMessage } from './Models'

package/src/SystemMessage.tsx

@@ -14,48 +14,53 @@ import stylesCommon from './styles'
 export interface SystemMessageProps<TMessage extends IMessage> {
   currentMessage: TMessage
   containerStyle?: StyleProp<ViewStyle>
-  wrapperStyle?: StyleProp<ViewStyle>
+  messageContainerStyle?: StyleProp<ViewStyle>
   textStyle?: StyleProp<TextStyle>
   children?: React.ReactNode
 }
 
-export function SystemMessage<TMessage extends IMessage = IMessage> ({
+export function SystemMessage<TMessage extends IMessage> ({
   currentMessage,
   containerStyle,
-  wrapperStyle,
+  messageContainerStyle,
   textStyle,
   children,
 }: SystemMessageProps<TMessage>) {
-  if (currentMessage == null || currentMessage.system === false)
+  if (currentMessage == null)
     return null
 
   return (
-    <View style={[stylesCommon.fill, stylesCommon.centerItems, styles.container, containerStyle]}>
-      <View style={wrapperStyle}>
-        <MessageText
-          currentMessage={currentMessage}
-          customTextStyle={[styles.text, textStyle]}
-          containerStyle={{ left: styles.messageContainer, right: styles.messageContainer }}
-        />
-        {children}
-      </View>
+    <View style={[stylesCommon.fill, styles.container, containerStyle]}>
+      {
+        !!currentMessage.text && (
+          <MessageText
+            currentMessage={currentMessage}
+            customTextStyle={[styles.text, textStyle]}
+            position='left'
+            containerStyle={{ left: [styles.messageContainer, messageContainerStyle] }}
+          />
+        )
+      }
+      {children}
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: 5,
-    marginBottom: 10,
-    marginHorizontal: 20,
-  },
-  messageContainer: {
     borderRadius: 20,
     borderWidth: 1,
     borderColor: 'rgba(0,0,0,0.1)',
     paddingHorizontal: 10,
     paddingVertical: 10,
     backgroundColor: 'rgba(0,0,0,0.05)',
+    marginVertical: 5,
+    marginHorizontal: 10,
+    alignItems: 'flex-end',
+  },
+  messageContainer: {
+    marginVertical: 0,
+    marginHorizontal: 0,
   },
   text: {
     backgroundColor: Color.backgroundTransparent,

package/src/Time.tsx

@@ -1,48 +1,27 @@
 import React, { useMemo } from 'react'
-import { StyleSheet, Text, View, ViewStyle, TextStyle } from 'react-native'
+import { StyleSheet, View, ViewStyle, TextStyle } from 'react-native'
 import dayjs from 'dayjs'
 
+import { Text } from 'react-native-gesture-handler'
 import { Color } from './Color'
 import { TIME_FORMAT } from './Constant'
 import { useChatContext } from './GiftedChatContext'
 import { LeftRightStyle, IMessage } from './Models'
+import { getStyleWithPosition } from './styles'
 
-const { containerStyle } = StyleSheet.create({
-  containerStyle: {
-    marginLeft: 10,
-    marginRight: 10,
-    marginBottom: 5,
-  },
-})
-
-const { textStyle } = StyleSheet.create({
-  textStyle: {
+const styles = StyleSheet.create({
+  text: {
     fontSize: 10,
     textAlign: 'right',
   },
+  text_left: {
+    color: Color.timeTextColor,
+  },
+  text_right: {
+    color: Color.white,
+  },
 })
 
-const styles = {
-  left: StyleSheet.create({
-    container: {
-      ...containerStyle,
-    },
-    text: {
-      color: Color.timeTextColor,
-      ...textStyle,
-    },
-  }),
-  right: StyleSheet.create({
-    container: {
-      ...containerStyle,
-    },
-    text: {
-      color: Color.white,
-      ...textStyle,
-    },
-  }),
-}
-
 export interface TimeProps<TMessage extends IMessage> {
   position?: 'left' | 'right'
   currentMessage: TMessage
@@ -71,15 +50,10 @@ export const Time = <TMessage extends IMessage = IMessage>({
     return null
 
   return (
-    <View
-      style={[
-        styles[position].container,
-        containerStyle?.[position],
-      ]}
-    >
+    <View style={containerStyle?.[position]}>
       <Text
         style={[
-          styles[position].text,
+          getStyleWithPosition(styles, 'text', position),
           timeTextStyle?.[position],
         ]}
       >

package/src/__tests__/GiftedChat.test.tsx

@@ -10,7 +10,7 @@ const messages = [
     createdAt: new Date(),
     user: {
       _id: 2,
-      name: 'React Native',
+      name: 'John Doe',
     },
   },
 ]

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

@@ -1,19 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render <Bubble /> and compare with snapshot 1`] = `
-<View
-  style={
-    [
-      {
-        "flex": 1,
-      },
-      {
-        "alignItems": "flex-start",
-      },
-      undefined,
-    ]
-  }
->
+<View>
   <View
     style={
       [
@@ -21,7 +9,6 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
           "backgroundColor": "#f0f0f0",
           "borderRadius": 15,
           "justifyContent": "flex-end",
-          "marginRight": 60,
           "minHeight": 20,
         },
         null,
@@ -61,66 +48,60 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
     >
-      <View>
-        <View>
-          <View
-            style={
-              [
-                {
-                  "marginBottom": 5,
-                  "marginLeft": 10,
-                  "marginRight": 10,
-                  "marginTop": 5,
-                },
-                undefined,
-              ]
-            }
-          >
-            <Text
-              style={
-                [
-                  {
-                    "color": "black",
-                  },
-                  undefined,
-                  undefined,
-                ]
-              }
-              user={
-                {
-                  "_id": 1,
-                }
-              }
-            >
-              <Text>
-                test
-              </Text>
-            </Text>
-          </View>
-        </View>
-        <View
+      <View
+        style={
+          [
+            {
+              "marginHorizontal": 10,
+              "marginVertical": 5,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
           style={
             [
               {
-                "flexDirection": "row",
-                "justifyContent": "flex-start",
+                "color": "black",
               },
               undefined,
+              undefined,
             ]
           }
+          user={
+            {
+              "_id": 1,
+            }
+          }
         >
-          <View
-            style={
-              [
-                {
-                  "marginBottom": 5,
-                  "marginLeft": 10,
-                  "marginRight": 10,
-                },
-                undefined,
-              ]
+          <Text>
+            test
+          </Text>
+        </Text>
+      </View>
+      <View
+        style={
+          [
+            {
+              "alignItems": "flex-end",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "paddingBottom": 5,
+              "paddingHorizontal": 10,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            {
+              "flex": 1,
             }
-          >
+          }
+        >
+          <View>
             <Text
               style={
                 [

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

@@ -11,18 +11,33 @@ exports[`should render <Composer /> and compare with snapshot 1`] = `
   <TextInput
     accessibilityLabel="Type a message..."
     accessible={true}
+    collapsable={false}
     enablesReturnKeyAutomatically={true}
+    handlerTag={-1}
+    handlerType="NativeViewGestureHandler"
     keyboardAppearance="default"
     multiline={true}
+    onChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
     placeholder="Type a message..."
     placeholderTextColor="#b2b2b2"
     style={
       [
+        [
+          {
+            "fontSize": 16,
+            "lineHeight": 22,
+            "paddingBottom": 10,
+            "paddingTop": 8,
+          },
+          undefined,
+        ],
         {
-          "fontSize": 16,
-          "lineHeight": 22,
-          "paddingBottom": 10,
-          "paddingTop": 8,
+          "outlineStyle": "none",
+        },
+        {
+          "height": undefined,
         },
         undefined,
       ]

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

@@ -40,18 +40,33 @@ exports[`should render <InputToolbar /> and compare with snapshot 1`] = `
       <TextInput
         accessibilityLabel="Type a message..."
         accessible={true}
+        collapsable={false}
         enablesReturnKeyAutomatically={true}
+        handlerTag={-1}
+        handlerType="NativeViewGestureHandler"
         keyboardAppearance="default"
         multiline={true}
+        onChange={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
         placeholder="Type a message..."
         placeholderTextColor="#b2b2b2"
         style={
           [
+            [
+              {
+                "fontSize": 16,
+                "lineHeight": 22,
+                "paddingBottom": 10,
+                "paddingTop": 8,
+              },
+              undefined,
+            ],
             {
-              "fontSize": 16,
-              "lineHeight": 22,
-              "paddingBottom": 10,
-              "paddingTop": 8,
+              "outlineStyle": "none",
+            },
+            {
+              "height": undefined,
             },
             undefined,
           ]