react-native-gifted-chat 2.6.4 → 2.7.0

package/src/QuickReplies.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useMemo, useCallback } from 'react'
-import PropTypes from 'prop-types'
 import {
   Text,
   StyleSheet,
@@ -9,10 +8,10 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native'
-import { IMessage, Reply } from './Models'
+import { IMessage, Reply } from './types'
 import Color from './Color'
-import { StylePropType } from './utils'
 import { warning } from './logging'
+import stylesCommon from './styles'
 
 const styles = StyleSheet.create({
   container: {
@@ -21,8 +20,6 @@ const styles = StyleSheet.create({
     maxWidth: 300,
   },
   quickReply: {
-    justifyContent: 'center',
-    alignItems: 'center',
     borderWidth: 1,
     maxWidth: 200,
     paddingVertical: 7,
@@ -90,6 +87,15 @@ export function QuickReplies ({
     return false
   }, [currentMessage, nextMessage])
 
+  const handleSend = useCallback((repliesData: Reply[]) => () => {
+    onQuickReply?.(
+      repliesData.map((reply: Reply) => ({
+        ...reply,
+        messageId: currentMessage!._id,
+      }))
+    )
+  }, [onQuickReply, currentMessage])
+
   const handlePress = useCallback(
     (reply: Reply) => () => {
       if (currentMessage) {
@@ -113,18 +119,9 @@ export function QuickReplies ({
         }
       }
     },
-    [replies, currentMessage]
+    [replies, currentMessage, handleSend]
   )
 
-  const handleSend = (repliesData: Reply[]) => () => {
-    onQuickReply?.(
-      repliesData.map((reply: Reply) => ({
-        ...reply,
-        messageId: currentMessage!._id,
-      }))
-    )
-  }
-
   if (!shouldComponentDisplay)
     return null
 
@@ -139,6 +136,7 @@ export function QuickReplies ({
             <TouchableOpacity
               onPress={handlePress(reply)}
               style={[
+                stylesCommon.centerItems,
                 styles.quickReply,
                 quickReplyStyle,
                 { borderColor: color },
@@ -163,7 +161,7 @@ export function QuickReplies ({
       )}
       {replies.length > 0 && (
         <TouchableOpacity
-          style={[styles.quickReply, styles.sendLink]}
+          style={[stylesCommon.centerItems, styles.quickReply, styles.sendLink]}
           onPress={handleSend(replies)}
         >
           {renderQuickReplySend?.() || (
@@ -174,12 +172,3 @@ export function QuickReplies ({
     </View>
   )
 }
-
-QuickReplies.propTypes = {
-  currentMessage: PropTypes.object.isRequired,
-  onQuickReply: PropTypes.func,
-  color: PropTypes.string,
-  sendText: PropTypes.string,
-  renderQuickReplySend: PropTypes.func,
-  quickReplyStyle: StylePropType,
-}

package/src/Send.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo, useCallback } from 'react'
-import PropTypes from 'prop-types'
 import {
   StyleSheet,
   Text,
@@ -12,8 +11,7 @@ import {
 } from 'react-native'
 
 import Color from './Color'
-import { IMessage } from './Models'
-import { StylePropType } from './utils'
+import { IMessage } from './types'
 import { TEST_ID } from './Constant'
 
 const styles = StyleSheet.create({
@@ -88,15 +86,3 @@ export const Send = <TMessage extends IMessage = IMessage>({
     </TouchableOpacity>
   )
 }
-
-Send.propTypes = {
-  text: PropTypes.string,
-  onSend: PropTypes.func,
-  label: PropTypes.string,
-  containerStyle: StylePropType,
-  textStyle: StylePropType,
-  children: PropTypes.element,
-  alwaysShowSend: PropTypes.bool,
-  disabled: PropTypes.bool,
-  sendButtonProps: PropTypes.object,
-}

package/src/SystemMessage.tsx

@@ -7,16 +7,12 @@ import {
   StyleProp,
   TextStyle,
 } from 'react-native'
-import PropTypes from 'prop-types'
 import Color from './Color'
-import { IMessage } from './Models'
-import { StylePropType } from './utils'
+import { IMessage } from './types'
+import stylesCommon from './styles'
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    flex: 1,
     marginTop: 5,
     marginBottom: 10,
   },
@@ -45,17 +41,10 @@ export function SystemMessage<TMessage extends IMessage = IMessage> ({
     return null
 
   return (
-    <View style={[styles.container, containerStyle]}>
+    <View style={[stylesCommon.fill, stylesCommon.centerItems, styles.container, containerStyle]}>
       <View style={wrapperStyle}>
         <Text style={[styles.text, textStyle]}>{currentMessage.text}</Text>
       </View>
     </View>
   )
 }
-
-SystemMessage.propTypes = {
-  currentMessage: PropTypes.object,
-  containerStyle: StylePropType,
-  wrapperStyle: StylePropType,
-  textStyle: StylePropType,
-}

package/src/Time.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react'
-import PropTypes from 'prop-types'
 import { StyleSheet, Text, View, ViewStyle, TextStyle } from 'react-native'
 import dayjs from 'dayjs'
 
 import Color from './Color'
 import { TIME_FORMAT } from './Constant'
-import { LeftRightStyle, IMessage } from './Models'
-import { StylePropType } from './utils'
+import { LeftRightStyle, IMessage } from './types'
 import { useChatContext } from './GiftedChatContext'
 
 const { containerStyle } = StyleSheet.create({
@@ -81,17 +79,3 @@ export function Time<TMessage extends IMessage = IMessage> ({
     </View>
   )
 }
-
-Time.propTypes = {
-  position: PropTypes.oneOf(['left', 'right']),
-  currentMessage: PropTypes.object,
-  containerStyle: PropTypes.shape({
-    left: StylePropType,
-    right: StylePropType,
-  }),
-  timeFormat: PropTypes.string,
-  timeTextStyle: PropTypes.shape({
-    left: StylePropType,
-    right: StylePropType,
-  }),
-}

package/src/{TypingIndicator.tsx → TypingIndicator/index.tsx}

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState, useMemo } from 'react'
-import { StyleSheet, View } from 'react-native'
-import Color from './Color'
+import { View } from 'react-native'
 import Animated, {
   runOnJS,
   useAnimatedStyle,
@@ -10,6 +9,12 @@ import Animated, {
   withSequence,
   withTiming,
 } from 'react-native-reanimated'
+import { TypingIndicatorProps } from './types'
+
+import stylesCommon from '../styles'
+import styles from './styles'
+
+export * from './types'
 
 const DotsAnimation = () => {
   const dot1 = useSharedValue(0)
@@ -76,7 +81,7 @@ const DotsAnimation = () => {
   }, [dot3, topY, bottomY, duration])
 
   return (
-    <View style={styles.dots}>
+    <View style={[stylesCommon.fill, stylesCommon.centerItems, styles.dots]}>
       <Animated.View style={[styles.dot, dot1Style]} />
       <Animated.View style={[styles.dot, dot2Style]} />
       <Animated.View style={[styles.dot, dot3Style]} />
@@ -84,11 +89,7 @@ const DotsAnimation = () => {
   )
 }
 
-interface Props {
-  isTyping?: boolean
-}
-
-const TypingIndicator = ({ isTyping }: Props) => {
+const TypingIndicator = ({ isTyping }: TypingIndicatorProps) => {
   const yCoords = useSharedValue(200)
   const heightScale = useSharedValue(0)
   const marginScale = useSharedValue(0)
@@ -113,16 +114,15 @@ const TypingIndicator = ({ isTyping }: Props) => {
     marginScale.value = withTiming(8, { duration })
   }, [yCoords, heightScale, marginScale])
 
-  // side effect
   const slideOut = useCallback(() => {
     const duration = 250
 
-    yCoords.value = withTiming(200, { duration })
-    heightScale.value = withTiming(0, { duration })
-    marginScale.value = withTiming(0, { duration }, isFinished => {
+    yCoords.value = withTiming(200, { duration }, isFinished => {
       if (isFinished)
         runOnJS(setIsVisible)(false)
     })
+    heightScale.value = withTiming(0, { duration })
+    marginScale.value = withTiming(0, { duration })
   }, [yCoords, heightScale, marginScale])
 
   useEffect(() => {
@@ -153,27 +153,4 @@ const TypingIndicator = ({ isTyping }: Props) => {
   )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    marginLeft: 8,
-    width: 45,
-    borderRadius: 15,
-    backgroundColor: Color.leftBubbleBackground,
-  },
-  dots: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flex: 1,
-  },
-  dot: {
-    marginLeft: 2,
-    marginRight: 2,
-    borderRadius: 4,
-    width: 8,
-    height: 8,
-    backgroundColor: 'rgba(0, 0, 0, 0.38)',
-  },
-})
-
 export default TypingIndicator

package/src/TypingIndicator/styles.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native'
+import Color from '../Color'
+
+export default StyleSheet.create({
+  container: {
+    marginLeft: 8,
+    width: 45,
+    borderRadius: 15,
+    backgroundColor: Color.leftBubbleBackground,
+  },
+  dots: {
+    flexDirection: 'row',
+  },
+  dot: {
+    marginLeft: 2,
+    marginRight: 2,
+    borderRadius: 4,
+    width: 8,
+    height: 8,
+    backgroundColor: 'rgba(0, 0, 0, 0.38)',
+  },
+})

package/src/TypingIndicator/types.ts

@@ -0,0 +1,3 @@
+export interface TypingIndicatorProps {
+  isTyping?: boolean
+}

package/src/__tests__/Bubble.test.tsx

@@ -5,8 +5,10 @@ import renderer from 'react-test-renderer'
 import { Bubble } from '../GiftedChat'
 
 it('should render <Bubble /> and compare with snapshot', () => {
-  const tree = renderer
-    .create(
+  let tree
+
+  renderer.act(() => {
+    tree = renderer.create(
       <Bubble
         user={{ _id: 1 }}
         currentMessage={{
@@ -15,9 +17,10 @@ it('should render <Bubble /> and compare with snapshot', () => {
           createdAt: 1554744013721,
           user: { _id: 1 },
         }}
+        position='left'
       />
     )
-    .toJSON()
+  })
 
-  expect(tree).toMatchSnapshot()
+  expect(tree.toJSON()).toMatchSnapshot()
 })

package/src/__tests__/GiftedAvatar.test.tsx

@@ -5,7 +5,11 @@ import renderer from 'react-test-renderer'
 import { GiftedAvatar } from '../GiftedChat'
 
 it('should render <GiftedAvatar /> and compare with snapshot', () => {
-  const tree = renderer.create(<GiftedAvatar />).toJSON()
+  let tree
 
-  expect(tree).toMatchSnapshot()
+  renderer.act(() => {
+    tree = renderer.create(<GiftedAvatar />)
+  })
+
+  expect(tree.toJSON()).toMatchSnapshot()
 })

package/src/__tests__/GiftedChat.test.tsx

@@ -1,9 +1,9 @@
 import 'react-native'
 import React from 'react'
 import renderer from 'react-test-renderer'
-import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 import { GiftedChat } from '../GiftedChat'
+import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller'
 
 const messages = [
   {
@@ -18,19 +18,25 @@ const messages = [
 ]
 
 it('should render <GiftedChat/> and compare with snapshot', () => {
-  const tree = renderer
-    .create(
-      <SafeAreaProvider>
-        <GiftedChat
-          messages={messages}
-          onSend={() => { }}
-          user={{
-            _id: 1,
-          }}
-        />
-      </SafeAreaProvider>
+  let tree
+
+  renderer.act(() => {
+    (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
+      height: {
+        value: 0,
+      },
+    })
+
+    tree = renderer.create(
+      <GiftedChat
+        messages={messages}
+        onSend={() => {}}
+        user={{
+          _id: 1,
+        }}
+      />
     )
-    .toJSON()
+  })
 
-  expect(tree).toMatchSnapshot()
+  expect(tree.toJSON()).toMatchSnapshot()
 })

package/src/__tests__/Message.test.tsx

@@ -17,6 +17,7 @@ describe('Message component', () => {
             createdAt: 1554744013721,
             user: { _id: 1 },
           }}
+          position='left'
         />
       )
       .toJSON()
@@ -26,7 +27,7 @@ describe('Message component', () => {
 
   it('should NOT render <Message />', () => {
     const tree = renderer
-      .create(<Message key='123' user={{ _id: 1 }} currentMessage={null} />)
+      .create(<Message key='123' user={{ _id: 1 }} currentMessage={null} position='left' />)
       .toJSON()
 
     expect(tree).toMatchSnapshot()
@@ -44,6 +45,7 @@ describe('Message component', () => {
             createdAt: 1554744013721,
             user: { _id: 1 },
           }}
+          position='left'
           showUserAvatar
         />
       )
@@ -67,6 +69,7 @@ describe('Message component', () => {
               avatar: null,
             },
           }}
+          position='left'
           showUserAvatar
         />
       )

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

@@ -42,13 +42,17 @@ exports[`should render <Actions /> and compare with snapshot 1`] = `
   <View
     style={
       [
+        {
+          "flex": 1,
+        },
         {
           "alignItems": "center",
+          "justifyContent": "center",
+        },
+        {
           "borderColor": "#b2b2b2",
           "borderRadius": 13,
           "borderWidth": 2,
-          "flex": 1,
-          "justifyContent": "center",
         },
         undefined,
       ]

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

@@ -5,9 +5,11 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
   style={
     [
       {
-        "alignItems": "flex-start",
         "flex": 1,
       },
+      {
+        "alignItems": "flex-start",
+      },
       undefined,
     ]
   }

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

@@ -16,6 +16,8 @@ exports[`should render <Composer /> and compare with snapshot 1`] = `
     [
       {
         "flex": 1,
+      },
+      {
         "fontSize": 16,
         "lineHeight": 22,
         "marginBottom": 5,

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

@@ -2,7 +2,7 @@
 
 exports[`should compare Constant with snapshot 1`] = `
 {
-  "DATE_FORMAT": "ll",
+  "DATE_FORMAT": "D MMMM",
   "DEFAULT_PLACEHOLDER": "Type a message...",
   "MAX_COMPOSER_HEIGHT": 200,
   "MIN_COMPOSER_HEIGHT": 33,

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

@@ -2,36 +2,4 @@
 
 exports[`Day should not 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>
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "color": "#b2b2b2",
-            "fontSize": 12,
-            "fontWeight": "600",
-          },
-          undefined,
-        ]
-      }
-    >
-      Apr 17, 2022
-    </Text>
-  </View>
-</View>
-`;
+exports[`Day should render <Day /> and compare with snapshot 1`] = `null`;

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

@@ -7,15 +7,17 @@ exports[`should render <GiftedAvatar /> and compare with snapshot 1`] = `
     [
       {
         "alignItems": "center",
+        "justifyContent": "center",
+      },
+      {
         "borderRadius": 20,
         "height": 40,
-        "justifyContent": "center",
         "width": 40,
       },
       {
         "backgroundColor": "transparent",
       },
-      {},
+      undefined,
     ]
   }
 />

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

@@ -1,15 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render <GiftedChat/> and compare with snapshot 1`] = `
-<RNCSafeAreaProvider
-  onInsetsChange={[Function]}
-  style={
-    [
+<KeyboardProvider>
+  <View
+    style={
       {
         "flex": 1,
-      },
-      undefined,
-    ]
-  }
-/>
+      }
+    }
+  >
+    <View
+      onLayout={[Function]}
+      style={
+        [
+          {
+            "flex": 1,
+          },
+          {
+            "overflow": "hidden",
+          },
+        ]
+      }
+      testID="GC_WRAPPER"
+    />
+  </View>
+</KeyboardProvider>
 `;

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

@@ -39,6 +39,8 @@ exports[`should render <InputToolbar /> and compare with snapshot 1`] = `
         [
           {
             "flex": 1,
+          },
+          {
             "fontSize": 16,
             "lineHeight": 22,
             "marginBottom": 5,

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

@@ -44,10 +44,12 @@ exports[`should render <LoadEarlier /> and compare with snapshot 1`] = `
       [
         {
           "alignItems": "center",
+          "justifyContent": "center",
+        },
+        {
           "backgroundColor": "#b2b2b2",
           "borderRadius": 15,
           "height": 30,
-          "justifyContent": "center",
           "paddingLeft": 10,
           "paddingRight": 10,
         },