Skip to content

An sample architecture for initialize a project React 18.\* and Cordova

Notifications You must be signed in to change notification settings

joazco/cordova-reactjs

Repository files navigation

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

About

An sample architecture for initialize a project React 18.\* and Cordova

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published