How to use Hybapps Ionic3 theme with your App ?

INTRODUCTION:

This tutorial is about how to use your downloaded Hybapps ionic3 theme in your Ionic3 app .

Why Ionic ?

Ionic is the easiest way for web developers to build, grow, and scale cross-platform mobile apps. From our popular open source Framework, to our cloud Platform, our goal is to enable more people and organizations to create better apps, faster.

For more information on ionic and Hybrid mobile app.

Check here

INSTALLATION INSTRUCTIONS:

1- update your ionic 3 version to latest

Please on cmd run :

npm install -g ionic@latest

2- unzip the theme package

3- create a new Ionic3 app

Please on cmd run :

ionic start NewApp --type=ionic-angular

4- Move to your new app. folder

cd NewApp

5- Run your app to be sure that it created properly

ionic serve

5- Replace the src and package.json for the new app with those from this theme from the unzipped folder

6- Back to cmd then Run these lines:

npm install

ionic serve

7- Add the platform you want to work with

ionic platform add android/ios

8-Build your app.

ionic build android/ios –prod

SOME PLUGIN INCLUDING INSTRUCTIONS

IMPORTANT : Not all plugins are included in every theme .

It depends on the requirements of every theme . so one may be included in a theme

And 10 may be included in the other . we only support importing the ones that are already included .

ANIMATION PLUGIN :

In most cases we just use scss animation no plugin required but in rare cases we may use this plugin so

Only in case it shows error on animation plugin you will need to install it by yourself

Please run

npm install @angular/animations@4.0.0 –save

In normal case we only use style animation in this file

src/app/myAnimation.scss

For more details in style animation usage here

To control the animation in the Theme

There’s a checkbox in the setting to on/off the animations in the app.
In some of our first themes there is no checkbox you will need to go to “app-config.ts“

Change true to false in this line .

export const APP_CONFIG = {

ALLOW_ANIMATION:true

};

CAMERA PLUGIN :

This plugin defines a global navigator.camera object, which provides an API for taking pictures and for choosing images from the system’s image library.

If camera plug in didn’t include automatically from package with (npm install)

You will need to run this :

ionic cordova plugin add cordova-plugin-camera
npm install –save @ionic-native/camera@4

For more details in camera plugin here

TRANSLATION PLUGIN :

This plugin only needed with multi language themes .

Please run this

npm install @ngx-translate/core@9 @ngx-translate/http-loader@2 –save