Cordova React Notes

README.md

Cordova Apps with React

React and OnsenUI work great for cordova apps, there are a couple things to keep in mind when working with Cordova Apps.

Relative Paths not Absolute Paths

Since Cordova Apps load from the file system they do not work great with absolute urls, they use relative urls, which means

<script src="/bundle.js"></script> will not work as you might expect when using a web server. Since the root file system of

device is not where the files are located. You can resolve this using a relative url.

<script src="./bundle.js"></script> - using create-react-app when you build your bundle, you will need to modify the index

file to change the script tags to be relative instead of absolute, this also is true for images, and any other files in your system.

HashRouter

If you are using react-router, make sure you use the HashRouter and not the BrowserRouter, since the UIWebView loads via the file system, push state will not work and will result is file not found.

Content Security Policy Settings

Customize this policy to fit your own app's needs. For more guidance, see: https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy

Some notes:

• gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
• https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
• Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
• Enable inline JS: add 'unsafe-inline' to default-src

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

Mobile Device Meta Tag Information

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

Other meta tags

<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

Thanks for your summary.
Especially mentioning the React Router - type issue ("HashRouter vs BrowserRouter in react cordova setups") helped me to fix a problem that image urls and media assets couldn't be found when switching between pages (scenes).
Very helpful 👍

Yes, thank You!

HashRouter vs BrowserRoute

helped to save some time, it gives no clues at all why routs are not working.

I wish I found your note about BrowserRouter vs HashRouter before sinking 4 hours into resolving the mystery on my own :)

I am having an issue with routing on a React Application running on Android through Cordova. I tried all the above and the app works fine on iOS but not on Android! :(
Thanks

Years later this is still saving lives. Cheers!