react-native-webview: iOS Release Build Failed to load Local HTML/JS/CSS Files in React Native WebView
Description
I’m trying to load SPA with AngularJS and HTML in React Native WebView.
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { WebView } from "react-native-webview";
export default class App extends Component{
render() {
return (
<WebView
useWebKit={true}
originWhitelist={['*']}
source={ Platform.OS === 'ios' ? require('./MyPackage/www/index.html') : {uri: 'file:///android_asset/www/index.html'} }
onLoadProgress={e=>console.log(e.nativeEvent.progress)}
javaScriptEnabled={true}
domStorageEnabled={true}
nativeConfig={{ props: { webContentsDebuggingEnabled: true } }}
setAllowFileAccessFromFileURLs={true}
setAllowUniversalAccessFromFileURLs={true}
/>
);
}
}
For Android, I’m copying the content of MyPackage inside android_asset folder as:
task copyReactNativeHTML(type: Copy) {
from '../../MyPackage/'
into 'src/main/assets'
}
gradle.projectsEvaluated {
bundleDebugJsAndAssets.dependsOn(copyReactNativeHTML)
bundleReleaseJsAndAssets.dependsOn(copyReactNativeHTML)
}
^The above is working fine for Android Debug/Release Build without any error.
For iOS, I’m keeping MyPackage folder at root level of the project. It’s working fine in iOS Debug Build but when I tried to load it in iOS Release Build it’s throwing following error:
[Error] Failed to load resource: The requested URL was not found on this server.
file:///var/containers/Bundle/Application/4074A848-9399-4CD1-B7B6-58C4DDBFF1C6/SampleReactNativeApp.app/assets/MyPackage/www/css/bootstrap.css
[Error] Failed to load resource: The requested URL was not found on this server.
file:///var/containers/Bundle/Application/4074A848-9399-4CD1-B7B6-58C4DDBFF1C6/SampleReactNativeApp.app/assets/MyPackage/www/js/angular.js
^Here the id (074A848-9399-4CD1-B7B6-58C4DDBFF1C6) is randomly getting generated every time in the above Error and SampleReactNativeApp is my project/app name.
I tried debugging it in Safari Browser and found that none of the resources(JS/CSS) are getting loaded which I’m including in index.html
Environment
React Native Environment Info:
System:
OS: macOS Sierra 10.12.6
CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
Memory: 138.34 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.1.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
Android SDK:
API Levels: 21, 22, 23, 24, 25, 26, 27, 28
Build Tools: 21.1.2, 22.0.1, 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.0, 28.0.0, 28.0.1, 28.0.2, 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 9.2/9C40b - /usr/bin/xcodebuild
npmPackages:
react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
react-native: 0.57.3 => 0.57.3
npmGlobalPackages:
react-native-cli: 2.0.1
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 1
- Comments: 19 (2 by maintainers)
1.try add
originWhitelist={['*']}
to your webview properties 2.if it did not work, try setsource={uri: xxx}
,xxx
is your Local HTML/JS/CSS Files path in ios project@Titozzz @jamonholmgren @empyrical Any help in this regard?
I’ll be updating this thread over this weekend.
I’ll be updating this thread over this weekend.
I had this issue when I first started on RN aswell. I finally got round to making an example to show my approach as it involves a bit of setup in order to properly support local SPA sites, such as CRA or AngularJS, here it is: https://github.com/caphun/react-native-webview-example
I load file by https like this
and it works
@Shan7anu Apologies, I’ve been out due to the US holidays. I won’t have time to debug this, but if you find a solution I’m happy to review, test, merge, and deploy a bugfix!