React app to mobile app

React app to mobile app

https://medium.com/@pshubham/using-react-with-cordova-f235de698cc3

npm i -g cordova@9.0.0

cordova create playlist [com.playlist.app](http://com.playlist.app) Playlist

where playlist is app name

public and src folder to be copied

copy browserslist, scripts and dependencies to package.json.

also add "homepage": "./", in package.json.

Add
```
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
```
under head tag in public/index.html.

Add <script src="cordova.js" type="text/javascript"></script> at end under body tag.

Adding even listener when cordava is used and device is ready.
```
const renderReactDom = () => {
  ReactDOM.render(<App />, document.getElementById('root'));
};

if (window.cordova) {
  document.addEventListener('deviceready', () => {
    renderReactDom();
  }, false);
} else {
  renderReactDom();
}
```
in src/index.js.

In this file we need to perform two main functions:
- Execute the react build process
- React-scripts generates the build output to the build/ folder and cordova uses www/ as its input directory. So once the react build is completed we need to rename build/ to www/
https://www.youtube.com/watch?v=9OnZuuJJlCk

To square the icons for android apps:

https://squaremyimage.com/

To get different icons resizes like app-icon, playstore icon etc, use:

https://resizeappicon.com/
```
cordova platform add android
cordova build android
```
For release build use:

cordova build —release android

Cordova Website To App Conversion new.pdf
- html5 input file issue
  
  https://pragmaapps.com/fix-html5-file-input-cordova-android/
  
  https://github.com/apache/cordova-plugin-inappbrowser/
  
  https://cordova.apache.org/docs/en/10.x/reference/cordova-plugin-file/#sample
  
  Dealing with Android content URIs in a Cordova based project
  
  https://engineering.spideroak.com/how-to-deal-with-the-android-filesystem-in-a-cordova-based-project/
  
  https://stackoverflow.com/questions/35056472/how-to-create-a-separate-directory-for-cordova-app-and-storing-data-in-it
https://www.andreszsogon.com/using-android-8-and-9-emulators-without-android-studio/

https://doc.xuwenliang.com/docs/cordova/1630
Debugging mobile app of cordova

https://geeklearning.io/apache-cordova-and-remote-debugging-on-android/

Type chrome://inspect in browser address bar.

4.1 KiB Raw Permalink Blame History

React app to mobile app

4.1 KiB

Raw Permalink Blame History