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

package/src/Time.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 import { StyleSheet, Text, View, ViewStyle, TextStyle } from 'react-native'
 import dayjs from 'dayjs'
 
-import Color from './Color'
+import { Color } from './Color'
 import { TIME_FORMAT } from './Constant'
 import { useChatContext } from './GiftedChatContext'
 import { LeftRightStyle, IMessage } from './types'
@@ -51,23 +51,23 @@ export interface TimeProps<TMessage extends IMessage> {
   timeFormat?: string
 }
 
-export function Time<TMessage extends IMessage = IMessage> ({
+export const Time = <TMessage extends IMessage = IMessage>({
   position = 'left',
   containerStyle,
   currentMessage,
   timeFormat = TIME_FORMAT,
   timeTextStyle,
-}: TimeProps<TMessage>) {
+}: TimeProps<TMessage>) => {
   const { getLocale } = useChatContext()
 
   const formattedTime = useMemo(() => {
-    if (currentMessage == null)
+    if (!currentMessage)
       return null
 
     return dayjs(currentMessage.createdAt).locale(getLocale()).format(timeFormat)
   }, [currentMessage, getLocale, timeFormat])
 
-  if (currentMessage == null)
+  if (!currentMessage)
     return null
 
   return (

package/src/TypingIndicator/index.tsx

@@ -89,7 +89,7 @@ const DotsAnimation = () => {
   )
 }
 
-const TypingIndicator = ({ isTyping, style }: TypingIndicatorProps) => {
+export const TypingIndicator = ({ isTyping, style }: TypingIndicatorProps) => {
   const yCoords = useSharedValue(200)
   const heightScale = useSharedValue(0)
   const marginScale = useSharedValue(0)
@@ -153,5 +153,3 @@ const TypingIndicator = ({ isTyping, style }: TypingIndicatorProps) => {
     </Animated.View>
   )
 }
-
-export default TypingIndicator

package/src/TypingIndicator/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import Color from '../Color'
+import { Color } from '../Color'
 
 export default StyleSheet.create({
   container: {

package/src/__tests__/Actions.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { Actions } from '../GiftedChat'
+import { Actions } from '..'
 
 it('should render <Actions /> and compare with snapshot', () => {
   const { toJSON } = render(<Actions />)

package/src/__tests__/Avatar.test.tsx

@@ -1,11 +1,16 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { Avatar } from '../GiftedChat'
+import { Avatar } from '..'
+import { DEFAULT_TEST_MESSAGE } from './data'
 
 it('should render <Avatar /> and compare with snapshot', () => {
   const { toJSON } = render(
-    <Avatar renderAvatar={() => 'renderAvatar'} position='left' />
+    <Avatar
+      renderAvatar={() => 'renderAvatar'}
+      position='left'
+      currentMessage={DEFAULT_TEST_MESSAGE}
+    />
   )
 
   expect(toJSON()).toMatchSnapshot()

package/src/__tests__/Bubble.test.tsx

@@ -1,18 +1,14 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { Bubble } from '../GiftedChat'
+import { Bubble } from '..'
+import { DEFAULT_TEST_MESSAGE } from './data'
 
 it('should render <Bubble /> and compare with snapshot', () => {
   const { toJSON } = render(
     <Bubble
       user={{ _id: 1 }}
-      currentMessage={{
-        _id: 1,
-        text: 'test',
-        createdAt: 1554744013721,
-        user: { _id: 1 },
-      }}
+      currentMessage={DEFAULT_TEST_MESSAGE}
       position='left'
     />
   )

package/src/__tests__/Color.test.tsx

@@ -1,4 +1,4 @@
-import Color from '../Color'
+import { Color } from '../Color'
 
 it('should compare Color with snapshot', () => {
   expect(Color).toMatchSnapshot()

package/src/__tests__/Composer.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { Composer } from '../GiftedChat'
+import { Composer } from '..'
 
 it('should render <Composer /> and compare with snapshot', () => {
   const { toJSON } = render(<Composer />)

package/src/__tests__/Day.test.tsx

@@ -1,19 +1,19 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { Day } from '../GiftedChat'
+import { Day } from '..'
 import { DEFAULT_TEST_MESSAGE } from './data'
 
 describe('Day', () => {
   it('should not render <Day /> and compare with snapshot', () => {
-    const { toJSON } = render(<Day />)
+    const { toJSON } = render(<Day createdAt={DEFAULT_TEST_MESSAGE.createdAt} />)
 
     expect(toJSON()).toMatchSnapshot()
   })
 
   it('should render <Day /> and compare with snapshot', () => {
     const { toJSON } = render(
-      <Day currentMessage={DEFAULT_TEST_MESSAGE} />
+      <Day createdAt={DEFAULT_TEST_MESSAGE.createdAt} />
     )
     expect(toJSON()).toMatchSnapshot()
   })

package/src/__tests__/DayAnimated.test.tsx

@@ -2,19 +2,13 @@ import React from 'react'
 import { View, Text } from 'react-native'
 import { render } from '@testing-library/react-native'
 import { DayProps } from '../Day'
-import DayAnimated from '../MessageContainer/components/DayAnimated'
+import { DayAnimated } from '../MessageContainer/components/DayAnimated'
+import { DEFAULT_TEST_MESSAGE } from './data'
 
 const mockDaysPositions = { value: {} }
 const mockScrolledY = { value: 0 }
 const mockListHeight = { value: 800 }
 
-const mockMessage = {
-  _id: 1,
-  text: 'Hello',
-  createdAt: new Date('2023-01-01'),
-  user: { _id: 1, name: 'User 1' },
-}
-
 describe('DayAnimated', () => {
   it('should render DayAnimated with default Day component', () => {
     const { toJSON } = render(
@@ -22,7 +16,7 @@ describe('DayAnimated', () => {
         scrolledY={mockScrolledY}
         daysPositions={mockDaysPositions}
         listHeight={mockListHeight}
-        messages={[mockMessage]}
+        messages={[DEFAULT_TEST_MESSAGE]}
         isLoading={false}
       />
     )
@@ -32,7 +26,7 @@ describe('DayAnimated', () => {
   it('should use custom renderDay when provided', () => {
     const customRenderDay = jest.fn((props: DayProps) => (
       <View testID='custom-day'>
-        <Text>Custom Day: {props.createdAt}</Text>
+        <Text>Custom Day: {props.createdAt.toLocaleString()}</Text>
       </View>
     ))
 
@@ -41,7 +35,7 @@ describe('DayAnimated', () => {
         scrolledY={mockScrolledY}
         daysPositions={mockDaysPositions}
         listHeight={mockListHeight}
-        messages={[mockMessage]}
+        messages={[DEFAULT_TEST_MESSAGE]}
         isLoading={false}
         renderDay={customRenderDay}
       />

package/src/__tests__/GiftedAvatar.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { GiftedAvatar } from '../GiftedChat'
+import { GiftedAvatar } from '..'
 
 it('should render <GiftedAvatar /> and compare with snapshot', () => {
   const { toJSON } = render(<GiftedAvatar />)

package/src/__tests__/GiftedChat.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { render } from '@testing-library/react-native'
 
 import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller'
-import { GiftedChat } from '../GiftedChat'
+import { GiftedChat } from '..'
 
 const messages = [
   {

package/src/__tests__/InputToolbar.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { InputToolbar } from '../GiftedChat'
+import { InputToolbar } from '..'
 
 it('should render <InputToolbar /> and compare with snapshot', () => {
   const { toJSON } = render(<InputToolbar />)

package/src/__tests__/LoadEarlier.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { LoadEarlierMessages } from '../GiftedChat'
+import { LoadEarlierMessages } from '..'
 
 it('should render <LoadEarlierMessages /> and compare with snapshot', () => {
-  const { toJSON } = render(<LoadEarlierMessages />)
+  const { toJSON } = render(<LoadEarlierMessages isAvailable isLoading={false} onPress={() => {}} />)
 
   expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/Message.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { Message } from '../GiftedChat'
+import { Message } from '..'
+import { DEFAULT_TEST_MESSAGE } from './data'
 
 describe('Message component', () => {
   it('should render <Message /> and compare with snapshot', () => {
@@ -35,12 +36,7 @@ describe('Message component', () => {
       <Message
         key='123'
         user={{ _id: 1 }}
-        currentMessage={{
-          _id: 1,
-          text: 'test',
-          createdAt: 1554744013721,
-          user: { _id: 1 },
-        }}
+        currentMessage={DEFAULT_TEST_MESSAGE}
         position='left'
         showUserAvatar
       />
@@ -55,12 +51,10 @@ describe('Message component', () => {
         key='123'
         user={{ _id: 1 }}
         currentMessage={{
-          _id: 1,
-          text: 'test',
-          createdAt: 1554744013721,
+          ...DEFAULT_TEST_MESSAGE,
           user: {
             _id: 1,
-            avatar: null,
+            avatar: undefined,
           },
         }}
         position='left'

package/src/__tests__/MessageContainer.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { MessageContainer } from '../GiftedChat'
+import { MessageContainer } from '..'
 import { DEFAULT_TEST_MESSAGE } from './data'
 
 it('should render <MessageContainer /> without crashing', () => {
@@ -9,7 +9,7 @@ it('should render <MessageContainer /> without crashing', () => {
   expect(() => render(
     <MessageContainer
       messages={[DEFAULT_TEST_MESSAGE]}
-      user={{ _id: 'test' }}
+      user={{ _id: 1 }}
     />
   )).not.toThrow()
 })
@@ -23,7 +23,7 @@ it('should render <MessageContainer /> with multiple messages', () => {
   expect(() => render(
     <MessageContainer
       messages={messages}
-      user={{ _id: 'test' }}
+      user={{ _id: 1 }}
     />
   )).not.toThrow()
 })
@@ -32,7 +32,7 @@ it('should render <MessageContainer /> with empty messages', () => {
   expect(() => render(
     <MessageContainer
       messages={[]}
-      user={{ _id: 'test' }}
+      user={{ _id: 1 }}
     />
   )).not.toThrow()
 })

package/src/__tests__/MessageImage.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { MessageImage } from '../GiftedChat'
+import { MessageImage } from '..'
 import { DEFAULT_TEST_MESSAGE } from './data'
 
 describe('MessageImage', () => {
   it('should not render <MessageImage /> and compare with snapshot', () => {
-    const { toJSON } = render(<MessageImage />)
+    const { toJSON } = render(<MessageImage currentMessage={null} />)
     expect(toJSON()).toMatchSnapshot()
   })
 

package/src/__tests__/MessageText.test.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { MessageText } from '../GiftedChat'
+import { MessageText } from '..'
+import { DEFAULT_TEST_MESSAGE } from './data'
 
 it('should render <MessageText /> and compare with snapshot', () => {
   const { toJSON } = render(
     <MessageText
-      currentMessage={{ _id: 1, createdAt: new Date(), text: 'test message' }}
+      currentMessage={DEFAULT_TEST_MESSAGE}
     />
   )
 

package/src/__tests__/Send.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { Send } from '../GiftedChat'
+import { Send } from '..'
 
 describe('Send', () => {
   it('should not render <Send /> and compare with snapshot', () => {

package/src/__tests__/SystemMessage.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { SystemMessage } from '../GiftedChat'
+import { SystemMessage } from '..'
 import { DEFAULT_TEST_MESSAGE } from './data'
 
 describe('SystemMessage', () => {

package/src/__tests__/Time.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { Time } from '../GiftedChat'
+import { Time } from '..'
 import { DEFAULT_TEST_MESSAGE } from './data'
 
 describe('Time', () => {

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

@@ -22,31 +22,6 @@ exports[`should render <Actions /> and compare with snapshot 1`] = `
   accessible={true}
   collapsable={false}
   focusable={true}
-  jestAnimatedProps={
-    {
-      "value": {},
-    }
-  }
-  jestAnimatedStyle={
-    {
-      "value": {
-        "opacity": 1,
-      },
-    }
-  }
-  jestInlineStyle={
-    [
-      [
-        {
-          "height": 26,
-          "marginBottom": 10,
-          "marginLeft": 10,
-          "width": 26,
-        },
-        undefined,
-      ],
-    ]
-  }
   onBlur={[Function]}
   onClick={[Function]}
   onFocus={[Function]}
@@ -56,57 +31,86 @@ exports[`should render <Actions /> and compare with snapshot 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    [
-      {
-        "height": 26,
-        "marginBottom": 10,
-        "marginLeft": 10,
-        "width": 26,
-      },
-      undefined,
-      {
-        "opacity": 1,
-      },
-    ]
-  }
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "opacity": 1,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        [
+          {
+            "height": 26,
+            "marginBottom": 10,
+            "marginLeft": 10,
+            "width": 26,
+          },
+          undefined,
+        ],
+      ]
+    }
     style={
       [
         {
-          "flex": 1,
-        },
-        {
-          "alignItems": "center",
-          "justifyContent": "center",
+          "height": 26,
+          "marginBottom": 10,
+          "marginLeft": 10,
+          "width": 26,
         },
+        undefined,
         {
-          "borderColor": "#b2b2b2",
-          "borderRadius": 13,
-          "borderWidth": 2,
+          "opacity": 1,
         },
-        undefined,
       ]
     }
   >
-    <Text
+    <View
       style={
         [
           {
-            "backgroundColor": "transparent",
-            "color": "#b2b2b2",
-            "fontSize": 16,
-            "fontWeight": "bold",
-            "lineHeight": 16,
-            "textAlign": "center",
+            "flex": 1,
+          },
+          {
+            "alignItems": "center",
+            "justifyContent": "center",
+          },
+          {
+            "borderColor": "#b2b2b2",
+            "borderRadius": 13,
+            "borderWidth": 2,
           },
           undefined,
         ]
       }
     >
-      +
-    </Text>
+      <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

@@ -77,7 +77,6 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
             }
           >
             <Text
-              link={true}
               style={
                 [
                   {
@@ -134,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>
+`;