Style Properties Reference

This document provides a comprehensive reference for all style properties available in react-native-enriched-markdown.

Platform Defaults

The library provides sensible defaults optimized for each platform:

Property	iOS	Android
System Font	SF Pro	Roboto
Monospace Font	Menlo	monospace
Line Height	Tighter (0.75x multiplier)	Standard

Style Inheritance

react-native-enriched-markdown uses a base block style architecture where all block elements (paragraphs, headings, lists, blockquotes, code blocks) share a common set of typography properties. This base block style includes:

fontSize - Font size in points
fontFamily - Font family name
fontWeight - Font weight
color - Text color
marginTop - Top margin
marginBottom - Bottom margin
lineHeight - Line height

Each block type extends this base style with its own specific properties (e.g., textAlign for paragraphs and headings, borderColor for blockquotes, bulletColor for lists).

Inline Style Inheritance

Inline styles (strong, emphasis, links, inline code, etc.) automatically inherit the base typography properties from their containing block. This means inline elements use the block's fontSize, fontFamily, fontWeight, and color as their foundation, then apply their own additional styling on top.

Example:

Heading (h2: fontSize 24, color blue)
└── Strong text inherits → fontSize 24, color blue + bold weight
└── Link inherits → fontSize 24 + link color + underline

List item (list: fontSize 16, color gray)
└── Emphasis inherits → fontSize 16, color gray + italic style
└── Inline code inherits → fontSize 16 + code background

This inheritance model ensures consistent typography throughout your Markdown content while allowing inline elements to add their own visual emphasis.

Custom Font Family for Inline Styles

Strong, emphasis, and inline code support an optional fontFamily property that gives you full control over the font face used for that element.

Default behavior (no fontFamily set):

Strong — adds the bold trait to the current block font
Emphasis — adds the italic trait to the current block font
Inline code — uses the platform's system monospace font (SF Mono on iOS, monospace on Android)

With fontFamily set:

By default, bold/italic traits are still applied on top of the custom font family. Use fontWeight: 'normal' or fontStyle: 'normal' to disable this and use the font face exactly as-is:

markdownStyle={{
  strong: {
    // Bold trait is applied on top of Montserrat-Bold (default: fontWeight 'bold')
    fontFamily: 'Montserrat-Bold',
  },
  strong: {
    // Uses Montserrat-SemiBold as-is, no bold trait added
    fontFamily: 'Montserrat-SemiBold',
    fontWeight: 'normal',
  },
  em: {
    // Italic trait is applied on top of Montserrat-Italic (default: fontStyle 'italic')
    fontFamily: 'Montserrat-Italic',
  },
  em: {
    // Uses Montserrat-Regular as-is, no italic trait added
    fontFamily: 'Montserrat-Regular',
    fontStyle: 'normal',
  },
  code: {
    // Uses CutiveMono-Regular directly, no system monospace applied
    fontFamily: 'CutiveMono-Regular',
  },
}}

Customizing Styles

The library provides sensible default styles for all Markdown elements out of the box. You can override any of these defaults using the markdownStyle prop — only specify the properties you want to change:

<EnrichedMarkdownText
  markdown={content}
  markdownStyle={{
    paragraph: {
      fontSize: 16,
      color: '#333',
      lineHeight: 24,
    },
    h1: {
      fontSize: 32,
      fontWeight: 'bold',
      color: '#000',
      marginBottom: 16,
      textAlign: 'center',
    },
    h2: {
      fontSize: 24,
      fontWeight: '600',
      marginBottom: 12,
      textAlign: 'left',
    },
    strong: {
      fontFamily: 'Montserrat-Bold',
      color: '#000',
    },
    em: {
      fontFamily: 'Montserrat-Italic',
      color: '#666',
    },
    strikethrough: {
      color: '#999',
    },
    underline: {
      color: '#333',
    },
    link: {
      fontFamily: 'System-Bold',
      color: '#007AFF',
      underline: true,
    },
    code: {
      fontFamily: 'CutiveMono-Regular',
      fontSize: 16,
      color: '#E91E63',
      backgroundColor: '#F5F5F5',
      borderColor: '#E0E0E0',
    },
    codeBlock: {
      fontSize: 14,
      fontFamily: 'monospace',
      backgroundColor: '#1E1E1E',
      color: '#D4D4D4',
      padding: 16,
      borderRadius: 8,
      marginBottom: 16,
    },
    blockquote: {
      borderColor: '#007AFF',
      borderWidth: 3,
      backgroundColor: '#F0F8FF',
      marginBottom: 12,
    },
    list: {
      fontSize: 16,
      bulletColor: '#007AFF',
      bulletSize: 6,
      markerColor: '#007AFF',
      gapWidth: 8,
      marginLeft: 20,
    },
    image: {
      borderRadius: 8,
      marginBottom: 12,
    },
    inlineImage: {
      size: 20,
    },
    taskList: {
      checkedColor: '#2196F3',
      borderColor: '#9E9E9E',
      checkmarkColor: '#FFFFFF',
      checkboxSize: 16,
    },
    math: {
      fontSize: 20,
      color: '#1F2937',
      backgroundColor: '#F3F4F6',
      padding: 12,
      marginBottom: 16,
      textAlign: 'center',
    },
    inlineMath: {
      color: '#1F2937',
    },
    spoiler: {
      color: '#6B7280',
      particles: { density: 10, speed: 25 },
      solid: { borderRadius: 6 },
    },
  }}
/>

Note

Performance: Memoize the markdownStyle prop with useMemo to avoid unnecessary re-renders:

import type { MarkdownStyle } from 'react-native-enriched-markdown';

const markdownStyle: MarkdownStyle = useMemo(() => ({
  paragraph: { fontSize: 16 },
  h1: { fontSize: 32 },
}), []);

Dark Mode

The library ships with light-mode color defaults. It does not include a colorScheme prop — just like React Native's Text, theming is left to the consumer.

To support dark mode, create MarkdownStyle objects for each color scheme and switch between them using useColorScheme(). Your values always win over the defaults — you only need to specify the colors you want to change:

import { useColorScheme } from 'react-native';
import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
import type { MarkdownStyle } from 'react-native-enriched-markdown';

const lightMarkdownStyle: MarkdownStyle = {
  blockquote: { backgroundColor: '#F9FAFB', borderColor: '#D1D5DB' },
  code: { color: '#E01E5A', backgroundColor: '#FDF2F4' },
  table: {
    headerBackgroundColor: '#F3F4F6',
    rowEvenBackgroundColor: '#FFFFFF',
    rowOddBackgroundColor: '#F9FAFB',
  },
  // ... override any other colors for light mode
};

const darkMarkdownStyle: MarkdownStyle = {
  paragraph: { color: '#E5E7EB' },
  blockquote: { backgroundColor: '#1F2937', borderColor: '#4B5563' },
  code: { color: '#F87171', backgroundColor: '#1F2937' },
  table: {
    headerBackgroundColor: '#1F2937',
    rowEvenBackgroundColor: '#111827',
    rowOddBackgroundColor: '#1A1A2E',
    borderColor: '#374151',
  },
  // ... override any other colors for dark mode
};

function App() {
  const colorScheme = useColorScheme();

  return (
    <EnrichedMarkdownText
      markdown={content}
      markdownStyle={colorScheme === 'dark' ? darkMarkdownStyle : lightMarkdownStyle}
    />
  );
}

Note

Performance: Define style objects outside the component (as shown above) or wrap them in useMemo so the same object reference is reused across renders.