Cordova ReactJS

An sample architecture for initialize a project React 18.* and Cordova with multiples pre-configurations to help.

Installation

npm install -g cordova
git clone [email protected]:poohia/react-cordova.git
cd react-cordova
npm install
npm start

Configuration

Edit config.ts

Parameter	Type	Description
name	string	Required. Your application name
build.version	string	Required. Your application name
build.id	string	Required. Full version number expressed in major/minor/patch notation.
build.version	string	Required. Specifies the app's identifier. The id should be in a reverse-DNS format however, only alphanumeric and dot characters are allowed. e.g: com.example.myapp
build.android.versionCode	string	Required. Alternative version for Android. Sets the version code for the application. See the Android guide for information on how this attribute may be modified.
build.ios.CFBundleVersion	string	Required. Alternative version for iOS. For further details, see iOS versioning.
author.email	string	Author email
author.link	string	Author link
author.name	string	Author name
fullscreen	boolean	Default: false. Set application fullscreen
statusbar.show	boolean	Default: true. Shows the statusbar.
statusbar.backgroundColor	string	Default: #ffffff. Set the background color of the statusbar by a hex string (#RRGGBB) at startup
statusbar.overlaysWebView	boolean	Default: true. Make the statusbar overlay or not overlay the WebView at startup
statusbar.contentStyle	default lightContent	Default: default. Set the status bar style (e.g. text color)
screenOrientation	any landscape landscape-primary landscape-secondary portrait portrait-primary portrait-secondary	Default: any. Set screen orientation
splashscreen.splashscreenDelay	number	Default: 3000. Amount of time in milliseconds to wait before automatically hide splash screen.
splashscreen.fadeSplashscreen	boolean	Default: true. Set to false to prevent the splash screen from fading in and out when its display state changes.
splashscreen.fadeSplashscreenDuration	number	Default: 500. Specifies the number of milliseconds for the splash screen fade effect to execute.

Ios

Installation

cordova platform add ios
cordova platform prepare ios

Open file platform/ios/*.xcworkspace with XCode

Icon and Splashscreen

Icon and splashscreen will be generated at prepare command. Based on files resources/icon.png and resources/splash.png. Icon image needs to be 1024x1024 pixel and Splashscreen image needs to be 2732x2732 pixel.

Android

Installation

cordova platform add android@11 # Version 11 is minimal version to push store
cordova prepare android

Open folder platform/android with Android Studio

Icon

Icon will be generated at prepare command. Based on files resources/android/icon-background.png resources/android/icon-foreground.png. They needs to be 432x432 pixels.

Splashscreen

See official documentation.

You can change image and color on config.xml file:

...
    <platform name="android">
        <preference name="AndroidWindowSplashScreenAnimatedIcon" value="resources/ic_cdv_splashscreen.png" />
        <preference name="AndroidWindowSplashScreenBackground" value="#a5a5a5" />
        .....
    </platform>

Browser

cordova platform add browser
cordova build browser

Upload platform/browser/www on your server.

Electron

If you can build a website, you can build a desktop app. Electron is a framework for creating native applications see documentation

cordova platform add electron
cordova run electron --nobuild
cordova build electron --release

Other documentations

• Cordova https://cordova.apache.org/docs/en/latest/
• ReactJS https://reactjs.org/docs/getting-started.html
• Generation Icon/Splashscreen with cordova-res https://github.com/ionic-team/capacitor-assets
• Android Splashscreen https://developer.android.com/develop/ui/views/launch/splash-screen
• awesome-cordova-library https://github.com/joazco/awesome-cordova-library