Search code examples
androidreactjsreact-reduxcapacitor

Android keyboard disappears on resize

I'm new to Android as I am currently using the cross-platform runtime (Capacitor) so we practically have one codebase for three platforms (iOS, Web & Android).

I've had some issues where if my keyboard input style in the manifest.xml is set to "adjustResize" instead of "adjustPan", the keyboard will appear for a moment and then disappear on my Webview app, I've done a little bit of testing and it appears to also be causing a complete refresh of the webview to resize to fit the keyboard, but then this quickly also forces the keyboard to close, is there any way I can get around this bottleneck?

I can't use adjustpan as I have some components that are directly at the bottom of the screen and the keyboard will completely fly over important stuff I want users to see, would really appreciate any help :)

Solution

  • Apart from iOS, android sends resize event when soft keyboard is appeared. So, as long as your PWA (cross platform) has mobile responsiveness based on resize event, it will be re-rendered when android keyboard appears.

    let me share my approach here to solve this issue.

    1. In AndroidManifest.xml, add adjustpan inside activity.

      android:windowSoftInputMode="adjustPan"

    then, android keyboard will be appeared always but overlay web content. Now, we have to adjust web content by moving up as keyboard height

    1. Install capacitor-keyboard package in your PWA

      npm install @capacitor/keyboard"

    2. Detect keyboardDidShow event and move content up as keyboard height. And when keyboard is disappeared, reset content position by keyboardDidHide

      import { Keyboard } from "@capacitor/keyboard";
const [keyboardHeight, setKeyboardHeight] = useState(0);

useEffect(() => {
  const getDeviceInfo = async () => {
    const info = await Device.getInfo();
    setDeviceInfo(info.platform);
  };
  getDeviceInfo();

  Keyboard.addListener("keyboardDidShow", info => {
    setTimeout(() => {
      setKeyboardHeight(info.keyboardHeight);
    }, 300);
  });

  Keyboard.addListener("keyboardDidHide", info => {
    setKeyboardHeight(0);
  });

    3. And adjust web content position based on keyboardHeight