react-native-webview · TheAlmightyBob · Dec 2, 2022 · Dec 2, 2022 · Dec 2, 2022 · Dec 5, 2022
@@ -16,7 +16,8 @@ import Background from './examples/Background';
 import Downloads from './examples/Downloads';
 import Uploads from './examples/Uploads';
 import Injection from './examples/Injection';
-import LocalPageLoad from './examples/LocalPageLoad';
+import ImportHtmlAsset from './examples/ImportHtmlAsset';
+import { LocalHtmlFile } from './examples/LocalHtmlFile';
 import Messaging from './examples/Messaging';
 import NativeWebpage from './examples/NativeWebpage';
 import ApplePay from './examples/ApplePay';
@@ -78,12 +79,20 @@ const TESTS = {
       return <Injection />;
     },
   },
-  PageLoad: {
-    title: 'LocalPageLoad',
-    testId: 'LocalPageLoad',
-    description: 'Local Page load test',
+  ImportHtmlAsset: {
+    title: 'ImportHtmlAsset',
+    testId: 'ImportHtmlAsset',
+    description: 'Import HTML Asset test',
     render() {
-      return <LocalPageLoad />;
+      return <ImportHtmlAsset />;
+    },
+  },
+  LocalHtmlFile: {
+    title: 'LocalHtmlFile',
+    testId: 'LocalHtmlFile',
+    description: 'Local HTML File test',
+    render() {
+      return <LocalHtmlFile />;
     },
   },
   NativeWebpage: {
@@ -161,10 +170,19 @@ export default class App extends Component<Props, State> {
             onPress={() => this._changeTest('Injection')}
           />
           <Button
-            testID="testType_pageLoad"
-            title="LocalPageLoad"
-            onPress={() => this._changeTest('PageLoad')}
+            testID="testType_importHtml"
+            title="ImportHtmlAsset"
+            onPress={() => this._changeTest('ImportHtmlAsset')}
           />
+          {/* Loading Local files should be supported on other platforms, but the test page
+              uses react-native-blob-util, which only supports iOS/Android */}
+          {(Platform.OS === 'ios' || Platform.OS === 'android') && (
+            <Button
+              testID="testType_localHtmlFile"
+              title="LocalHtmlFile"
+              onPress={() => this._changeTest('LocalHtmlFile')}
+            />
+          )}
           <Button
             testID="testType_downloads"
             title="Downloads"

@@ -1,3 +1,7 @@
+// react-native-test-app sets reactNativeVersion to a numeric value (e.g. "6805"),
+// but react-native-blob-utils reads this and expects it to be in semantic version format
+ext.reactNativeVersion = "0.71.3"
+
 buildscript {
     def androidTestAppDir = "../../node_modules/react-native-test-app/android"
     apply(from: "${androidTestAppDir}/dependencies.gradle")

@@ -3,7 +3,7 @@ import {View, Text, Alert, TextInput, Button} from 'react-native';
 import WebView from 'react-native-webview';
 const localHtmlFile = require('../assets/test.html');
 
-export default class LocalPageLoad extends Component<Props, State> {
+export default class ImportHtmlAsset extends Component<Props, State> {
     render() {
       return (
         <View>

@@ -0,0 +1,31 @@
+import React, { Component, useEffect, useState } from 'react';
+import { View, Text, Alert, TextInput, Button } from 'react-native';
+import WebView from 'react-native-webview';
+import ReactNativeBlobUtil from 'react-native-blob-util';
+
+const path = `${ReactNativeBlobUtil.fs.dirs.DocumentDir}/test.html`;
+
+// eslint-disable-next-line import/prefer-default-export
+export const LocalHtmlFile = () => {
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    ReactNativeBlobUtil.fs
+      .writeFile(
+        path,
+        '<html><h1>File Access is working if you are reading this.</h1></html>',
+        'utf8',
+      )
+      .then(() => {
+        setReady(true);
+      });
+  }, []);
+  return ready ? (
+    <WebView
+      allowFileAccess
+      originWhitelist={['file://*']}
+      source={{ uri: path }}
+    />
+  ) : (
+    <View />
+  );
+};
@@ -233,7 +233,9 @@ PODS:
   - React-jsinspector (0.71.3)
   - React-logger (0.71.3):
     - glog
-  - react-native-webview (12.0.0-rc.2):
+  - react-native-blob-util (0.17.3):
+    - React-Core
+  - react-native-webview (12.1.0):
     - React-Core
   - React-perflogger (0.71.3)
   - React-RCTActionSheet (0.71.3):
@@ -316,7 +318,7 @@ PODS:
     - React-jsi (= 0.71.3)
     - React-logger (= 0.71.3)
     - React-perflogger (= 0.71.3)
-  - ReactTestApp-DevSupport (2.3.2):
+  - ReactTestApp-DevSupport (2.3.12):
     - React-Core
     - React-jsi
   - ReactTestApp-Resources (1.0.0-dev)
@@ -343,6 +345,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../../node_modules/react-native/ReactCommon/logger`)
+  - react-native-blob-util (from `../../node_modules/react-native-blob-util`)
   - react-native-webview (from `../..`)
   - React-perflogger (from `../../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -404,6 +407,8 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/react-native/ReactCommon/jsinspector"
   React-logger:
     :path: "../../node_modules/react-native/ReactCommon/logger"
+  react-native-blob-util:
+    :path: "../../node_modules/react-native-blob-util"
   react-native-webview:
     :path: "../.."
   React-perflogger:
@@ -440,12 +445,12 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  boost: 57d2868c099736d80fcd648bf211b4431e51a558
-  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
+  boost: a7c83b31436843459a1961bfd74b96033dc77234
+  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
   FBLazyVector: 60195509584153283780abdac5569feffb8f08cc
   FBReactNativeSpec: 5b217c2677f8edae343b6646dad608d5d3147fc0
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
+  glog: 476ee3e89abb49e07f822b48323c51c57124b572
   RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: bec48f07daf7bcdc2655a0cde84e07d24d2a9e2a
   RCTTypeSafety: 171394eebacf71e1cfad79dbfae7ee8fc16ca80a
@@ -460,7 +465,8 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 891dad49e50d35fba97eeb43a35ae7470a8e10b2
   React-jsinspector: 9f7c9137605e72ca0343db4cea88006cb94856dd
   React-logger: 957e5dc96d9dbffc6e0f15e0ee4d2b42829ff207
-  react-native-webview: 2f7e47e1273ed81b98bb2ce7ad8c3c1a872cf073
+  react-native-blob-util: 99f4d79189252f597fe0d810c57a3733b1b1dea6
+  react-native-webview: 13db17f7c7fe8f91c826e9afcc369cbc74507ea0
   React-perflogger: af8a3d31546077f42d729b949925cc4549f14def
   React-RCTActionSheet: 57cc5adfefbaaf0aae2cf7e10bccd746f2903673
   React-RCTAnimation: 11c61e94da700c4dc915cf134513764d87fc5e2b
@@ -474,10 +480,10 @@ SPEC CHECKSUMS:
   React-RCTVibration: 5199a180d04873366a83855de55ac33ce60fe4d5
   React-runtimeexecutor: 7bf0dafc7b727d93c8cb94eb00a9d3753c446c3e
   ReactCommon: 5768a505f0bc7b798dc2becdd3ee6442224f796c
-  ReactTestApp-DevSupport: 1646ce70be36400a60ca18608284f3f7099a35c1
+  ReactTestApp-DevSupport: a33bfbe09dd21ff4ea512b117831db06174955b7
   ReactTestApp-Resources: ff5f151e465e890010b417ce65ca6c5de6aeccbb
   Yoga: 5ed1699acbba8863755998a4245daa200ff3817b
 
 PODFILE CHECKSUM: 8344c021910ed9b6a9bb9985ff8f7f05a68b19c1
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.10.1
@@ -61,6 +61,7 @@
     "metro-react-native-babel-preset": "0.73.7",
     "react": "18.2.0",
     "react-native": "0.71.3",
+    "react-native-blob-util": "^0.17.2",
     "react-native-test-app": "2.3.12",
     "react-native-windows": "0.71.0",
     "selenium-appium": "1.0.2",

@@ -186,10 +186,6 @@ const WebViewComponent = forwardRef<{}, AndroidWebViewProps>(({
     onMessage={onMessage}
     onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
     ref={webViewRef}
-    // TODO: find a better way to type this.
-    // @ts-expect-error source is old arch
-    source={sourceResolved}
-    newSource={newSource}
     style={webViewStyles}
     overScrollMode={overScrollMode}
     javaScriptEnabled={javaScriptEnabled}
@@ -204,6 +200,12 @@ const WebViewComponent = forwardRef<{}, AndroidWebViewProps>(({
     setBuiltInZoomControls={setBuiltInZoomControls}
     setDisplayZoomControls={setDisplayZoomControls}
     nestedScrollEnabled={nestedScrollEnabled}
+    // Keep 'source' at the end of the properties list because they are applied in order,
+    // and we don't want to start loading content until the WebView has been configured.
+    // TODO: find a better way to type this.
+    // @ts-expect-error source is old arch
+    source={sourceResolved}
+    newSource={newSource}
     {...nativeConfig?.props}
   />
 

@@ -4195,6 +4195,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base-64@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/base-64/-/base-64-0.1.0.tgz#780a99c84e7d600260361511c4877613bf24f6bb"
+  integrity sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA==
+
 base64-js@^1.0.2, base64-js@^1.1.2, base64-js@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -6851,6 +6856,18 @@ glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^7.2.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 global-dirs@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
@@ -9730,6 +9747,13 @@ min-indent@^1.0.0:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
 minimist-options@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
@@ -11366,6 +11390,14 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-native-blob-util@^0.17.2:
+  version "0.17.3"
+  resolved "https://registry.yarnpkg.com/react-native-blob-util/-/react-native-blob-util-0.17.3.tgz#5dead89807ec176828a91c815c276da2e5c71fea"
+  integrity sha512-nO4VXIPtCrtf3mzCiOkdrXsmc8WmOLNSziS7dCnQ6kSyg4LOLXP4mQOFqfiNxt78n7cZ0QOF5CdUY/sIZZ2aOA==
+  dependencies:
+    base-64 "0.1.0"
+    glob "^7.2.3"
+
 react-native-codegen@^0.71.3, react-native-codegen@^0.71.5:
   version "0.71.5"
   resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.71.5.tgz#454a42a891cd4ca5fc436440d301044dc1349c14"