react-native-gifted-chat 3.1.5 → 3.2.0

package/CHANGELOG.md

@@ -199,7 +199,6 @@ These props moved from `GiftedChatProps` to `MessagesContainerProps` but are sti
 - `@types/lodash.isequal`: ^4.5.8
 - `dayjs`: ^1.11.19
 - `lodash.isequal`: ^4.5.0
-- `react-native-autolink`: ^4.2.0
 - `react-native-zoom-reanimated`: ^1.4.10
 
 #### Peer Dependencies (now required)

package/README.md

@@ -45,7 +45,7 @@
 - Composer actions (to attach photos, etc.)
 - Load earlier messages
 - Copy messages to clipboard
-- Touchable links using [react-native-autolink](https://github.com/joshswan/react-native-autolink)
+- Touchable links with customizable parsing (URLs, emails, phone numbers, hashtags, mentions)
 - Avatar as user's initials
 - Localized dates
 - Multi-line TextInput
@@ -269,12 +269,18 @@ Messages, system messages, quick replies etc.: [data structure](src/Models.ts)
 - **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://reactnative.dev/docs/image) component created by the default `renderMessageImage`
 - **`imageStyle`** _(Object)_ - Custom style for message images
 - **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`
-- **`messageTextProps`** _(Object)_ - Extra props to be passed to the MessageText component. Useful for customizing link parsing behavior, text styles, and matchers. Supports all [react-native-autolink](https://github.com/joshswan/react-native-autolink) props including:
+- **`messageTextProps`** _(Object)_ - Extra props to be passed to the MessageText component. Useful for customizing link parsing behavior, text styles, and matchers. Supports the following props:
   - `matchers` - Custom matchers for linking message content (like URLs, phone numbers, hashtags, mentions)
   - `linkStyle` - Custom style for links
   - `email` - Enable/disable email parsing (default: true)
   - `phone` - Enable/disable phone number parsing (default: true)
   - `url` - Enable/disable URL parsing (default: true)
+  - `hashtag` - Enable/disable hashtag parsing (default: false)
+  - `mention` - Enable/disable mention parsing (default: false)
+  - `hashtagUrl` - Base URL for hashtags (e.g., 'https://twitter.com/hashtag')
+  - `mentionUrl` - Base URL for mentions (e.g., 'https://twitter.com')
+  - `stripPrefix` - Strip 'http://' or 'https://' from URL display (default: false)
+  - `TextComponent` - Custom Text component to use (e.g., from react-native-gesture-handler)
 
 Example:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "3.1.5",
+  "version": "3.2.0",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",
@@ -52,7 +52,6 @@
     "@types/lodash.isequal": "^4.5.8",
     "dayjs": "^1.11.19",
     "lodash.isequal": "^4.5.0",
-    "react-native-autolink": "^4.2.0",
     "react-native-zoom-reanimated": "^1.4.10"
   },
   "devDependencies": {

package/src/Bubble/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react'
 import {
   View,
-  Pressable, // don't use Pressable from gesture handler to issues with react-native-autolink (onPress doesn't work)
+  Pressable,
 } from 'react-native'
 
 import { Text } from 'react-native-gesture-handler'

package/src/Message/styles.ts

@@ -4,7 +4,7 @@ export default StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'flex-end',
-    maxWidth: '80%',
+    maxWidth: '70%',
   },
   container_left: {
     justifyContent: 'flex-start',

package/src/MessageText.tsx

@@ -7,8 +7,8 @@ import {
   View,
 } from 'react-native'
 
-import { Match } from 'autolinker/dist/es2015'
-import Autolink, { AutolinkProps } from 'react-native-autolink'
+import { Text } from 'react-native-gesture-handler'
+import { LinkParser, LinkMatcher, LinkType } from './linkParser'
 import { LeftRightStyle, IMessage } from './Models'
 
 export type MessageTextProps<TMessage extends IMessage> = {
@@ -21,9 +21,19 @@ export type MessageTextProps<TMessage extends IMessage> = {
   onPress?: (
     message: TMessage,
     url: string,
-    match: Match
+    type: LinkType
   ) => void
-} & Omit<AutolinkProps, 'text' | 'onPress'>
+  // Link parser options
+  matchers?: LinkMatcher[]
+  email?: boolean
+  phone?: boolean
+  url?: boolean
+  hashtag?: boolean
+  mention?: boolean
+  hashtagUrl?: string
+  mentionUrl?: string
+  stripPrefix?: boolean
+}
 
 export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
   currentMessage,
@@ -33,7 +43,15 @@ export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
   linkStyle: linkStyleProp,
   customTextStyle,
   onPress: onPressProp,
-  ...rest
+  matchers,
+  email = true,
+  phone = true,
+  url = true,
+  hashtag = false,
+  mention = false,
+  hashtagUrl,
+  mentionUrl,
+  stripPrefix = false,
 }) => {
   const linkStyle = useMemo(() => StyleSheet.flatten([
     styles.link,
@@ -46,22 +64,27 @@ export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
     customTextStyle,
   ], [position, textStyle, customTextStyle])
 
-  const handlePress = useCallback((url: string, match: Match) => {
-    onPressProp?.(currentMessage, url, match)
+  const handlePress = useCallback((url: string, type: LinkType) => {
+    onPressProp?.(currentMessage, url, type)
   }, [onPressProp, currentMessage])
 
   return (
     <View style={[styles.container, containerStyle?.[position]]}>
-      <Autolink
-        email
-        phone
-        url
-        stripPrefix={false}
-        {...rest}
-        onPress={onPressProp ? handlePress : undefined}
-        linkStyle={linkStyle}
-        style={style}
+      <LinkParser
         text={currentMessage!.text}
+        matchers={matchers}
+        email={email}
+        phone={phone}
+        url={url}
+        hashtag={hashtag}
+        mention={mention}
+        hashtagUrl={hashtagUrl}
+        mentionUrl={mentionUrl}
+        stripPrefix={stripPrefix}
+        linkStyle={linkStyle}
+        textStyle={style}
+        onPress={onPressProp ? handlePress : undefined}
+        TextComponent={Text}
       />
     </View>
   )

package/src/MessagesContainer/styles.ts

@@ -9,6 +9,7 @@ export default StyleSheet.create({
   contentContainerStyle: {
     flexGrow: 1,
     justifyContent: 'flex-start',
+    paddingBottom: 10,
   },
   emptyChatContainer: {
     transform: [{ scaleY: -1 }],

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

@@ -69,15 +69,8 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
               undefined,
             ]
           }
-          user={
-            {
-              "_id": 1,
-            }
-          }
         >
-          <Text>
-            test
-          </Text>
+          test
         </Text>
       </View>
       <View

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

@@ -12,7 +12,7 @@ exports[`Message component should render <Message /> and compare with snapshot 1
           "flexDirection": "row",
           "justifyContent": "flex-start",
           "marginLeft": 8,
-          "maxWidth": "80%",
+          "maxWidth": "70%",
         },
         {
           "marginBottom": 10,
@@ -92,15 +92,8 @@ exports[`Message component should render <Message /> and compare with snapshot 1
                   undefined,
                 ]
               }
-              user={
-                {
-                  "_id": 1,
-                }
-              }
             >
-              <Text>
-                test
-              </Text>
+              test
             </Text>
           </View>
           <View
@@ -162,7 +155,7 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
           "flexDirection": "row",
           "justifyContent": "flex-start",
           "marginLeft": 8,
-          "maxWidth": "80%",
+          "maxWidth": "70%",
         },
         {
           "marginBottom": 10,
@@ -272,7 +265,6 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
             }
           >
             <Text
-              isUserAvatarVisible={true}
               style={
                 [
                   {
@@ -282,15 +274,8 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
                   undefined,
                 ]
               }
-              user={
-                {
-                  "_id": 1,
-                }
-              }
             >
-              <Text>
-                test
-              </Text>
+              test
             </Text>
           </View>
           <View
@@ -352,7 +337,7 @@ exports[`Message component should render null if user has no Avatar 1`] = `
           "flexDirection": "row",
           "justifyContent": "flex-start",
           "marginLeft": 8,
-          "maxWidth": "80%",
+          "maxWidth": "70%",
         },
         {
           "marginBottom": 10,
@@ -462,7 +447,6 @@ exports[`Message component should render null if user has no Avatar 1`] = `
             }
           >
             <Text
-              isUserAvatarVisible={true}
               style={
                 [
                   {
@@ -472,15 +456,8 @@ exports[`Message component should render null if user has no Avatar 1`] = `
                   undefined,
                 ]
               }
