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

package/src/InputToolbar.tsx

@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react'
 import { StyleSheet, View, StyleProp, ViewStyle, useColorScheme } from 'react-native'
 
-import { Composer, ComposerProps } from './Composer'
-import { Send, SendProps } from './Send'
 import { Actions, ActionsProps } from './Actions'
 import Color from './Color'
+import { Composer, ComposerProps } from './Composer'
+import { Send, SendProps } from './Send'
 import { IMessage } from './types'
 
 export interface InputToolbarProps<TMessage extends IMessage> {

package/src/LoadEarlier.tsx

@@ -4,13 +4,13 @@ import {
   Platform,
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
   StyleProp,
   ViewStyle,
   TextStyle,
 } from 'react-native'
 import Color from './Color'
+import { TouchableOpacity } from './components/TouchableOpacity'
 import stylesCommon from './styles'
 
 const styles = StyleSheet.create({
@@ -52,7 +52,7 @@ export interface LoadEarlierProps {
   onLoadEarlier?(): void
 }
 
-export function LoadEarlier ({
+export const LoadEarlier: React.FC<LoadEarlierProps> = ({
   isLoadingEarlier = false,
   onLoadEarlier = () => {},
   label = 'Load earlier messages',
@@ -62,7 +62,7 @@ export function LoadEarlier ({
   activityIndicatorColor = 'white',
   activityIndicatorSize = 'small',
   activityIndicatorStyle,
-}: LoadEarlierProps): React.ReactElement {
+}) => {
   const loadingContent = useMemo(() => (
     <View>
       <Text style={[styles.text, textStyle, { opacity: 0 }]}>

package/src/Message/index.tsx

@@ -1,19 +1,18 @@
 import React, { memo, useCallback } from 'react'
 import { View } from 'react-native'
-import isEqual from 'lodash.isequal'
 
 import { Avatar } from '../Avatar'
 import Bubble from '../Bubble'
 import { SystemMessage } from '../SystemMessage'
 
-import { isSameUser } from '../utils'
 import { IMessage } from '../types'
-import { MessageProps } from './types'
+import { isSameUser } from '../utils'
 import styles from './styles'
+import { MessageProps } from './types'
 
 export * from './types'
 
-let Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>) => {
+const Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>) => {
   const {
     currentMessage,
     renderBubble: renderBubbleProp,
@@ -113,17 +112,4 @@ let Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>)
   )
 }
 
-Message = memo(Message, (props, nextProps) => {
-  const shouldUpdate =
-    props.shouldUpdateMessage?.(props, nextProps) ||
-    !isEqual(props.currentMessage!, nextProps.currentMessage!) ||
-    !isEqual(props.previousMessage, nextProps.previousMessage) ||
-    !isEqual(props.nextMessage, nextProps.nextMessage)
-
-  if (shouldUpdate)
-    return false
-
-  return true
-})
-
-export default Message
+export default memo(Message)

package/src/Message/types.ts

@@ -1,9 +1,9 @@
 import { ViewStyle, LayoutChangeEvent } from 'react-native'
 import { AvatarProps } from '../Avatar'
-import { SystemMessageProps } from '../SystemMessage'
+import { BubbleProps } from '../Bubble'
 import { DayProps } from '../Day'
+import { SystemMessageProps } from '../SystemMessage'
 import { IMessage, User, LeftRightStyle } from '../types'
-import { BubbleProps } from '../Bubble'
 
 export interface MessageProps<TMessage extends IMessage> {
   showUserAvatar?: boolean

package/src/MessageAudio.tsx

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

package/src/MessageContainer/components/DayAnimated/index.tsx

@@ -2,12 +2,12 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { LayoutChangeEvent } from 'react-native'
 import Animated, { interpolate, useAnimatedStyle, useDerivedValue, useSharedValue, useAnimatedReaction, withTiming, runOnJS } from 'react-native-reanimated'
 import { Day } from '../../../Day'
+import stylesCommon from '../../../styles'
 import { isSameDay } from '../../../utils'
 import { useAbsoluteScrolledPositionToBottomOfDay, useRelativeScrolledPositionToBottomOfDay } from '../Item'
-import { DayAnimatedProps } from './types'
 
-import stylesCommon from '../../../styles'
 import styles from './styles'
+import { DayAnimatedProps } from './types'
 
 export * from './types'
 

package/src/MessageContainer/components/Item/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef, useCallback, useMemo } from 'react'
 import { LayoutChangeEvent, View } from 'react-native'
-import { IMessage } from '../../../types'
-import Message, { MessageProps } from '../../../Message'
 import Animated, { interpolate, useAnimatedStyle, useDerivedValue, useSharedValue } from 'react-native-reanimated'
-import { DaysPositions } from '../../types'
 import { Day } from '../../../Day'
+import Message, { MessageProps } from '../../../Message'
+import { IMessage } from '../../../types'
 import { isSameDay } from '../../../utils'
+import { DaysPositions } from '../../types'
 import { ItemProps } from './types'
 
 export * from './types'

package/src/MessageContainer/components/Item/types.ts

@@ -1,5 +1,5 @@
-import { MessageContainerProps, DaysPositions } from '../../types'
 import { IMessage } from '../../../types'
+import { MessageContainerProps, DaysPositions } from '../../types'
 
 export interface ItemProps<TMessage extends IMessage> extends MessageContainerProps<TMessage> {
   currentMessage: TMessage

package/src/MessageContainer/index.tsx

@@ -6,28 +6,28 @@ import {
   Platform,
   LayoutChangeEvent,
   ListRenderItemInfo,
-  FlatList,
   CellRendererProps,
 } from 'react-native'
+import { FlatList } from 'react-native-gesture-handler'
 import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
+import { LoadEarlier } from '../LoadEarlier'
+import { warning } from '../logging'
 import { ReanimatedScrollEvent } from '../reanimatedCompat'
-import DayAnimated from './components/DayAnimated'
-import Item from './components/Item'
 
-import { LoadEarlier } from '../LoadEarlier'
+import stylesCommon from '../styles'
 import { IMessage } from '../types'
 import TypingIndicator from '../TypingIndicator'
-import { MessageContainerProps, DaysPositions } from './types'
-import { ItemProps } from './components/Item/types'
+import { isSameDay, useCallbackThrottled } from '../utils'
+import DayAnimated from './components/DayAnimated'
 
-import { warning } from '../logging'
-import stylesCommon from '../styles'
+import Item from './components/Item'
+import { ItemProps } from './components/Item/types'
 import styles from './styles'
-import { isSameDay, useCallbackThrottled } from '../utils'
+import { MessageContainerProps, DaysPositions } from './types'
 
 export * from './types'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+ 
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) as React.ComponentType<any>
 
 function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageContainerProps<TMessage>) {

package/src/MessageContainer/types.ts

@@ -3,13 +3,13 @@ import {
   FlatListProps,
   StyleProp,
   ViewStyle,
-  FlatList,
 } from 'react-native'
+import { FlatList } from 'react-native-gesture-handler'
 
 import { LoadEarlierProps } from '../LoadEarlier'
 import { MessageProps } from '../Message'
-import { User, IMessage, Reply, DayProps } from '../types'
 import { ReanimatedScrollEvent } from '../reanimatedCompat'
+import { User, IMessage, Reply, DayProps } from '../types'
 import { TypingIndicatorProps } from '../TypingIndicator/types'
 
 export type ListProps<TMessage extends IMessage = IMessage> = Partial<FlatListProps<TMessage>>

package/src/MessageImage.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } 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,47 +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 activePropsStyle = useMemo(() => [{
-    style: [stylesCommon.fill, styles.imageActive],
-  }], [])
+  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={activePropsStyle}
-        {...lightboxProps}
-      >
+      <TouchableOpacity onPress={handleImagePress}>
         <Image
           {...imageProps}
           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,6 +1,5 @@
 import React, { useMemo, useCallback } from 'react'
 import {
-  Linking,
   StyleSheet,
   StyleProp,
   ViewStyle,
@@ -8,15 +7,9 @@ import {
   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'
@@ -42,60 +35,32 @@ export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
   onPress: onPressProp,
   ...rest
 }) => {
-  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(() => [
     styles[`text_${position}`],
     textStyle?.[position],
     customTextStyle,
   ], [position, textStyle, customTextStyle])
 
+  const handlePress = useCallback((url: string, match: Match) => {
+    onPressProp?.(currentMessage, url, match)
+  }, [onPressProp, currentMessage])
+
   return (
     <View style={[styles.container, containerStyle?.[position]]}>
       <Autolink
-        style={style}
-        {...rest}
-        text={currentMessage!.text}
         email
+        phone
         link
+        {...rest}
+        onPress={onPressProp ? handlePress : undefined}
         linkStyle={linkStyle}
-        onPress={handlePress}
+        style={style}
+        text={currentMessage!.text}
       />
     </View>
   )

package/src/MessageVideo.tsx

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

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: {

package/src/Send.tsx

@@ -2,18 +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: {

package/src/SystemMessage.tsx

@@ -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: {

package/src/Time.tsx

@@ -4,8 +4,8 @@ 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: {

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'
 

package/src/__tests__/DayAnimated.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { render } from '@testing-library/react-native'
 import { View, Text } from 'react-native'
-import DayAnimated from '../MessageContainer/components/DayAnimated'
+import { render } from '@testing-library/react-native'
 import { DayProps } from '../Day'
+import DayAnimated from '../MessageContainer/components/DayAnimated'
 
 const mockDaysPositions = { value: {} }
 const mockScrolledY = { value: 0 }

package/src/__tests__/GiftedChat.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { GiftedChat } from '../GiftedChat'
 import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller'
+import { GiftedChat } from '../GiftedChat'
 
 const messages = [
   {
@@ -36,7 +36,7 @@ it('should render <GiftedChat/> and compare with snapshot', () => {
   expect(toJSON()).toMatchSnapshot()
 })
 
-it('should render <GiftedChat/> with disableKeyboardController=true', () => {
+it('should render <GiftedChat/> with isKeyboardInternallyHandled=false', () => {
   (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
     height: {
       value: 0,
@@ -50,7 +50,7 @@ it('should render <GiftedChat/> with disableKeyboardController=true', () => {
       user={{
         _id: 1,
       }}
-      disableKeyboardController={true}
+      isKeyboardInternallyHandled={false}
     />
   )
 

package/src/__tests__/__snapshots__/Actions.test.tsx.snap

@@ -22,7 +22,34 @@ exports[`should render <Actions /> and compare with snapshot 1`] = `
   accessible={true}
   collapsable={false}
   focusable={true}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "opacity": 1,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      [
+        {
+          "height": 26,
+          "marginBottom": 10,
+          "marginLeft": 10,
+          "width": 26,
+        },
+        undefined,
+      ],
+    ]
+  }
+  onBlur={[Function]}
   onClick={[Function]}
+  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -30,13 +57,18 @@ exports[`should render <Actions /> and compare with snapshot 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    {
-      "height": 26,
-      "marginBottom": 10,
-      "marginLeft": 10,
-      "opacity": 1,
-      "width": 26,
-    }
+    [
+      {
+        "height": 26,
+        "marginBottom": 10,
+        "marginLeft": 10,
+        "width": 26,
+      },
+      undefined,
+      {
+        "opacity": 1,
+      },
+    ]
   }
 >
   <View