React Native Rich Text Editor

A powerful and customizable rich text editor built natively for React Native. Everything included, nothing missing.

✨ Features

• Rich Formatting: Bold, italic, underline, strikethrough, subscript, superscript
• Text Styling: Font size, family, colors, highlights, line height
• Lists & Structure: Bullet lists, numbered lists, checkbox lists, headings (H1-H6)
• Media: Insert images and videos with custom styling
• Alignment: Left, center, right, justify with cycle button
• Code & Blocks: Code blocks, blockquotes, horizontal rules
• Smart Paste: Automatically preserves HTML formatting from web pages, Word docs, and more
• Read-Only Mode: Display formatted content without editing
• Keyboard Management: Built-in iOS/Android keyboard handling
• Fully Customizable: Toolbar, icons, styles, and behavior

📦 Installation

npm install rn-rich-text-editor

Peer dependencies:

npm install react react-native react-native-webview

Note: If you use react-native-svg-transformer, SVG icons work automatically. Install react-native-svg for runtime.

🚀 Quick Start

import React, { useRef, useState } from 'react';
import { View } from 'react-native';
import { Editor, Toolbar, ColorPicker } from 'rn-rich-text-editor';

function App() {
  const editorRef = useRef(null);

  return (
    <View style={{ flex: 1 }}>
      <Editor
        ref={editorRef}
        placeholder="Start typing..."
        onChange={(html) => console.log('Content:', html)}
      />
      <Toolbar editor={editorRef} />
    </View>
  );
}

📚 API Reference

Editor Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | ref | RefObject<EditorRef> | - | Editor reference for methods | | placeholder | string | '' | Placeholder text | | initialContentHTML | string | '' | Initial HTML content | | readOnly | boolean | false | Display-only mode | | disabled | boolean | false | Disable editing | | pasteAsPlainText | boolean | false | Disable HTML paste | | initialFocus | boolean | false | Auto-focus on mount | | editorStyle | object | - | Style configuration (see below) | | onChange | (html: string) => void | - | Content change callback | | onFocus / onBlur | () => void | - | Focus callbacks | | onPaste | (data: unknown) => void | - | Paste event callback | | onLink | (data: unknown) => void | - | Link click callback | | onHeightChange | (height: number) => void | - | Height change callback | | errorMessage | string | - | Error message (shows red border) |

EditorStyle:

{
  backgroundColor?: string;      // Editor background
  color?: string;                // Text color
  placeholderColor?: string;     // Placeholder color
  caretColor?: string;           // Cursor color
  contentCSSText?: string;       // Content CSS
  cssText?: string;              // Additional CSS
  initialCSSText?: string;        // Initial CSS
}

Editor Methods

Access via editorRef.current:

| Method | Description | |--------|-------------| | setContentHTML(html) | Set editor content | | getContentHtml() | Get content (Promise, deprecated - use onChange) | | insertText(text) | Insert plain text | | insertHTML(html) | Insert HTML | | insertImage(attrs, style?) | Insert image | | insertVideo(attrs, style?) | Insert video | | insertLink(title, url) | Insert link | | setFontSize(size) | Set font size | | setFontName(name) | Set font family | | setForeColor(color) | Set text color | | setHiliteColor(color) | Set highlight color | | setLineHeight(value) | Set line height | | focusContentEditor() | Focus editor | | blurContentEditor() | Blur editor | | dismissKeyboard() | Dismiss keyboard | | injectJavascript(script) | Inject custom JS |

Toolbar Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | editor | { current: EditorRef \| null } | - | Editor ref | | actions | string[] | defaultActions | Action array (see Actions) | | disabled | boolean | false | Disable toolbar | | readOnly | boolean | false | Hide when read-only | | iconTint | string | '#71787F' | Icon color | | selectedIconTint | string | - | Selected icon color | | iconSize | number | 20 | Icon size | | iconGap | number | 12 | Icon spacing | | iconMap | Record<string, unknown> | - | Custom icons | | renderAction | (action, selected) => ReactNode | - | Custom renderer | | onPressAddImage | () => void | - | Image button handler | | onInsertLink | () => void | - | Link button handler | | insertVideo | () => void | - | Video button handler |

ColorPicker Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | visible | boolean | false | Controls modal visibility | | onClose | () => void | - | Called when modal closes | | onSelectColor | (color: string) => void | - | Called when a color is selected (hex format) | | title | string | 'Text color' | Modal title text | | initialColor | string | '#000000' | Initial selected color (hex format) |

Actions

Import actions: import { actions } from 'rn-rich-text-editor'

Text Formatting: setBold, setItalic, setUnderline, setStrikethrough, setSubscript, setSuperscript, removeFormat

Headings: heading1 through heading6, setParagraph

Alignment: alignLeft, alignCenter, alignRight, alignFull, align (cycle)

Lists: insertBulletsList, insertOrderedList, checkboxList, indent, outdent

Media: insertImage, insertVideo, insertLink

Styling: fontSize, fontName, foreColor, hiliteColor, lineHeight

Other: code, blockquote, setHR, line, undo, redo, table, keyboard, separator

Default actions: keyboard, setBold, setItalic, setUnderline, removeFormat, insertBulletsList, indent, outdent, insertLink

💡 Examples

Custom Toolbar

import { Editor, Toolbar, actions } from 'rn-rich-text-editor';

const customActions = [
  actions.keyboard,
  actions.setBold,
  actions.setItalic,
  actions.heading1,
  actions.insertBulletsList,
  actions.insertLink,
];

<Toolbar editor={editorRef} actions={customActions} />

Programmatic Content

// Insert content
editorRef.current?.insertText('Hello');
editorRef.current?.insertHTML('<strong>Bold</strong>');
editorRef.current?.insertLink('Click', 'https://example.com');
editorRef.current?.insertImage({ src: 'image.jpg' }, { width: '100%' });

