getPlatforms not found

Hi there,

I’d like to detect the platform my app is running on, to implement a grid view if it’s running on an ipad.

As mentioned in the documentation I try to do this via getPlatforms().

But I just get following error:

export 'getPlatforms' (imported as 'getPlatforms') was not found in '@ionic/react' (possible exports: IonActionSheet, IonAlert, IonAnchor, IonApp, IonAvatar, IonBackButton, IonBackButtonInner, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNote, IonPage, IonPicker, IonPickerColumn, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRouterOutlet, IonRouterOutletInner, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSelectPopover, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabBarInner, IonTabButton, IonTabs, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, IonVirtualScroll, setupConfig)

Was the method moved somewhere else?

Capacitor.getPlatform()

does work, but this only tells me, if the app is running on web | ios | android

Is there another way to change the gui based on the display size?

Thanks in advance

Is the documention wrong? Or am I?

https://ionicframework.com/docs/react/platform

If anyone has an idea, help is very much appreciated. It’s driving me nuts, cause it seems so straight forward…

I’m using getPlatforms with Ionic React 6 (used the same code in version 5 too) without problems.

I track the platform in a React context like this:

import React from 'react';
import { getPlatforms, isPlatform } from '@ionic/react';
import { Platform, PlatformId } from '../types';

const PlatformContext = React.createContext<Platform>({} as Platform);

interface MyProps {
  children: JSX.Element;
}

export const isPlatformMobile = (): boolean => isPlatform('capacitor');

const isPlatformTablet = (): boolean => isPlatform('tablet');

const platform = {
  mobile: isPlatformMobile(),
  tablet: isPlatformTablet(),
  family: getPlatforms(),
};

export const PlatformContextProvider: React.FC<MyProps> = ({
  children,
}: MyProps) => (
  <PlatformContext.Provider value={platform}>
    {children}
  </PlatformContext.Provider>
);

export const usePlatformContext = (): Platform =>
  React.useContext(PlatformContext);

Of course you don’t need to create a context; I just provided this code because it is working code from my app.

Check how you are importing and make sure you have installed the correct packages with npm.

Thanks for the answer. Helped me figuring out the bug in my code. It just needed some updates …