React-native-reanimated: Animated Scrollview event not working on the web

[DaniAkash]

Description

I'm trying to do a parallax scroll header animation on the web. But it is not working. Works fine on Android & iOS

Steps To Reproduce

1. Create an Animated.Scrollview component
2. Use the onScroll attribute with event from reanimated
3. The animated value is not updating

Snack or minimal code example

The following animated scroll header works on Android & iOS but doesn't work on the web

https://snack.expo.io/@daniakash/reanimated-scroll-event-web-issue

Package versions

• Expo: 37.0.0
• React Native: 0.61
• React Native Reanimated: 1.9.0
• React Native Web: 0.12.3

[emroot]

ditto here. maybe @EvanBacon might know about this?

[sertony]

It's just not implemented for web.

Here is why:

https://github.com/software-mansion/react-native-reanimated/blob/dcb018fc5fb038d571c5c80a1951f450ecc43e27/src/core/AnimatedEvent.js#L102

https://github.com/software-mansion/react-native-reanimated/blob/dcb018fc5fb038d571c5c80a1951f450ecc43e27/src/ReanimatedModule.js#L6

[nandorojo]

I recreated @DaniAkash's example with the vanilla Animated on Snack, and that works fine.

https://snack.expo.io/@nandorojo/reanimated-scroll-event-web-issue

Using reanimated would be preferred, of course.

[DaniAkash]

I recreated @DaniAkash's example with the vanilla Animated on Snack, and that works fine.

https://snack.expo.io/@nandorojo/reanimated-scroll-event-web-issue

Using reanimated would be preferred, of course.

I am currently using the vanilla Animated component as the workaround...

[EvanBacon]

iirc the noop is fine. Possibly related to this https://github.com/software-mansion/react-native-reanimated/issues/1071