React and OnsenUI work great for cordova apps, there are a couple things to keep in mind when working with Cordova Apps.
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 ofdevice 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 indexfile to change the script tags to be relative instead of absolute, this also is true for images, and any other files in your system.
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.
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:;">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
Years later this is still saving lives. Cheers!