# React app to mobile app

- React app to mobile app
    
    [https://medium.com/@pshubham/using-react-with-cordova-f235de698cc3](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 
    
    ```html
    <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.
    
    ```jsx
    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](https://www.youtube.com/watch?v=9OnZuuJJlCk)
    
    To square the icons for android apps:
    
    [https://squaremyimage.com/](https://squaremyimage.com/)
    
    To get different icons resizes like app-icon, playstore icon etc, use:
    
    [https://resizeappicon.com/](https://resizeappicon.com/)
    
    ```bash
    cordova platform add android
    cordova build android
    ```
    
    For release build use:
    
    `cordova build —release android`
    
    [Cordova Website To App Conversion new.pdf](../../../_resources/Cordova_Website_To_App_Conversion_new.pdf)
    
    - html5 input file issue
        
        [https://pragmaapps.com/fix-html5-file-input-cordova-android/](https://pragmaapps.com/fix-html5-file-input-cordova-android/)
        
        [https://github.com/apache/cordova-plugin-inappbrowser/](https://github.com/apache/cordova-plugin-inappbrowser/)
        
        [https://cordova.apache.org/docs/en/10.x/reference/cordova-plugin-file/#sample](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://engineering.spideroak.com/how-to-deal-with-the-android-filesystem-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://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://www.andreszsogon.com/using-android-8-and-9-emulators-without-android-studio/)
    
    [https://doc.xuwenliang.com/docs/cordova/1630](https://doc.xuwenliang.com/docs/cordova/1630)
    
- Debugging mobile app of cordova
    
    [https://geeklearning.io/apache-cordova-and-remote-debugging-on-android/](https://geeklearning.io/apache-cordova-and-remote-debugging-on-android/)
    
    Type `chrome://inspect` in browser address bar.