react-native-richify

A React Native rich text input with a normal TextInput editing surface, a horizontally scrollable toolbar, and live Markdown or HTML output below the editor.

Features

• Native editing with no WebView
• Built-in toolbar uses Lucide React Native icons by default
• Inline formatting: bold, italic, underline, strikethrough, code
• Line formatting: H1, H2, H3, bullet list, ordered list, left, center, right
• Link formatting on selected text
• Image insertion through the built-in toolbar
• Output panel can show Markdown or HTML
• Output panel can show raw serialized text or rendered preview
• Auto-growing editor with configurable input and preview height limits
• Custom toolbar items accept text, emoji, or React elements
• Headless useRichText hook for fully custom editors
• Typed JSON import and export of editor content

Installation

Install the package and react-native-svg:

npm install react-native-richify react-native-svg

or:

yarn add react-native-richify react-native-svg

react-native-svg is required because the built-in toolbar uses Lucide icons. If you want to use Lucide icons in your own custom toolbar items, install that in your app too:

npm install lucide-react-native

The package works in Expo and bare React Native apps. In Expo, react-native-svg is usually already available.

Quick Start

import React from 'react';
import { View } from 'react-native';
import { RichTextInput } from 'react-native-richify';

export default function App() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <RichTextInput
        placeholder="Write something..."
        showToolbar
        showOutputPreview
        defaultOutputFormat="markdown"
        defaultOutputPreviewMode="rendered"
        onChangeText={(text) => console.log('Plain text:', text)}
        onChangeOutput={(output, format) => {
          console.log(format, output);
        }}
      />
    </View>
  );
}

This gives you:

• a visible auto-growing TextInput
• the default Lucide-based toolbar
• live Markdown output by default
• a preview panel that opens below the input when content exists

How The Editor Works

The editing surface is always a normal TextInput. The library does not render styled text on top of the input.

Internally, content is stored as StyledSegment[]. Each segment contains plain text and formatting metadata. That lets the library:

• keep typing behavior predictable
• apply formatting to selected ranges or future input
• serialize the same content to Markdown or HTML
• export and re-import structured JSON safely

Formatting rules:

• If nothing is selected, pressing a format button affects the next characters you type.
• If text is selected, pressing a format button applies or removes that format immediately.
• Heading, list, and alignment controls work at line level.
• Every formatting button is toggleable except MD, HTML, Raw, and View.

Built-in Toolbar

The default toolbar is horizontally scrollable and ships with these controls:

| Control | Behavior | | --- | --- | | Bold, Italic, Underline, Strikethrough, Code | Toggle inline formatting | | Heading 1, Heading 2, Heading 3 | Toggle heading level on the current line | | Bullet List, Ordered List | Toggle list type on the current line | | Link | Apply or clear a hyperlink on the selection | | Image | Insert an image through your app's image-picking flow | | Align Left, Align Center, Align Right | Toggle paragraph alignment | | MD, HTML | Switch serialization format | | Raw, View | Switch between literal output and rendered preview |

Notes:

• Pressing an active heading button again clears that heading.
• Pressing an active list or alignment button again clears it.
• Link clears when the current selection already has a link.
• Image is a callback-driven action. Your app decides how the URI is chosen.

Output Panel

The preview panel below the editor is optional and controlled by showOutputPreview.

It supports two output formats:

• markdown
• html

It also supports two display modes:

• literal: show the raw Markdown or HTML text
• rendered: render the rich output visually

Useful props:

| Prop | Purpose | | --- | --- | | outputFormat | Controlled Markdown or HTML mode | | defaultOutputFormat | Initial format for uncontrolled usage | | outputPreviewMode | Controlled raw or rendered mode | | defaultOutputPreviewMode | Initial preview mode | | maxOutputHeight | Max preview height before the panel scrolls | | onChangeOutput | Receives the serialized output on every change | | onChangeOutputFormat | Called when toolbar format changes | | onChangeOutputPreviewMode | Called when toolbar preview mode changes |

Links

Link formatting is selection-based. Select text, then press the link button.

You have two common approaches:

1. Provide onRequestLink and open your own prompt, modal, or bottom sheet.
2. Use the built-in fallback, which auto-links only when the selected text already looks like a URL, domain, or email address.

<RichTextInput
  onRequestLink={({ selectedText, currentUrl, applyLink }) => {
    console.log(selectedText, currentUrl);
    applyLink('https://example.com');
  }}
/>

If the current selection already contains a link, pressing the button clears it.

Images

The built-in toolbar includes an image button. It does not open the device picker itself. Instead, it calls onRequestImage, and your app decides how to produce the final image URI.

<RichTextInput
  onRequestImage={async ({ insertImage }) => {
    const result = await pickImageFromYourApp();
    if (!result?.uri) {
      return;
    }

    insertImage(result.uri, {
      alt: result.fileName ?? 'Selected image',
      placeholder: '[image]',
    });
  }}
/>

Behavior notes:

• The editor inserts a plain text placeholder into the input so typing remains stable.
• The segment also stores imageSrc and optional imageAlt metadata.
• Raw mode shows Markdown or HTML image output.
• View mode renders the image in the output panel.
• If you do not provide onRequestImage, the fallback only works when the selected text already looks like an image URL such as https://site.com/photo.png.

Sizing And Input Behavior

RichTextInput grows with the text by default.

