react-native-richtext-anhbtd

A WebView-based rich text (Tiptap) editor for React Native. Bold/italic/underline, headings, lists, code blocks, tables, images, text color/highlight, alignment, light/dark themes — no native code of its own, runs on iOS and Android.

The whole editor (Tiptap + extensions) is pre-bundled into a single HTML string at build time, so installing the package is all you need — no esbuild/Tiptap setup in your app.

Installation

npm install react-native-richtext-anhbtd react-native-webview
# or
yarn add react-native-richtext-anhbtd react-native-webview

react-native-webview is a peer dependency (it has native code) — install it in your app and run pod install for iOS.

Usage

import { useRef } from 'react';
import { RichTextEditor, RichTextHandle } from 'react-native-richtext-anhbtd';

export default function Screen() {
  const editor = useRef<RichTextHandle>(null);

  return (
    <RichTextEditor
      ref={editor}
      initialHTML="<p>Hello <strong>world</strong></p>"
      placeholder="Nhập nội dung…"
      theme="light"
      onReady={() => console.log('ready')}
      onError={msg => console.warn(msg)}
      style={{ flex: 1 }}
    />
  );
}

Read/write content through the ref:

await editor.current?.getHTML();   // Promise<string>
editor.current?.setHTML('<p>new</p>');
editor.current?.focus();
editor.current?.blur();

Props

| Prop | Type | Description | | --- | --- | --- | | initialHTML | string | Content baked into the page on first load. Use setHTML() for later updates. | | placeholder | string | Hint text shown while the editor is empty. Baked in on first mount — changing it later won't reload the WebView. Omit for no placeholder. | | theme | 'light' \| 'dark' | Initial theme. Default 'light'. | | onReady | () => void | Fired once the editor is mounted. | | onError | (message: string) => void | Editor-side errors. | | onRequestImage | () => Promise<string \| null> | Called when the user taps "insert image from device". Return the image src to insert (a local file:///data: URI, or a remote URL after upload), or null to cancel. | | toolbarItem | ToolbarItems | Allowlist of toolbar buttons to show. Only the listed keys are rendered (in the toolbar's built-in order, with group separators preserved). Omit to show every button. Read once on first mount — changing it later won't reload the WebView. | | style | ViewStyle | Container style. |

Ref handle

type RichTextHandle = {
  setHTML: (html: string) => void;
  getHTML: () => Promise<string>;
  focus: () => void;
  blur: () => void;
};

Inserting images from the device

The package does not depend on any image picker — you own the pick/upload flow via onRequestImage. Wire it to whatever picker you use:

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

<RichTextEditor
  onRequestImage={async () => {
    const res = await launchImageLibrary({ mediaType: 'photo', selectionLimit: 1 });
    if (res.didCancel) return null;
    return res.assets?.[0]?.uri ?? null; // later: await uploadAndGetUrl(asset)
  }}
/>

To render local file:// images, the WebView is configured with file access and a file:/// base URL. On iOS, picked file:// images may be origin-blocked in some setups — return a base64 data: URI from onRequestImage if you hit that.

Customizing the toolbar

Pass toolbarItem to show only a subset of buttons. The list is baked into the page at init time, so only those buttons are ever rendered — they keep the toolbar's built-in order and group separators. Omit the prop to show everything.

import { RichTextEditor, ToolbarItems } from 'react-native-richtext-anhbtd';

const items: ToolbarItems = ['bold', 'italic', 'underline', 'h1', 'h2', 'insertTable'];

<RichTextEditor toolbarItem={items} />

toolbarItem is read once on first mount — changing it later won't reload the WebView.

Available keys (ToolbarItemKey):

| Group | Keys | | --- | --- | | History | undo, redo | | Text marks | bold, italic, underline, strikeThrough, inlineCode | | Headings | h1, h2, h3, h4, h5, h6 | | Lists | unorderedList, orderedList | | Blocks | blockQuote, codeBlock, horizontalRule | | Formatting | subscript, superscript, highlight, textColor | | Align | alignLeft, alignCenter, alignRight, alignJustify | | Clear | clearFormatting | | Image | image, imageDevice | | Table | insertTable, insertHTMLTable, addColumnBefore, addColumnAfter, deleteColumn, addRowBefore, addRowAfter, deleteRow, mergeCells, splitCell, mergeOrSplit, setCellAttribute, toggleHeaderRow, toggleHeaderColumn, toggleHeaderCell, deleteTable, fixTables, goToPreviousCell, goToNextCell |

checkbox, checkboxChecked, link, unlink, mentionAt, and mentionHash are declared in the type but not yet rendered by the toolbar.

Theming

Colors are compiled into the editor's CSS at build time from a single token file. You can read the palette:

import { colors } from 'react-native-richtext-anhbtd';

colors.light.bg; // '#ffffff'
colors.dark.text; // '#f9fafb'

License

MIT © anhbtd