Styling

Styling

The 2.x API uses named, typed document styles. React Native style and containerStyle lay out the outer view; theme controls content rendered by the native editor and viewer. The 1.x token shape is replaced by EditorStyleSheet.create() and the element map below.

Create a document theme

import { EditorStyleSheet, RichTextEditor } from '@apollohg/react-native-rich-text-editor';

const theme = EditorStyleSheet.create({
    content: {
        backgroundColor: '#ffffff',
        padding: 16,
        borderWidth: 1,
        borderColor: '#d1d5db',
        borderRadius: 16,
    },
    text: { fontSize: 16, lineHeight: 24, color: '#111827' },
    paragraph: { marginBottom: 12 },
    h1: { fontSize: 30, fontWeight: 700, marginBottom: 14 },
    blockquote: {
        borderLeftWidth: 4,
        borderLeftColor: '#93c5fd',
        paddingLeft: 12,
        marginVertical: 12,
    },
    link: { color: '#0369a1', textDecorationLine: 'underline' },
    placeholder: { color: '#9ca3af', fontStyle: 'italic' },
});

<RichTextEditor
    documentHandle={documentHandle}
    style={{ minHeight: 240 }}
    containerStyle={{ marginHorizontal: 16 }}
    theme={theme}
/>;

documentHandle is the long-lived handle created in Getting Started. Pass the same theme to RichTextViewer for matching document presentation.

The style names are document elements, not arbitrary stylesheet names or schema node declarations. Styling an element does not add it to your schema. Use content.padding for the native content inset, and text for base typography. Block styles such as paragraph, h1, and codeBlock add typography, alignment, padding, margins, backgrounds, and borders.

Compose styles

Each document element accepts a style object, nested readonly arrays, and conditional false, null, or undefined entries. Later objects overwrite earlier properties. toolbar remains a configuration object and does not accept style arrays.

const emphasized = true;
const theme = EditorStyleSheet.create({
    paragraph: [
        { fontSize: 16, marginBottom: 10 },
        emphasized && { color: '#7c3aed' },
        [{ paddingHorizontal: 8 }, null],
    ],
    taskCheckbox: {
        size: 18,
        borderWidth: 1,
        borderColor: '#94a3b8',
        checked: [
            { backgroundColor: '#2563eb', checkColor: '#ffffff' },
            { borderColor: '#2563eb' },
        ],
    },
});

Shorthands resolve after array merging. A specific edge wins over its axis shorthand, which wins over the all-edge shorthand. For example, [{ paddingLeft: 4 }, { padding: 12 }] retains a left padding of 4. Borders and corner radii follow the same specific-property precedence.

EditorStyleSheet.create() validates and returns your map; it does not create numeric React Native style IDs. The accepted styles are a documented subset with editor-specific fields. Flexbox, percentage dimensions, transforms, shadows, arbitrary keys, and registered numeric style IDs are not document style inputs. Use React Native styles for outer layout. Invalid document properties or values throw a TypeError with the failing style path.

Lists, borders, and images

const theme = EditorStyleSheet.create({
    bulletList: { indent: 22, baseIndentMultiplier: 0, marginBottom: 12 },
    orderedList: { indent: 22, baseIndentMultiplier: 0, marginBottom: 12 },
    taskList: { indent: 22, baseIndentMultiplier: 0, marginBottom: 12 },
    listItem: { marginBottom: 6 },
    taskItem: { marginBottom: 6 },
    listMarker: {
        color: '#64748b',
        scale: 1,
        gap: 8,
        ordered: { schemes: ['decimal', 'lowerAlpha', 'lowerRoman'], suffix: '.' },
    },
    image: {
        resizeMode: 'cover',
        marginVertical: 12,
        padding: 4,
        borderWidth: 1,
        borderColor: '#cbd5e1',
        borderTopLeftRadius: 16,
        borderBottomRightRadius: 16,
    },
});

List container styles apply independently to bullet, ordered, and task lists. Use listItem and taskItem for item spacing, listMarker for bullets and numbering, and taskCheckbox for checkbox appearance and gap. baseIndentMultiplier: 0 aligns top-level lists with the content edge while nested levels still add indent. Ordered numbering schemes cycle by nesting depth, including unordered and task-list ancestors.

Surfaces and blocks support four border widths/colors, four corner radii, and solid, dashed, or dotted borders. Mention chips also accept full border styling and padding through theme.mention or the mentions addon’s theme.node. Use paddingHorizontal and paddingVertical or individual edge values to control the space around the label; padding: 0 removes the default chip padding. See Mentions for an example and platform defaults. Images support box styling and contain, cover, or stretch; their document dimensions and resizing behavior belong to the image attributes and allowImageResizing prop. See Links and Images.

Native font metrics can differ between iOS and Android. Font families must be available in the target app. Justified text is supported on iOS and Android API 26+; Android API 24–25 uses normal paragraph alignment without inter-word justification.

Contextual rules by ancestry

Flat element styles apply everywhere that element appears. Add rules to layer a style onto an element only inside a specific ancestor chain, such as a code block nested in a blockquote, or list markers inside a particular list.

const theme = EditorStyleSheet.create({
    codeBlock: { fontFamily: 'monospace' },
    listMarker: { color: '#64748b' },
    rules: [
        { path: ['blockquote', 'codeBlock'], style: { fontFamily: 'Courier-Bold' } },
        { path: ['listItem', 'listMarker'], style: { color: '#2563eb' } },
    ],
});

path is an ordered, nonempty list of element names ending in the styled element, and it must match the element's ancestor chain contiguously — ['blockquote', 'paragraph'] will not reach a paragraph inside a list that is itself inside a blockquote; use ['blockquote', 'bulletList', 'listItem', 'paragraph'] for that. Rules apply in array order after the flat element style, so a later rule wins on shared properties. See EditorTheme Reference for full matching and merge semantics.

Toolbar appearance

theme.toolbar styles both the React toolbar and native keyboard toolbar, with placement-specific behavior. Choose custom for caller-controlled chrome; native uses platform keyboard toolbar treatment. The React inline/standalone toolbar does not become a native keyboard accessory when you set appearance.

const theme = EditorStyleSheet.create({
    toolbar: {
        appearance: 'custom',
        backgroundColor: '#f8fafc',
        borderColor: '#cbd5e1',
        borderWidth: 1,
        borderRadius: 14,
        keyboardOffset: 8,
        horizontalInset: 12,
        buttonIconSize: 20,
        buttonColor: '#334155',
        buttonActiveColor: '#0f172a',
        buttonActiveBackgroundColor: '#e2e8f0',
        buttonBorderRadius: 10,
    },
});

keyboardOffset and horizontalInset position the keyboard-hosted toolbar. marginTop and showTopBorder concern the React toolbar. Native appearance may override supplied border widths, radii, and paint; use the EditorTheme Reference for platform differences. Each toolbar leaf or group can override its button with buttonStyle; see Toolbar Setup.

Mention suggestion controls use createMentionsAddon({ theme: { suggestions: … } }). Container styling applies to the React toolbar; native keyboard toolbars style suggestion rows. See Mentions. For optional token colors inside code blocks, see Code Syntax Highlighting.