• minHeight sets the minimum input height.
• maxHeight limits the input height before the TextInput itself scrolls.
• maxOutputHeight limits the preview panel height before it scrolls.
• textInputProps passes additional native TextInput props through to the editor.

<RichTextInput
  minHeight={140}
  maxHeight={280}
  maxOutputHeight={220}
  textInputProps={{
    autoCapitalize: 'sentences',
    keyboardType: 'default',
  }}
/>

Customizing The Toolbar

Use toolbarItems when you want to keep the built-in toolbar behavior but replace some or all buttons.

ToolbarItem.label accepts any React node, so you can use:

• plain text such as 'B'
• emoji content
• a Lucide icon such as <Bold />
• any custom React element

When the label is not plain text, set accessibilityLabel so screen readers and tests can identify the button correctly.

Example:

import React from 'react';
import { Bold, ImagePlus, List } from 'lucide-react-native';
import { RichTextInput } from 'react-native-richify';

<RichTextInput
  toolbarItems={[
    {
      id: 'bold',
      label: <Bold />,
      accessibilityLabel: 'Bold',
      format: 'bold',
    },
    {
      id: 'note',
      label: 'Note',
      onPress: () => console.log('Custom action'),
    },
    {
      id: 'bullet',
      label: <List />,
      accessibilityLabel: 'Bullet list',
      listType: 'bullet',
    },
    {
      id: 'image',
      label: <ImagePlus />,
      accessibilityLabel: 'Insert image',
      actionType: 'image',
    },
    { id: 'html', label: 'HTML', outputFormat: 'html' },
  ]}
/>

Supported built-in item fields:

• format
• heading
• listType
• textAlign
• outputFormat
• outputPreviewMode
• actionType: 'link' | 'image'
• onPress
• renderButton

If you need a completely custom layout, use renderToolbar:

<RichTextInput
  renderToolbar={({
    actions,
    outputFormat,
    outputPreviewMode,
    onOutputFormatChange,
    onOutputPreviewModeChange,
    onRequestImage,
  }) => (
    <>
      <MyButton onPress={() => actions.toggleFormat('bold')} label="Bold" />
      <MyButton onPress={() => actions.setHeading('h2')} label="Heading" />
      <MyButton onPress={onRequestImage} label="Image" />
      <MyButton
        onPress={() => onOutputFormatChange('html')}
        label={outputFormat === 'html' ? 'HTML on' : 'HTML'}
      />
      <MyButton
        onPress={() => onOutputPreviewModeChange('rendered')}
        label={outputPreviewMode === 'rendered' ? 'Preview on' : 'Preview'}
      />
    </>
  )}
/>

Theming

Use the theme prop to override container, toolbar, input, and output styles.

<RichTextInput
  theme={{
    colors: {
      primary: '#0F766E',
      background: '#FFFFFF',
      text: '#0F172A',
      placeholder: '#94A3B8',
      toolbarBackground: '#F8FAFC',
      toolbarBorder: '#CBD5E1',
      link: '#0EA5E9',
      cursor: '#0F766E',
    },
    containerStyle: {
      borderRadius: 16,
      borderWidth: 1,
      borderColor: '#CBD5E1',
    },
    outputContainerStyle: {
      margin: 12,
      padding: 12,
      borderRadius: 12,
      backgroundColor: '#F8FAFC',
    },
  }}
/>

Common theme keys:

• containerStyle
• inputStyle
• baseTextStyle
• toolbarStyle
• toolbarButtonStyle
• toolbarButtonActiveStyle
• toolbarButtonTextStyle
• toolbarButtonActiveTextStyle
• outputContainerStyle
• outputLabelStyle
• outputTextStyle
• renderedOutputStyle
• codeStyle

Headless Usage

Use useRichText when you want to build your own editor shell instead of using <RichTextInput />.

import React from 'react';
import { Button, TextInput, View } from 'react-native';
import { useRichText } from 'react-native-richify';

export function HeadlessEditor() {
  const { actions } = useRichText({
    onChangeText: (text) => console.log(text),
  });

  return (
    <View>
      <Button title="Bold" onPress={() => actions.toggleFormat('bold')} />
      <Button title="Bullet" onPress={() => actions.setListType('bullet')} />
      <TextInput
        multiline
        value={actions.getPlainText()}
        onChangeText={actions.handleTextChange}
        onSelectionChange={(event) =>
          actions.handleSelectionChange(event.nativeEvent.selection)
        }
        style={{ minHeight: 120, borderWidth: 1, padding: 12 }}
      />
    </View>
  );
}

Data Model And Serialization

The editor stores content as typed segments:

type StyledSegment = {
  text: string;
  styles: {
    bold?: boolean;
    italic?: boolean;
    underline?: boolean;
    strikethrough?: boolean;
    code?: boolean;
    color?: string;
    backgroundColor?: string;
    fontSize?: number;
    heading?: 'h1' | 'h2' | 'h3' | 'none';
    listType?: 'bullet' | 'ordered' | 'none';
    textAlign?: 'left' | 'center' | 'right';
    link?: string;
    imageSrc?: string;
    imageAlt?: string;
  };
};

That makes it straightforward to:

• save content with exportJSON()
• restore content with importJSON()
• read plain text with getPlainText()
• generate Markdown with getOutput('markdown')
• generate HTML with getOutput('html')

Contributing

See AGENTS.md for contributor workflow notes.

License

MIT