add baseUrl prop

autoHeightWebView/common.js

@@ -82,8 +82,8 @@ export function isEqual(newProps, oldProps) {
   return isChanged(getReloadRelatedData(newProps), getReloadRelatedData(oldProps));
 }
 
-export function setState(props, baseUrl, getBaseScript, getIframeBaseScript) {
-  const { source } = props;
+export function setState(props, getBaseScript, getIframeBaseScript) {
+  const { source, baseUrl } = props;
   const script = getScript(props, getBaseScript, getIframeBaseScript);
   let state = {};
   if (source.html) {
@@ -137,5 +137,5 @@ export function getRenderSize(enableAnimation, height, width, heightOffset, heig
   return {
     height: enableAnimation ? heightValue : height ? height + heightOffset : 0,
     width: enableAnimation ? widthValue : width
-  }
+  };
 }

autoHeightWebView/index.android.js

@@ -42,8 +42,6 @@ const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', Auto
 
 import momoize from './momoize';
 
-const baseUrl = 'file:///android_asset/web/';
-
 const getUpdatedState = momoize(setState, isEqual);
 
 export default class AutoHeightWebView extends PureComponent {
@@ -65,15 +63,15 @@ export default class AutoHeightWebView extends PureComponent {
     animationEasing: PropTypes.func,
     // offset of rn webView margin
     heightOffset: PropTypes.number,
-    // baseUrl not work in android 4.3 or below version
-    enableBaseUrl: PropTypes.bool,
     style: ViewPropTypes.style,
     //  rn WebView callback
     onError: PropTypes.func,
     onLoad: PropTypes.func,
     onLoadStart: PropTypes.func,
     onLoadEnd: PropTypes.func,
-    // works if set enableBaseUrl to true; add web/files... to android/app/src/assets/
+    // 'file:///android_asset/web/' by default, and baseUrl not work in android 4.3 or below version
+    baseUrl: PropTypes.string,
+    // add baseUrl/files... to android/app/src/assets/
     files: PropTypes.arrayOf(
       PropTypes.shape({
         href: PropTypes.string,
@@ -84,8 +82,8 @@ export default class AutoHeightWebView extends PureComponent {
   };
 
   static defaultProps = {
+    baseUrl: 'file:///android_asset/web/',
     scalesPageToFit: true,
-    enableBaseUrl: false,
     enableAnimation: true,
     animationDuration: 255,
     heightOffset: 20,
@@ -94,7 +92,7 @@ export default class AutoHeightWebView extends PureComponent {
 
   constructor(props) {
     super(props);
-    const { enableAnimation, style, source, enableBaseUrl, heightOffset } = props;
+    const { baseUrl, enableAnimation, style, source, heightOffset } = props;
     isBelowKitKat && DeviceEventEmitter.addListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
     this.finishInterval = true;
     const initWidth = getWidth(style);
@@ -105,7 +103,7 @@ export default class AutoHeightWebView extends PureComponent {
       height: initHeight,
       width: initWidth,
       script: getScript(props, getBaseScript),
-      source: enableBaseUrl ? Object.assign({}, source, { baseUrl }) : source
+      source: Object.assign({}, source, { baseUrl })
     };
     if (enableAnimation) {
       Object.assign(state, {
@@ -122,8 +120,8 @@ export default class AutoHeightWebView extends PureComponent {
 
   static getDerivedStateFromProps(props, state) {
     const { height: oldHeight, width: oldWidth, source: prevSource, script: prevScript } = state;
-    const { style, enableBaseUrl } = props;
-    const { source, script } = getUpdatedState(props, enableBaseUrl ? baseUrl : null, getBaseScript);
+    const { style } = props;
+    const { source, script } = getUpdatedState(props, getBaseScript);
     const height = style ? style.height : null;
     const width = style ? style.width : null;
     if (source.html !== prevSource.html || source.uri !== prevSource.uri || script !== prevScript) {

autoHeightWebView/index.ios.js

@@ -43,7 +43,9 @@ export default class AutoHeightWebView extends PureComponent {
     onLoadStart: PropTypes.func,
     onLoadEnd: PropTypes.func,
     onShouldStartLoadWithRequest: PropTypes.func,
-    // add web/files... to project root
+    // 'web/' by default
+    baseUrl: PropTypes.string,
+    // add baseUrl/files... to project root
     files: PropTypes.arrayOf(
       PropTypes.shape({
         href: PropTypes.string,
@@ -54,6 +56,7 @@ export default class AutoHeightWebView extends PureComponent {
   };
 
   static defaultProps = {
+    baseUrl: 'web/',
     scalesPageToFit: false,
     enableAnimation: true,
     animationDuration: 255,
@@ -147,7 +150,7 @@ export default class AutoHeightWebView extends PureComponent {
       style,
       scrollEnabled
     } = this.props;
-    const { source, script } = this.getUpdatedState(this.props, 'web/', getBaseScript, getIframeBaseScript);
+    const { source, script } = this.getUpdatedState(this.props, getBaseScript, getIframeBaseScript);
     return (
       <Animated.View
         style={[

demo/App.js

@@ -2,7 +2,7 @@
 
 import React, { Component } from 'react';
 
-import { ScrollView, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { ScrollView, StyleSheet, Text, TouchableOpacity, Platform } from 'react-native';
 
 import AutoHeightWebView from 'react-native-autoheight-webview';
 
@@ -99,15 +99,18 @@ export default class Explorer extends Component {
           height: {heightSize.height}, width: {heightSize.width}
         </Text>
         <AutoHeightWebView
+          baseUrl={Platform.OS === 'Android' ? 'file:///android_asset/webAssets/' : 'webAssets/'}
           style={{
             marginTop: 15
           }}
           enableBaseUrl
-          files={[{
-            href: 'demo.css',
-            type: 'text/css',
-            rel: 'stylesheet'
-          }]}
+          files={[
+            {
+              href: 'demo.css',
+              type: 'text/css',
+              rel: 'stylesheet'
+            }
+          ]}
           customStyle={widthStyle}
           onError={() => console.log('width on error')}
           onLoad={() => console.log('width on load')}

demo/android/app/src/main/assets/webAssets/demo.css

@@ -0,0 +1,3 @@
+.localStyle {
+    font-weight: bold;
+}

demo/ios/demo.xcodeproj/project.pbxproj

@@ -35,6 +35,7 @@
 		2D16E6881FA4F8E400B85C8A /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2D16E6891FA4F8E400B85C8A /* libReact.a */; };
 		2DCD954D1E0B4F2C00145EB5 /* demoTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* demoTests.m */; };
 		2DF0FFEE2056DD460020B375 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3EA31DF850E9000B6D8A /* libReact.a */; };
+		37C4D8D1212434D7009B8FF3 /* demo.css in Resources */ = {isa = PBXBuildFile; fileRef = 37C4D8D0212434D7009B8FF3 /* demo.css */; };
 		5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
 		ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
@@ -340,6 +341,7 @@
 		2D02E47B1E0B4A5D006451C7 /* demo-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "demo-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
 		2D02E4901E0B4A5D006451C7 /* demo-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "demo-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
 		2D16E6891FA4F8E400B85C8A /* libReact.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; path = libReact.a; sourceTree = BUILT_PRODUCTS_DIR; };
+		37C4D8D0212434D7009B8FF3 /* demo.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = demo.css; sourceTree = "<group>"; };
 		5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
 		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
@@ -484,6 +486,7 @@
 		13B07FAE1A68108700A75B9A /* demo */ = {
 			isa = PBXGroup;
 			children = (
+				37C4D8CF2124349B009B8FF3 /* webAssets */,
 				B7420B5E210E3082007509B0 /* web */,
 				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
 				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
@@ -527,6 +530,14 @@
 			name = Frameworks;
 			sourceTree = "<group>";
 		};
+		37C4D8CF2124349B009B8FF3 /* webAssets */ = {
+			isa = PBXGroup;
+			children = (
+				37C4D8D0212434D7009B8FF3 /* demo.css */,
+			);
+			path = webAssets;
+			sourceTree = "<group>";
+		};
 		5E91572E1DD0AC6500FF2AA8 /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -1059,6 +1070,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				37C4D8D1212434D7009B8FF3 /* demo.css in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
 				B7420B85210E3185007509B0 /* demo.css in Resources */,

demo/ios/webAssets/demo.css

@@ -0,0 +1,3 @@
+.localStyle {
+    font-weight: bold;
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-autoheight-webview",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {