Issue with Keyboard Overlapping Inputs Inside WebView on React Native

[eppisapiafsl]

Hi everyone,

I'm currently migrating from react-native-keyboard-aware-scroll-view to react-native-keyboard-controller.

The keyboard handling works great across all native React Native components.

However, I'm running into an issue with forms displayed inside a WebView. When focusing on an input inside the WebView:

• The keyboard shows up, but it doesn't auto-scroll to bring the focused input into view.
• Inputs near the bottom of the WebView get completely covered by the keyboard.

It seems like react-native-keyboard-controller doesn't recognize or adjust for input fields inside a WebView.

Is this a known limitation or is there a recommended workaround for managing keyboard interactions with WebView content?

Any advice or insight would be greatly appreciated!

[kirillzyusko]

Hey 👋

I'd say it's a know limitation, I don't think I consider WebView input's as "trackable" inputs, but I had some plans to get back to that topic

@eppisapiafsl may I ask you how do you use inputs inside WebView? Is it whole screen that is rendered by WebView? Or you just use single input tag inside WebView and use it as alternative to TextInput from react-native?

[kirillzyusko]

Oh @eppisapiafsl

This one will be trickier to handle, because from what I remember WebView doesn't expose its children in native hierarchy, so I simply not aware about the focused input layout 🤔

One of the thing I've been thinking of is adding injected JS script, that would measure focused input layout and would send it back to keyboard controller.

Did the old solution with react-native-keyboard-aware-scroll-view work with WebView?

[eppisapiafsl]

Did the old solution with react-native-keyboard-aware-scroll-view work with WebView?
Yes

Currently, I'm passing a prop isWebViewKeyboardEnabled to the ScrollView container to pick between the react-native-keyboard-aware-scroll-view and react-native-keyboard-controller

I had to remove the <KeyboardProvider /> from my main app wrapper to let the keyboard scroll the content of the keyboard (react-native-keyboard-aware-scroll-view)

[kirillzyusko]

Hm, but without KeyboardProvider the KeyboardAwareScrollView from react-native-keyboard-controller will not work, am I right?..

[eppisapiafsl]

Sorry, I couldn't circle back.

That's correct, while testing I face that issue, fixing one keyboard means break the other one 😅 unless you "split" the navigation stack to only wrap into <KeyboardProvider /> the screen that uses this library but that's is not ideal

[EugeneKey]

I faced the same issue and spent the entire workday debugging and find a solution. In the end, I managed to fix the issue in a way that works quite well.

So, I have a React Native app where some screens are native and others are entirely made up of WebView. Previously, everything worked fine. For the native part of the app, I used this KeyboardController, and for screens with WebView I disabled it as stated in the documentation using:

const {setEnabled} = useKeyboardController();
setEnabled(false);

In this case, the native method defined in AndroidManifest.xml with android:windowSoftInputMode=“adjustResize” was used.

However, since the minimum required targetSdkVersion for app publishing will soon be increased to 35, which corresponds to Android 15, I decided to upgrade React Native to the current version, where targetSdkVersion=35. It turned out that in Android 15, edge-to-edge mode is enabled by default, and in this fullscreen mode the android:windowSoftInputMode=“adjustResize” setting no longer works.

As a result, WebView screens stopped scrolling when the keyboard opened. I tried many different solutions, one of which involved using KeyboardStickyView and dynamically computing the offset by intercepting taps on the screen using onTouchStart and then getting the tap coordinates like this: const { pageY } = event.nativeEvent;

Then calculating keyboardOffset and setting it in offset={{ closed: 0, opened: keyboardOffset }} Here’s roughly how it worked:

useEffect(() => {
const newKeyboardOffset = isKeyboardOpen ?
keyboardOffset :
keyboardHeight > bottomTapDistance ?
insets.bottom : keyboardHeight;
setKeyboardOffset(newKeyboardOffset);
}, [bottomTapDistance]);

This solution worked quite well, except for one thing: if the user tapped in the upper part of the screen where the input is, to prevent the content on the screen from shifting, keyboardOffset was set to keyboardHeight. This provided the correct offset, and the input stayed in place and remained visible. However, while the keyboard was open, the user could not scroll the page all the way to the top, because the offset made the beginning of the page unreachable. The user had to close the keyboard to do that.

So I went further and implemented similar logic at the WebView level. Here is the full code required to implement this:

import React, {useState, useRef, useEffect} from 'react';
import {StyleSheet, GestureResponderEvent, Dimensions} from 'react-native';
import WebView from 'react-native-webview';
import { KeyboardAvoidingView, KeyboardEvents } from 'react-native-keyboard-controller';

export default function WebViewCustom() {
  const clickOffset = 40; // Adjust this value as needed
  const scrollOffset = 40; // Adjust this value as needed

  const webViewRef = useRef(null!);
  const [keyboardHeight, setKeyboardHeight] = useState(300);
  const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
  const [bottomTapDistance, setBottomTapDistance] = useState(0);

  // get KeyboardEvents, setKeyboardHeight
  useEffect(() => {
    const show = KeyboardEvents.addListener('keyboardWillShow', e => {
      setKeyboardHeight(e.height);
      setIsKeyboardOpen(true);
    });

    const hide = KeyboardEvents.addListener('keyboardWillHide', () => {
      setIsKeyboardOpen(false);
    });

    return () => {
      show.remove();
      hide.remove();
    };
  }, []);

  useEffect(() => {
    if (isKeyboardOpen && clickOffset + keyboardHeight > bottomTapDistance) {
      const scrollY = keyboardHeight > bottomTapDistance ?
        scrollOffset + keyboardHeight - bottomTapDistance : scrollOffset;

      const jsCode = `window.scrollBy({top: ${scrollY}, left: 0, behavior: 'smooth'}); true;`;
      const currentWebViewRef: WebView = webViewRef.current;
      if (currentWebViewRef) {
        currentWebViewRef.injectJavaScript(jsCode);
      }
    }
  }, [isKeyboardOpen]);


  const handleTouchStart = (event: GestureResponderEvent) => {
    const { pageY } = event.nativeEvent;
    const { height } = Dimensions.get('screen');

    setBottomTapDistance(height - pageY);
  };

  return (
      <KeyboardAvoidingView
        behavior={"padding"}
        style={styles.container}
        enabled={false}
        onTouchStart={handleTouchStart}
      >
          <WebView
            source={{uri: uri}}
            ref={webViewRef}
            javaScriptEnabled={true}
          />
      </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Overall, everything is working well now. The only thing is that depending on your HTML layout, you may need to fine-tune the optimal values for clickOffset and scrollOffset.

@kirillzyusko I’m not sure how to best implement this in the Keyboard Controller. Maybe it would make sense to create a new component like KeyboardWebView for this.