Can't get Animated.event to work in WebView onScroll

Currently trying to implement simple transform of view using Reanimated. I have a View(like header) above webview, and I’m trying to move this view while scrolling. Code is as follows:

const y = new Animated.Value(0);
const AnimatedWebView = Animated.createAnimatedComponent(WebView);
function WebPage() {
  return (
    <SafeAreaView style={{flex: 1}}>
      <Animated.View
        style={{
          height: 60,
          width: '100%',
          backgroundColor: 'lightblue',
          transform: [{translateY: y}],
        }}
      />
      <AnimatedWebView
        source={{
          uri: 'https://www.stackoverflow.com',
        }}
        originWhitelist={['*']}
        onScroll={Animated.event([{nativeEvent: {contentOffset: {y: y}}}])}
      />
    </SafeAreaView>
  );
}

Above doesn’t trigger any transform, so I’ve tried this with normal scrollview. Everything same except scrollview component:

const y = new Animated.Value(0);
const AnimatedWebView = Animated.createAnimatedComponent(WebView);
function WebPage() {
  return (
    <SafeAreaView style={{flex: 1}}>
      <Animated.View
        style={{
          height: 60,
          width: '100%',
          backgroundColor: 'lightblue',
          transform: [{translateY: y}],
        }}
      />
     <Animated.ScrollView
        style={
          {
            marginHorizontal: 20,
          }
        }
        scrollEventThrottle={16}
        onScroll={Animated.event([{nativeEvent: {contentOffset: {y: y}}}])}>
        <Text
          style={{
            fontSize: 42,
          }}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </Animated.ScrollView>
    </SafeAreaView>
  );
}

this works fine. Am I doing something wrong, or is this a bug?

[shirakaba]

Yup, I solved it for LinguaBrowse. It only takes a very minor change to add Animated support to React Native Webview, but my PR (https://github.com/react-native-community/react-native-webview/pull/1102) never got merged and sadly upstream has moved on vastly since then (e.g. addition of Windows and macOS platforms).

Would be glad if someone else could pick it up. It’s just a one-line change required for each platform implementation, followed by a bunch of adding documentation.

Warning: Don’t expect that adding this change alone would bring Animated scroll support to macOS Cocoa, because macOS Cocoa’s WKWebView is limited in another aspect in that its WKWebView (unlike iOS) lacks a UIScrollView altogether (and thus fires no scroll event at all). You could pass the DOM “scroll” events up from the webpage if you really wanted it for macOS Cocoa too, but I’d call that a separate PR.

(I haven’t checked whether anyone’s implemented it yet, but I doubt it).

[jakub-gonet]

If I understand this correctly this is related to forwarding refs to the underlying animated component. Forwarding refs was fixed in 1.10.0, so I’m going to close this one now. I’m open for discussion though.