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)

Most upvoted comments

1.try add originWhitelist={['*']} to your webview properties 2.if it did not work, try set source={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.

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

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

let pageSource = isIOS ? {uri: 'https://xxx/xxx/xxx.html'} : { uri: 'file:///android_asset/xxx.html' }
<Webview
  source={pageSource}
 />

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!