Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
3 tasks done
ghost opened this issue Jul 16, 2018 · 7 comments
Closed
3 tasks done

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

ghost opened this issue Jul 16, 2018 · 7 comments
Labels
Component: WebView Related to the WebView component. Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.

Comments

@ghost
Copy link

ghost commented Jul 16, 2018 •
edited by ghost
Loading

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.5
CPU: x64 Intel(R) Core(TM) 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.
@ghost ghost changed the title React lifecycle not getting called on frequent updates Webview unable to load local assets or from CDNs along with window.postMessage not working in iOS release build Jul 16, 2018
@react-native-bot react-native-bot added Platform: iOS iOS applications. Component: WebView Related to the WebView component. labels Jul 16, 2018
@hannigand
Copy link

hannigand commented Jul 17, 2018 •
edited
Loading

I've got the same problem when trying to render a local HTML file in a WebView. When building an iOS release, I get a blank white screen. It works perfectly fine on the iOS Simulator.

I'm running React Native 0.56. I have another project running 0.55.4 and it this problem does not exist.

I added onLoadStart and onLoadEnd props to check that the WebView had in fact starting to load (at minimum), none of the callbacks were called.

Reproducible:

import content from './index.html';

<WebView
  source={content}
  scalesPageToFit={Platform.select({
   ios: true,
   android: false,
  })}
  startInLoadingState
  renderLoading={() => <Loader />}
/>

The HTML file can contain anything.

It never resolves from startInLoadingState.

@echo8795
Copy link

I also faced a similar problem and this #19986 (comment) resolved it. Not sure what the issue is.

@ghost
Copy link
Author

ghost commented Jul 20, 2018

@echo8795 Thanks for the update, this is working fine.
But, since I have bit more of the html and i wanted to serve html other JS assets locally, if by some way I could do that it would really be helpful.

@echo8795
Copy link

echo8795 commented Jul 20, 2018 •
edited
Loading

@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.

@ghost
Copy link
Author

ghost commented Jul 23, 2018

Yeah I think maybe I all I needed was to know how to give proper path for html file in ios, Thanks @echo8795 for the info, I'll definitely try this and update.

@seanyu4296
Copy link

@echo8795 the solution in #19986 worked for me when loading local html files in ios

@jamonholmgren jamonholmgren mentioned this issue Sep 10, 2018
Closed
@jamonholmgren
Copy link
Collaborator

Migrated to react-native-webview/react-native-webview#21 and can be closed here.

@kelset kelset closed this as completed Sep 24, 2018
@facebook facebook locked as resolved and limited conversation to collaborators Sep 24, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Sep 24, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Component: WebView Related to the WebView component. Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@hramos @jamonholmgren @hannigand @seanyu4296 @kelset @echo8795 @react-native-bot