How To Get Your Current Capacitor Platform [Ionic React]

In an Ionic project, it’s often that you need to show some specific content on just one platform. But all platforms use the same codebase. So, how do we tailor the content to different Capacitor platforms? You cannot just write two versions of code to do that. Otherwise, use Capacitor Javascript API instead.

Capacitor Javascript API provides some functions that can help us do the trick. Like getting the current platform our web app running on, or checking if the app running in a hybrid app. Let’s dive into the APIs in Capacitor v5 and Ionic v7 to see what they can help.

The Global Capacitor object

First of all, you need a Capacitor project, either an Ionic project or a regular Capacitor project. Once you have your project installed all dependencies, then add the following import in the file you need:

import { Capacitor } from '@capacitor/core';

This will import the Capacitor Javascript API from the installed package.

Get platform

Capacitor.getPlatform function can let you know what the current platform the app running on. The platform can be “web”, “ios” or “android”. Below is an example of the Capacitor docs.

if (Capacitor.getPlatform() === 'ios') {
  console.log('iOS!');
} else if (Capacitor.getPlatform() === 'android') {
  console.log('Android!');
} else {
  console.log('Web!');
}

Is Native Platform

Capacitor.isNativePlatform function can provide whether the platform is native or not. If it returns true, then the app is running on native platform. Below is an example of the Capacitor docs.

if (Capacitor.isNativePlatform()) {
  console.log("I'm a native app!");
} else {
  console.log("I'm a PWA or Web app!");
}

The Ionic React Platforms

If your project is using the Ionic Framework, then you have another method to get this done. Ionic framework provides us another way to get the platforms your app is running. It’s more specify than using Capacitor Javascript API in some situation. Let’s check it out.

The examples below use Ionic React to show how to use it.

isPlatform

To know whether the app is running on a specific platform, use this function.

import { isPlatform } from '@ionic/react';

After import the isPlatform function, use it like this.

isPlatform('ios'); // returns true when running on a iOS device

All the possible platform values in Ionic framework are:

getPlatforms

To get all the matched platforms the app running on currently, use this function.

import { getPlatforms } from '@ionic/react';

After import the getPlatforms function, use it like this.

getPlatforms(); // It will returns all platforms in an array.

Conclusion

Now you have learned how to get the current app platform by using both Capacitor API and Ionic Framework. We introduced four different functions that can help you to get the platform information.

You can now customize the app content and behavior on different platforms to create a good user experience on different device using one Javascript codebase.

• https://capacitorjs.com/docs/basics/utilities
• https://ionicframework.com/docs/react/platform