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

package/src/Models.ts

@@ -0,0 +1,63 @@
+import { StyleProp, ViewStyle } from 'react-native'
+
+export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
+
+export interface LeftRightStyle<T> {
+  left?: StyleProp<T>
+  right?: StyleProp<T>
+}
+
+type renderFunction = (x: unknown) => React.ReactNode
+
+export interface User {
+  _id: string | number
+  name?: string
+  avatar?: string | number | renderFunction
+}
+
+export interface Reply {
+  title: string
+  value: string
+  messageId?: number | string
+}
+
+export interface QuickReplies {
+  type: 'radio' | 'checkbox'
+  values: Reply[]
+  keepIt?: boolean
+}
+
+export interface IMessage {
+  _id: string | number
+  text: string
+  createdAt: Date | number
+  user: User
+  image?: string
+  video?: string
+  audio?: string
+  system?: boolean
+  sent?: boolean
+  received?: boolean
+  pending?: boolean
+  quickReplies?: QuickReplies
+  location?: {
+    latitude: number
+    longitude: number
+  }
+}
+
+export type IChatMessage = IMessage
+
+export interface MessageVideoProps<TMessage extends IMessage> {
+  currentMessage: TMessage
+  containerStyle?: StyleProp<ViewStyle>
+  videoStyle?: StyleProp<ViewStyle>
+  videoProps?: object
+}
+
+export interface MessageAudioProps<TMessage extends IMessage> {
+  currentMessage: TMessage
+  containerStyle?: StyleProp<ViewStyle>
+  audioStyle?: StyleProp<ViewStyle>
+  audioProps?: object
+}

package/src/QuickReplies.tsx

@@ -7,11 +7,11 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
 import { warning } from './logging'
+import { IMessage, Reply } from './Models'
 import stylesCommon from './styles'
-import { IMessage, Reply } from './types'
 
 const styles = StyleSheet.create({
   container: {

package/src/Send.tsx

@@ -8,30 +8,11 @@ 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'
-import { IMessage } from './types'
-
-const styles = StyleSheet.create({
-  container: {
-    height: 44,
-    justifyContent: 'flex-end',
-  },
-  text: {
-    color: Color.defaultBlue,
-    fontWeight: '600',
-    fontSize: 17,
-    backgroundColor: Color.backgroundTransparent,
-    marginBottom: 12,
-    marginLeft: 10,
-    marginRight: 10,
-  },
-  text_dark: {
-    color: '#4da6ff',
-  },
-})
+import { IMessage } from './Models'
 
 export interface SendProps<TMessage extends IMessage> {
   text?: string
@@ -39,8 +20,7 @@ export interface SendProps<TMessage extends IMessage> {
   containerStyle?: StyleProp<ViewStyle>
   textStyle?: StyleProp<TextStyle>
   children?: React.ReactNode
-  alwaysShowSend?: boolean
-  disabled?: boolean
+  isSendButtonAlwaysVisible?: boolean
   sendButtonProps?: Partial<TouchableOpacityProps>
   onSend?(
     messages: Partial<TMessage> | Partial<TMessage>[],
@@ -54,21 +34,22 @@ export const Send = <TMessage extends IMessage = IMessage>({
   children,
   textStyle,
   label = 'Send',
-  alwaysShowSend = false,
-  disabled = false,
+  isSendButtonAlwaysVisible = false,
   sendButtonProps,
   onSend,
 }: SendProps<TMessage>) => {
   const colorScheme = useColorScheme()
 
   const handleOnPress = useCallback(() => {
-    if (text && onSend)
-      onSend({ text: text.trim() } as Partial<TMessage>, true)
+    const message = { text: text?.trim() } as Partial<TMessage>
+
+    if (onSend && message.text?.length)
+      onSend(message, true)
   }, [text, onSend])
 
   const showSend = useMemo(
-    () => alwaysShowSend || (text && text.trim().length > 0),
-    [alwaysShowSend, text]
+    () => isSendButtonAlwaysVisible || !!text?.trim().length,
+    [isSendButtonAlwaysVisible, text]
   )
 
   if (!showSend)
@@ -77,12 +58,11 @@ export const Send = <TMessage extends IMessage = IMessage>({
   return (
     <TouchableOpacity
       testID={TEST_ID.SEND_TOUCHABLE}
-      accessible
-      accessibilityLabel='send'
       style={[styles.container, containerStyle]}
       onPress={handleOnPress}
+      accessible
+      accessibilityLabel='send'
       accessibilityRole='button'
-      disabled={disabled}
       {...sendButtonProps}
     >
       <View>
@@ -91,3 +71,22 @@ export const Send = <TMessage extends IMessage = IMessage>({
     </TouchableOpacity>
   )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    height: 44,
+    justifyContent: 'flex-end',
+  },
+  text: {
+    color: Color.defaultBlue,
+    fontWeight: '600',
+    fontSize: 17,
+    backgroundColor: Color.backgroundTransparent,
+    marginBottom: 12,
+    marginLeft: 10,
+    marginRight: 10,
+  },
+  text_dark: {
+    color: '#4da6ff',
+  },
+})

package/src/SystemMessage.tsx

@@ -6,10 +6,10 @@ import {
   StyleProp,
   TextStyle,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 import { MessageText } from './MessageText'
+import { IMessage } from './Models'
 import stylesCommon from './styles'
-import { IMessage } from './types'
 
 export interface SystemMessageProps<TMessage extends IMessage> {
   currentMessage: TMessage

package/src/Time.tsx

@@ -2,10 +2,10 @@ 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'
+import { LeftRightStyle, IMessage } from './Models'
 
 const { containerStyle } = StyleSheet.create({
   containerStyle: {
@@ -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,14 +36,9 @@ 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
+        isUserAvatarVisible
       />
     )
 
@@ -55,16 +51,14 @@ 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'
-        showUserAvatar
+        isUserAvatarVisible
       />
     )
 

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', () => {
@@ -10,7 +10,7 @@ describe('Send', () => {
   })
 
   it('should always render <Send /> and compare with snapshot', () => {
-    const { toJSON } = render(<Send alwaysShowSend />)
+    const { toJSON } = render(<Send isSendButtonAlwaysVisible />)
     expect(toJSON()).toMatchSnapshot()
   })
 

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', () => {