change html property to source (now can use uri as webview source); make background color transparent by default; update version to 0.1.2

autoHeightWebView/index.android.js

@@ -18,6 +18,8 @@ import {
 
 import ImmutableComponent from 'react-immutable-component';
 
+import Immutable from 'immutable';
+
 const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, { nativeOnly: { messagingEnabled: PropTypes.bool } });
 
 export default class AutoHeightWebView extends ImmutableComponent {
@@ -47,9 +49,8 @@ export default class AutoHeightWebView extends ImmutableComponent {
     }
 
     componentWillReceiveProps(nextProps) {
-        // injectedJavaScript only works when webview reload (html changed)
-        if (nextProps.html === this.props.html) {
-            this.htmlHasChanged = false;
+        // injectedJavaScript only works when webview reload (source changed)
+        if (Immutable.is(Immutable.fromJS(this.props.source), Immutable.fromJS(nextProps.source))) {
             return;
         }
         else {
@@ -149,24 +150,30 @@ export default class AutoHeightWebView extends ImmutableComponent {
     }
 
     render() {
-        const source = this.props.enableBaseUrl ? {
-            html: this.props.html,
-            baseUrl: 'file:///android_asset/web/'
-        } : { html: this.props.html };
+        const { height, script, isChangingSource } = this.state;
+        const { source, heightOffset, customScript, style, enableBaseUrl } = this.props;
+        let webViewSource = source;
+        if (enableBaseUrl) {
+            webViewSource = Object.assign({}, source, { baseUrl: 'file:///android_asset/web/' });
+        }
         return (
             <View style={[{
                 width: ScreenWidth,
-                height: this.state.height + this.state.heightOffset
-            }, this.props.style]}>
+                height: height + heightOffset,
+                backgroundColor: 'transparent'
+            }, style]}>
                 {
-                    this.state.isChangingSource ? null :
+                    isChangingSource ? null :
                         <RCTAutoHeightWebView
                             ref={webview => this.webview = webview}
-                            style={{ flex: 1 }}
+                            style={{
+                                flex: 1,
+                                backgroundColor: 'transparent'
+                            }}
                             javaScriptEnabled={true}
-                            injectedJavaScript={this.state.script + this.props.customScript}
+                            injectedJavaScript={script + customScript}
                             scrollEnabled={false}
-                            source={source}
+                            source={webViewSource}
                             // below kitkat
                             onChange={this.onMessage}
                             onMessage={this.onMessage}
@@ -178,14 +185,14 @@ export default class AutoHeightWebView extends ImmutableComponent {
 }
 
 AutoHeightWebView.propTypes = {
-    ...WebView.propTypes,
-    html: PropTypes.string,
+    source: WebView.propTypes.source,
     onHeightUpdated: PropTypes.func,
     customScript: PropTypes.string,
     // offset rn webview margin
     heightOffset: PropTypes.number,
     // baseUrl not work in android 4.3 or below version
     enableBaseUrl: PropTypes.bool,
+    style: View.propTypes.style,
     // works if set enableBaseUrl to true; add web/files... to android/app/src/assets/
     files: PropTypes.arrayOf(PropTypes.shape({
         href: PropTypes.string,

autoHeightWebView/index.ios.js

@@ -60,19 +60,23 @@ export default class AutoHeightWebView extends ImmutableComponent {
     }
 
     render() {
+        const { height, script } = this.state;
+        const { source, heightOffset, customScript, style } = this.props;
+        const webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
         return (
             <View style={[{
                 width: ScreenWidth,
-                height: this.state.height + this.props.heightOffset,
-            }, this.props.style]}>
+                height: height + heightOffset,
+                backgroundColor: 'transparent'
+            }, style]}>
                 <WebView
-                    style={{ flex: 1 }}
-                    injectedJavaScript={this.state.script + this.props.customScript}
-                    scrollEnabled={false}
-                    source={{
-                        html: this.props.html,
-                        baseUrl: 'web/'
+                    style={{
+                        flex: 1,
+                        backgroundColor: 'transparent'
                     }}
+                    injectedJavaScript={script + customScript}
+                    scrollEnabled={false}
+                    source={webViewSource}
                     onNavigationStateChange={this.handleNavigationStateChange} />
             </View>
         );
@@ -80,7 +84,7 @@ export default class AutoHeightWebView extends ImmutableComponent {
 }
 
 AutoHeightWebView.propTypes = {
-    html: PropTypes.string,
+    source: WebView.propTypes.source,
     onHeightUpdated: PropTypes.func,
     customScript: PropTypes.string,
     // offset rn webview margin

demo/explorer.js

@@ -22,7 +22,7 @@ export default class Explorer extends Component {
         this.html1 = `<p>Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span>If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with “moving”. I’d also use the tags “pets”, “marriage”, “career change”, and “travel tips”.</span></p>`;
         this.script0 = '';
         this.script1 = `document.body.style.background = 'lightyellow';`;
-        this.changeHtml = this.changeHtml.bind(this);
+        this.changeSource = this.changeSource.bind(this);
         this.changeScript = this.changeScript.bind(this);
         this.state = {
             html: this.html0,
@@ -30,14 +30,14 @@ export default class Explorer extends Component {
         };
     }
 
-    changeHtml() {
+    changeSource() {
         this.setState(prevState => ({
             html: prevState.html === this.html0 ? this.html1 : this.html0
         }));
     }
 
     changeScript() {
-        this.changeHtml();
+        this.changeSource();
         this.setState(prevState => ({
             script: prevState.script === this.script0 ? this.script1 : this.script0
         }));
@@ -54,17 +54,17 @@ export default class Explorer extends Component {
                     alignItems: 'center'
                 }}>
                 <AutoHeightWebView
-                    html={this.state.html}
+                    source={{ html: this.state.html }}
                     customScript={this.state.script} />
                 <TouchableOpacity
-                    onPress={this.changeHtml}
+                    onPress={this.changeSource}
                     style={Styles.button}>
-                    <Text>change html</Text>
+                    <Text>change source</Text>
                 </TouchableOpacity>
                 <TouchableOpacity
                     onPress={this.changeScript}
                     style={Styles.button}>
-                    <Text>change script (have to change html to reload)</Text>
+                    <Text>change script (have to change source to reload on android)</Text>
                 </TouchableOpacity>
             </ScrollView>
         );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-autoheight-webview",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "An auto height webview for React Native",
   "main": "autoHeightWebView",
   "files": [
@@ -27,6 +27,7 @@
   },
   "homepage": "https://github.com/iou90/react-native-autoheight-webview#readme",
   "dependencies": {
+    "immutable": "^3.8.1",
     "react-immutable-component": "0.0.1"
   }
 }

yarn.lock

@@ -0,0 +1,11 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+immutable@^3.8.1:
+  version "3.8.1"
+  resolved "http://registry.npm.taobao.org/immutable/download/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"
+
+react-immutable-component@0.0.1:
+  version "0.0.1"
+  resolved "http://registry.npm.taobao.org/react-immutable-component/download/react-immutable-component-0.0.1.tgz#d39d994e3f3c896a4bf96395accaa63149d57505"