Facebook pop up not scrollable in WebView - React native

Question

My app has a WebView and works fine in Android and iOS, although in some cases the following Facebook pop up asking for cookies is shown and it's not possible to scroll down. Then the whole web view is not usable.

The code is very simple:

<WebView
  source={{
    uri: url
  }}/>

How could I make it scrollable as well? Thanks!

Answer 1

A possible solution could be to include the webview inside a ScrollView

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
  <WebView
    source={{
      uri: url
    }}/>
</ScrollView>

Other possible solution could be using:

https://github.com/iou90/react-native-autoheight-webview#readme

Note: if the webview is already included in a ScrollView check if setting some bottomPadding or some contentInset makes the modal scrollable till the end.

Answer 2

The resolution is too small to show the entire popup.

You can either zoom out with something like:

webview.setInitialScale(1);
webview.getSettings().setLoadWithOverviewMode(true); 
webview.getSettings().setUseWideViewPort(true);

Or you can edit the web page itself to scale down using the page's viewport meta, shrink the popup with CSS, or add a scrollbar to that specific element by setting the css of the element to:

#target{
max-height:100%;
overflow:scroll;
}