react-native-gifted-chat 2.8.2-alpha.0 → 2.8.2-alpha.1

package/src/MessageText.tsx

@@ -5,6 +5,7 @@ import {
   StyleProp,
   ViewStyle,
   TextStyle,
+  View,
 } from 'react-native'
 
 import Autolink, { AutolinkProps } from 'react-native-autolink'
@@ -41,15 +42,6 @@ export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
   onPress: onPressProp,
   ...rest
 }) => {
-  // TODO: React.memo
-  // const shouldComponentUpdate = (nextProps: MessageTextProps<TMessage>) => {
-  //   return (
-  //     !!currentMessage &&
-  //     !!nextProps.currentMessage &&
-  //     currentMessage.text !== nextProps.currentMessage.text
-  //   )
-  // }
-
   const onUrlPress = useCallback((url: string) => {
     if (/^www\./i.test(url))
       url = `https://${url}`
@@ -89,34 +81,37 @@ export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
   }, [onUrlPress, onPhonePress, onEmailPress, onPressProp, currentMessage])
 
   const style = useMemo(() => [
-    containerStyle?.[position],
     styles[`text_${position}`],
     textStyle?.[position],
     customTextStyle,
-  ], [containerStyle, position, textStyle, customTextStyle])
+  ], [position, textStyle, customTextStyle])
 
   return (
-    <Autolink
-      style={style}
-      {...rest}
-      text={currentMessage!.text}
-      email
-      link
-      linkStyle={linkStyle}
-      onPress={handlePress}
-    />
+    <View style={[styles.container, containerStyle?.[position]]}>
+      <Autolink
+        style={style}
+        {...rest}
+        text={currentMessage!.text}
+        email
+        link
+        linkStyle={linkStyle}
+        onPress={handlePress}
+      />
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
-  text: {
-    fontSize: 16,
-    lineHeight: 20,
+  container: {
     marginTop: 5,
     marginBottom: 5,
     marginLeft: 10,
     marginRight: 10,
   },
+  text: {
+    fontSize: 16,
+    lineHeight: 20,
+  },
   text_left: {
     color: 'black',
   },

package/src/MessageVideo.tsx

@@ -1,16 +1,28 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import Color from './Color'
-import { View, Text } from 'react-native'
+import { View, Text, StyleSheet } from 'react-native'
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  text: {
+    color: Color.alizarin,
+    fontWeight: '600',
+  },
+})
 
 export function MessageVideo () {
-  return (
-    <View style={{ padding: 20 }}>
-      <Text style={{ color: Color.alizarin, fontWeight: '600' }}>
+  const content = useMemo(() => (
+    <View style={styles.container}>
+      <Text style={styles.text}>
         {'Video is not implemented by GiftedChat.'}
       </Text>
-      <Text style={{ color: Color.alizarin, fontWeight: '600' }}>
+      <Text style={styles.text}>
         {'\nYou need to provide your own implementation by using renderMessageVideo prop.'}
       </Text>
     </View>
-  )
+  ), [])
+
+  return content
 }

package/src/QuickReplies.tsx

@@ -122,6 +122,22 @@ export function QuickReplies ({
     [replies, currentMessage, handleSend]
   )
 
+  const renderSendButton = useMemo(() => {
+    if (!replies.length)
+      return null
+
+    return (
+      <TouchableOpacity
+        style={[stylesCommon.centerItems, styles.quickReply, styles.sendLink]}
+        onPress={handleSend(replies)}
+      >
+        {renderQuickReplySend?.() || (
+          <Text style={styles.sendLinkText}>{sendText}</Text>
+        )}
+      </TouchableOpacity>
+    )
+  }, [replies, handleSend, renderQuickReplySend, sendText])
+
   if (!shouldComponentDisplay)
     return null
 
@@ -159,16 +175,7 @@ export function QuickReplies ({
           )
         }
       )}
-      {replies.length > 0 && (
-        <TouchableOpacity
-          style={[stylesCommon.centerItems, styles.quickReply, styles.sendLink]}
-          onPress={handleSend(replies)}
-        >
-          {renderQuickReplySend?.() || (
-            <Text style={styles.sendLinkText}>{sendText}</Text>
-          )}
-        </TouchableOpacity>
-      )}
+      {renderSendButton}
     </View>
   )
 }

package/src/Send.tsx

@@ -8,6 +8,7 @@ import {
   ViewStyle,
   TextStyle,
   TouchableOpacityProps,
+  useColorScheme,
 } from 'react-native'
 
 import Color from './Color'
