├── .gitignore
├── README.md
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-native-web-container
 2 | A wrapper around the React Native WebView to add autoHeight and the ability to sanitize html using [sanitize-html](https://github.com/punkave/sanitize-html)
 3 | ## Installation
 4 | > npm install --save react-native-web-container
 5 | 
 6 | ## Usage
 7 | 
 8 | ### Example
 9 | ```javascript
10 | import WebContainer from 'react-native-web-container';
11 | 
12 | class MyWebView extends React.Component {
13 |   render() {
14 |     let html = '';
15 | 
16 |     return (
17 |       <WebContainer
18 |         style={{flex: 1}}
19 |         html={html}
20 |         makeSafe={true}
21 |         autoHeight={true} />
22 |     );
23 |   }
24 | }
25 | ```
26 | ### Properties
27 | | option | values |
28 | |---|---|
29 | | autoHeight | (default: `false`) automatically set the height of the WebView to fill the contains and remove the scroll bar |
30 | | makeSafe | (default: `false`) `false`: will not modify the html, `true`: will sanitize the html using the build in defaults, `object`: define a custom configuration for how to sanitize the html (See [docs](https://github.com/punkave/sanitize-html#how-to-use))
31 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import React from 'react-native';
 4 | let { WebView } = React;
 5 | import sanitizeHtml from 'sanitize-html';
 6 | import _ from 'lodash';
 7 | 
 8 | const script = '<script>window.location.hash = 1;document.title = document.height;</script>';
 9 | 
10 | const defaultSafeConfig = _.defaults(
11 |   {
12 |     allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'style']),
13 |     allowedAttributes: _.defaults(
14 |       {
15 |         id: {allTags: true},
16 |         style: {allTags: true},
17 |         src: {allowedTags: ['img']}
18 |       }, sanitizeHtml.defaults.allowedAttributes)
19 |   },
20 |   sanitizeHtml.defaults
21 | );
22 | 
23 | let scrubHtml = function (html, makeSafe) {
24 |   if (!html || makeSafe === false) {
25 |     return html;
26 |   }
27 | 
28 |   return safeHtml(
29 |     html,
30 |     _.isObject(makeSafe) ? makeSafe : defaultSafeConfig);
31 | };
32 | 
33 | class WebContainer extends React.Component {
34 |   constructor(props) {
35 |     super();
36 |     this.state = {
37 |       height: props.height || 0
38 |     };
39 |   }
40 | 
41 |   onNavigationStateChange(navState) {
42 |     this.setState({
43 |       height: navState.title
44 |     });
45 |   }
46 | 
47 |   render() {
48 |     let {
49 |       html,
50 |       style,
51 |       autoHeight,
52 |       makeSafe,
53 |       scrollEnabled,
54 |       ...props
55 |     } = this.props;
56 | 
57 |     let scrubbedHtml = scrubHtml(html, makeSafe);
58 | 
59 |     return (
60 |       <WebView
61 |         {...props}
62 |         style={[style, (autoHeight ? {height: Number(this.state.height)} : {})]}
63 |         scrollEnabled={autoHeight ? false : scrollEnabled}
64 |         html={autoHeight ? (scrubbedHtml + script) : scrubbedHtml}
65 |         onNavigationStateChange={this.onNavigationStateChange.bind(this)} />
66 |     );
67 |   }
68 | }
69 | 
70 | WebContainer.propTypes = {
71 |   autoHeight: React.PropTypes.boolean,
72 |   makeSafe: React.PropTypes.oneOf([
73 |     React.PropTypes.boolean,
74 |     React.PropTypes.object
75 |   ])
76 | };
77 | 
78 | WebContainer.defaultProps = {
79 |   makeSafe: false
80 | };
81 | 
82 | export default WebContainer;
83 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-web-container",
 3 |   "version": "1.0.0",
 4 |   "description": "A wrapper around the react native WebView to add autoHeight, scrub html, etc",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/danrigsby/react-native-web-container.git"
12 |   },
13 |   "keywords": [
14 |     "react-native",
15 |     "react",
16 |     "WebView"
17 |   ],
18 |   "author": "Dan Rigsby",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/danrigsby/react-native-web-container/issues"
22 |   },
23 |   "homepage": "https://github.com/danrigsby/react-native-web-container#readme",
24 |   "devDependencies": {
25 |   },
26 |   "peerDependencies": {
27 |     "react-native": ">=0.10.0"
28 |   },
29 |   "dependencies": {
30 |     "lodash": "3.10.1",
31 |     "sanitize-html": "^1.11.2"
32 |   }
33 | }
34 | 


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