Menu
I have a native app that uses React Native WebView to wrap a web page.
<WebView
ref={webview => (this.webview = webview)}
source={{
uri: `http://localhost:8000`
}}
/>
In this example, the page is simply pointing to an instance of localhost that has the following code, which increments a number when the user scrolls:
var i = 0;
var $el = document.getElementById('counter')
window.addEventListener('scroll', function(e) {
e.preventDefault();
i += 1;
$el.innerText = i
});<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body style="height: 2000px; background: linear-gradient(dodgerblue, yellowgreen)">
<div id="type"></div>
<div id="counter" style="position: fixed">0</div>
</body>
</html>The scroll behaviour inside a React Native WebView behaves in a way that is different to the browser. It waits for the scroll to finish before firing a scroll event.
Here is a comparison of the behaviour; in the browser, the scroll event fires while the scroll is in progress, as wanted and as expected:
In a React Native project in iOS 11, the scroll event fires after the scroll has finished:
This behaviour is used presumably for performance reasons but it's all but killing the intended behaviour of my app.
Is there another work around I haven't thought of?
How can I ensure the scroll event behaves in the same way as the browser inside my React Native app?
864
I found the below information on MDN scroll event documentation. I think issue is not related to react-native.
Browser compatibility
iOS UIWebView
In iOS UIWebViews,
scrollevents are not fired while scrolling is taking place; they are only fired after the scrolling has completed. See Bootstrap issue #16202. Safari and WKWebViews are not affected by this bug.
59
The problem was solved by using WKWebView instead of the React Native WebView.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
