Shim

The Shim component is a library to help integrate with the native mobile features in your application. It offers the following capabilities,

  1. Camera
  2. GeoLocation
  3. Network
  4. Toast Notifications
  5. Show or hide StatusBar
  6. Get network change notifications
  7. Show or hide Keyboard
  8. Back navigation

Note: It uses CapacitorJS is an opensource runtime to build native apps using familiar JS interface.

ItsyMobileShim provides wrapper in a familiar way to use the underlying APIs with ItsyUI core library.

Install

// with npm
npm install @itsy-ui/shim

// with yarn
yarn add @itsy-ui/shim


Usage

import { ItsyApp } from "@itsy-ui/app";
import { ItsyMobileShim } from '@itsy-ui/shim';

<ItsyApp>
  <ItsyMobileShim />
</ItsyApp>


Transitions


ID Next States Properties Description
MOBILE_INIT MOBILE_ON_LOADED, MOBILE_STATUSBAR Called when the MobileShimWidget is initialized for the first time. MOBILE_ON_LOADED ends this transition.
MOBILE_STATUSBAR MOBILE_ON_LOADED Show or hide statusbar using this transition.


Adding Capacitor to your application

Prerequisites

  • ItsyUI app with generated build folder
  • App is built for mobile theme and responsive

    npm install @capacitor/core @capacitor/cli --save
    
    //Initialize Capacitor using the CLI questionnaire
    npx cap init
    

You will be asked a few questions, starting with your app name, package id that you would like to use for your app, and the directory your web assests get built into, React is build. You can also update this value in the capacitor.config.js file later.

Adding the Android Platform

npm install @capacitor/android --save

//Add the Android Platform
npx cap add android


Adding the iOS Platform

npm install @capacitor/ios --save

npx cap add ios