Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webview unable to load local assets or from CDNs along with window.postMessage not working in iOS release build

See original GitHub issue

Environment

React Native Environment Info: System: OS: macOS High Sierra 10.13.5 CPU: x64 Intel® Core™ i5-5350U CPU @ 1.80GHz Memory: 310.16 MB / 8.00 GB Shell: 5.3 - /bin/zsh Binaries: Node: 8.11.1 - /usr/local/bin/node Yarn: 1.5.1 - /usr/local/bin/yarn npm: 5.6.0 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3 Android SDK: Build Tools: 26.0.3, 27.0.3 API Levels: 26, 27 IDEs: Android Studio: 3.1 AI-173.4819257 Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild npmPackages: react: 16.4.1 => 16.4.1 react-native: ^0.56.0 => 0.56.0 npmGlobalPackages: create-react-native-app: 1.0.0 react-native-cli: 2.0.1

Description

I am using webview to display chart for my app using chartjs and jquery library I am able to view charts fine in iOS debug mode but in release config, all I get is a white screen, I tried to check if atleast window.postMessage was working using setinterval code in my .html file, but I dont get any response from webview.

To check for window.postMessage I have also tried to possible solution from issue , still its not working

I have tried to inject the complete html code as well instead of serving the html as local asset file, still not success.

This issue is only present in iOS, works perfectly fine for android.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:7

github_iconTop GitHub Comments

1reaction
echo8795commented, Jul 20, 2018

@sja1n I think I understand your use case, I had a similar requirement where I was creating a stringified html document for webviews and i had to include js libraries from inside the app bundle. So I added my js and css and font files inside my bundles by adding it /ios and android/app/src/main/assets/_folder_name_.

I then used react-native-fs library to refer the assets folder inside my js. To include those files inside a webview you first need to provide the path of the assets folder as the baseUrl of the ‘source’ prop of webview.

const RNFS = require( 'react-native-fs' );

let html = getHTMLToDisplay();

let htmlSource = { html: html };
if ( Platform.OS == Constants.Platform.ANDROID ) {
	htmlSource.baseUrl = "file:///android_asset";
} else {
	htmlSource.baseUrl = RNFS.MainBundlePath;
}

return ( <WebView originWhitelist={[ '*' ]} source={htmlSource} /> )

and the html went something like this

function getHTMLToDisplay() {
    if ( Platform.OS == Constants.Platform.ANDROID ) {
		this.mathQuillJSPath = "file:///android_asset/js/mathquill.js";
    } else {
		this.mathQuillJSPath = RNFS.MainBundlePath + "/mathquill.js";
    }

    return `
	<!DOCTYPE html>
		<html>
			<head>
				<style type="text/css">
                                      // For android(ios automatically adds the fonts in bundles to webviews)
                                     @font-face {
					font-family: 'Quicksand';
					src: url("file:///android_asset/fonts/Quicksand.ttf")
				    }
				</style>
				<script type='text/javascript' src='${this.mathQuillJSPath}'></script>
			</head>

			<body>
			</body>
		</html>
	`;
}

And window.postMessage works for me in production build as well. I think this should help you out.

1reaction
echo8795commented, Jul 20, 2018

I also faced a similar problem and this https://github.com/facebook/react-native/issues/19986#issuecomment-401685826 resolved it. Not sure what the issue is.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native WebView postMessage does not work
Show activity on this post. I can't get React Native WebView postMessage to work. The React Native app successfully receives the post message...
Read more >
8th Wall Documentation
Learn how to create, collaborate and publish Web AR experiences that run directly in a mobile web browser.
Read more >
InAppWebView: the real power of WebViews in Flutter
It can be used to run a WebView in background without attaching an InAppWebView to the widget tree. InAppBrowser: in-app browser using ...
Read more >
iOS Platform APIs - OWASP Mobile Application Security
The provisioning profile is embedded into the app bundle during the build ... e.g. Clutch (if compatible with your iOS version), frida-ios-dump or...
Read more >
5 Easy Ways to Fix the "jQuery is Not Defined" Error
The JavaScript on your website is running before the jQuery is fully loaded. Or perhaps a JavaScript file is not being correctly loaded...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Unable to resolve module `AccessibilityInfo`

Next page

[IOS / Android] Application crash in production (undefined is not an object (evaluating 'r.default'))