URL Formatter - CometChat Docs

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:

URLs: HTTP and HTTPS links
Emails: Email addresses (opens mailto: link)
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.

​Features

​Usage

​Customization

​Styling Links

​Style Properties

​How It Works

​Combining with Other Formatters

​Next Steps