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

package/src/MessageText.tsx

@@ -1,164 +1,124 @@
-import React from 'react'
+import React, { useMemo, useCallback } from 'react'
 import {
   Linking,
   StyleSheet,
-  View,
-  TextProps,
   StyleProp,
   ViewStyle,
   TextStyle,
+  View,
 } from 'react-native'
 
-import ParsedText from 'react-native-parsed-text'
+import Autolink, { AutolinkProps } from 'react-native-autolink'
+import { Match } from 'autolinker/dist/es2015'
 import { LeftRightStyle, IMessage } from './types'
-import { useChatContext } from './GiftedChatContext'
 import { error } from './logging'
 
-const WWW_URL_PATTERN = /^www\./i
-
-const { textStyle } = StyleSheet.create({
-  textStyle: {
-    fontSize: 16,
-    lineHeight: 20,
-    marginTop: 5,
-    marginBottom: 5,
-    marginLeft: 10,
-    marginRight: 10,
-  },
-})
-
-const styles = {
-  left: StyleSheet.create({
-    container: {},
-    text: {
-      color: 'black',
-      ...textStyle,
-    },
-    link: {
-      color: 'black',
-      textDecorationLine: 'underline',
-    },
-  }),
-  right: StyleSheet.create({
-    container: {},
-    text: {
-      color: 'white',
-      ...textStyle,
-    },
-    link: {
-      color: 'white',
-      textDecorationLine: 'underline',
-    },
-  }),
+export interface MessageOption {
+  title: string
+  action: (phone: string) => void
 }
 
-const DEFAULT_OPTION_TITLES = ['Call', 'Text', 'Cancel']
-
-export interface MessageTextProps<TMessage extends IMessage> {
+export type MessageTextProps<TMessage extends IMessage> = {
   position?: 'left' | 'right'
-  optionTitles?: string[]
   currentMessage: TMessage
   containerStyle?: LeftRightStyle<ViewStyle>
   textStyle?: LeftRightStyle<TextStyle>
   linkStyle?: LeftRightStyle<TextStyle>
-  textProps?: TextProps
   customTextStyle?: StyleProp<TextStyle>
-  parsePatterns?: (linkStyle: TextStyle) => []
-}
+  onPress?: (
+    message: TMessage,
+    url: string,
+    match: Match
+  ) => void
+} & Omit<AutolinkProps, 'text' | 'onPress'>
 
-export function MessageText<TMessage extends IMessage = IMessage> ({
-  currentMessage = {} as TMessage,
-  optionTitles = DEFAULT_OPTION_TITLES,
+export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
+  currentMessage = {} as IMessage,
   position = 'left',
   containerStyle,
   textStyle,
   linkStyle: linkStyleProp,
   customTextStyle,
-  parsePatterns,
-  textProps,
-}: MessageTextProps<TMessage>) {
-  const { actionSheet } = useChatContext()
+  onPress: onPressProp,
+  ...rest
+}) => {
+  const onUrlPress = useCallback((url: string) => {
+    if (/^www\./i.test(url))
+      url = `https://${url}`
 
-  // TODO: React.memo
-  // const shouldComponentUpdate = (nextProps: MessageTextProps<TMessage>) => {
-  //   return (
-  //     !!currentMessage &&
-  //     !!nextProps.currentMessage &&
-  //     currentMessage.text !== nextProps.currentMessage.text
-  //   )
-  // }
+    Linking.openURL(url).catch(e => {
+      error(e, 'No handler for URL:', url)
+    })
+  }, [])
 
-  const onUrlPress = (url: string) => {
-    // When someone sends a message that includes a website address beginning with "www." (omitting the scheme),
-    // react-native-parsed-text recognizes it as a valid url, but Linking fails to open due to the missing scheme.
-    if (WWW_URL_PATTERN.test(url))
-      onUrlPress(`https://${url}`)
-    else
-      Linking.openURL(url).catch(e => {
-        error(e, 'No handler for URL:', url)
-      })
-  }
+  const onPhonePress = useCallback((phone: string) => {
+    Linking.openURL(`tel:${phone}`).catch(e => {
+      error(e, 'No handler for telephone')
+    })
+  }, [])
 
-  const onPhonePress = (phone: string) => {
-    const options =
-      optionTitles && optionTitles.length > 0
-        ? optionTitles.slice(0, 3)
-        : DEFAULT_OPTION_TITLES
-    const cancelButtonIndex = options.length - 1
-    actionSheet().showActionSheetWithOptions(
-      {
-        options,
-        cancelButtonIndex,
-      },
-      (buttonIndex?: number) => {
-        switch (buttonIndex) {
-          case 0:
-            Linking.openURL(`tel:${phone}`).catch(e => {
-              error(e, 'No handler for telephone')
-            })
-            break
-          case 1:
-            Linking.openURL(`sms:${phone}`).catch(e => {
-              error(e, 'No handler for text')
-            })
-            break
-        }
-      }
-    )
-  }
-
-  const onEmailPress = (email: string) =>
+  const onEmailPress = useCallback((email: string) =>
     Linking.openURL(`mailto:${email}`).catch(e =>
       error(e, 'No handler for mailto')
-    )
+    ), [])
 
