Skip to content

Commit ae57527

Browse files
mientjanmientjan
committed
adding working example app
1 parent 7c62a5b commit ae57527

File tree

7 files changed

+368
-37
lines changed

7 files changed

+368
-37
lines changed

‎example/App.js‎

Lines changed: 74 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,55 +4,94 @@
44
*/
55

66
import React, { Component } from 'react';
7-
import {
8-
Platform,
9-
StyleSheet,
10-
Text,
11-
View
12-
} from 'react-native';
7+
import {Platform, Picker, ScrollView, StyleSheet, Text, View} from "react-native";
138

14-
import Markdown from './react-native-markdown-renderer';
9+
import Markdown, {
10+
AstRenderer,
11+
getUniqueID,
12+
PluginContainer,
13+
renderRules,
14+
styles,
15+
} from './react-native-markdown-renderer';
16+
//
17+
import markdownItCheckbox from 'markdown-it-checkbox';
18+
import copyAll from './src/copyAll';
19+
import customMarkdownStyle from './src/customMarkdownStyle';
20+
import copyAllCheckboxPlugin from './src/copyAllCheckboxPlugin';
21+
import pluginRules from './src/pluginRules';
1522

1623
const instructions = Platform.select({
17-
ios: 'Press Cmd+R to reload,\n' +
18-
'Cmd+D or shake for dev menu',
19-
android: 'Double tap R on your keyboard to reload,\n' +
20-
'Shake or press menu button for dev menu',
24+
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
25+
android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu',
2126
});
2227

2328
export default class App extends Component {
29+
state = {
30+
view: 5,
31+
};
32+
33+
list = [
34+
{ description: 'default' },
35+
{ description: 'custom renderer' },
36+
{ description: 'custom style sheet' },
37+
{ description: 'custom rules' },
38+
{ description: 'custom rules & styles' },
39+
{ description: 'plugins (checkbox)' },
40+
];
41+
42+
getView(value) {
43+
switch (value) {
44+
case 0: {
45+
return <Markdown children={copyAll} />;
46+
}
47+
case 1: {
48+
return <Markdown renderer={renderer.render} children={copyAll} />;
49+
}
50+
case 2: {
51+
return <Markdown style={customMarkdownStyle} children={copyAll} />;
52+
}
53+
case 3: {
54+
return <Markdown rules={rules} children={copyAll} />;
55+
}
56+
case 4: {
57+
return <Markdown rules={rules} style={customMarkdownStyle} children={copyAll} />;
58+
}
59+
case 5: {
60+
return (
61+
<Markdown
62+
rules={pluginRules}
63+
plugins={[new PluginContainer(markdownItCheckbox, { divWrap: true })]}
64+
style={customMarkdownStyle}
65+
children={copyAllCheckboxPlugin}
66+
/>
67+
);
68+
}
69+
70+
default: {
71+
return <Markdown># Text</Markdown>;
72+
}
73+
}
74+
}
75+
2476
render() {
2577
return (
26-
<View style={styles.container}>
27-
<Text style={styles.welcome}>
28-
Welcome to React Native!
29-
</Text>
30-
<Text style={styles.instructions}>
31-
To get started, edit App.js
32-
</Text>
33-
<Text style={styles.instructions}>
34-
{instructions}
35-
</Text>
78+
<View style={styleSheet.container}>
79+
<Picker
80+
selectedValue={this.state.view}
81+
onValueChange={(itemValue, itemIndex) => this.setState({ view: itemIndex })}
82+
>
83+
{this.list.map((val, index) => <Picker.Item key={val.description} label={val.description} value={index} />)}
84+
</Picker>
85+
86+
<ScrollView>{this.getView(this.state.view)}</ScrollView>
3687
</View>
3788
);
3889
}
3990
}
4091

41-
const styles = StyleSheet.create({
92+
const styleSheet = StyleSheet.create({
4293
container: {
4394
flex: 1,
44-
justifyContent: 'center',
45-
alignItems: 'center',
46-
backgroundColor: '#F5FCFF',
47-
},
48-
welcome: {
49-
fontSize: 20,
50-
textAlign: 'center',
51-
margin: 10,
52-
},
53-
instructions: {
54-
textAlign: 'center',
55-
color: '#333333',
56-
marginBottom: 5,
95+
marginTop: 20,
5796
},
5897
});

‎example/package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,20 @@
99
"test": "jest"
1010
},
1111
"dependencies": {
12+
"markdown-it-checkbox": "^1.1.0",
13+
"prop-types": "^15.6.1",
1214
"react": "16.3.1",
13-
"react-native": "0.55.2"
15+
"react-native": "0.55.2",
16+
"react-native-fit-image": "^1.5.4"
1417
},
1518
"devDependencies": {
1619
"babel-jest": "22.4.3",
1720
"babel-preset-react-native": "4.0.0",
1821
"jest": "22.4.3",
22+
"markdown-it": "^8.4.1",
1923
"react-test-renderer": "16.3.1"
2024
},
2125
"jest": {
2226
"preset": "react-native"
2327
}
24-
}
28+
}

‎example/src/code.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const markdownText = `
2+
Inline \`code\`
3+
4+
Indented code
5+
6+
// Some comments
7+
line 1 of code
8+
line 2 of code
9+
line 3 of code
10+
11+
12+
Block code "fences"
13+
14+
\`\`\`
15+
Sample text here...
16+
\`\`\`
17+
18+
Syntax highlighting
19+
20+
\`\`\` js
21+
var foo = function (bar) {
22+
return bar++;
23+
};
24+
25+
console.log(foo(5));
26+
\`\`\`
27+
`;
28+
29+
export default markdownText;

