NativePress Demo — Full Markdown Showcase

This post demonstrates every markdown element supported by NativePress. Content renders entirely natively on iOS & Android — no WebView, no HTML rendering, pure native components. You can combine bold, italic, bold italic, inline code, strikethrough, and hyperlinks anywhere inline.

Headings H2 — H4

Heading Level 3

Heading Level 4

NativePress maps WordPress headings to native Text components with scaled font sizes — no browser engine involved.

Inline Formatting

Bold text uses **double asterisks**. Italic text uses *single asterisks*. Bold italic combines both. Strikethrough uses ~~tildes~~. Inline code uses `backticks`. Links go to external URLs and open in the in-app browser.

Unordered List

• Native iOS & Android rendering via react-native-markdown-display
• No WebView dependency — 100% native components
• Markdown converted server-side by league/html-to-markdown
• Featured images, inline images, and captions fully supported
• Zero buyer configuration beyond setting WP_BASE_URL
  • Open constants/config.ts
  • Replace the placeholder URL with your WordPress site
  • Run npx expo start — done

Ordered List

1. Install the NativePress plugin from WordPress admin
2. Configure the app
   1. Open constants/config.ts in the Expo project
   2. Set WP_BASE_URL to your WordPress site URL
   3. Run npm install
3. Start the development server with npx expo start
4. Scan the QR code with Expo Go on your device
5. Ship to the App Store and Google Play

Blockquote

NativePress bridges the gap between WordPress’s powerful content management and truly native mobile experiences. No compromises, no WebView, no performance tax.

— NativePress Team

Nested Blockquote

The best mobile reading experience is one the user never has to think about.

— on native rendering

Performance is a feature. Markdown parsed natively is 10× faster than a WebView cold start.

Code Block — PHP

<?php
// Fetch posts from the NativePress REST API
$response = wp_remote_get( 'https://yoursite.com/wp-json/nativepress/v1/posts' );

if ( is_wp_error( $response ) ) {
    return;
}

$body  = wp_remote_retrieve_body( $response );
$data  = json_decode( $body, true );
$posts = $data['data'] ?? [];

foreach ( $posts as $post ) {
    // Each post includes content_markdown ready for react-native-markdown-display
    echo $post['title'] . PHP_EOL;
    echo $post['content_markdown'] . PHP_EOL;
    echo $post['featured_image']['full'] . PHP_EOL;
}

Code Block — JSON API Response

{
  "success": true,
  "data": [
    {
      "id": 42,
      "title": "Hello from NativePress",
      "slug": "hello-from-nativepress",
      "date": "2026-03-11T10:00:00",
      "content_markdown": "## HellonnThis is **native** markdown.n",
      "featured_image": {
        "full": "https://yoursite.com/wp-content/uploads/hero.jpg",
        "thumbnail": "https://yoursite.com/wp-content/uploads/hero-150x150.jpg",
        "alt": "Hero image"
      },
      "author": { "name": "Admin", "avatar": "" },
      "categories": [ { "id": 1, "name": "News", "slug": "news" } ]
    }
  ],
  "page": 1,
  "total_pages": 5
}

Code Block — TypeScript

// services/api.ts
import { WP_BASE_URL } from '../constants/config';

export interface Post {
  id: number;
  title: string;
  content_markdown: string;
  featured_image: { full: string; thumbnail: string; alt: string } | null;
}

export async function getPosts( page = 1 ): Promise<Post[]> {
  const url = `${WP_BASE_URL}/wp-json/nativepress/v1/posts?page=${page}`;
  const res  = await fetch( url );
  const json = await res.json();
  return json.data ?? [];
}

Table

Markdown Element	Syntax	react-native-markdown-display	Notes
Heading 1	# H1	Native Text 32px bold	Maps to H1
Heading 2	## H2	Native Text 24px bold	Maps to H2
Bold	**bold**	fontWeight: bold	Inline
Italic	*italic*	fontStyle: italic	Inline
Inline code	`code`	Monospace background	Inline
Fenced code	```lang	ScrollView + monospace	Block
Image		Native Image component	Full width
Link	[text](url)	Opens expo-web-browser	In-app
Table	Pipe syntax	Native View grid	Scrollable
Blockquote	> text	Left border + muted color	Block

Horizontal Rule

A horizontal rule renders as a full-width divider line in the native app:

---

Content continues normally after the divider.

Links

Links open inside the app using expo-web-browser — no external browser required. Examples: WordPress.org, Expo, React Native.

Banner Image

That covers every markdown element NativePress supports. Open the Markdown Preview tab in the NativePress admin to inspect the converted markdown for this post, or hit the API URL above to see the raw JSON response your app receives.