Styling

Styling Model

There are two styling entry points:

• style — the outer editor container
• theme — editor content and toolbar appearance

The split is intentional. Content is rendered natively, so a React Native stylesheet cannot reach internal paragraphs, list markers, horizontal rules, or the iOS accessory toolbar.

For the design rationale, see Design Decisions.

Why Not A Plain Stylesheet API?

The editor internals are not normal React Native children — they are rendered through native views driven by a Rust render model.

A plain StyleSheet therefore cannot reach:

• internal text blocks
• list markers
• horizontal rules
• native-only toolbar chrome

So the package splits responsibility:

• style — layout and outer chrome
• theme — content and toolbar appearance

Basic Typography Theme

const theme = {
  text: {
    fontFamily: 'Georgia',
    fontSize: 17,
    lineHeight: 26,
    color: '#1f2937',
  },
  paragraph: {
    spacingAfter: 12,
  },
};

Editor Plus Toolbar Theme

const theme = {
  backgroundColor: '#ffffff',
  borderRadius: 16,
  contentInsets: {
    top: 16,
    right: 16,
    bottom: 16,
    left: 16,
  },
  text: {
    fontFamily: 'Avenir Next',
    fontSize: 16,
    lineHeight: 24,
    color: '#111827',
  },
  list: {
    indent: 22,
    baseIndentMultiplier: 1,
    itemSpacing: 6,
    markerColor: '#0f766e',
  },
  toolbar: {
    backgroundColor: '#f8fafc',
    borderColor: '#cbd5e1',
    borderRadius: 14,
    keyboardOffset: 8,
    horizontalInset: 12,
    buttonColor: '#334155',
    buttonActiveColor: '#0f172a',
    buttonDisabledColor: '#94a3b8',
    buttonActiveBackgroundColor: '#e2e8f0',
    buttonBorderRadius: 10,
  },
};

If you want top-level lists flush-left but still want each nested level to step inward, set theme.list.baseIndentMultiplier to 0:

const theme = {
  list: {
    indent: 16,
    baseIndentMultiplier: 0,
  },
};

Container Style Plus Theme

<NativeRichTextEditor
  style={{ minHeight: 240, borderWidth: 1, borderColor: '#d1d5db' }}
  theme={{
    backgroundColor: '#ffffff',
    text: {
      fontSize: 16,
      lineHeight: 24,
      color: '#111827',
    },
  }}
/>;

Toolbar Styling

Toolbar styling lives under theme.toolbar.

Current toolbar tokens:

• appearance
• backgroundColor
• borderColor
• borderWidth
• borderRadius
• keyboardOffset
• horizontalInset
• separatorColor
• buttonColor
• buttonActiveColor
• buttonDisabledColor
• buttonActiveBackgroundColor
• buttonBorderRadius

Set theme.toolbar.appearance to 'native' to use platform-native keyboard toolbar chrome instead of the custom painted toolbar. In that mode the iOS and Android keyboard toolbars ignore color and radius tokens, keeping only layout tokens like keyboardOffset and horizontalInset.

Editor Container Theme Tokens

These top-level theme fields control the native editor surface itself:

• backgroundColor
• borderRadius
• contentInsets

Setting contentInsets explicitly makes the native editor treat those values as the true text edge. On iOS it also removes the built-in UITextView horizontal gutter, so left: 0 and right: 0 render flush to the content bounds rather than preserving a hidden inset.

Toolbar Fallback Defaults

If theme.toolbar.appearance is omitted or set to 'custom', the built-in toolbar uses these defaults:

Field	Default
appearance	custom
backgroundColor	#FFFFFF
borderColor	#E5E5EA
borderRadius	0
keyboardOffset	0
horizontalInset	0
separatorColor	#E5E5EA
buttonColor	#666666
buttonActiveColor	#007AFF
buttonDisabledColor	#C7C7CC
buttonActiveBackgroundColor	rgba(0, 122, 255, 0.12)
buttonBorderRadius	6

If appearance is set to native, the keyboard-hosted toolbar keeps the native placement defaults (keyboardOffset: 6, horizontalInset: 10) and the chrome comes from the platform. On Android that is a Material 3 docked-toolbar treatment. On iOS 26+ it uses Liquid Glass; apps that set UIDesignRequiresCompatibility fall back to the legacy non-glass appearance.

Mention Styling

Mention inline chips and the native suggestion UI are styled through theme.mentions. The suggestion UI renders in the toolbar area, not a floating popover. See the Mentions Guide for setup and EditorMentionTheme for the full token list.

For read-only documents, NativeProseViewer can also override mention rendering per node via mentionPrefix and resolveMentionTheme. See NativeProseViewer Reference.

Related Docs

• Toolbar Setup
• Mentions Guide
• EditorTheme Reference