react-native-gifted-chat 2.9.0-alpha.0 → 3.0.0-alpha.1

package/src/MessageImage.tsx

@@ -8,46 +8,24 @@ import {
   StyleProp,
   ImageStyle,
   ImageURISource,
-  Modal,
   TouchableOpacity,
   LayoutChangeEvent,
   useWindowDimensions,
+  StatusBar,
 } from 'react-native'
 import { BaseButton, GestureHandlerRootView, Text } from 'react-native-gesture-handler'
+import { OverKeyboardView } from 'react-native-keyboard-controller'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  runOnJS,
+  Easing,
+} from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import Zoom from 'react-native-zoom-reanimated'
+import { IMessage } from './Models'
 import commonStyles from './styles'
-import { IMessage } from './types'
-
-const styles = StyleSheet.create({
-  image: {
-    width: 150,
-    height: 100,
-    borderRadius: 13,
-    margin: 3,
-    resizeMode: 'cover',
-  },
-  modalContent: {
-    backgroundColor: '#000',
-  },
-  modalImageContainer: {
-    width: '100%',
-    height: '100%',
-  },
-
-  closeButtonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-  },
-  closeButtonContent: {
-    padding: 10,
-  },
-  closeButtonIcon: {
-    fontSize: 20,
-    lineHeight: 20,
-    color: 'white',
-  },
-})
 
 export interface MessageImageProps<TMessage extends IMessage> {
   currentMessage: TMessage
@@ -70,6 +48,10 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
 
   const insets = useSafeAreaInsets()
 
+  // Animation values
+  const modalOpacity = useSharedValue(0)
+  const modalScale = useSharedValue(0.9)
+
   const imageSource = useMemo(() => ({
     ...imageSourceProps,
     uri: currentMessage?.image,
@@ -88,15 +70,23 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
 
     setIsModalVisible(true)
 
+    // Animate modal entrance
+    modalOpacity.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
+    modalScale.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
+
     if (isImageSourceChanged.current || !imageDimensions)
       Image.getSize(imageSource.uri, (width, height) => {
         setImageDimensions({ width, height })
       })
-  }, [imageSource.uri, imageDimensions])
+  }, [imageSource.uri, imageDimensions, modalOpacity, modalScale])
 
   const handleModalClose = useCallback(() => {
-    setIsModalVisible(false)
-  }, [])
+    // Animate modal exit
+    modalOpacity.value = withTiming(0, { duration: 200, easing: Easing.in(Easing.ease) })
+    modalScale.value = withTiming(0.9, { duration: 200, easing: Easing.in(Easing.ease) }, () => {
+      runOnJS(setIsModalVisible)(false)
+    })
+  }, [modalOpacity, modalScale])
 
   const handleImageLayout = useCallback((e: LayoutChangeEvent) => {
     setImageDimensions({
@@ -125,6 +115,11 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
     }
   }, [imageDimensions, windowDimensions.height, windowDimensions.width])
 
+  const modalAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: modalOpacity.value,
+    transform: [{ scale: modalScale.value }],
+  }), [modalOpacity, modalScale])
+
   useEffect(() => {
     isImageSourceChanged.current = true
   }, [imageSource.uri])
@@ -140,42 +135,80 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
           style={computedImageStyle}
           source={imageSource}
           onLayout={handleImageLayout}
+          resizeMode='cover'
         />
       </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>
+      {isModalVisible && (
+        <OverKeyboardView visible={isModalVisible}>
+          <StatusBar animated barStyle='dark-content' />
+          <Animated.View style={[styles.modalOverlay, modalAnimatedStyle]}>
+            <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>
-              </BaseButton>
-            </View>
-
-            <View style={[commonStyles.fill, commonStyles.centerItems]}>
-              <Zoom>
-                <Image
-                  style={modalImageDimensions}
-                  source={imageSource}
-                  resizeMode='contain'
-                  {...imageProps}
-                />
-              </Zoom>
-            </View>
-          </View>
-        </GestureHandlerRootView>
-      </Modal>
+              </View>
+            </GestureHandlerRootView>
+          </Animated.View>
+        </OverKeyboardView>
+      )}
     </View>
   )
 }
+
+const styles = StyleSheet.create({
+  image: {
+    width: 150,
+    height: 100,
+    borderRadius: 13,
+    margin: 3,
+  },
+  modalOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 1000,
+  },
+  modalContent: {
+    backgroundColor: '#000',
+  },
+  modalImageContainer: {
+    width: '100%',
+    height: '100%',
+  },
+
+  closeButtonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  closeButtonContent: {
+    padding: 20,
+  },
+  closeButtonIcon: {
+    fontSize: 20,
+    lineHeight: 20,
+    color: 'white',
+  },
+})

