add local custom font for demo

demo/App.js

@@ -1,6 +1,13 @@
-import React, { useState } from 'react';
+import React, {useState} from 'react';
 
-import { ScrollView, StyleSheet, Text, TouchableOpacity, Platform, Linking } from 'react-native';
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  Platform,
+  Linking,
+} from 'react-native';
 
 import AutoHeightWebView from 'react-native-autoheight-webview';
 
@@ -13,7 +20,7 @@ import {
   autoWidthScript,
   autoDetectLinkScript,
   style0,
-  inlineBodyStyle
+  inlineBodyStyle,
 } from './config';
 
 const onShouldStartLoadWithRequest = result => {
@@ -21,10 +28,11 @@ const onShouldStartLoadWithRequest = result => {
   return true;
 };
 
-const onError = ({ nativeEvent }) => console.error('WebView error: ', nativeEvent);
+const onError = ({nativeEvent}) =>
+  console.error('WebView error: ', nativeEvent);
 
 const onMessage = event => {
-  const { data } = event.nativeEvent;
+  const {data} = event.nativeEvent;
   let messageData;
   // maybe parse stringified JSON
   try {
@@ -33,10 +41,12 @@ const onMessage = event => {
     console.log(e.message);
   }
   if (typeof messageData === 'object') {
-    const { url } = messageData;
+    const {url} = messageData;
     // check if this message concerns us
     if (url && url.startsWith('http')) {
-      Linking.openURL(url).catch(error => console.error('An error occurred', error));
+      Linking.openURL(url).catch(error =>
+        console.error('An error occurred', error),
+      );
     }
   }
 };
@@ -54,51 +64,56 @@ const onWidthLoad = () => console.log('width on load');
 const onWidthLoadEnd = () => console.log('width on load end');
 
 const Explorer = () => {
-  const [{ widthHtml, heightHtml }, setHtml] = useState({
+  const [{widthHtml, heightHtml}, setHtml] = useState({
     widthHtml: autoWidthHtml0,
-    heightHtml: autoHeightHtml0
+    heightHtml: autoHeightHtml0,
   });
   const changeSource = () =>
     setHtml({
       widthHtml: widthHtml === autoWidthHtml0 ? autoWidthHtml1 : autoWidthHtml0,
-      heightHtml: heightHtml === autoHeightHtml0 ? autoHeightHtml1 : autoHeightHtml0
+      heightHtml:
+        heightHtml === autoHeightHtml0 ? autoHeightHtml1 : autoHeightHtml0,
     });
 
-  const [{ widthStyle, heightStyle }, setStyle] = useState({
+  const [{widthStyle, heightStyle}, setStyle] = useState({
     heightStyle: null,
-    widthStyle: inlineBodyStyle
+    widthStyle: inlineBodyStyle,
   });
   const changeStyle = () =>
     setStyle({
-      widthStyle: widthStyle === inlineBodyStyle ? style0 + inlineBodyStyle : inlineBodyStyle,
-      heightStyle: heightStyle === null ? style0 : null
+      widthStyle:
+        widthStyle === inlineBodyStyle
+          ? style0 + inlineBodyStyle
+          : inlineBodyStyle,
+      heightStyle: heightStyle === null ? style0 : null,
     });
 
-  const [{ widthScript, heightScript }, setScript] = useState({
+  const [{widthScript, heightScript}, setScript] = useState({
     heightScript: autoDetectLinkScript,
-    widthScript: null
+    widthScript: null,
   });
   const changeScript = () =>
     setScript({
       widthScript: widthScript == autoWidthScript ? autoWidthScript : null,
       heightScript:
-        heightScript !== autoDetectLinkScript ? autoDetectLinkScript : autoHeightScript + autoDetectLinkScript
+        heightScript !== autoDetectLinkScript
+          ? autoDetectLinkScript
+          : autoHeightScript + autoDetectLinkScript,
     });
 
-  const [heightSize, setHeightSize] = useState({ height: 0, width: 0 });
-  const [widthSize, setWidthSize] = useState({ height: 0, width: 0 });
+  const [heightSize, setHeightSize] = useState({height: 0, width: 0});
+  const [widthSize, setWidthSize] = useState({height: 0, width: 0});
 
   return (
     <ScrollView
       style={{
         paddingTop: 45,
-        backgroundColor: 'lightyellow'
+        backgroundColor: 'lightyellow',
       }}
       contentContainerStyle={{
         justifyContent: 'center',
-        alignItems: 'center'
-      }}
-    >
+        alignItems: 'center',
+      }}>
       <AutoHeightWebView
         customStyle={heightStyle}
         onError={onError}
@@ -107,26 +122,18 @@ const Explorer = () => {
         onLoadEnd={onHeightLoadEnd}
         onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
         onSizeUpdated={setHeightSize}
-        source={{ html: heightHtml }}
+        source={{html: heightHtml}}
         customScript={heightScript}
         onMessage={onMessage}
       />
-      <Text style={{ padding: 5 }}>
+      <Text style={{padding: 5}}>
         height: {heightSize.height}, width: {heightSize.width}
       </Text>
       <AutoHeightWebView
-        baseUrl={Platform.OS === 'android' ? 'file:///android_asset/webAssets/' : 'webAssets/'}
         style={{
-          marginTop: 15
+          marginTop: 15,
         }}
         enableBaseUrl
-        files={[
-          {
-            href: 'demo.css',
-            type: 'text/css',
-            rel: 'stylesheet'
-          }
-        ]}
         customStyle={widthStyle}
         onError={onError}
         onLoad={onWidthLoad}
@@ -134,10 +141,16 @@ const Explorer = () => {
         onLoadEnd={onWidthLoadEnd}
         onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
         onSizeUpdated={setWidthSize}
-        source={{ html: widthHtml }}
+        allowFileAccessFromFileURLs={true}
+        allowUniversalAccessFromFileURLs={true}
+        source={{
+          html: widthHtml,
+          baseUrl:
+            Platform.OS === 'android' ? 'file:///android_asset/' : 'web/',
+        }}
         customScript={widthScript}
       />
-      <Text style={{ padding: 5 }}>
+      <Text style={{padding: 5}}>
         height: {widthSize.height}, width: {widthSize.width}
       </Text>
       <TouchableOpacity onPress={changeSource} style={styles.button}>
@@ -146,7 +159,9 @@ const Explorer = () => {
       <TouchableOpacity onPress={changeStyle} style={styles.button}>
         <Text>change style</Text>
       </TouchableOpacity>
-      <TouchableOpacity onPress={changeScript} style={[styles.button, { marginBottom: 100 }]}>
+      <TouchableOpacity
+        onPress={changeScript}
+        style={[styles.button, {marginBottom: 100}]}>
         <Text>change script</Text>
       </TouchableOpacity>
     </ScrollView>
@@ -158,8 +173,8 @@ const styles = StyleSheet.create({
     marginTop: 15,
     backgroundColor: 'aliceblue',
     borderRadius: 5,
-    padding: 5
-  }
+    padding: 5,
+  },
 });
 
 export default Explorer;

demo/config.js

@@ -20,7 +20,13 @@ const style1 = `
 `;
 
 const inlineBodyStyle = `
+    @font-face {
+      font-family: ae_AlArabiya;
+      src:url("ae_AlArabiya.ttf");
+    }
+
     body {
+        font-family: ae_AlArabiya;
         display: inline-block;
     }
 `;
@@ -50,7 +56,7 @@ document.body.style.background = 'cornflowerblue';
 const autoWidthHtml0 = `
 <html>
 <head>
-  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
+  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 </head>
 <p class="localStyle" style="display: inline;background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;padding-top:0;padding-bottom:0;">hey</p>
 </html>

demo/ios/demo.xcodeproj/project.pbxproj

@@ -19,6 +19,7 @@
 		428E7C00A1DF1C1A2C1140EE /* libPods-demoTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 34E943675B55A190041D9BC6 /* libPods-demoTests.a */; };
 		5D9570ED1A0B682B5FF5E421 /* libPods-demo-tvOSTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 821EC82BD30472D6D387B788 /* libPods-demo-tvOSTests.a */; };
 		A50903E452D634CE572F43CD /* libPods-demo.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 8486CCD792395AAD80956F45 /* libPods-demo.a */; };
+		B7C1B3872394B353001240AA /* ae_AlArabiya.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B7C1B3862394B353001240AA /* ae_AlArabiya.ttf */; };
 		EFB606294F69E6FA304BD500 /* libPods-demo-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 9D8370FC4C13D1AE1CC8852B /* libPods-demo-tvOS.a */; };
 /* End PBXBuildFile section */
 
@@ -62,6 +63,7 @@
 		914896C0CEFDAA592DADF952 /* Pods-demo.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-demo.release.xcconfig"; path = "Target Support Files/Pods-demo/Pods-demo.release.xcconfig"; sourceTree = "<group>"; };
 		9D8370FC4C13D1AE1CC8852B /* libPods-demo-tvOS.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-demo-tvOS.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		A74FCF62A73172586BCD1E8C /* Pods-demo-tvOS.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-demo-tvOS.release.xcconfig"; path = "Target Support Files/Pods-demo-tvOS/Pods-demo-tvOS.release.xcconfig"; sourceTree = "<group>"; };
+		B7C1B3862394B353001240AA /* ae_AlArabiya.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = ae_AlArabiya.ttf; sourceTree = "<group>"; };
 		B932E4CF7C7ADA47E0C72933 /* Pods-demo-tvOSTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-demo-tvOSTests.debug.xcconfig"; path = "Target Support Files/Pods-demo-tvOSTests/Pods-demo-tvOSTests.debug.xcconfig"; sourceTree = "<group>"; };
 		BB1DF6C3AB03F9FA00E48CAE /* Pods-demo-tvOS.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-demo-tvOS.debug.xcconfig"; path = "Target Support Files/Pods-demo-tvOS/Pods-demo-tvOS.debug.xcconfig"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
@@ -148,7 +150,6 @@
 				43307E7576B385875B79FCDF /* Pods-demoTests.debug.xcconfig */,
 				150E6CAFA5EF11AE47ED825C /* Pods-demoTests.release.xcconfig */,
 			);
-			name = Pods;
 			path = Pods;
 			sourceTree = "<group>";
 		};
@@ -175,6 +176,7 @@
 		83CBB9F61A601CBA00E9B192 = {
 			isa = PBXGroup;
 			children = (
+				B7C1B3852394B30A001240AA /* web */,
 				13B07FAE1A68108700A75B9A /* demo */,
 				832341AE1AAA6A7D00B99B32 /* Libraries */,
 				00E356EF1AD99517003FC87E /* demoTests */,
@@ -198,6 +200,14 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		B7C1B3852394B30A001240AA /* web */ = {
+			isa = PBXGroup;
+			children = (
+				B7C1B3862394B353001240AA /* ae_AlArabiya.ttf */,
+			);
+			path = web;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -308,6 +318,7 @@
 			developmentRegion = English;
 			hasScannedForEncodings = 0;
 			knownRegions = (
+				English,
 				en,
 				Base,
 			);
@@ -338,6 +349,7 @@
 			files = (
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
+				B7C1B3872394B353001240AA /* ae_AlArabiya.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -920,4 +932,4 @@
 /* End XCConfigurationList section */
 	};
 	rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
-}
+}