Weview doesn't shirnk when keyboard is appeared on IOS

Question

Problem: The height of webview doesn't reduce when I open up the keyborad on IOS

I used a KeyboardAvoidingView wrap my Webview like this

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={isKeyboardOpen ? {
  backgroundColor: 'rgba(0,0,0,0.3)',
  position: 'absolute',
  left: webViewConfig.x,
  top: webViewConfig.show ? y : deviceHeight,
  width: deviceWidth - webViewConfig.x,
  height: deviceHeight - y - keyboardHeight,
  } : {
  backgroundColor: 'rgba(0,0,0,0.3)',
  position: 'absolute',
  left: webViewConfig.x,
  top: webViewConfig.show ? y : deviceHeight,
  width: deviceWidth - webViewConfig.x,
  height:
  deviceHeight - y
  }}
>
  // webivew here
</KeyboardAvoidingView>

I even make the height of KeyboardAvoidingView is dynamically change when the keyboard is hidden/appeared.

Please check the image below. I'd like to make the red section is dissapeared. Or at least make the content of webview fit into the container's space (which is KeyboardAvoidingView component) and make it unable to scroll down.

Screenshots/Videos:

I add style={{ backgroundColor: 'red' }} into Weview. As you can see that the webview's content is shirnked as exepected but the red bacground still appear.

Environment:

• OS: IOS
• OS version: 15.4.1
• react-native version: 0.64.2
• react-native-webview version: 11.2.3

Answer 1

In my case. I need to prevent the webview from scrolling. There is a property called scrollEnabled of the WebView component that does that. The codes will look like this

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={{
  backgroundColor: 'rgba(0,0,0,0.3)',
  position: 'absolute',
  left: webViewConfig.x,
  top: webViewConfig.show ? y : deviceHeight,
  width: deviceWidth - webViewConfig.x,
  height: deviceHeight - y
  }}
>
  <Webview 
    // other properties 
    scrollEnabled={false} // -> set this to false
  />
</KeyboardAvoidingView>