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

package/src/MessageImage.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   Image,
   StyleSheet,
@@ -8,11 +8,16 @@ import {
   StyleProp,
   ImageStyle,
   ImageURISource,
+  Modal,
+  TouchableOpacity,
+  LayoutChangeEvent,
+  useWindowDimensions,
 } from 'react-native'
-// TODO: support web
-import Lightbox, { LightboxProps } from 'react-native-lightbox-v2'
+import { BaseButton, GestureHandlerRootView, Text } from 'react-native-gesture-handler'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import Zoom from 'react-native-zoom-reanimated'
+import commonStyles from './styles'
 import { IMessage } from './types'
-import stylesCommon from './styles'
 
 const styles = StyleSheet.create({
   image: {
@@ -22,8 +27,25 @@ const styles = StyleSheet.create({
     margin: 3,
     resizeMode: 'cover',
   },
-  imageActive: {
-    resizeMode: 'contain',
+  modalContent: {
+    backgroundColor: '#000',
+  },
+  modalImageContainer: {
+    width: '100%',
+    height: '100%',
+  },
+
+  closeButtonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  closeButtonContent: {
+    padding: 10,
+  },
+  closeButtonIcon: {
+    fontSize: 20,
+    lineHeight: 20,
+    color: 'white',
   },
 })
 
@@ -33,35 +55,127 @@ export interface MessageImageProps<TMessage extends IMessage> {
   imageSourceProps?: Partial<ImageURISource>
   imageStyle?: StyleProp<ImageStyle>
   imageProps?: Partial<ImageProps>
-  lightboxProps?: LightboxProps
 }
 
 export function MessageImage<TMessage extends IMessage = IMessage> ({
   containerStyle,
-  lightboxProps,
   imageProps,
   imageSourceProps,
   imageStyle,
   currentMessage,
 }: MessageImageProps<TMessage>) {
+  const [isModalVisible, setIsModalVisible] = useState(false)
+  const [imageDimensions, setImageDimensions] = useState<{ width: number, height: number }>()
+  const windowDimensions = useWindowDimensions()
+
+  const insets = useSafeAreaInsets()
+
+  const imageSource = useMemo(() => ({
+    ...imageSourceProps,
+    uri: currentMessage?.image,
+  }), [imageSourceProps, currentMessage?.image])
+
+  const isImageSourceChanged = useRef(true)
+
+  const computedImageStyle = useMemo(() => [
+    styles.image,
+    imageStyle,
+  ], [imageStyle])
+
+  const handleImagePress = useCallback(() => {
+    if (!imageSource.uri)
+      return
+
+    setIsModalVisible(true)
+
+    if (isImageSourceChanged.current || !imageDimensions)
+      Image.getSize(imageSource.uri, (width, height) => {
+        setImageDimensions({ width, height })
+      })
+  }, [imageSource.uri, imageDimensions])
+
+  const handleModalClose = useCallback(() => {
+    setIsModalVisible(false)
+  }, [])
+
+  const handleImageLayout = useCallback((e: LayoutChangeEvent) => {
+    setImageDimensions({
+      width: e.nativeEvent.layout.width,
+      height: e.nativeEvent.layout.height,
+    })
+  }, [])
+
+  const modalImageDimensions = useMemo(() => {
+    if (!imageDimensions)
+      return undefined
+
+    const aspectRatio = imageDimensions.width / imageDimensions.height
+
+    let width = windowDimensions.width
+    let height = width / aspectRatio
+
+    if (height > windowDimensions.height) {
+      height = windowDimensions.height
+      width = height * aspectRatio
+    }
+
+    return {
+      width,
+      height,
+    }
+  }, [imageDimensions, windowDimensions.height, windowDimensions.width])
+
+  useEffect(() => {
+    isImageSourceChanged.current = true
+  }, [imageSource.uri])
+
   if (currentMessage == null)
     return null
 
   return (
     <View style={containerStyle}>
-      {/* @ts-expect-error: Lightbox types are not fully compatible */}
-      <Lightbox
-        activeProps={{
-          style: [stylesCommon.fill, styles.imageActive],
-        }}
-        {...lightboxProps}
-      >
+      <TouchableOpacity onPress={handleImagePress}>
         <Image
           {...imageProps}
-          style={[styles.image, imageStyle]}
-          source={{ ...imageSourceProps, uri: currentMessage.image }}
+          style={computedImageStyle}
+          source={imageSource}
+          onLayout={handleImageLayout}
         />
-      </Lightbox>
+      </TouchableOpacity>
+
+      <Modal
+        visible={isModalVisible}
+        onRequestClose={handleModalClose}
+        animationType='slide'
+        transparent={false}
+      >
+        <GestureHandlerRootView style={commonStyles.fill}>
+          <View style={[commonStyles.fill, styles.modalContent, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+
+            {/* close button */}
+            <View style={styles.closeButtonContainer}>
+              <BaseButton onPress={handleModalClose}>
+                <View style={styles.closeButtonContent}>
+                  <Text style={styles.closeButtonIcon}>
+                    {'X'}
+                  </Text>
+                </View>
+              </BaseButton>
+            </View>
+
+            <View style={[commonStyles.fill, commonStyles.centerItems]}>
+              <Zoom>
+                <Image
+                  style={modalImageDimensions}
+                  source={imageSource}
+                  resizeMode='contain'
+                  {...imageProps}
+                />
+              </Zoom>
+            </View>
+          </View>
+        </GestureHandlerRootView>
+      </Modal>
     </View>
   )
 }

package/src/MessageText.tsx

@@ -1,21 +1,15 @@
 import React, { useMemo, useCallback } from 'react'
 import {
-  Linking,
   StyleSheet,
   StyleProp,
   ViewStyle,
   TextStyle,
+  View,
 } from 'react-native'
 
-import Autolink, { AutolinkProps } from 'react-native-autolink'
 import { Match } from 'autolinker/dist/es2015'
+import Autolink, { AutolinkProps } from 'react-native-autolink'
 import { LeftRightStyle, IMessage } from './types'
-import { error } from './logging'
-
-export interface MessageOption {
-  title: string
-  action: (phone: string) => void
-}
 
 export type MessageTextProps<TMessage extends IMessage> = {
   position?: 'left' | 'right'
@@ -41,82 +35,48 @@ 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}`
-
-    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 onEmailPress = useCallback((email: string) =>
-    Linking.openURL(`mailto:${email}`).catch(e =>
-      error(e, 'No handler for mailto')
-    ), [])
-
   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(() => [
-    containerStyle?.[position],
     styles[`text_${position}`],
     textStyle?.[position],
     customTextStyle,
-  ], [containerStyle, position, textStyle, customTextStyle])
+  ], [position, textStyle, customTextStyle])
+
+  const handlePress = useCallback((url: string, match: Match) => {
+    onPressProp?.(currentMessage, url, match)
+  }, [onPressProp, currentMessage])
 
   return (
-    <Autolink
-      style={style}
-      {...rest}
-      text={currentMessage!.text}
-      email
-      link
-      linkStyle={linkStyle}
-      onPress={handlePress}
-    />
+    <View style={[styles.container, containerStyle?.[position]]}>
+      <Autolink
+        email
+        phone
+        link
+        {...rest}
+        onPress={onPressProp ? handlePress : undefined}
+        linkStyle={linkStyle}
+        style={style}
+        text={currentMessage!.text}
+      />
+    </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 { View, Text, StyleSheet } from 'react-native'
 import Color from './Color'
-import { View, Text } 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

@@ -3,15 +3,15 @@ import {
   Text,
   StyleSheet,
   View,
-  TouchableOpacity,
   StyleProp,
   ViewStyle,
   TextStyle,
 } from 'react-native'
-import { IMessage, Reply } from './types'
 import Color from './Color'
+import { TouchableOpacity } from './components/TouchableOpacity'
 import { warning } from './logging'
 import stylesCommon from './styles'
+import { IMessage, Reply } from './types'
 
 const styles = StyleSheet.create({
   container: {
@@ -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

@@ -2,17 +2,17 @@ import React, { useMemo, useCallback } from 'react'
 import {
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
   StyleProp,
   ViewStyle,
   TextStyle,
-  TouchableOpacityProps,
+  useColorScheme,
 } from 'react-native'
-
 import Color from './Color'
-import { IMessage } from './types'
+
+import { TouchableOpacity, TouchableOpacityProps } from './components/TouchableOpacity'
 import { TEST_ID } from './Constant'
+import { IMessage } from './types'
 
 const styles = StyleSheet.create({
   container: {
@@ -28,6 +28,9 @@ const styles = StyleSheet.create({
     marginLeft: 10,
     marginRight: 10,
   },
+  text_dark: {
+    color: '#4da6ff',
+  },
 })
 
 export interface SendProps<TMessage extends IMessage> {
@@ -56,6 +59,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 +86,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,
@@ -8,8 +8,8 @@ import {
   TextStyle,
 } from 'react-native'
 import Color from './Color'
-import { IMessage } from './types'
 import stylesCommon from './styles'
+import { IMessage } from './types'
 
 const styles = StyleSheet.create({
   container: {
@@ -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,11 +1,11 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { StyleSheet, Text, View, ViewStyle, TextStyle } from 'react-native'
 import dayjs from 'dayjs'
 
 import Color from './Color'
 import { TIME_FORMAT } from './Constant'
-import { LeftRightStyle, IMessage } from './types'
 import { useChatContext } from './GiftedChatContext'
+import { LeftRightStyle, IMessage } from './types'
 
 const { containerStyle } = StyleSheet.create({
   containerStyle: {
@@ -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

@@ -9,10 +9,10 @@ import Animated, {
   withSequence,
   withTiming,
 } from 'react-native-reanimated'
-import { TypingIndicatorProps } from './types'
-
 import stylesCommon from '../styles'
+
 import styles from './styles'
+import { TypingIndicatorProps } from './types'
 
 export * from './types'
 
@@ -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()
 })