Htykuut

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 (4074A848-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