‎example/src/copyAll.js‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
const markdownText = `
2+
# Syntax Support
3+
4+
__Advertisement :)__
5+
6+
This is a text. Click [here](https://google.com) to open a link. Let's add some more text to see how this behaves.
7+
8+
- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image
9+
resize in browser.
10+
- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly
11+
i18n with plurals support and easy syntax.
12+
13+
You will like those projects!
14+
15+
---
16+
17+
# h1 Heading 8-)
18+
## h2 Heading
19+
### h3 Heading
20+
#### h4 Heading
21+
##### h5 Heading
22+
###### h6 Heading
23+
24+
25+
### Horizontal Rules
26+
27+
___
28+
29+
---
30+
31+
32+
### Typographic replacements
33+
34+
Enable typographer option to see result.
35+
36+
(c) (C) (r) (R) (tm) (TM) (p) (P) +-
37+
38+
test.. test... test..... test?..... test!....
39+
40+
!!!!!! ???? ,, -- ---
41+
42+
"Smartypants, double quotes" and 'single quotes'
43+
44+
45+
## Emphasis
46+
47+
**This is bold text**
48+
49+
__This is bold text__
50+
51+
*This is italic text*
52+
53+
_This is italic text_
54+
55+
~~Strikethrough~~
56+
57+
58+
## Blockquotes
59+
60+
61+
> Blockquotes can also be nested...
62+
63+
>> ...by using additional greater-than signs right next to each other...
64+
65+
> > > ...or with spaces between arrows.
66+
67+
68+
## Lists
69+
70+
Unordered
71+
72+
+ Create a list by starting a line with \`+\`, \`-\`, or \`*\`
73+
+ Sub-lists are made by indenting 2 spaces:
74+
- Marker character change forces new list start:
75+
* Ac tristique libero volutpat at
76+
+ Facilisis in pretium nisl aliquet
77+
- Nulla volutpat aliquam velit
78+
+ Very easy!
79+
80+
Ordered
81+
82+
1. Lorem ipsum dolor sit amet
83+
2. Consectetur adipiscing elit
84+
3. Integer molestie lorem at massa
85+
86+
87+
1. You can use sequential numbers...
88+
1. ...or keep all the numbers as \`1.\`
89+
90+
Start numbering with offset:
91+
92+
57. foo
93+
1. bar
94+
95+
96+
## Code
97+
98+
Inline \`code\`
99+
100+
Indented code
101+
102+
// Some comments
103+
line 1 of code
104+
line 2 of code
105+
line 3 of code
106+
107+
108+
Block code "fences"
109+
110+
\`\`\`
111+
Sample text here...
112+
\`\`\`
113+
114+
Syntax highlighting
115+
116+
\`\`\` js
117+
var foo = function (bar) {
118+
return bar++;
119+
};
120+
121+
console.log(foo(5));
122+
\`\`\`
123+
124+
## Tables
125+
126+
| Option | Description |
127+
| ------ | ----------- |
128+
| data | path to data files to supply the data that will be passed into templates. |
129+
| engine | engine to be used for processing templates. Handlebars is the default. |
130+
| ext | extension to be used for dest files. |
131+
132+
Right aligned columns
133+
134+
| Option | Description |
135+
| ------:| -----------:|
136+
| data | path to data files to supply the data that will be passed into templates. |
137+
| engine | engine to be used for processing templates. Handlebars is the default. |
138+
| ext | extension to be used for dest files. |
139+
140+
141+
## Links
142+
143+
[link text](http://dev.nodeca.com)
144+
145+
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
146+
147+
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
148+
149+
150+
## Images
151+
152+
![Minion](https://octodex.github.com/images/minion.png)
153+
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
154+
155+
Like links, Images also have a footnote style syntax
156+
157+
![Alt text][id]
158+
159+
With a reference later in the document defining the URL location:
160+
161+
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
162+
`;
163+
164+
export default markdownText;

‎example/src/copyAllCheckboxPlugin.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const markdownText = `
2+
3+
+ Selected third parties include:
4+
- Service providers assigned to carrying out your service contract when placing a booking on the company. Ac tristique libero volutpat at Ac tristique libero volutpat at Ac tristique libero volutpat at Ac tristique libero volutpat at Ac tristique libero volutpat at
5+
- Service providers assigned to carrying out your service contract when placing a booking on the company. Ac tristique libero volutpat at Ac tristique libero volutpat at Ac tristique libero volutpat at Ac tristique libero volutpat at Ac tristique libero volutpat at
6+
- Service providers assigned to carrying out your service contract when placing a booking on the company. Ac tristique libero volutpat at Ac tristique libero volutpat at Ac tristique libero volutpat at Ac tristique libero volutpat at Ac tristique libero volutpat at
7+
8+
+ Sub-lists are made by indenting 2 spaces:
9+
- Marker character change forces new list start:
10+
* Ac tristique libero volutpat at
11+
+ Facilisis in pretium nisl aliquet
12+
- Nulla volutpat aliquam velit
13+
+ Very easy!
14+
15+
## ![loading](https://www.hippomundo.com/images/loading.gif) Images
16+
17+
![Minion](https://octodex.github.com/images/minion.png)
18+
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
19+
20+
# Syntax __Support__
21+
22+
__Advertisement :)__
23+
24+
* [ ] unchecked
25+
* [x] checked
26+
`;
27+
28+
export default markdownText;

0 commit comments

Comments
 (0)