-              user={
-                {
-                  "_id": 1,
-                }
-              }
             >
-              <Text>
-                test
-              </Text>
+              test
             </Text>
           </View>
           <View

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

@@ -23,9 +23,7 @@ exports[`should render <MessageText /> and compare with snapshot 1`] = `
       ]
     }
   >
-    <Text>
-      test
-    </Text>
+    test
   </Text>
 </View>
 `;

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

@@ -59,9 +59,7 @@ exports[`SystemMessage should render <SystemMessage /> and compare with snapshot
         ]
       }
     >
-      <Text>
-        test
-      </Text>
+      test
     </Text>
   </View>
 </View>

package/src/index.ts

@@ -3,6 +3,7 @@ export * from './Constant'
 export * as utils from './utils'
 export * from './GiftedChatContext'
 export * from './types'
+export * from './linkParser'
 export { Actions } from './Actions'
 export { Avatar } from './Avatar'
 export { Bubble } from './Bubble'

package/src/linkParser.tsx

@@ -0,0 +1,255 @@
+import React from 'react'
+import { Text, TextStyle, StyleProp, Linking } from 'react-native'
+
+export type LinkType = 'url' | 'email' | 'phone' | 'mention' | 'hashtag'
+
+export interface ParsedLink {
+  type: LinkType
+  text: string
+  url: string
+  index: number
+  length: number
+}
+
+export interface LinkMatcher {
+  type: LinkType
+  pattern: RegExp
+  getLinkUrl?: (text: string) => string
+  getLinkText?: (text: string) => string
+  baseUrl?: string
+  style?: StyleProp<TextStyle>
+  renderLink?: (text: string, url: string, index: number, type: LinkType) => React.ReactNode
+  onPress?: (url: string, type: LinkType) => void
+}
+
+interface LinkParserProps {
+  text: string
+  matchers?: LinkMatcher[]
+  email?: boolean
+  phone?: boolean
+  url?: boolean
+  hashtag?: boolean
+  mention?: boolean
+  hashtagUrl?: string
+  mentionUrl?: string
+  linkStyle?: StyleProp<TextStyle>
+  onPress?: (url: string, type: LinkType) => void
+  stripPrefix?: boolean
+  textStyle?: StyleProp<TextStyle>
+  TextComponent?: React.ComponentType<any>
+}
+
+const DEFAULT_MATCHERS: LinkMatcher[] = [
+  {
+    type: 'url',
+    pattern: /(?:(?:https?:\/\/)|(?:www\.))[^\s]+|[a-zA-Z0-9][a-zA-Z0-9-]+\.[a-zA-Z]{2,}(?:\/[^\s]*)?/gi,
+    getLinkUrl: (text: string) => {
+      if (!/^https?:\/\//i.test(text))
+        return `http://${text}`
+
+      return text
+    },
+  },
+  {
+    type: 'email',
+    pattern: /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/gi,
+    getLinkUrl: (text: string) => `mailto:${text}`,
+  },
+  {
+    type: 'phone',
+    pattern: /(?:\+?\d{1,3}[\s.\-]?)?\(?\d{1,4}\)?[\s.\-]?\d{1,4}[\s.\-]?\d{1,9}/g,
+    getLinkUrl: (text: string) => {
+      const cleaned = text.replace(/[\s.()\-]/g, '')
+      return `tel:${cleaned}`
+    },
+  },
+  {
+    type: 'hashtag',
+    pattern: /#[\w]+/g,
+    getLinkUrl: (text: string) => text,
+    baseUrl: undefined,
+  },
+  {
+    type: 'mention',
+    pattern: /@[\w-]+/g,
+    getLinkUrl: (text: string) => text,
+    baseUrl: undefined,
+  },
+]
+
+function parseLinks(text: string, matchers: LinkMatcher[]): ParsedLink[] {
+  const links: ParsedLink[] = []
+
+  matchers.forEach(matcher => {
+    const matches = text.matchAll(matcher.pattern)
+    for (const match of matches)
+      if (match.index !== undefined) {
+        const matchText = match[0]
+        const url = matcher.getLinkUrl
+          ? matcher.getLinkUrl(matchText)
+          : matchText
+        const linkText = matcher.getLinkText
+          ? matcher.getLinkText(matchText)
+          : matchText
+
+        links.push({
+          type: matcher.type,
+          text: linkText,
+          url,
+          index: match.index,
+          length: matchText.length,
+        })
+      }
+
+  })
+
+  // Sort by index to maintain order
+  return links.sort((a, b) => a.index - b.index)
+}
+
+function removeOverlaps(links: ParsedLink[]): ParsedLink[] {
+  const filtered: ParsedLink[] = []
+
+  for (const link of links) {
+    const hasOverlap = filtered.some(existing => {
+      const existingEnd = existing.index + existing.length
+      const linkEnd = link.index + link.length
+
+      return (
+        (link.index >= existing.index && link.index < existingEnd) ||
+        (linkEnd > existing.index && linkEnd <= existingEnd) ||
+        (link.index <= existing.index && linkEnd >= existingEnd)
+      )
+    })
+
+    if (!hasOverlap)
+      filtered.push(link)
+
+  }
+
+  return filtered
+}
+
+export function LinkParser({
+  text,
+  matchers: customMatchers,
+  email = true,
+  phone = true,
+  url = true,
+  hashtag = false,
+  mention = false,
+  hashtagUrl,
+  mentionUrl,
+  linkStyle,
+  onPress,
+  stripPrefix = true,
+  textStyle,
+  TextComponent = Text,
+}: LinkParserProps): React.ReactElement {
+  const activeMatchers: LinkMatcher[] = []
+
+  // Add custom matchers first (they take precedence)
+  if (customMatchers)
+    activeMatchers.push(...customMatchers)
+
+
+  // Add default matchers based on flags
+  if (url && !customMatchers?.some(m => m.type === 'url'))
+    activeMatchers.push(DEFAULT_MATCHERS.find(m => m.type === 'url')!)
+
+  if (email && !customMatchers?.some(m => m.type === 'email'))
+    activeMatchers.push(DEFAULT_MATCHERS.find(m => m.type === 'email')!)
+
+  if (phone && !customMatchers?.some(m => m.type === 'phone'))
+    activeMatchers.push(DEFAULT_MATCHERS.find(m => m.type === 'phone')!)
+
+  if (hashtag && !customMatchers?.some(m => m.type === 'hashtag')) {
+    const hashtagMatcher = { ...DEFAULT_MATCHERS.find(m => m.type === 'hashtag')! }
+    if (hashtagUrl) {
+      hashtagMatcher.baseUrl = hashtagUrl
+      const baseUrl = hashtagUrl.endsWith('/') ? hashtagUrl : `${hashtagUrl}/`
+      hashtagMatcher.getLinkUrl = (text: string) => `${baseUrl}${text.substring(1)}`
+    }
+    activeMatchers.push(hashtagMatcher)
+  }
+
+  if (mention && !customMatchers?.some(m => m.type === 'mention')) {
+    const mentionMatcher = { ...DEFAULT_MATCHERS.find(m => m.type === 'mention')! }
+    if (mentionUrl) {
+      mentionMatcher.baseUrl = mentionUrl
+      const baseUrl = mentionUrl.endsWith('/') ? mentionUrl : `${mentionUrl}/`
+      mentionMatcher.getLinkUrl = (text: string) => `${baseUrl}${text.substring(1)}`
+    }
+    activeMatchers.push(mentionMatcher)
+  }
+
+
+  const links = removeOverlaps(parseLinks(text, activeMatchers))
+
+  if (links.length === 0)
+    return <TextComponent style={textStyle}>{text}</TextComponent>
+
+
+  const elements: React.ReactNode[] = []
+  let lastIndex = 0
+
+  links.forEach((link, index) => {
+    // Add text before link
+    if (link.index > lastIndex)
+      elements.push(
+        <TextComponent key={`text-${index}`} style={textStyle}>
+          {text.substring(lastIndex, link.index)}
+        </TextComponent>
+      )
+
+
+    // Find the matcher for this link
+    const matcher = activeMatchers.find(m => m.type === link.type)
+
+    // Handle link rendering
+    if (matcher?.renderLink) {
+      elements.push(matcher.renderLink(link.text, link.url, index, link.type))
+    } else {
+      const handlePress = () => {
+        if (matcher?.onPress)
+          matcher.onPress(link.url, link.type)
+        else if (onPress)
+          onPress(link.url, link.type)
+        else
+          // Default behavior
+          Linking.openURL(link.url).catch(err => {
+            console.warn('Failed to open URL:', err)
+          })
+
+      }
+
+      let displayText = link.text
+      if (stripPrefix && link.type === 'url')
+        displayText = displayText.replace(/^https?:\/\//i, '')
+
+
+      elements.push(
+        <TextComponent
+          key={`link-${index}`}
+          style={[linkStyle, matcher?.style]}
+          onPress={handlePress}
+        >
+          {displayText}
+        </TextComponent>
+      )
+    }
+
+    lastIndex = link.index + link.length
+  })
+
+  // Add remaining text
+  if (lastIndex < text.length)
+    elements.push(
+      <TextComponent key='text-end' style={textStyle}>
+        {text.substring(lastIndex)}
+      </TextComponent>
+    )
+
+
+  return <TextComponent style={textStyle}>{elements}</TextComponent>
+}