> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# URL Formatter

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

<Accordion title="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](https://github.com/cometchat/cometchat-uikit-react-native/tree/v5/sample)                                                                                                                  |
  | Related        | [Custom Text Formatter](/ui-kit/react-native/custom-text-formatter-guide) · [Mentions Formatter](/ui-kit/react-native/mentions-formatter-guide) · [All Guides](/ui-kit/react-native/guide-overview) |
</Accordion>

`CometChatUrlsFormatter` extends [CometChatTextFormatter](/ui-kit/react-native/custom-text-formatter-guide) 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:

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    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;
    ```
  </Tab>
</Tabs>

***

## Customization

### Styling Links

Use the `setStyle` method to customize link appearance:

```tsx theme={null}
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:

```tsx theme={null}
// 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:

```tsx theme={null}
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

<CardGroup cols={2}>
  <Card title="Custom Text Formatter" href="/ui-kit/react-native/custom-text-formatter-guide">
    Build custom inline text patterns.
  </Card>

  <Card title="Mentions Formatter" href="/ui-kit/react-native/mentions-formatter-guide">
    Add @mentions with styled tokens.
  </Card>

  <Card title="All Guides" href="/ui-kit/react-native/guide-overview">
    Browse all feature and formatter guides.
  </Card>

  <Card title="Sample App" href="https://github.com/cometchat/cometchat-uikit-react-native/tree/v5/sample">
    Full working sample application on GitHub.
  </Card>
</CardGroup>