package/src/MessageText.tsx

@@ -9,7 +9,7 @@ import {
 
 import { Match } from 'autolinker/dist/es2015'
 import Autolink, { AutolinkProps } from 'react-native-autolink'
-import { LeftRightStyle, IMessage } from './types'
+import { LeftRightStyle, IMessage } from './Models'
 
 export type MessageTextProps<TMessage extends IMessage> = {
   position?: 'left' | 'right'

package/src/Models.ts

@@ -0,0 +1,63 @@
+import { StyleProp, ViewStyle } from 'react-native'
+
+export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
+
+export interface LeftRightStyle<T> {
+  left?: StyleProp<T>
+  right?: StyleProp<T>
+}
+
+type renderFunction = (x: unknown) => React.ReactNode
+
+export interface User {
+  _id: string | number
+  name?: string
+  avatar?: string | number | renderFunction
+}
+
+export interface Reply {
+  title: string
+  value: string
+  messageId?: number | string
+}
+
+export interface QuickReplies {
+  type: 'radio' | 'checkbox'
+  values: Reply[]
+  keepIt?: boolean
+}
+
+export interface IMessage {
+  _id: string | number
+  text: string
+  createdAt: Date | number
+  user: User
+  image?: string
+  video?: string
+  audio?: string
+  system?: boolean
+  sent?: boolean
+  received?: boolean
+  pending?: boolean
+  quickReplies?: QuickReplies
+  location?: {
+    latitude: number
+    longitude: number
+  }
+}
+
+export type IChatMessage = IMessage
+
+export interface MessageVideoProps<TMessage extends IMessage> {
+  currentMessage: TMessage
+  containerStyle?: StyleProp<ViewStyle>
+  videoStyle?: StyleProp<ViewStyle>
+  videoProps?: object
+}
+
+export interface MessageAudioProps<TMessage extends IMessage> {
+  currentMessage: TMessage
+  containerStyle?: StyleProp<ViewStyle>
+  audioStyle?: StyleProp<ViewStyle>
+  audioProps?: object
+}

package/src/QuickReplies.tsx

@@ -10,8 +10,8 @@ import {
 import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
 import { warning } from './logging'
+import { IMessage, Reply } from './Models'
 import stylesCommon from './styles'
-import { IMessage, Reply } from './types'
 
 const styles = StyleSheet.create({
   container: {

package/src/Send.tsx

@@ -12,26 +12,7 @@ import { Color } from './Color'
 
 import { TouchableOpacity, TouchableOpacityProps } from './components/TouchableOpacity'
 import { TEST_ID } from './Constant'
-import { IMessage } from './types'
-
-const styles = StyleSheet.create({
-  container: {
-    height: 44,
-    justifyContent: 'flex-end',
-  },
-  text: {
-    color: Color.defaultBlue,
-    fontWeight: '600',
-    fontSize: 17,
-    backgroundColor: Color.backgroundTransparent,
-    marginBottom: 12,
-    marginLeft: 10,
-    marginRight: 10,
-  },
-  text_dark: {
-    color: '#4da6ff',
-  },
-})
+import { IMessage } from './Models'
 
 export interface SendProps<TMessage extends IMessage> {
   text?: string
@@ -39,8 +20,7 @@ export interface SendProps<TMessage extends IMessage> {
   containerStyle?: StyleProp<ViewStyle>
   textStyle?: StyleProp<TextStyle>
   children?: React.ReactNode
-  alwaysShowSend?: boolean
-  disabled?: boolean
+  isSendButtonAlwaysVisible?: boolean
   sendButtonProps?: Partial<TouchableOpacityProps>
   onSend?(
     messages: Partial<TMessage> | Partial<TMessage>[],
@@ -54,21 +34,22 @@ export const Send = <TMessage extends IMessage = IMessage>({
   children,
   textStyle,
   label = 'Send',
-  alwaysShowSend = false,
-  disabled = false,
+  isSendButtonAlwaysVisible = false,
   sendButtonProps,
   onSend,
 }: SendProps<TMessage>) => {
   const colorScheme = useColorScheme()
 
   const handleOnPress = useCallback(() => {
-    if (text && onSend)
-      onSend({ text: text.trim() } as Partial<TMessage>, true)
+    const message = { text: text?.trim() } as Partial<TMessage>
+
+    if (onSend && message.text?.length)
+      onSend(message, true)
   }, [text, onSend])
 
   const showSend = useMemo(
-    () => alwaysShowSend || (text && text.trim().length > 0),
-    [alwaysShowSend, text]
+    () => isSendButtonAlwaysVisible || !!text?.trim().length,
+    [isSendButtonAlwaysVisible, text]
   )
 
   if (!showSend)
@@ -77,12 +58,11 @@ export const Send = <TMessage extends IMessage = IMessage>({
   return (
     <TouchableOpacity
       testID={TEST_ID.SEND_TOUCHABLE}
-      accessible
-      accessibilityLabel='send'
       style={[styles.container, containerStyle]}
       onPress={handleOnPress}
+      accessible
+      accessibilityLabel='send'
       accessibilityRole='button'
-      disabled={disabled}
       {...sendButtonProps}
     >
       <View>
@@ -91,3 +71,22 @@ export const Send = <TMessage extends IMessage = IMessage>({
     </TouchableOpacity>
   )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    height: 44,
+    justifyContent: 'flex-end',
+  },
+  text: {
+    color: Color.defaultBlue,
+    fontWeight: '600',
+    fontSize: 17,
+    backgroundColor: Color.backgroundTransparent,
+    marginBottom: 12,
+    marginLeft: 10,
+    marginRight: 10,
+  },
+  text_dark: {
+    color: '#4da6ff',
+  },
+})

package/src/SystemMessage.tsx

@@ -8,8 +8,8 @@ import {
 } from 'react-native'
 import { Color } from './Color'
 import { MessageText } from './MessageText'
+import { IMessage } from './Models'
 import stylesCommon from './styles'
-import { IMessage } from './types'
 
 export interface SystemMessageProps<TMessage extends IMessage> {
   currentMessage: TMessage

package/src/Time.tsx

@@ -5,7 +5,7 @@ import dayjs from 'dayjs'
 import { Color } from './Color'
 import { TIME_FORMAT } from './Constant'
 import { useChatContext } from './GiftedChatContext'
-import { LeftRightStyle, IMessage } from './types'
+import { LeftRightStyle, IMessage } from './Models'
 
 const { containerStyle } = StyleSheet.create({
   containerStyle: {

package/src/__tests__/GiftedChat.test.tsx

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

package/src/__tests__/Message.test.tsx

@@ -38,7 +38,7 @@ describe('Message component', () => {
         user={{ _id: 1 }}
         currentMessage={DEFAULT_TEST_MESSAGE}
         position='left'
-        showUserAvatar
+        isUserAvatarVisible
       />
     )
 
@@ -58,7 +58,7 @@ describe('Message component', () => {
           },
         }}
         position='left'
-        showUserAvatar
+        isUserAvatarVisible
       />
     )
 

package/src/__tests__/Send.test.tsx

@@ -10,7 +10,7 @@ describe('Send', () => {
   })
 
   it('should always render <Send /> and compare with snapshot', () => {
-    const { toJSON } = render(<Send alwaysShowSend />)
+    const { toJSON } = render(<Send isSendButtonAlwaysVisible />)
     expect(toJSON()).toMatchSnapshot()
   })
 

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

@@ -6,7 +6,7 @@ exports[`should render <Actions /> and compare with snapshot 1`] = `
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": undefined,
+      "disabled": false,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -20,97 +20,13 @@ exports[`should render <Actions /> and compare with snapshot 1`] = `
     }
   }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  onBlur={[Function]}
   onClick={[Function]}
-  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
->
-  <View
-    collapsable={false}
-    jestAnimatedProps={
-      {
-        "value": {},
-      }
-    }
-    jestAnimatedStyle={
-      {
-        "value": {
-          "opacity": 1,
-        },
-      }
-    }
-    jestInlineStyle={
-      [
-        [
-          {
-            "height": 26,
-            "marginBottom": 10,
-            "marginLeft": 10,
-            "width": 26,
-          },
-          undefined,
-        ],
-      ]
-    }
-    style={
-      [
-        {
-          "height": 26,
-          "marginBottom": 10,
-          "marginLeft": 10,
-          "width": 26,
-        },
-        undefined,
-        {
-          "opacity": 1,
-        },
-      ]
-    }
-  >
-    <View
-      style={
-        [
-          {
-            "flex": 1,
-          },
-          {
-            "alignItems": "center",
-            "justifyContent": "center",
-          },
-          {
-            "borderColor": "#b2b2b2",
-            "borderRadius": 13,
-            "borderWidth": 2,
-          },
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "color": "#b2b2b2",
-              "fontSize": 16,
-              "fontWeight": "bold",
-              "lineHeight": 16,
-              "textAlign": "center",
-            },
-            undefined,
-          ]
-        }
-      >
-        +
-      </Text>
-    </View>
-  </View>
-</View>
+/>
 `;