feat(example): load markdown from .md file asset

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: mientjan

example/App.tsx

@@ -1,63 +1,29 @@
+import { useEffect, useState } from 'react';
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, ScrollView, SafeAreaView } from 'react-native';
+import { StyleSheet, ScrollView, SafeAreaView, Text } from 'react-native';
+import { Asset } from 'expo-asset';
 import Markdown from 'react-native-markdown-renderer';
 
-const copy = `# React Native Markdown Renderer
-
-## Features
-
-This library renders **Markdown** in *React Native* using native components.
-
-### Supported elements
-
-- **Bold** and *italic* text
-- ~~Strikethrough~~
-- [Links](https://github.com)
-- Inline \`code\`
-
-### Lists
-
-1. First ordered item
-2. Second ordered item
-3. Third ordered item
-
-- Unordered item A
-- Unordered item B
-- Unordered item C
-
-### Code block
-
-\`\`\`
-const greeting = "Hello, Markdown!";
-console.log(greeting);
-\`\`\`
-
-### Blockquote
-
-> Markdown is a lightweight markup language that you can use
-> to add formatting elements to plaintext text documents.
-
-### Table
-
-| Feature       | Status |
-|---------------|--------|
-| Headings      | Done   |
-| Bold / Italic | Done   |
-| Links         | Done   |
-| Images        | Done   |
-| Tables        | Done   |
-| Code blocks   | Done   |
-
----
-
-*Rendered with react-native-markdown-renderer v4*
-`;
+/* eslint-disable @typescript-eslint/no-require-imports */
+const mdAsset = require('./example_test.md');
 
 export default function App() {
+  const [copy, setCopy] = useState<string | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      const asset = Asset.fromModule(mdAsset);
+      await asset.downloadAsync();
+      const uri = asset.localUri || asset.uri;
+      const response = await fetch(uri);
+      setCopy(await response.text());
+    })();
+  }, []);
+
   return (
     <SafeAreaView style={styles.safe}>
       <ScrollView style={styles.scroll} contentContainerStyle={styles.content}>
-        <Markdown>{copy}</Markdown>
+        {copy ? <Markdown>{copy}</Markdown> : <Text>Loading...</Text>}
       </ScrollView>
       <StatusBar style="auto" />
     </SafeAreaView>

example/app.json

@@ -25,6 +25,9 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": [
+      "expo-asset"
+    ]
   }
 }

example/assets/adaptive-icon.png

@@ -0,0 +1,49 @@
+# React Native Markdown Renderer
+
+## Features
+
+This library renders **Markdown** in *React Native* using native components.
+
+### Supported elements
+
+- **Bold** and *italic* text
+- ~~Strikethrough~~
+- [Links](https://github.com)
+- Inline \`code\`
+
+### Lists
+
+1. First ordered item
+2. Second ordered item
+3. Third ordered item
+
+- Unordered item A
+- Unordered item B
+- Unordered item C
+
+### Code block
+
+\`\`\`
+const greeting = "Hello, Markdown!";
+console.log(greeting);
+\`\`\`
+
+### Blockquote
+
+> Markdown is a lightweight markup language that you can use
+> to add formatting elements to plaintext text documents.
+
+### Table
+
+| Feature       | Status |
+|---------------|--------|
+| Headings      | Done   |
+| Bold / Italic | Done   |
+| Links         | Done   |
+| Images        | Done   |
+| Tables        | Done   |
+| Code blocks   | Done   |
+
+---
+
+*Rendered with react-native-markdown-renderer v4*

example/assets/favicon.png

@@ -21,6 +21,9 @@ config.resolver.extraNodeModules = {
   'markdown-it': path.resolve(libraryRoot, 'node_modules', 'markdown-it'),
 };
 
+// Allow importing .md files as assets
+config.resolver.assetExts.push('md');
+
 // Block the library's node_modules for packages the example already provides
 config.resolver.blockList = [
   new RegExp(

example/assets/icon.png

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "expo": "~54.0.33",
+    "expo-asset": "~12.0.12",
     "expo-status-bar": "~3.0.9",
     "react": "19.1.0",
     "react-dom": "19.1.0",