@@ -28,6 +29,9 @@ const styles = StyleSheet.create({
     marginLeft: 10,
     marginRight: 10,
   },
+  text_dark: {
+    color: '#4da6ff',
+  },
 })
 
 export interface SendProps<TMessage extends IMessage> {
@@ -56,6 +60,8 @@ export const Send = <TMessage extends IMessage = IMessage>({
   sendButtonProps,
   onSend,
 }: SendProps<TMessage>) => {
+  const colorScheme = useColorScheme()
+
   const handleOnPress = useCallback(() => {
     if (text && onSend)
       onSend({ text: text.trim() } as Partial<TMessage>, true)
@@ -81,7 +87,7 @@ export const Send = <TMessage extends IMessage = IMessage>({
       {...sendButtonProps}
     >
       <View>
-        {children || <Text style={[styles.text, textStyle]}>{label}</Text>}
+        {children || <Text style={[styles.text, styles[`text_${colorScheme}`], textStyle]}>{label}</Text>}
       </View>
     </TouchableOpacity>
   )

package/src/SystemMessage.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
   StyleSheet,
   Text,
@@ -39,13 +39,20 @@ export function SystemMessage<TMessage extends IMessage = IMessage> ({
   textStyle,
   children,
 }: SystemMessageProps<TMessage>) {
+  const textContent = useMemo(() => {
+    if (!currentMessage?.text)
+      return null
+
+    return <Text style={[styles.text, textStyle]}>{currentMessage.text}</Text>
+  }, [currentMessage?.text, textStyle])
+
   if (currentMessage == null || currentMessage.system === false)
     return null
 
   return (
     <View style={[stylesCommon.fill, stylesCommon.centerItems, styles.container, containerStyle]}>
       <View style={wrapperStyle}>
-        {!!currentMessage.text && <Text style={[styles.text, textStyle]}>{currentMessage.text}</Text>}
+        {textContent}
         {children}
       </View>
     </View>

package/src/Time.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { StyleSheet, Text, View, ViewStyle, TextStyle } from 'react-native'
 import dayjs from 'dayjs'
 
@@ -60,6 +60,13 @@ export function Time<TMessage extends IMessage = IMessage> ({
 }: TimeProps<TMessage>) {
   const { getLocale } = useChatContext()
 
+  const formattedTime = useMemo(() => {
+    if (currentMessage == null)
+      return null
+
+    return dayjs(currentMessage.createdAt).locale(getLocale()).format(timeFormat)
+  }, [currentMessage, getLocale, timeFormat])
+
   if (currentMessage == null)
     return null
 
@@ -76,7 +83,7 @@ export function Time<TMessage extends IMessage = IMessage> ({
           timeTextStyle?.[position],
         ]}
       >
-        {dayjs(currentMessage.createdAt).locale(getLocale()).format(timeFormat)}
+        {formattedTime}
       </Text>
     </View>
   )

package/src/TypingIndicator/index.tsx

@@ -89,7 +89,7 @@ const DotsAnimation = () => {
   )
 }
 
-const TypingIndicator = ({ isTyping }: TypingIndicatorProps) => {
+const TypingIndicator = ({ isTyping, style }: TypingIndicatorProps) => {
   const yCoords = useSharedValue(200)
   const heightScale = useSharedValue(0)
   const marginScale = useSharedValue(0)
@@ -146,6 +146,7 @@ const TypingIndicator = ({ isTyping }: TypingIndicatorProps) => {
       style={[
         styles.container,
         containerStyle,
+        style,
       ]}
     >
       <DotsAnimation />

package/src/TypingIndicator/types.ts

@@ -1,3 +1,6 @@
+import { StyleProp, ViewStyle } from 'react-native'
+
 export interface TypingIndicatorProps {
   isTyping?: boolean
+  style?: StyleProp<ViewStyle>
 }

package/src/__tests__/Actions.test.tsx

@@ -1,10 +1,9 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { Actions } from '../GiftedChat'
 
 it('should render <Actions /> and compare with snapshot', () => {
-  const tree = renderer.create(<Actions />).toJSON()
-  expect(tree).toMatchSnapshot()
+  const { toJSON } = render(<Actions />)
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/Avatar.test.tsx

@@ -1,13 +1,12 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { Avatar } from '../GiftedChat'
 
 it('should render <Avatar /> and compare with snapshot', () => {
-  const tree = renderer
-    .create(<Avatar renderAvatar={() => 'renderAvatar'} position='left' />)
-    .toJSON()
+  const { toJSON } = render(
+    <Avatar renderAvatar={() => 'renderAvatar'} position='left' />
+  )
 
-  expect(tree).toMatchSnapshot()
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/Bubble.test.tsx

@@ -1,26 +1,21 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { Bubble } from '../GiftedChat'
 
 it('should render <Bubble /> and compare with snapshot', () => {
-  let tree
+  const { toJSON } = render(
+    <Bubble
+      user={{ _id: 1 }}
+      currentMessage={{
+        _id: 1,
+        text: 'test',
+        createdAt: 1554744013721,
+        user: { _id: 1 },
+      }}
+      position='left'
+    />
+  )
 
-  renderer.act(() => {
-    tree = renderer.create(
-      <Bubble
-        user={{ _id: 1 }}
-        currentMessage={{
-          _id: 1,
-          text: 'test',
-          createdAt: 1554744013721,
-          user: { _id: 1 },
-        }}
-        position='left'
-      />
-    )
-  })
-
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/Composer.test.tsx

@@ -1,11 +1,10 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { Composer } from '../GiftedChat'
 
 it('should render <Composer /> and compare with snapshot', () => {
-  const tree = renderer.create(<Composer />).toJSON()
+  const { toJSON } = render(<Composer />)
 
-  expect(tree).toMatchSnapshot()
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/Day.test.tsx

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

package/src/__tests__/DayAnimated.test.tsx

@@ -1,6 +1,6 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
+import { View, Text } from 'react-native'
 import DayAnimated from '../MessageContainer/components/DayAnimated'
 import { DayProps } from '../Day'
 
@@ -17,7 +17,7 @@ const mockMessage = {
 
 describe('DayAnimated', () => {
   it('should render DayAnimated with default Day component', () => {
-    const component = renderer.create(
+    const { toJSON } = render(
       <DayAnimated
         scrolledY={mockScrolledY}
         daysPositions={mockDaysPositions}
@@ -26,14 +26,17 @@ describe('DayAnimated', () => {
         isLoadingEarlier={false}
       />
     )
-    const tree = component.toJSON()
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should use custom renderDay when provided', () => {
-    const customRenderDay = jest.fn((props: DayProps) => <div data-testid='custom-day'>Custom Day: {props.createdAt}</div>)
+    const customRenderDay = jest.fn((props: DayProps) => (
+      <View testID='custom-day'>
+        <Text>Custom Day: {props.createdAt}</Text>
+      </View>
+    ))
 
-    const component = renderer.create(
+    const { toJSON } = render(
       <DayAnimated
         scrolledY={mockScrolledY}
         daysPositions={mockDaysPositions}
@@ -44,11 +47,6 @@ describe('DayAnimated', () => {
       />
     )
 
-    // Force render to trigger the renderDay call if there's a createdAt
-    component.getInstance()
-
-    // The custom renderDay function should be available in the component
-    const tree = component.toJSON()
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 })

package/src/__tests__/GiftedAvatar.test.tsx

@@ -1,15 +1,10 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { GiftedAvatar } from '../GiftedChat'
 
 it('should render <GiftedAvatar /> and compare with snapshot', () => {
-  let tree
+  const { toJSON } = render(<GiftedAvatar />)
 
-  renderer.act(() => {
-    tree = renderer.create(<GiftedAvatar />)
-  })
-
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/GiftedChat.test.tsx

@@ -1,6 +1,5 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { GiftedChat } from '../GiftedChat'
 import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller'
@@ -18,50 +17,42 @@ const messages = [
 ]
 
 it('should render <GiftedChat/> and compare with snapshot', () => {
-  let tree
-
-  renderer.act(() => {
-    (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
-      height: {
-        value: 0,
-      },
-    })
-
-    tree = renderer.create(
-      <GiftedChat
-        messages={messages}
-        onSend={() => {}}
-        user={{
-          _id: 1,
-        }}
-      />
-    )
+  (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
+    height: {
+      value: 0,
+    },
   })
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  const { toJSON } = render(
+    <GiftedChat
+      messages={messages}
+      onSend={() => {}}
+      user={{
+        _id: 1,
+      }}
+    />
+  )
+
+  expect(toJSON()).toMatchSnapshot()
 })
 
 it('should render <GiftedChat/> with disableKeyboardController=true', () => {
-  let tree
-
-  renderer.act(() => {
-    (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
-      height: {
-        value: 0,
-      },
-    })
-
-    tree = renderer.create(
-      <GiftedChat
-        messages={messages}
-        onSend={() => {}}
-        user={{
-          _id: 1,
-        }}
-        disableKeyboardController={true}
-      />
-    )
+  (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
+    height: {
+      value: 0,
+    },
   })
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  const { toJSON } = render(
+    <GiftedChat
+      messages={messages}
+      onSend={() => {}}
+      user={{
+        _id: 1,
+      }}
+      disableKeyboardController={true}
+    />
+  )
+
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/InputToolbar.test.tsx

@@ -1,11 +1,10 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { InputToolbar } from '../GiftedChat'
 
 it('should render <InputToolbar /> and compare with snapshot', () => {
-  const tree = renderer.create(<InputToolbar />).toJSON()
+  const { toJSON } = render(<InputToolbar />)
 
-  expect(tree).toMatchSnapshot()
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/LoadEarlier.test.tsx

@@ -1,11 +1,10 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { LoadEarlier } from '../GiftedChat'
 
 it('should render <LoadEarlier /> and compare with snapshot', () => {
-  const tree = renderer.create(<LoadEarlier />).toJSON()
+  const { toJSON } = render(<LoadEarlier />)
 
-  expect(tree).toMatchSnapshot()
+  expect(toJSON()).toMatchSnapshot()
 })