How can i set 'scrollEnabled' property of ScrollView based on animatedValue?

Question

I use Reanimated 2.4.1.

I tried to do like this:

const scrollEnabled = useAnimatedStyle(false)

return (
  <Animated.ScrollView scrollEnabled={scrollEnabled.value}>
  ....
  </Animated.ScrollView>
)

and like this:

const someAnimatedValue = useAnimatedStyle(false);

const animatedProps = useAnimatedProps(() => {
  return {
    scrollEnabled: someAnimatedValue.value
  }
})

return (
  <Animated.ScrollView {...animatedProps}>
  ....
  </Animated.ScrollView>
)

but none of this works.

Answer 1

You need to use useSharedValue for animated value. Another point is that animatedProps usage is not correct.

const someAnimatedValue = useSharedValue(false);

const animatedProps = useAnimatedProps(() => {
  return {
    scrollEnabled: someAnimatedValue.value
  }
})

return (
  <Animated.ScrollView animatedProps={animatedProps}>
  ....
  </Animated.ScrollView>
)