├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── index.js
├── libs
    └── html.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_*
2 | node_modules
3 | *.sublime*
4 | psd
5 | thumb
6 | *.log


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_*
2 | node_modules
3 | *.sublime*
4 | psd
5 | thumb
6 | *.log
7 | example


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2015 turing <o.u.turing@Gmail.com>
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## react-native-html ![NPM version](https://img.shields.io/npm/v/react-native-html.svg?style=flat) 
 2 | 
 3 | Render html string as react native custom elements 
 4 | 
 5 | **Tips:** WIP, only support <Image> and <Text> right now.
 6 | 
 7 | ### Installation
 8 | ```bash
 9 | $ npm install react-native-html --save
10 | ```
11 | 
12 | ### Example
13 | ```js
14 | var React = require('react-native');
15 | var {
16 |   AppRegistry,
17 |   View
18 | } = React;
19 | var ReactHtml = require('react-native-html');
20 | 
21 | var App = React.createClass({
22 |   render: function() {
23 |     return (
24 |       <ReactHtml>
25 |         <img src="a_image.jpg" />
26 |         Some text else.
27 |       </ReactHtml>
28 |     );
29 |   }
30 | });
31 | 
32 | AppRegistry.registerComponent('myApp', () => App);
33 | ```
34 | 
35 | ### Contributing
36 | - Fork this repo
37 | - Clone your repo
38 | - Install dependencies
39 | - Checkout a feature branch
40 | - Feel free to add your features
41 | - Make sure your features are fully tested
42 | - Open a pull request, and enjoy <3
43 | 
44 | ### MIT license
45 | Copyright (c) 2015 turing &lt;o.u.turing@Gmail.com&gt;
46 | 
47 | Permission is hereby granted, free of charge, to any person obtaining a copy
48 | of this software and associated documentation files (the &quot;Software&quot;), to deal
49 | in the Software without restriction, including without limitation the rights
50 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
51 | copies of the Software, and to permit persons to whom the Software is
52 | furnished to do so, subject to the following conditions:
53 | 
54 | The above copyright notice and this permission notice shall be included in
55 | all copies or substantial portions of the Software.
56 | 
57 | THE SOFTWARE IS PROVIDED &quot;AS IS&quot;, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
58 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
59 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
60 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
61 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
62 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
63 | THE SOFTWARE.
64 | 
65 | ---
66 | ![docor](https://raw.githubusercontent.com/turingou/docor/master/docor.png)
67 | built upon love by [docor](https://github.com/turingou/docor.git) v0.2.0


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./libs/html');


--------------------------------------------------------------------------------
/libs/html.js:
--------------------------------------------------------------------------------
 1 | var React = require('react-native');
 2 | var {
 3 |   Image,
 4 |   Text,
 5 |   View,
 6 | } = React;
 7 | 
 8 | var ReactHtml = React.createClass({
 9 |   componentWillMount: function() {
10 |     this.renderer = function(html) {
11 |       var images = html.match(/<img[^>]*>/);
12 | 
13 |       if (!images) 
14 |         return React.createElement(Text, {}, html);
15 | 
16 |       // Instead of parsing HTML 
17 |       // We simply use string splits function
18 |       // To split different parts as a ast tree.
19 |       var texts = html.split(/<img[^>]*>/);
20 |       var ret = [];
21 | 
22 |       texts.forEach((text, index) => {
23 |         var src;
24 |         if (images[index]) {
25 |           var srcWithQuotes = images[index].match(/src\=([^\s]*)\s/)[1]
26 |           src = srcWithQuotes.substring(1,srcWithQuotes.length - 1);
27 |         }
28 | 
29 |         if (text && text !== ' ')
30 |           ret.push(React.createElement(Text, {}, text))
31 | 
32 |         if (src) {
33 |           ret.push(React.createElement(Image, { 
34 |             source: { uri: src },
35 |             style: { 
36 |               width: 10, 
37 |               height: 10
38 |             }
39 |           }))
40 |         }
41 |       });
42 | 
43 |       return ret;
44 |     }
45 |   },
46 | 
47 |   render: function() {
48 |     return <View style={{ flex: 1 }}>{ this.renderer(this.props.children) }</View>;
49 |   }
50 | });
51 | 
52 | module.exports = ReactHtml;
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-html",
 3 |   "version": "0.1.0",
 4 |   "description": "render html as react native custom elements",
 5 |   "main": "index.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git@github.com:turingou/react-native-html.git"
 9 |   },
10 |   "keywords": [
11 |     "react",
12 |     "native",
13 |     "html"
14 |   ],
15 |   "author": "turing <o.u.turing@Gmail.com>",
16 |   "license": "MIT",
17 |   "bugs": {
18 |     "url": "https://github.com/turingou/react-native-html/issues"
19 |   },
20 |   "homepage": "https://github.com/turingou/react-native-html",
21 |   "dependencies": {
22 |     "react-native": "^0.3.1"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------