Multiple WebViews in PagerView

I am trying to display multiple webviews (with vertical scroll in them) using PagerView.

The issue that I am having is that when I scroll the web page in WebView, for some reason PagerView also handles the tap-and-drag gesture and sometimes may swipe the page. This is not the desired behavior and I am wondering how can it be avoided?

Here’s the working example:

import { Dimensions, View } from 'react-native';
import PagerView from 'react-native-pager-view';
import WebView from 'react-native-webview';

const { width, height } = Dimensions.get('window');

export default function App() {  
  return (
    <View style={{ flex: 1 }}>
      <PagerView overScrollMode='never' style={{ width, height}}>
        <View style={{ flex: 1 }}>
          <WebView source={{ uri: 'https://www.lipsum.com/' }} />
        </View>
        <View style={{ flex: 1 }}>
          <WebView source={{ uri: 'https://cn.lipsum.com/' }} />
        </View>
        <View style={{ flex: 1 }}>
          <WebView source={{ uri: 'https://es.lipsum.com/' }} />
        </View>
        <View style={{ flex: 1 }}>
          <WebView source={{ uri: 'https://it.lipsum.com/' }} />
        </View>
      </PagerView>
    </View>
  );
}

https://user-images.githubusercontent.com/873278/154859909-3cfe0e92-136a-49c6-80ce-8f3ebf03dbe7.mov

Thanks for any help!

[manosKas]

@zhuanghongji yeah thats more or less what i did but i experimented a bit with pager view 6.0.0-rc2 with lazy load and i got a better result

[jiantao88]

@manosKas I didn’t use react-native-webview 。This library does not meet my needs，I am using the webview packaged by my own project