Add prop for injecting custom styles into the webview head

autoHeightWebView/index.android.js

@@ -31,6 +31,7 @@ export default class AutoHeightWebView extends PureComponent {
     source: WebView.propTypes.source,
     onHeightUpdated: PropTypes.func,
     customScript: PropTypes.string,
+    customStyle: PropTypes.string,
     enableAnimation: PropTypes.bool,
     // if set to false may cause some layout issues (width of container will be than width of screen)
     scalesPageToFit: PropTypes.bool,
@@ -70,9 +71,12 @@ export default class AutoHeightWebView extends PureComponent {
         this
       );
     }
-    const initialScript = props.files
+    let initialScript = props.files
       ? this.appendFilesToHead(props.files, BaseScript)
       : BaseScript;
+    initialScript = props.customStyle
+      ? this.appendStylesToHead(props.customStyle, initialScript)
+      : initialScript;
     this.state = {
       isChangingSource: false,
       height: 0,
@@ -120,6 +124,9 @@ export default class AutoHeightWebView extends PureComponent {
     if (nextProps.files) {
       currentScript = this.appendFilesToHead(nextProps.files, BaseScript);
     }
+    currentScript = nextProps.customStyle
+      ? this.appendStylesToHead(nextProps.customStyle, currentScript)
+      : currentScript;
     this.setState({ script: currentScript });
   }
 
@@ -229,6 +236,19 @@ export default class AutoHeightWebView extends PureComponent {
     return script;
   }
 
+  appendStylesToHead(styles, script) {
+    if (!styles) {
+      return script;
+    }
+    return `
+      var styleElement = document.createElement('style');
+      var styleText = document.createTextNode('${styles}');
+      styleElement.appendChild(styleText);
+      document.head.appendChild(styleElement);
+      ${script}
+    `
+  }
+
   render() {
     const { height, script, isChangingSource, heightOffset } = this.state;
     const {

autoHeightWebView/index.ios.js

@@ -19,6 +19,7 @@ export default class AutoHeightWebView extends PureComponent {
         source: WebView.propTypes.source,
         onHeightUpdated: PropTypes.func,
         customScript: PropTypes.string,
+        customStyle: PropTypes.string,
         enableAnimation: PropTypes.bool,
         // if set to true may cause some layout issues (smaller font size)
         scalesPageToFit: PropTypes.bool,
@@ -48,7 +49,13 @@ export default class AutoHeightWebView extends PureComponent {
         if (this.props.enableAnimation) {
             this.opacityAnimatedValue = new Animated.Value(0);
         }
-        const initialScript = props.files ? this.appendFilesToHead(props.files, props.hasIframe ? IframeBaseScript : BaseScript) : props.hasIframe ? IframeBaseScript : BaseScript;
+        let initialScript = props.hasIframe ? IframeBaseScript : BaseScript;
+        initialScript = props.files
+          ? this.appendFilesToHead(props.files, BaseScript)
+          : BaseScript;
+        initialScript = props.customStyle
+          ? this.appendStylesToHead(props.customStyle, initialScript)
+          : initialScript;
         this.state = {
             height: 0,
             script: initialScript
@@ -58,8 +65,11 @@ export default class AutoHeightWebView extends PureComponent {
     componentWillReceiveProps(nextProps) {
         let currentScript = nextProps.hasIframe ? IframeBaseScript : BaseScript;
         if (nextProps.files) {
-            currentScript = this.appendFilesToHead(nextProps.files, nextProps.hasIframe ? IframeBaseScript : BaseScript);
+            currentScript = this.appendFilesToHead(nextProps.files, currentScript);
         }
+        currentScript = nextProps.customStyle
+          ? this.appendStylesToHead(nextProps.customStyle, currentScript)
+          : currentScript;
         this.setState({ script: currentScript });
     }
 
@@ -80,6 +90,19 @@ export default class AutoHeightWebView extends PureComponent {
         return script;
     }
 
+    appendStylesToHead(styles, script) {
+      if (!styles) {
+        return script;
+      }
+      return `
+        var styleElement = document.createElement('style');
+        var styleText = document.createTextNode('${styles}');
+        styleElement.appendChild(styleText);
+        document.head.appendChild(styleElement);
+        ${script}
+      `
+    }
+
     onHeightUpdated(height) {
         if (this.props.onHeightUpdated) {
             this.props.onHeightUpdated(height);