Skip to content

Commit 84d4e9f

Browse files
mientjanclaude
mientjan
and
claude
committed
docs: move v3 examples to example app, add wiki pages and README links
- Move doc/example/ v3 examples into example/screens/ as v4 TypeScript function components with React Navigation - Add HomeScreen with navigation to 5 example screens (basic, file, custom styles, custom rules, custom renderer) - Delete outdated doc/ directory - Create wiki/ with 8 documentation pages (Getting Started, Custom Styles, Custom Rules, Custom Renderer, Plugins, API Reference, Migration from v3, Home) - Add npm/GitHub badges, package links, Examples section, and Documentation section to README Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 9129291 commit 84d4e9f

20 files changed

Lines changed: 1226 additions & 218 deletions

‎README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
# React Native Markdown Renderer
22

3+
[![npm version](https://img.shields.io/npm/v/react-native-markdown-renderer.svg)](https://www.npmjs.com/package/react-native-markdown-renderer)
4+
[![npm downloads](https://img.shields.io/npm/dm/react-native-markdown-renderer.svg)](https://www.npmjs.com/package/react-native-markdown-renderer)
5+
[![GitHub](https://img.shields.io/github/license/mientjan/react-native-markdown-renderer)](https://github.com/mientjan/react-native-markdown-renderer)
6+
37
A 100% CommonMark-compatible markdown renderer for React Native using native components (not WebView). All elements are rendered as native React Native components that can be overwritten when needed.
48

9+
**npm:** [react-native-markdown-renderer](https://www.npmjs.com/package/react-native-markdown-renderer) | **GitHub:** [mientjan/react-native-markdown-renderer](https://github.com/mientjan/react-native-markdown-renderer) | **Changelog:** [CHANGELOG.md](CHANGELOG.md)
10+
511
## Installation
612

713
```sh
@@ -40,6 +46,26 @@ This is **bold** and *italic* text.
4046
);
4147
```
4248

49+
## Examples
50+
51+
The [`example/`](example/) directory contains an Expo app with multiple screens demonstrating key features:
52+
53+
| Screen | Description | Source |
54+
|--------|-------------|--------|
55+
| Basic Markdown | Default rendering | [`BasicExample.tsx`](example/screens/BasicExample.tsx) |
56+
| From .md File | Load markdown from a file asset | [`MarkdownFileExample.tsx`](example/screens/MarkdownFileExample.tsx) |
57+
| Custom Styles | Override default styles | [`CustomStylesExample.tsx`](example/screens/CustomStylesExample.tsx) |
58+
| Custom Rules | Replace render rules | [`CustomRulesExample.tsx`](example/screens/CustomRulesExample.tsx) |
59+
| Custom Renderer | Provide a custom AstRenderer | [`CustomRendererExample.tsx`](example/screens/CustomRendererExample.tsx) |
60+
61+
To run the example app:
62+
63+
```sh
64+
cd example
65+
npm install
66+
npx expo start
67+
```
68+
4369
## TypeScript Support
4470

4571
This library is written in TypeScript and ships with full type definitions.
@@ -141,6 +167,18 @@ const App = () => (
141167
- Typographic replacements
142168
- Plugins for extra syntax support via [markdown-it plugins](https://www.npmjs.com/browse/keyword/markdown-it-plugin)
143169

170+
## Documentation
171+
172+
For comprehensive documentation, visit the [Wiki](https://github.com/mientjan/react-native-markdown-renderer/wiki):
173+
174+
- [Getting Started](https://github.com/mientjan/react-native-markdown-renderer/wiki/Getting-Started)
175+
- [Custom Styles](https://github.com/mientjan/react-native-markdown-renderer/wiki/Custom-Styles)
176+
- [Custom Rules](https://github.com/mientjan/react-native-markdown-renderer/wiki/Custom-Rules)
177+
- [Custom Renderer](https://github.com/mientjan/react-native-markdown-renderer/wiki/Custom-Renderer)
178+
- [Plugins](https://github.com/mientjan/react-native-markdown-renderer/wiki/Plugins)
179+
- [API Reference](https://github.com/mientjan/react-native-markdown-renderer/wiki/API-Reference)
180+
- [Migration from v3](https://github.com/mientjan/react-native-markdown-renderer/wiki/Migration-from-v3)
181+
144182
## Migration from v3 to v4
145183

146184
### Breaking Changes

‎doc/example/simple-with-custom-renderer.md‎

Lines changed: 0 additions & 62 deletions
This file was deleted.

‎doc/example/simple-with-custom-rules.md‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎doc/example/simple.md‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎example/App.tsx‎

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,63 @@
1-
import { useEffect, useState } from 'react';
1+
import { NavigationContainer } from '@react-navigation/native';
2+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
23
import { StatusBar } from 'expo-status-bar';
3-
import { StyleSheet, ScrollView, SafeAreaView, Text } from 'react-native';
4-
import { Asset } from 'expo-asset';
5-
import Markdown from 'react-native-markdown-renderer';
64

7-
/* eslint-disable @typescript-eslint/no-require-imports */
8-
const mdAsset = require('./example_test.md');
5+
import HomeScreen from './screens/HomeScreen';
6+
import BasicExample from './screens/BasicExample';
7+
import CustomStylesExample from './screens/CustomStylesExample';
8+
import CustomRulesExample from './screens/CustomRulesExample';
9+
import CustomRendererExample from './screens/CustomRendererExample';
10+
import MarkdownFileExample from './screens/MarkdownFileExample';
911

10-
export default function App() {
11-
const [copy, setCopy] = useState<string | null>(null);
12+
export type RootStackParamList = {
13+
Home: undefined;
14+
BasicExample: undefined;
15+
CustomStylesExample: undefined;
16+
CustomRulesExample: undefined;
17+
CustomRendererExample: undefined;
18+
MarkdownFileExample: undefined;
19+
};
1220

13-
useEffect(() => {
14-
(async () => {
15-
const asset = Asset.fromModule(mdAsset);
16-
await asset.downloadAsync();
17-
const uri = asset.localUri || asset.uri;
18-
const response = await fetch(uri);
19-
setCopy(await response.text());
20-
})();
21-
}, []);
21+
const Stack = createNativeStackNavigator<RootStackParamList>();
2222

23+
export default function App() {
2324
return (
24-
<SafeAreaView style={styles.safe}>
25-
<ScrollView style={styles.scroll} contentContainerStyle={styles.content}>
26-
{copy ? <Markdown>{copy}</Markdown> : <Text>Loading...</Text>}
27-
</ScrollView>
25+
<>
26+
<NavigationContainer>
27+
<Stack.Navigator initialRouteName="Home">
28+
<Stack.Screen
29+
name="Home"
30+
component={HomeScreen}
31+
options={{ title: 'Markdown Examples' }}
32+
/>
33+
<Stack.Screen
34+
name="BasicExample"
35+
component={BasicExample}
36+
options={{ title: 'Basic' }}
37+
/>
38+
<Stack.Screen
39+
name="MarkdownFileExample"
40+
component={MarkdownFileExample}
41+
options={{ title: 'From .md File' }}
42+
/>
43+
<Stack.Screen
44+
name="CustomStylesExample"
45+
component={CustomStylesExample}
46+
options={{ title: 'Custom Styles' }}
47+
/>
48+
<Stack.Screen
49+
name="CustomRulesExample"
50+
component={CustomRulesExample}
51+
options={{ title: 'Custom Rules' }}
52+
/>
53+
<Stack.Screen
54+
name="CustomRendererExample"
55+
component={CustomRendererExample}
56+
options={{ title: 'Custom Renderer' }}
57+
/>
58+
</Stack.Navigator>
59+
</NavigationContainer>
2860
<StatusBar style="auto" />
29-
</SafeAreaView>
61+
</>
3062
);
3163
}
32-
33-
const styles = StyleSheet.create({
34-
safe: {
35-
flex: 1,
36-
backgroundColor: '#fff',
37-
},
38-
scroll: {
39-
flex: 1,
40-
},
41-
content: {
42-
padding: 16,
43-
},
44-
});

‎example/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,16 @@
99
"web": "expo start --web"
1010
},
1111
"dependencies": {
12+
"@react-navigation/native": "^7.1.28",
13+
"@react-navigation/native-stack": "^7.13.0",
1214
"expo": "~54.0.33",
1315
"expo-asset": "~12.0.12",
1416
"expo-status-bar": "~3.0.9",
1517
"react": "19.1.0",
1618
"react-dom": "19.1.0",
1719
"react-native": "0.81.5",
20+
"react-native-safe-area-context": "^5.6.2",
21+
"react-native-screens": "^4.23.0",
1822
"react-native-web": "^0.21.0"
1923
},
2024
"devDependencies": {

‎example/screens/BasicExample.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { ScrollView, StyleSheet, SafeAreaView } from 'react-native';
2+
import Markdown from 'react-native-markdown-renderer';
3+
4+
const copy = `# h1 Heading 8-)
5+
6+
| Option | Description |
7+
| ------ | ----------- |
8+
| data | path to data files to supply the data that will be passed into templates. |
9+
| engine | engine to be used for processing templates. Handlebars is the default. |
10+
| ext | extension to be used for dest files. |
11+
`;
12+
13+
export default function BasicExample() {
14+
return (
15+
<SafeAreaView style={styles.safe}>
16+
<ScrollView contentContainerStyle={styles.content}>
17+
<Markdown>{copy}</Markdown>
18+
</ScrollView>
19+
</SafeAreaView>
20+
);
21+
}
22+
23+
const styles = StyleSheet.create({
24+
safe: {
25+
flex: 1,
26+
backgroundColor: '#fff',
27+
},
28+
content: {
29+
padding: 16,
30+
},
31+
});

0 commit comments

Comments
 (0)