Convert Your React JS APP into an Android APP with the Correct Icons & Splash (Able Upload To Phone)
1. Create "capacitor.config.json" in root directory of your project:
{
"appId": "io.ionic.{NAMEOFYOURAPP}",
"appName": "{NAMEOFYOURAPP}",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "build",
"cordova": {}
}
2. Create "ionic.config.json" in the root directory of your project:
{
"name": "{NAMEOFYOURAPP}",
"integrations": {
"capacitor": {}
},
"type": "react"
}
3. Build your react project
$ npm run build
4. Install ionic capacitor:
$ npm install @capacitor/core
$ npm install @capacitor/cli --save-dev
$ npm install @capacitor/android
$ npm install @capacitor/filesystem #(save file to phone)
$ npx cap init
ANDROID:
$ npx cap add android
$ npx cap sync #(to sync @capacitor/filesystem plugin)
IOS:
$ npx cap add ios
5. Add Permissions to ..\android\app\src\main\AndroidManifest.xml
❮uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/❯
❮uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /❯
7. Open you React app with Android Studio:
❯❯ File ❯❯ Open
* Navigate to the "android" folder in your react project
❯❯ Run ❯❯ Run 'app'
8. Build an Unsigned APK with Android Studio:
❯❯ Build ❯ Build Bundle(s)/APK(s) ❯ Build APK(s)
* APK Found: android\app\build\outputs\apk\debug
* The APK is named "app-debug.apk"
=========================
Getting Your Icons on the APP
=========================
1. Delete all existing icon assets in Android Studio:
- Delete ic_launcher.background.xml and ic_launcher_foreground.xml in drawable folder. This is just an example, you could be any icon asset file format.
- Delete all mipmap folders which consist of all the icon assets
2. Generate Icons PNG:
* Icon — requires a 1024x1024 png file (transparency allowed)
* Splash — requires a 4096x4096 png file (no transparency)
- Visit ApeTools (https://apetools.webprofusion.com/)
- Visit MakeAppIcon (https://makeappicon.com/)
- Vist pgicons.abiro.com (https://pgicons.abiro.com/)
3. Generate launcher icon from image asset
- Right-click in the project window, go to New -❯ Image Asset
- Make sure the Icon Type is Launcher Icons (Adaptive and Legacy), which is the default)
- In Foreground Layer, Source Asset, select Image Asset Type
~ Browse to your saved icon png
~ In Scaling, Resize the icon accordingly
- In the Background Layer, change the Source Asset Type Color to white color (i.e. FFFFFF)
4. Click Next -❯ Finish.
- Different screen resolution icon assets are now generated in the mipmap folders
- The default Res Directly is debug folder. Make sure you select the main folder, so you app with both debug and release variants.
5. For the splash icons:
- In your android folder, visit app -❯ src -❯ main -❯ res
- Under drawable... folders, replace each individual splash.png with your custom splash.png
- taking care to keep the filename the same (i.e. splash.png)
======================================
Upload to Your Phone's Document Folder
https://capacitorjs.com/docs/apis/fil...
======================================
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
Filesystem.requestPermissions();
async function UPLOAD(){
await Filesystem.writeFile({
path: 'FILENAME.txt',
data: 'SOME_DATA_TO_SAVE',
directory: Directory.Documents,
encoding: Encoding.UTF8,
recursive: true
});
}
DONATE:
---------------
PAT: / rezatahirkheli
PP: https://www.paypal.com/paypalme/rezat...
BTC: 3EUQBWZKX9Vcwdffd3cUGATQopxrAQQxJ9
LTC: MBXE6hJgxxFYSD8SjmR7sHCHGTqFXmNGoU
Watch video Convert Your React JS APP into an Android APP with the Correct Icons & Splash (Able Upload To Phone) online without registration, duration hours minute second in high quality. This video was added by user ZeroLife 09 April 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,114 once and liked it 22 people.