Using useAnimatedStyle with contentContainerStyle inside Animated.ScrollView

Description

I want to update the height of my ScrollView when adding an item but I keep getting Property is not configurable. What is the correct way to pass this value ?

Code

const height = useDerivedValue(() => {
    return items.length * 200
}, [items])

const style = useAnimatedStyle(() => ({
    height: height.value
}))

return <Animated.ScrollView contentContainerStyle={[style]}> ... </Animated.ScrollView>

Package versions

• React: 16.13.1
• React Native: 0.63.2
• React Native Reanimated: 2.0.0-alpha.7

[terrysahaidak]

Oh, I guess this won’t work, I didn’t read carefully your description, sorry.

The contentContainerStyle is a prop that is passing to the underlying view that wraps the content of Scroll view. That view is not animated - that’s why you can’t pass animated styles to it. But you can create your own container - just wrap the children of the ScrollView with your own animated view.

[terrysahaidak]

seems like it’s related to the limitations of capturing object to be used on UI Thread. It doesn’t capture prototype property which causes iterations on these objects to not work.