react-native-rich-text-fabric

A high-performance rich text display and input component library for React Native, built with the new Fabric architecture.

✨ Features

• 🚀 Pure Native Implementation - No WebView, no third-party dependencies
• 📝 RichText - Display component with mixed text and images
• ✏️ RichTextInput - Native input with image insertion and text styling
• 🏷️ @ Mention Support - Atomic text deletion for @mention scenarios
• 🎨 Customizable Styles - Font, color, bold, italic, underline, background
• 📱 Cross Platform - iOS and Android support

📸 Preview

📦 Installation

npm install react-native-rich-text-fabric
# or
yarn add react-native-rich-text-fabric

🚀 Quick Start

RichText - Display Component

import { RichText } from 'react-native-rich-text-fabric';

const content = [
  { type: 'text', text: 'Hello, ' },
  {
    type: 'text',
    text: 'World!',
    textStyle: { fontWeight: 'bold', color: 'red' },
  },
  {
    type: 'image',
    image: 'https://example.com/emoji.png',
    imageStyle: { width: 20, height: 20 },
  },
];

<RichText content={content} />;

RichTextInput - Input Component

import { useRef } from 'react';
import {
  RichTextInput,
  type RichTextInputRef,
} from 'react-native-rich-text-fabric';

const ref = useRef<RichTextInputRef>(null);

<RichTextInput
  ref={ref}
  placeholder="Enter rich text..."
  onContentChange={(content) => console.log(content)}
/>;

// Insert styled text
ref.current?.insertText({
  text: 'styled',
  textStyle: { fontWeight: 'bold', color: 'blue' },
});

// Insert image
ref.current?.insertImage({
  image: 'https://example.com/image.png',
  imageStyle: { width: 24, height: 24 },
});

RichTextInput - @ Mention Feature

import { useRef } from 'react';
import {
  RichTextInput,
  generateAtomicId,
  type RichTextInputRef,
} from 'react-native-rich-text-fabric';

const ref = useRef<RichTextInputRef>(null);

// Insert @mention with atomic deletion support
const insertMention = (userId: string, userName: string) => {
  ref.current?.insertText({
    text: `@${userName} `,
    textStyle: { color: '#1890ff' },
    atomicId: userId, // Enables atomic deletion - the entire @mention deletes as one unit
  });
};

<RichTextInput
  ref={ref}
  placeholder="Type @ to mention someone..."
  onContentChange={(content) => {
    // content includes atomicId for @mentions
    console.log(content);
  }}
/>;

📖 API Reference

RichText Props

| Prop | Type | Description | | ------------------- | ---------------------------------------------------------- | ------------------- | | content | Array<string \| RichTextStringItem \| RichTextImageItem> | Content array | | defaultTextStyle | TextStyle | Default text style | | defaultImageStyle | ImageStyle | Default image style |

RichTextInput Props

| Prop | Type | Default | Description | | ------------------------ | ------------------------------------------ | ------- | ------------------------------ | | placeholder | string | - | Placeholder text | | placeholderTextColor | ColorValue | - | Placeholder color | | multiline | boolean | true | Enable multiline | | maxLength | number | - | Maximum character length | | editable | boolean | true | Enable editing | | autoFocus | boolean | false | Auto focus on mount | | defaultTextStyle | TextStyle | - | Default text style | | defaultImageStyle | ImageStyle | - | Default image style | | inheritInsertedStyle | boolean | true | Inherit style after insertText | | cursorColor | ColorValue | - | Cursor color | | imagePlaceholderColor | ColorValue | - | Image placeholder background | | imagePlaceholderSource | ImageSourcePropType | - | Image placeholder image | | onContentChange | (content: RichTextContentItem[]) => void | - | Content change callback | | onFocus | () => void | - | Focus callback | | onBlur | () => void | - | Blur callback |

RichTextInput Ref Methods

| Method | Description | | ------------------------ | -------------------------------------------- | | focus() | Focus the input | | blur() | Blur the input | | isFocused() | Returns focus state | | insertText(text) | Insert text with optional style and atomicId | | insertImage(image) | Insert image | | clearContent() | Clear all content | | getContent() | Get current content | | setCursorPosition(pos) | Set cursor position |

🔧 Requirements

• React Native >= 0.83
• New Architecture (Fabric) enabled
• iOS 13.0+
• Android SDK 24+

📱 Platform Support

| Feature | iOS | Android | | ----------------------- | --- | ------- | | RichText Display | ✅ | ✅ | | RichTextInput | ✅ | ✅ | | Image Insertion | ✅ | ✅ | | Text Styling | ✅ | ✅ | | Atomic Text (@ Mention) | ✅ | ✅ | | Custom Cursor Color | ✅ | ✅ | | Image Placeholder | ✅ | ✅ |

📚 Alternatives

Rich Text Editors (WebView-based):

• @10play/tentap-editor - TipTap/ProseMirror based
• react-native-pell-rich-editor - Popular WebView editor
• react-native-cn-quill - Quill.js based
• react-native-webview-quill - WebView + Quill

Rich Text Editors (Native):

• react-native-rich-text - Original name (taken)
• react-native-ete-rich-editor - Native editor
• react-native-texted - Native rich text

@ Mention Components:

• react-native-mentions - Pure TS mention
• react-native-controlled-mentions - Controlled mention input

🗺️ Roadmap

• [x] AtTextInput - @ mention input component
• [x] UserList - User selection popup component
• [x] RichText - Rich text display with mixed text/images
• [x] RichTextInput - Native rich text input
• [x] Text styling support (color, bold, italic, underline, background)
• [x] Atomic text (@ mention with atomic deletion)
• [x] Style inheritance control (inheritInsertedStyle)
• [x] Custom cursor color
• [x] Image placeholder support
• [x] Hyperlink support for RichText
• [ ] Playground / Online demo
• [ ] Cloud build for example project

🤝 Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

We have templates to help you get started:

• Pull Request Template - For submitting changes
• Bug Report - For reporting bugs
• Feature Request - For suggesting new features

🔒 Security

For information about reporting security vulnerabilities, please see our Security Policy.

📄 License

MIT

Made with ❤️ by AsteriskZuo