Skip to main content
Version: 5.34.0

Using Mobiscroll with Ionic

Installing Mobiscroll in your Ionic app takes a couple of minutes. Let's see how you can start with the tabs starter app using react.

Using the Mobiscroll CLI and NPM​

Step 1: Create an app​

Assuming you have node and ionic already installed (if not, you can read about it in the Ionic docs), use the CLI to create a new app. If you already have an app at hand, you can skip this step.

info

Note that it could take a couple of minutes until the app is created (depending on your internet connection and machine performance).

ionic start myStarterApp tabs --type=react
cd myStarterApp

Step 2: Install the Mobiscroll CLI​

Install Mobiscroll CLI from NPM. You'll only have to do this step once on a single development machine. You won't need to repeat this on other machines or production servers.

$ npm install -g @mobiscroll/cli

Step 3: Configure the project using the CLI​

To install the Mobiscroll library from NPM, you will need to open a terminal window in the root folder of you project and run the following command:

mobiscroll config ionic
info

If you're working behind a proxy, additional configuration might be needed. Please check the proxy configuration options of the CLI.

The command will ask for your credentials (email and password). If you already have a mobiscroll account but you are unsure about the details, you find them on your account page. If you don't have an account yet, you can start a trial in no time following these steps.

info

If you already have a license, it is recommended to set up and use team NPM accounts instead of individual developer credentials for installing Mobiscroll.

Step 4: Importing Mobiscroll to your page​

You will need to import the component you want to use and the css from the mobiscroll package:

import { Datepicker } from '@mobiscroll/react'; /* or import any other component */
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

Step 5: Let's see if Mobiscroll was installed correctly​

To test it let's add a Datepicker to the src/pages/Tab1.tsx page. We will use the IonInput component as the base component for the datepicker. When the input is focused, the picker will open.

import {
  IonContent,
  IonHeader,
  IonInput,
  IonItem,
  IonLabel,
  IonPage,
  IonTitle,
  IonToolbar
} from '@ionic/react';
import './Tab1.css';

import { Datepicker } from '@mobiscroll/react'; /* or import any other component */
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

const Tab1: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 1</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonItem>
          <Datepicker inputComponent={IonInput} inputProps={{ label: 'My Date'}} />
        </IonItem>
      </IonContent>
    </IonPage>
  );
};

To build the app just run the serve command in the CLI:

ionic serve

At this point you have completed the setup. Go build great things!

One more thing

Setting up for CI/CD

The config command in step 3 will create a file named .npmrc in the project root, containing the access tokens to the Mobiscroll NPM registry. Commit this file into the repository to ensure the package will install for other team members and in CI/CD environments.

If you are using Yarn or Docker, check out the setup instructions here.