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

package/src/MessageVideo.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import { View, Text, StyleSheet } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 
 const styles = StyleSheet.create({
   container: {

package/src/QuickReplies.tsx

@@ -7,7 +7,7 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
 import { warning } from './logging'
 import stylesCommon from './styles'

package/src/Send.tsx

@@ -8,7 +8,7 @@ import {
   TextStyle,
   useColorScheme,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 
 import { TouchableOpacity, TouchableOpacityProps } from './components/TouchableOpacity'
 import { TEST_ID } from './Constant'

package/src/SystemMessage.tsx

@@ -6,7 +6,7 @@ import {
   StyleProp,
   TextStyle,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 import { MessageText } from './MessageText'
 import stylesCommon from './styles'
 import { IMessage } from './types'

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__/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__/Message.test.tsx.snap

@@ -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={
         [
@@ -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__/data.ts

@@ -4,5 +4,5 @@ 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/index.ts

@@ -1,4 +1,22 @@
 export * from './GiftedChat'
 export * from './Constant'
-export * from './utils'
+export * as utils from './utils'
 export * from './GiftedChatContext'
+export * from './types'
+export { Actions } from './Actions'
+export { Avatar } from './Avatar'
+export { Bubble } from './Bubble'
+export { SystemMessage } from './SystemMessage'
+export { MessageImage } from './MessageImage'
+export { MessageText } from './MessageText'
+export { Composer } from './Composer'
+export { Day } from './Day'
+export { InputToolbar } from './InputToolbar'
+export { LoadEarlierMessages } from './LoadEarlierMessages'
+export { Message } from './Message'
+export { MessageContainer } from './MessageContainer'
+export { Send } from './Send'
+export { Time } from './Time'
+export { GiftedAvatar } from './GiftedAvatar'
+export { MessageAudio } from './MessageAudio'
+export { MessageVideo } from './MessageVideo'