URL Formatter

Detect and style plain URLs, emails, and phone numbers as clickable links in CometChat React Native UI Kit.

AI Integration Quick Reference

Field	Value
Package	@cometchat/chat-uikit-react-native
Key class	CometChatUrlsFormatter (extends CometChatTextFormatter)
Required setup	CometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID")
Purpose	Auto-detects URLs, emails, and phone numbers in text messages and converts them to clickable links
Sample app	GitHub
Related	Custom Text Formatter · Mentions Formatter · All Guides

CometChatUrlsFormatter extends CometChatTextFormatter to detect URLs, email addresses, and phone numbers in text messages and render them as clickable links using React Native’s Linking API.

---

Features

Feature	Description
URL detection	Automatically detects HTTP/HTTPS URLs
Email detection	Detects email addresses and opens mail client
Phone detection	Detects phone numbers and opens dialer
Custom styling	Customize link text color and font
Native linking	Uses React Native Linking API for native behavior

---

Usage

The CometChatUrlsFormatter is included by default in the UI Kit. You can also create a custom instance with custom styling:

TypeScript

import React, { useState, useEffect, useMemo } from "react";
import { View, SafeAreaView } from "react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import {
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatUrlsFormatter,
} from "@cometchat/chat-uikit-react-native";

function ChatScreen(): React.JSX.Element {
  const [chatUser, setChatUser] = useState<CometChat.User | undefined>();

  useEffect(() => {
    CometChat.getUser("uid").then((user) => {
      setChatUser(user);
    });
  }, []);

  const urlFormatter = useMemo(() => {
    const formatter = new CometChatUrlsFormatter();
    formatter.setStyle({
      linkTextColor: "#1a0dab",
      linkTextFont: {
        fontSize: 16,
        fontWeight: "500",
      },
    });
    return formatter;
  }, []);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      {chatUser && (
        <View style={{ flex: 1 }}>
          <CometChatMessageHeader user={chatUser} />
          <CometChatMessageList
            user={chatUser}
            textFormatters={[urlFormatter]}
          />
          <CometChatMessageComposer user={chatUser} />
        </View>
      )}
    </SafeAreaView>
  );
}

export default ChatScreen;

---

Customization

Styling Links

Use the setStyle method to customize link appearance:

import { CometChatUrlsFormatter } from "@cometchat/chat-uikit-react-native";

const urlFormatter = new CometChatUrlsFormatter();

urlFormatter.setStyle({
  linkTextColor: "#007AFF",  // iOS blue
  linkTextFont: {
    fontSize: 16,
    fontWeight: "600",
  },
});

Style Properties

Property	Type	Description
linkTextColor	ColorValue	Color of the link text
linkTextFont	TextStyle	Font styling for link text (fontSize, fontWeight, etc.)

---

How It Works

The CometChatUrlsFormatter uses regex patterns to detect:

1. URLs: HTTP and HTTPS links
2. Emails: Email addresses (opens mailto: link)
3. Phone numbers: Phone numbers (opens tel: link)

When a link is tapped, it uses React Native’s Linking API to open the appropriate handler:

// Internal implementation
const handlePress = async () => {
  let finalUrl = url;
  if (!url.match(/^(https?|mailto|tel):/i)) {
    finalUrl = `http://${url}`;
  }
  
  const canOpen = await Linking.canOpenURL(finalUrl);
  if (canOpen) {
    Linking.openURL(finalUrl);
  }
};

---

Combining with Other Formatters

You can use multiple formatters together. The order matters — formatters are applied in sequence:

import {
  CometChatUrlsFormatter,
  CometChatMentionsFormatter,
} from "@cometchat/chat-uikit-react-native";

const urlFormatter = new CometChatUrlsFormatter();
const mentionsFormatter = new CometChatMentionsFormatter();

// Apply mentions first, then URLs
const textFormatters = [mentionsFormatter, urlFormatter];

<CometChatMessageList
  user={chatUser}
  textFormatters={textFormatters}
/>

---

Next Steps

Custom Text Formatter

Build custom inline text patterns.

Mentions Formatter

Add @mentions with styled tokens.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.