diff --git a/packages/keyboard/package.json b/packages/keyboard/package.json index 52eac4a..0d25f18 100644 --- a/packages/keyboard/package.json +++ b/packages/keyboard/package.json @@ -29,6 +29,7 @@ }, "peerDependencies": { "@capacitor/core": ">=3.0.0", + "@capacitor/device": ">=3.0.0", "@capacitor/keyboard": "*", "react": "*" }, diff --git a/packages/keyboard/src/useKeyboard.ts b/packages/keyboard/src/useKeyboard.ts index e03cce8..97cc96a 100644 --- a/packages/keyboard/src/useKeyboard.ts +++ b/packages/keyboard/src/useKeyboard.ts @@ -1,7 +1,8 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect, useCallback } from 'react'; import { Keyboard, KeyboardInfo, KeyboardPlugin } from '@capacitor/keyboard'; import { AvailableResult } from './util/models'; -import { Capacitor } from '@capacitor/core'; +import { Capacitor, PluginListenerHandle } from '@capacitor/core'; +import { Device } from '@capacitor/device'; interface KeyboardResult extends AvailableResult { isOpen: boolean; keyboardHeight: number; @@ -15,24 +16,46 @@ if (!Capacitor.isPluginAvailable('Keyboard')) { export function useKeyboard(): KeyboardResult { const [isOpen, setIsOpen] = useState(false); const [keyboardHeight, setKeyboardHeight] = useState(0); + const [platform, setPlatform] = useState('web'); + + const showCallback = useCallback((ki: KeyboardInfo) => { + const keyboardHeight = ki.keyboardHeight; + setIsOpen(true); + setKeyboardHeight(keyboardHeight); + }, []); + + const hideCallback = useCallback(() => { + setIsOpen(false); + setKeyboardHeight(0); + }, []); useEffect(() => { - const showCallback = (ki: KeyboardInfo) => { - const keyboardHeight = ki.keyboardHeight; - setIsOpen(true); - setKeyboardHeight(keyboardHeight); + const checkIsNativePlatform = async () => { + const deviceInfo = await Device.getInfo(); + setPlatform(deviceInfo.platform); }; - const hideCallback = () => { - setIsOpen(false); - setKeyboardHeight(0); + checkIsNativePlatform(); + }, []); + + useEffect(() => { + let showListener: PluginListenerHandle, hideListener: PluginListenerHandle; + + const getKeyboardListener = async () => { + showListener = await Keyboard.addListener('keyboardDidShow', showCallback); + hideListener = await Keyboard.addListener('keyboardDidHide', hideCallback); }; - Keyboard.addListener('keyboardDidShow', showCallback); - Keyboard.addListener('keyboardDidHide', hideCallback); + + if (platform !== 'web') { + getKeyboardListener(); + } return () => { - Keyboard.removeAllListeners(); + if (platform !== 'web' && showListener && hideListener) { + showListener.remove(); + hideListener.remove(); + } }; - }, [setIsOpen, setKeyboardHeight]); + }, [setIsOpen, setKeyboardHeight, platform]); return { isOpen,