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

package/src/MessageContainer/index.tsx

@@ -3,31 +3,30 @@ import {
   View,
   Pressable,
   Text,
-  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 { LoadEarlierMessages } from '../LoadEarlierMessages'
+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>) {
@@ -36,17 +35,14 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     user,
     isTyping = false,
     renderChatEmpty: renderChatEmptyProp,
-    onLoadEarlier,
     inverted = true,
-    loadEarlier = false,
     listProps,
     extraData,
     isScrollToBottomEnabled = false,
     scrollToBottomOffset = 200,
     alignTop = false,
     scrollToBottomStyle,
-    infiniteScroll = false,
-    isLoadingEarlier = false,
+    loadEarlierMessagesProps,
     renderTypingIndicator: renderTypingIndicatorProp,
     renderFooter: renderFooterProp,
     renderLoadEarlier: renderLoadEarlierProp,
@@ -83,15 +79,15 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
   }, [renderFooterProp, renderTypingIndicator, props])
 
   const renderLoadEarlier = useCallback(() => {
-    if (loadEarlier) {
+    if (loadEarlierMessagesProps?.onPress && loadEarlierMessagesProps?.isAvailable) {
       if (renderLoadEarlierProp)
-        return renderLoadEarlierProp(props)
+        return renderLoadEarlierProp(loadEarlierMessagesProps)
 
-      return <LoadEarlier {...props} />
+      return <LoadEarlierMessages {...loadEarlierMessagesProps} />
     }
 
     return null
-  }, [loadEarlier, renderLoadEarlierProp, props])
+  }, [loadEarlierMessagesProps, renderLoadEarlierProp])
 
   const changeScrollToBottomVisibility: (isVisible: boolean) => void = useCallbackThrottled((isVisible: boolean) => {
     if (isScrollingDown.value && isVisible)
@@ -290,14 +286,13 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
 
   const onEndReached = useCallback(() => {
     if (
-      infiniteScroll &&
-      loadEarlier &&
-      onLoadEarlier &&
-      !isLoadingEarlier &&
-      Platform.OS !== 'web'
+      loadEarlierMessagesProps?.isInfiniteScrollEnabled &&
+      loadEarlierMessagesProps?.onPress &&
+      loadEarlierMessagesProps?.isAvailable &&
+      !loadEarlierMessagesProps?.isLoading
     )
-      onLoadEarlier()
-  }, [infiniteScroll, loadEarlier, onLoadEarlier, isLoadingEarlier])
+      loadEarlierMessagesProps.onPress()
+  }, [loadEarlierMessagesProps])
 
   const keyExtractor = useCallback((item: unknown) => (item as TMessage)._id.toString(), [])
 
@@ -420,7 +415,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         listHeight={listHeight}
         renderDay={renderDayProp}
         messages={messages}
-        isLoadingEarlier={isLoadingEarlier}
+        isLoading={loadEarlierMessagesProps?.isLoading ?? false}
       />
     </View>
   )

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 { LoadEarlierMessagesProps } from '../LoadEarlierMessages'
 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>>
@@ -28,8 +28,6 @@ export interface MessageContainerProps<TMessage extends IMessage = IMessage>
   listProps?: ListProps<TMessage>
   /** Reverses display order of messages; default is true */
   inverted?: boolean
-  /** Enables the "Load earlier messages" button */
-  loadEarlier?: boolean
   /** Controls whether or not the message bubbles appear at the top of the chat */
   alignTop?: boolean
   /** Enables the isScrollToBottomEnabled Component */
@@ -49,19 +47,15 @@ export interface MessageContainerProps<TMessage extends IMessage = IMessage>
   /** Custom day above a message */
   renderDay?(props: DayProps): React.ReactNode
   /** Custom "Load earlier messages" button */
-  renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode
+  renderLoadEarlier?(props: LoadEarlierMessagesProps): React.ReactNode
   /** Custom typing indicator */
   renderTypingIndicator?(): React.ReactNode
   /** Scroll to bottom custom component */
   scrollToBottomComponent?(): React.ReactNode
-  /** Callback when loading earlier messages */
-  onLoadEarlier?(): void
   /** Callback when quick reply is sent */
   onQuickReply?(replies: Reply[]): void
-  /** Infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist */
-  infiniteScroll?: boolean
-  /** Display an ActivityIndicator when loading earlier messages */
-  isLoadingEarlier?: boolean
+  /** Props to pass to the LoadEarlierMessages component. The LoadEarlierMessages button is only visible when isAvailable is true. Includes isAvailable (controls button visibility), isInfiniteScrollEnabled (infinite scroll up when reach the top of messages container, automatically call onPress function if it exists - not yet supported for web), onPress (callback when button is pressed), isLoading (display loading indicator), label (override default "Load earlier messages" text), and styling props (containerStyle, wrapperStyle, textStyle, activityIndicatorStyle, activityIndicatorColor, activityIndicatorSize). */
+  loadEarlierMessagesProps?: LoadEarlierMessagesProps
   /** Custom scroll event handler */
   handleOnScroll?(event: ReanimatedScrollEvent): void
   /** Style for TypingIndicator component */

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 }
@@ -23,7 +23,7 @@ describe('DayAnimated', () => {
         daysPositions={mockDaysPositions}
         listHeight={mockListHeight}
         messages={[mockMessage]}
-        isLoadingEarlier={false}
+        isLoading={false}
       />
     )
     expect(toJSON()).toMatchSnapshot()
@@ -42,7 +42,7 @@ describe('DayAnimated', () => {
         daysPositions={mockDaysPositions}
         listHeight={mockListHeight}
         messages={[mockMessage]}
-        isLoadingEarlier={false}
+        isLoading={false}
         renderDay={customRenderDay}
       />
     )

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__/LoadEarlier.test.tsx

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

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