-  const linkStyle = [
-    styles[position].link,
+  const linkStyle = useMemo(() => StyleSheet.flatten([
+    styles.link,
     linkStyleProp?.[position],
-  ]
+  ]), [position, linkStyleProp])
+
+  const handlePress = useCallback((url: string, match: Match) => {
+    const type = match.getType()
+
+    if (onPressProp)
+      onPressProp(currentMessage, url, match)
+    else if (type === 'url')
+      onUrlPress(url)
+    else if (type === 'phone')
+      onPhonePress(url)
+    else if (type === 'email')
+      onEmailPress(url)
+  }, [onUrlPress, onPhonePress, onEmailPress, onPressProp, currentMessage])
+
+  const style = useMemo(() => [
+    styles[`text_${position}`],
+    textStyle?.[position],
+    customTextStyle,
+  ], [position, textStyle, customTextStyle])
+
   return (
-    <View
-      style={[
-        styles[position].container,
-        containerStyle?.[position],
-      ]}
-    >
-      <ParsedText
-        style={[
-          styles[position].text,
-          textStyle?.[position],
-          customTextStyle,
-        ]}
-        parse={[
-          ...(parsePatterns ? parsePatterns(linkStyle as unknown as TextStyle) : []),
-          { type: 'url', style: linkStyle, onPress: onUrlPress },
-          { type: 'phone', style: linkStyle, onPress: onPhonePress },
-          { type: 'email', style: linkStyle, onPress: onEmailPress },
-        ]}
-        childrenProps={{ ...textProps }}
-      >
-        {currentMessage!.text}
-      </ParsedText>
+    <View style={[styles.container, containerStyle?.[position]]}>
+      <Autolink
+        style={style}
+        {...rest}
+        text={currentMessage!.text}
+        email
+        link
+        linkStyle={linkStyle}
+        onPress={handlePress}
+      />
     </View>
   )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 5,
+    marginBottom: 5,
+    marginLeft: 10,
+    marginRight: 10,
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 20,
+  },
+  text_left: {
+    color: 'black',
+  },
+  text_right: {
+    color: 'white',
+  },
+  link: {
+    textDecorationLine: 'underline',
+  },
+})

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,
@@ -29,6 +29,7 @@ export interface SystemMessageProps<TMessage extends IMessage> {
   containerStyle?: StyleProp<ViewStyle>
   wrapperStyle?: StyleProp<ViewStyle>
   textStyle?: StyleProp<TextStyle>
+  children?: React.ReactNode
 }
 
 export function SystemMessage<TMessage extends IMessage = IMessage> ({
@@ -36,14 +37,23 @@ export function SystemMessage<TMessage extends IMessage = IMessage> ({
   containerStyle,
   wrapperStyle,
   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}>
-        <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

@@ -0,0 +1,52 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+import { View, Text } from 'react-native'
+import DayAnimated from '../MessageContainer/components/DayAnimated'
+import { DayProps } from '../Day'
+
+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(
+      <DayAnimated
+        scrolledY={mockScrolledY}
+        daysPositions={mockDaysPositions}
+        listHeight={mockListHeight}
+        messages={[mockMessage]}
+        isLoadingEarlier={false}
+      />
+    )
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  it('should use custom renderDay when provided', () => {
+    const customRenderDay = jest.fn((props: DayProps) => (
+      <View testID='custom-day'>
+        <Text>Custom Day: {props.createdAt}</Text>
+      </View>
+    ))
+
+    const { toJSON } = render(
+      <DayAnimated
+        scrolledY={mockScrolledY}
+        daysPositions={mockDaysPositions}
+        listHeight={mockListHeight}
+        messages={[mockMessage]}
+        isLoadingEarlier={false}
+        renderDay={customRenderDay}
+      />
+    )
+
+    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()
 })