react-native-gifted-chat 3.0.1 → 3.1.0

package/README.md

@@ -166,7 +166,7 @@ export function Example() {
         createdAt: new Date(),
         user: {
           _id: 2,
-          name: 'React Native',
+          name: 'John Doe',
           avatar: 'https://placeimg.com/140/140/any',
         },
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",

package/src/Actions.tsx

@@ -1,16 +1,16 @@
 import React, { ReactNode, useCallback } from 'react'
 import {
   StyleSheet,
-  Text,
   View,
   StyleProp,
   ViewStyle,
   TextStyle,
 } from 'react-native'
+import { Text } from 'react-native-gesture-handler'
 import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
-import { useChatContext } from './GiftedChatContext'
 
+import { useChatContext } from './GiftedChatContext'
 import stylesCommon from './styles'
 
 export interface ActionsProps {

package/src/Bubble/index.tsx

@@ -1,10 +1,10 @@
-import React, { JSX, useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import {
-  Text,
-  Pressable,
   View,
+  Pressable, // don't use Pressable from gesture handler to issues with react-native-autolink (onPress doesn't work)
 } from 'react-native'
 
+import { Text } from 'react-native-gesture-handler'
 import { useChatContext } from '../GiftedChatContext'
 import { MessageAudio } from '../MessageAudio'
 import { MessageImage } from '../MessageImage'
@@ -12,17 +12,17 @@ import { MessageText } from '../MessageText'
 import { MessageVideo } from '../MessageVideo'
 import { IMessage } from '../Models'
 import { QuickReplies } from '../QuickReplies'
-import stylesCommon from '../styles'
 
+import stylesCommon, { getStyleWithPosition } from '../styles'
 import { Time } from '../Time'
-import { isSameUser, isSameDay, renderComponentOrElement } from '../utils'
 
+import { isSameUser, isSameDay, renderComponentOrElement } from '../utils'
 import styles from './styles'
 import { BubbleProps, RenderMessageTextProps } from './types'
 
 export * from './types'
 
-export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessage>): JSX.Element => {
+export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessage>): React.ReactElement => {
   const {
     currentMessage,
     nextMessage,
@@ -56,7 +56,7 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
     onLongPressMessageProp,
   ])
 
-  const styledBubbleToNext = useCallback(() => {
+  const styledBubbleToNext = useMemo(() => {
     if (
       currentMessage &&
       nextMessage &&
@@ -65,7 +65,7 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
       isSameDay(currentMessage, nextMessage)
     )
       return [
-        styles[position].containerToNext,
+        getStyleWithPosition(styles, 'containerToNext', position),
         containerToNextStyle?.[position],
       ]
 
@@ -77,7 +77,7 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
     containerToNextStyle,
   ])
 
-  const styledBubbleToPrevious = useCallback(() => {
+  const styledBubbleToPrevious = useMemo(() => {
     if (
       currentMessage &&
       previousMessage &&
@@ -86,7 +86,7 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
       isSameDay(currentMessage, previousMessage)
     )
       return [
-        styles[position].containerToPrevious,
+        getStyleWithPosition(styles, 'containerToPrevious', position),
         containerToPreviousStyle?.[position],
       ]
 
@@ -147,7 +147,10 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
         ...messageTextPropsRest
       } = props
 
-      const combinedProps = { ...messageTextPropsRest, ...messageTextProps } as RenderMessageTextProps<TMessage>
+      const combinedProps = {
+        ...messageTextPropsRest,
+        ...messageTextProps,
+      } as RenderMessageTextProps<TMessage>
 
       if (props.renderMessageText)
         return renderComponentOrElement(props.renderMessageText, combinedProps)
@@ -234,19 +237,19 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
       (currentMessage.sent || currentMessage.received || currentMessage.pending)
     )
       return (
-        <View style={styles.content.tickView}>
+        <View style={styles.tickView}>
           {!!currentMessage.sent && (
-            <Text style={[styles.content.tick, props.tickStyle]}>
+            <Text style={[styles.tick, props.tickStyle]}>
               {'✓'}
             </Text>
           )}
           {!!currentMessage.received && (
-            <Text style={[styles.content.tick, props.tickStyle]}>
+            <Text style={[styles.tick, props.tickStyle]}>
               {'✓'}
             </Text>
           )}
           {!!currentMessage.pending && (
-            <Text style={[styles.content.tick, props.tickStyle]}>
+            <Text style={[styles.tick, props.tickStyle]}>
               {'🕓'}
             </Text>
           )}
@@ -275,6 +278,7 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
 
       return <Time {...timeProps} />
     }
+
     return null
   }, [props, currentMessage])
 
@@ -292,13 +296,10 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
         return renderComponentOrElement(renderUsername, currentMessage.user)
 
       return (
-        <View style={styles.content.usernameView}>
+        <View style={styles.usernameContainer}>
           <Text
-            style={
-              [styles.content.username, props.usernameStyle]
-            }
+            style={[styles.username, props.usernameStyle]}
           >
-            {'~ '}
             {currentMessage.user.name}
           </Text>
         </View>
@@ -320,14 +321,14 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
 
   const renderBubbleContent = useCallback(() => {
     return (
-      <View>
+      <>
         {!props.isCustomViewBottom && renderCustomView()}
         {renderMessageImage()}
         {renderMessageVideo()}
         {renderMessageAudio()}
         {renderMessageText()}
         {props.isCustomViewBottom && renderCustomView()}
-      </View>
+      </>
     )
   }, [
     renderCustomView,
@@ -339,19 +340,13 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
   ])
 
   return (
-    <View
-      style={[
-        stylesCommon.fill,
-        styles[position].container,
-        containerStyle && containerStyle[position],
-      ]}
-    >
+    <View style={containerStyle?.[position]}>
       <View
         style={[
-          styles[position].wrapper,
-          styledBubbleToNext(),
-          styledBubbleToPrevious(),
-          wrapperStyle && wrapperStyle[position],
+          getStyleWithPosition(styles, 'wrapper', position),
+          styledBubbleToNext,
+          styledBubbleToPrevious,
+          wrapperStyle?.[position],
         ]}
       >
         <Pressable
@@ -359,15 +354,15 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
           onLongPress={onLongPress}
           {...props.touchableProps}
         >
-          <View>
-            {renderBubbleContent()}
-            <View
-              style={[
-                styles[position].bottom,
-                bottomContainerStyle?.[position],
-              ]}
-            >
-              {renderUsername()}
+          {renderBubbleContent()}
+          <View
+            style={[
+              styles.bottom,
+              bottomContainerStyle?.[position],
+            ]}
+          >
+            {renderUsername()}
+            <View style={stylesCommon.fill}>
               {renderTime()}
               {renderTicks()}
             </View>

package/src/Bubble/styles.ts

@@ -1,73 +1,59 @@
 import { StyleSheet } from 'react-native'
 import { Color } from '../Color'
 
-const styles = {
-  left: StyleSheet.create({
-    container: {
-      alignItems: 'flex-start',
-    },
-    wrapper: {
-      borderRadius: 15,
-      backgroundColor: Color.leftBubbleBackground,
-      marginRight: 60,
-      minHeight: 20,
-      justifyContent: 'flex-end',
-    },
-    containerToNext: {
-      borderBottomLeftRadius: 3,
-    },
-    containerToPrevious: {
-      borderTopLeftRadius: 3,
-    },
-    bottom: {
-      flexDirection: 'row',
-      justifyContent: 'flex-start',
-    },
-  }),
-  right: StyleSheet.create({
-    container: {
-      alignItems: 'flex-end',
-    },
-    wrapper: {
-      borderRadius: 15,
-      backgroundColor: Color.defaultBlue,
-      marginLeft: 60,
-      minHeight: 20,
-      justifyContent: 'flex-end',
-    },
-    containerToNext: {
-      borderBottomRightRadius: 3,
-    },
-    containerToPrevious: {
-      borderTopRightRadius: 3,
-    },
-    bottom: {
-      flexDirection: 'row',
-      justifyContent: 'flex-end',
-    },
-  }),
-  content: StyleSheet.create({
-    tick: {
-      fontSize: 10,
-      backgroundColor: Color.backgroundTransparent,
-      color: Color.white,
-    },
-    tickView: {
-      flexDirection: 'row',
-      marginRight: 10,
-    },
-    username: {
-      top: -3,
-      left: 0,
-      fontSize: 12,
-      backgroundColor: Color.backgroundTransparent,
-      color: '#aaa',
-    },
-    usernameView: {
-      flexDirection: 'row',
-      marginHorizontal: 10,
-    },
-  }),
-}
+const styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 15,
+    minHeight: 20,
+  },
+  wrapper_left: {
+    backgroundColor: Color.leftBubbleBackground,
+    justifyContent: 'flex-end',
+  },
+  wrapper_right: {
+    backgroundColor: Color.defaultBlue,
+    justifyContent: 'flex-end',
+  },
+
+  bottom: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    paddingHorizontal: 10,
+    paddingBottom: 5,
+  },
+
+  containerToNext_left: {
+    borderBottomLeftRadius: 3,
+  },
+  containerToNext_right: {
+    borderBottomRightRadius: 3,
+  },
+
+  containerToPrevious_left: {
+    borderTopLeftRadius: 3,
+  },
+  containerToPrevious_right: {
+    borderTopRightRadius: 3,
+  },
+
+  tick: {
+    fontSize: 10,
+    color: Color.white,
+  },
+  tickView: {
+    flexDirection: 'row',
+    marginLeft: 5,
+  },
+
+  usernameContainer: {
+    flexDirection: 'row',
+    marginRight: 5,
+  },
+  username: {
+    fontSize: 12,
+    color: '#aaa',
+  },
+})
 
 export default styles

package/src/Bubble/types.ts

@@ -1,8 +1,9 @@
-import React from 'react'
+import React, { ComponentProps } from 'react'
 import {
   StyleProp,
   ViewStyle,
   TextStyle,
+  Pressable,
 } from 'react-native'
 import { MessageImageProps } from '../MessageImage'
 import { MessageTextProps } from '../MessageText'
@@ -46,7 +47,7 @@ export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
 
 export interface BubbleProps<TMessage extends IMessage> {
   user?: User
-  touchableProps?: object
+  touchableProps?: ComponentProps<typeof Pressable>
   isUsernameVisible?: boolean
   isCustomViewBottom?: boolean
   isInverted?: boolean

package/src/Composer.tsx

@@ -2,13 +2,13 @@ import React, { useCallback, useMemo, useState } from 'react'
 import {
   Platform,
   StyleSheet,
-  TextInput,
   TextInputChangeEvent,
   TextInputContentSizeChangeEvent,
   TextInputProps,
   useColorScheme,
   View,
 } from 'react-native'
+import { TextInput } from 'react-native-gesture-handler'
 import { Color } from './Color'
 import stylesCommon, { getColorSchemeStyle } from './styles'
 

package/src/Day/index.tsx

@@ -1,15 +1,15 @@
 import React, { useMemo } from 'react'
 import {
-  Text,
   View,
 } from 'react-native'
 import dayjs from 'dayjs'
 import calendar from 'dayjs/plugin/calendar'
 import relativeTime from 'dayjs/plugin/relativeTime'
 
+import { Text } from 'react-native-gesture-handler'
 import { DATE_FORMAT } from '../Constant'
-import { useChatContext } from '../GiftedChatContext'
 
+import { useChatContext } from '../GiftedChatContext'
 import stylesCommon from '../styles'
 import styles from './styles'
 import { DayProps } from './types'

package/src/GiftedAvatar.tsx

@@ -1,13 +1,13 @@
 import React, { useCallback, useMemo } from 'react'
 import {
   Image,
-  Text,
   View,
   StyleSheet,
   StyleProp,
   ImageStyle,
   TextStyle,
 } from 'react-native'
+import { Text } from 'react-native-gesture-handler'
 import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
 import { User } from './Models'
@@ -170,7 +170,7 @@ export function GiftedAvatar (
 
   return (
     <TouchableOpacity
-      disabled={!onPress}
+      enabled={!!onPress}
       onPress={handleOnPress}
       onLongPress={handleOnLongPress}
       style={[

package/src/GiftedChat/index.tsx

@@ -8,7 +8,6 @@ import React, {
   RefObject,
 } from 'react'
 import {
-  TextInput,
   View,
   LayoutChangeEvent,
 } from 'react-native'
@@ -18,7 +17,7 @@ import {
 } from '@expo/react-native-action-sheet'
 import dayjs from 'dayjs'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
-import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import { GestureHandlerRootView, TextInput } from 'react-native-gesture-handler'
 import { KeyboardAvoidingView, KeyboardProvider } from 'react-native-keyboard-controller'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { TEST_ID } from '../Constant'

package/src/LoadEarlierMessages.tsx

@@ -2,12 +2,12 @@ import React from 'react'
 import {
   ActivityIndicator,
   StyleSheet,
-  Text,
   View,
   StyleProp,
   ViewStyle,
   TextStyle,
 } from 'react-native'
+import { Text } from 'react-native-gesture-handler'
 import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
 import stylesCommon from './styles'
@@ -41,7 +41,7 @@ export const LoadEarlierMessages: React.FC<LoadEarlierMessagesProps> = ({
     <TouchableOpacity
       style={[styles.container, containerStyle]}
       onPress={onPress}
-      disabled={isLoading}
+      enabled={!isLoading}
       accessibilityRole='button'
     >
       <View style={[stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>

package/src/Message/index.tsx

@@ -4,6 +4,7 @@ import { View } from 'react-native'
 import { Avatar } from '../Avatar'
 import { Bubble } from '../Bubble'
 import { IMessage } from '../Models'
+import { getStyleWithPosition } from '../styles'
 import { SystemMessage } from '../SystemMessage'
 import { isSameUser, renderComponentOrElement } from '../utils'
 import styles from './styles'
@@ -96,15 +97,15 @@ export const Message = <TMessage extends IMessage = IMessage>(props: MessageProp
         : (
           <View
             style={[
-              styles[position].container,
+              getStyleWithPosition(styles, 'container', position),
               { marginBottom: sameUser ? 2 : 10 },
               !props.isInverted && { marginBottom: 2 },
               containerStyle?.[position],
             ]}
           >
-            {position === 'left' ? renderAvatar() : null}
+            {position === 'left' && renderAvatar()}
             {renderBubble()}
-            {position === 'right' ? renderAvatar() : null}
+            {position === 'right' && renderAvatar()}
           </View>
         )}
     </View>

package/src/Message/styles.ts

@@ -1,22 +1,18 @@
 import { StyleSheet } from 'react-native'
 
-export default {
-  left: StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignItems: 'flex-end',
-      justifyContent: 'flex-start',
-      marginLeft: 8,
-      marginRight: 0,
-    },
-  }),
-  right: StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignItems: 'flex-end',
-      justifyContent: 'flex-end',
-      marginLeft: 0,
-      marginRight: 8,
-    },
-  }),
-}
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    maxWidth: '80%',
+  },
+  container_left: {
+    justifyContent: 'flex-start',
+    marginLeft: 8,
+  },
+  container_right: {
+    justifyContent: 'flex-end',
+    marginRight: 8,
+    alignSelf: 'flex-end',
+  },
+})

package/src/MessageAudio.tsx

@@ -1,10 +1,11 @@
 import React, { useMemo } from 'react'
-import { View, Text, StyleSheet } from 'react-native'
+import { View, StyleSheet } from 'react-native'
+import { Text } from 'react-native-gesture-handler'
 import { Color } from './Color'
 
 const styles = StyleSheet.create({
   container: {
-    padding: 20,
+    padding: 10,
   },
   text: {
     color: Color.alizarin,

package/src/MessageImage.tsx

@@ -8,7 +8,6 @@ import {
   StyleProp,
   ImageStyle,
   ImageURISource,
-  TouchableOpacity,
   LayoutChangeEvent,
   useWindowDimensions,
   StatusBar,
@@ -24,6 +23,7 @@ import Animated, {
 } from 'react-native-reanimated'
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import Zoom from 'react-native-zoom-reanimated'
+import { TouchableOpacity } from './components/TouchableOpacity'
 import { IMessage } from './Models'
 import commonStyles from './styles'
 

package/src/MessageText.tsx

@@ -26,7 +26,7 @@ export type MessageTextProps<TMessage extends IMessage> = {
 } & Omit<AutolinkProps, 'text' | 'onPress'>
 
 export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
-  currentMessage = {} as IMessage,
+  currentMessage,
   position = 'left',
   containerStyle,
   textStyle,
@@ -69,10 +69,8 @@ export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: 5,
-    marginBottom: 5,
-    marginLeft: 10,
-    marginRight: 10,
+    marginVertical: 5,
+    marginHorizontal: 10,
   },
   text: {
     fontSize: 16,

package/src/MessageVideo.tsx

@@ -1,10 +1,11 @@
 import React, { useMemo } from 'react'
-import { View, Text, StyleSheet } from 'react-native'
+import { View, StyleSheet } from 'react-native'
+import { Text } from 'react-native-gesture-handler'
 import { Color } from './Color'
 
 const styles = StyleSheet.create({
   container: {
-    padding: 20,
+    padding: 10,
   },
   text: {
     color: Color.alizarin,

package/src/MessagesContainer/index.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   View,
-  Text,
   LayoutChangeEvent,
   ListRenderItemInfo,
   CellRendererProps,
 } from 'react-native'
-import { FlatList, Pressable } from 'react-native-gesture-handler'
+import { FlatList, Pressable, Text } from 'react-native-gesture-handler'
 import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
 import { LoadEarlierMessages } from '../LoadEarlierMessages'
 import { warning } from '../logging'

package/src/QuickReplies.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useMemo, useCallback } from 'react'
 import {
-  Text,
   StyleSheet,
   View,
   StyleProp,
   ViewStyle,
   TextStyle,
 } from 'react-native'
+import { Text } from 'react-native-gesture-handler'
 import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
 import { warning } from './logging'

package/src/Send.tsx

@@ -1,15 +1,15 @@
 import React, { useMemo, useCallback, useEffect } from 'react'
 import {
   StyleSheet,
-  Text,
   StyleProp,
   ViewStyle,
   TextStyle,
   useColorScheme,
 } from 'react-native'
+import { Text } from 'react-native-gesture-handler'
 import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated'
-import { Color } from './Color'
 
+import { Color } from './Color'
 import { TouchableOpacity, TouchableOpacityProps } from './components/TouchableOpacity'
 import { TEST_ID } from './Constant'
 import { IMessage } from './Models'