Keyboard overlapping input on iOS with React Native Webview

Viewed 254

I have an issue with my React Native app, the keyboard is overlapping an input inside a WebView on iOS only, using react-native-webview when the property scrollEnabled is false and wrapping the webview inside a KeyboardAvoidingView component. The KeyboardAvoidingView component is doing his job by adding bottom-padding and the web page has a scrollview that allow the user to scroll when the screen shrinks, but the web page is not scrolling by itself to display the input when the keyboard is displaying.

The Android app has no issue, it is not using the KeyboardAvoidingView component and it has android:windowSoftInputMode="adjustResize" inside the AndroidManifest.

The code looks like this :

<KeyboardAvoidingView
  behavior={isIos ? 'padding' : null}
  enabled={isIos}
>
    <WebView
          androidLayerType={'hardware'}
          hideKeyboardAccessoryView={true}
          domStorageEnabled={true}
          cacheEnabled={true}
          overScrollMode={'never'}
          scrollEnabled={false}
        />
</KeyboardAvoidingView>

Do you have any ideas how to solve this issue?

0 Answers
Related