// Style text
editorRef.current?.setFontSize(18);
editorRef.current?.setForeColor('#FF0000');
editorRef.current?.setLineHeight(1.5);

Styling

<Editor
  ref={editorRef}
  editorStyle={{
    backgroundColor: '#f5f5f5',
    color: '#333',
    placeholderColor: '#999',
    caretColor: '#007AFF',
    contentCSSText: `
      font-family: -apple-system, sans-serif;
      font-size: 16px;
      line-height: 1.6;
    `,
  }}
/>

<Toolbar
  editor={editorRef}
  iconTint="#333"
  selectedIconTint="#007AFF"
  iconSize={24}
  style={{ backgroundColor: '#f0f0f0', paddingVertical: 8 }}
/>

Image Handling

import { ImagePicker } from 'react-native-image-picker';

const handleAddImage = () => {
  ImagePicker.launchImageLibrary({}, (response) => {
    if (response.assets?.[0]) {
      editorRef.current?.insertImage(
        { src: response.assets[0].uri },
        { width: '100%', height: 'auto' }
      );
    }
  });
};

<Toolbar editor={editorRef} onPressAddImage={handleAddImage} />

Read-Only Display

<Editor
  readOnly={true}
  initialContentHTML="<p>Formatted content</p>"
  editorStyle={{ backgroundColor: '#fff', color: '#333' }}
/>

ColorPicker

The ColorPicker component provides a modal interface for selecting colors with preset options and custom hex input. Perfect for text color (foreColor) and highlight color (hiliteColor) selection.

import { Editor, Toolbar, ColorPicker, actions } from 'rn-rich-text-editor';

function MyEditor() {
  const editorRef = useRef(null);
  const [showColorPicker, setShowColorPicker] = useState(false);
  const [colorPickerType, setColorPickerType] = useState('foreColor');
  const [selectedColor, setSelectedColor] = useState('#000000');

  const handleColorSelect = (color) => {
    if (colorPickerType === 'foreColor') {
      editorRef.current?.setForeColor(color);
    } else {
      editorRef.current?.setHiliteColor(color);
    }
    setSelectedColor(color);
  };

  return (
    <View style={{ flex: 1 }}>
      <Editor ref={editorRef} />
      <Toolbar
        editor={editorRef}
        actions={[
          actions.setBold,
          actions.setItalic,
          actions.foreColor,
          actions.hiliteColor,
        ]}
        foreColor={() => {
          setColorPickerType('foreColor');
          setShowColorPicker(true);
        }}
        hiliteColor={() => {
          setColorPickerType('hiliteColor');
          setShowColorPicker(true);
        }}
      />
      <ColorPicker
        visible={showColorPicker}
        onClose={() => setShowColorPicker(false)}
        onSelectColor={handleColorSelect}
        title={colorPickerType === 'foreColor' ? 'Text Color' : 'Highlight Color'}
        initialColor={selectedColor}
      />
    </View>
  );
}

ColorPicker Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | visible | boolean | false | Controls modal visibility | | onClose | () => void | - | Called when modal closes | | onSelectColor | (color: string) => void | - | Called when a color is selected | | title | string | 'Text color' | Modal title | | initialColor | string | '#000000' | Initial selected color |

Custom Action Handlers

<Toolbar
  editor={editorRef}
  fontSize={() => editorRef.current?.setFontSize(18)}
  foreColor={() => editorRef.current?.setForeColor('#FF0000')}
  lineHeight={() => editorRef.current?.setLineHeight(1.5)}
/>

Custom Icons & Renderers

// Custom icons
const iconMap = {
  [actions.setBold]: require('./assets/bold.png'),
  [actions.setItalic]: require('./assets/italic.png'),
};

<Toolbar editor={editorRef} iconMap={iconMap} />

// Custom renderer
const renderAction = (action, selected) => {
  if (action === actions.setBold) {
    return <CustomBoldButton selected={selected} />;
  }
  return null; // Use default for others
};

<Toolbar editor={editorRef} renderAction={renderAction} />

🎯 Smart Paste

The editor automatically preserves HTML formatting when pasting. It detects HTML in the clipboard and maintains:

• Text formatting (bold, italic, colors, etc.)
• Inline styles
• Links and HTML elements

To paste as plain text only:

<Editor pasteAsPlainText={true} />

🔧 Advanced

Custom JavaScript

editorRef.current?.injectJavascript(`
  document.querySelector('#content').style.border = '2px solid red';
`);

TypeScript

import { Editor, Toolbar, ColorPicker, EditorRef, EditorProps, ColorPickerProps, actions } from 'rn-rich-text-editor';

const editorRef = useRef<EditorRef>(null);
const props: EditorProps = { placeholder: 'Type...', onChange: (html) => {} };
const colorPickerProps: ColorPickerProps = {
  visible: true,
  onClose: () => {},
  onSelectColor: (color) => {},
  title: 'Text Color',
  initialColor: '#000000',
};

🐛 Troubleshooting

Editor not focusing?

• Set initialFocus={true} or call focusContentEditor()
• On Android, use showAndroidKeyboard() first

Content not updating?

• Use onChange callback instead of polling getContentHtml()
• Set initialContentHTML correctly on mount

Paste not preserving format?

• Ensure pasteAsPlainText is false
• HTML paste works when clipboard contains HTML data

Toolbar not working?

• Verify editor prop uses ref object: editor={editorRef}
• Ensure editor initializes before toolbar interactions

📱 Platform Notes

• iOS: WebKit WebView, automatic keyboard handling
• Android: Android WebView, may need showAndroidKeyboard() for focus

📄 License

MIT

🤝 Contributing

Contributions welcome! See the GitHub repository for issues and PRs.