Best practice for importing mobile-only capacitor plugins?

I have an Ionic React app and I want to use the Capacitor Keyboard plugin on my login screen.

My code looks something like this:

import { Keyboard } from '@capacitor/keyboard';

...MyComponent
  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);

  Keyboard.addListener('keyboardWillShow', (info) => {
    console.log('keyboard will show with height:', info.keyboardHeight);
    setIsKeyboardVisible(true);
  });
  Keyboard.addListener('keyboardDidHide', () => {
    console.log('keyboard will hide');
    setIsKeyboardVisible(false);
  });

          {!isKeyboardVisible && (
            <ButtonLanguageChanger />
          )}

This crashes my app on the web:

util.js:21 Uncaught (in promise) Error: "Keyboard" plugin is not implemented on web
    at createPluginMethod (runtime.js:70)
    at runtime.js:77

I understand that the Keyboard plugin doesn’t work on the web, but what’s the best practice for importing such plugins in React? (I want to use it on mobile, and just ignore it on the web.)

2 posts - 1 participant

Read full topic