Shared value updates inside of onEndDrag does not appear to trigger useDerivedValue hook.

Description

Shared value updates inside of onEndDrag does not appear to trigger useDerivedValue hook.

Expected behavior

scroll shared value changes inside onEndDrag should trigger useDerivedValue callback which snaps scroll to previous or next item.

Actual behavior & steps to reproduce

scroll shared value changes don’t trigger useDerivedValue callback

Snack or minimal code example

export function ProfileInfoScrollView({
}: ProfileInfoScrollView.Props) {
  const { profiles } = useProfile()
  const [containerHeight, setContainerHeight] = useState(0)
  const aref = useAnimatedRef<FlatList>()

  const scroll = useSharedValue(0)

  useDerivedValue(() => {
    scrollTo(aref as any, 0, scroll.value * containerHeight, true)
  })

  const animatedScrollHandler = useAnimatedScrollHandler<{
    beginOffset: number
  }>({
    onBeginDrag: (e, c) => {
      c.beginOffset = e.contentOffset.y
    },
    onEndDrag: (e, c) => {
      const currentOffset = e.contentOffset.y
      const direction = currentOffset > c.beginOffset ? 'down' : 'up'
      scroll.value = direction === 'up' ? scroll.value - 1 : scroll.value + 1
    },
  })

  return (
    <View
      onLayout={(event) => {
        const { height } = event.nativeEvent.layout
        setContainerHeight(height)
      }}>
      <Button
        title="scroll down"
        onPress={() => {
          scroll.value = scroll.value + 1
          if (scroll.value >= 10) scroll.value = 0
        }}
      />
      <AnimatedFlatList
        ref={aref}
        data={profiles}
        onScroll={animatedScrollHandler}
        getItemLayout={(_, index) => {
          return {
            length: containerHeight,
            index,
            offset: index * containerHeight,
          }
        }}
        scrollEventThrottle={16}
        renderItem={({ item: p }: ListRenderItemInfo<Profile>) => (
          <ProfileInfo height={containerHeight} key={p.id} profile={p} />
        )}
        keyExtractor={(p: Profile) => p.id}
      />
    </View>
  )
}

Package versions

• React Native: 0.66.2
• React Native Reanimated: 2.2.4, 2.3.0-beta.4
• NodeJS:
• Xcode:
• Java & Gradle:

Affected platforms

• Android
• iOS
• Web

[Eljoy]

@tomekzaw Well, the useSharedValue seems to be triggered. Although now I see that there is an issue of scrollTo function not working when there is still an active scroll momentum. Thanks.

[hannojg]

A temporary fix for me is to uncomment the lines in the file mentioned in this issue https://github.com/software-mansion/react-native-reanimated/issues/2667