Has our <KeyboardAwareScrollView> been fully adapted for WebView?

[joeley]

I embedded a lexical editor inside a WebView and wrapped it with the KeyboardAwareScrollView component, expecting it to scroll to the optimal editing position. However, it seems KeyboardAwareScrollView's adaptation for WebView components isn't complete.

e4477b03aa1a71d7654083124ba13f45.mp4

The phenomenon I observed (also shown in my video) can be described as follows: For WebView, KeyboardAwareScrollView's scrolling logic doesn't seem fully adapted. When initially clicking the WebView to give it focus, the WebView may scroll to an appropriate position (but without animation, possibly with a slight flicker). Then when losing focus and regaining it, keyboard avoidance may not work properly.

By clicking to switch to the textInput component below the WebView, repeatedly switching focus may restore normal scrolling logic (as I expected) for the WebView. Then everything works fine. But later, under unknown triggering conditions, the WebView component reverts to its original state.

This behavior seems strange to me. I'm not sure if it's a bug, so I'd appreciate your insights. I'd like to understand the framework's adaptation status for WebView.

Below is the code that reproduces this behavior (as shown in the video above):

import {fontSizes, scale, spacing, verticalScale} from '@/app/utils/scaling';
import { NoteEditor } from '@/components/NoteEditor/NoteEditor';
import { Colors } from '@/constants/Colors';
import React, { useState } from 'react';
import {Platform, ScrollView, StyleSheet, Text, TextInput as TextInputRN, TextInputProps, View} from 'react-native';
import {KeyboardAwareScrollView} from "react-native-keyboard-controller";
import WebView from "react-native-webview";


export default function Bak1Screen() {
  const TextInput = (props: TextInputProps) => {
    return (
        <TextInputRN
            placeholderTextColor="#6c6c6c"
            style={styles.textInput}
            multiline
            numberOfLines={2}
            testID={props.placeholder}
            {...props}
            placeholder={`${props.placeholder} (${
                props.keyboardType === "default" ? "text" : "numeric"
            })`}
        />
    );
  };
  return (
    <KeyboardAwareScrollView
        bottomOffset={5}
        keyboardShouldPersistTaps="handled"
        style={[styles.container, {
          paddingHorizontal: 16,
        }]}
        contentContainerStyle={{
          paddingTop: 50,
        }}
    >
      {new Array(10).fill(0).map((_, i) => (
          <TextInput
              key={i}
              placeholder={`TextInput#${i}`}
              keyboardType={i % 2 === 0 ? "numeric" : "default"}
          />
      ))}

        <WebView
            source={{
                uri:"https://playground.lexical.dev/"
            }}
            style={{
                height: 950
            }}
        />
        {new Array(10).fill(0).map((_, i) => (
            <TextInput
                key={i+100}
                placeholder={`TextInput2#${i}`}
                keyboardType={i % 2 === 0 ? "numeric" : "default"}
            />
        ))}
    </KeyboardAwareScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.light.background,
    paddingTop: spacing.xl,
    minHeight:verticalScale(100)
  },
  title: {
    fontSize: fontSizes.xl,
    fontWeight: 'bold',
    color: Colors.light.text,
    textAlign: 'center',
    marginBottom: spacing.s,
  },
  container1: {
    paddingHorizontal: 16,
  },
  content: {
    paddingTop: 50,
  },
  textInput: {
    width: "100%",
    minHeight: 50,
    maxHeight: 200,
    marginBottom: 50,
    borderColor: "black",
    borderWidth: 2,
    marginRight: 160,
    borderRadius: 10,
    color: "black",
    paddingHorizontal: 12,
  },
});

[joeley]

{
    ...
    "dependencies": {
        "@webview-bridge/react-native": "^1.7.6",
        "expo": "53.0.11",
        "expo-blur": "~14.1.5",
        "expo-clipboard": "~7.1.4",
        "expo-constants": "~17.1.5",
        "expo-dev-client": "~5.2.4",
        "expo-font": "~13.3.1",
        "expo-haptics": "~14.1.4",
        "expo-image": "~2.3.0",
        "expo-linear-gradient": "~14.1.5",
        "expo-linking": "~7.1.4",
        "expo-router": "~5.1.0",
        "expo-splash-screen": "~0.30.9",
        "expo-status-bar": "~2.2.3",
        "expo-symbols": "~0.4.5",
        "expo-system-ui": "~5.0.8",
        "expo-web-browser": "~14.1.6",
        "lodash.debounce": "^4.0.8",
        "react": "19.0.0",
        "react-dom": "19.0.0",
        "react-native": "0.79.3",
        "react-native-config": "^1.5.5",
        "react-native-gesture-handler": "~2.24.0",
        "react-native-reanimated": "~3.17.4",
        "react-native-safe-area-context": "5.4.0",
        "react-native-screens": "~4.11.1",
        "react-native-size-matters": "^0.4.2",
        "react-native-web": "~0.20.0",
        "react-native-webview": "^13.15.0",
        "react-native-keyboard-controller": "^1.17.5",
       ......
    },

}

[kirillzyusko]

Hey @joeley

First of all - thank you for such a brilliant description of the problem with code snippets etc. It helps a lot!

The current status with WebView adoptation - react-native-keyboard-controller doesn't support it. react-native-keyboard-controller relies on native view hierarchy to get information about focused input, but in case with WebView I can get only single element (webview itself) without additional information where focus is set currently.

I had a plan for injection custom JS code so that it will go through HTML layout and gather all necessary information and report back to react-native-keyboard-controller, but it's quite a big piece of work 😔

Eventually I'll add it at some point of time, but not right now

[kirillzyusko]

But if you want to speed things up/contribute, then feel free to add your code from above to the example project 😊 It'll be easier for me to have a reproducible demo to think how I can adopt WebView usage!