Box shadow animated

Description

Hi guys! I was trying to make the box shadow appear smoothly when the user scrolls the block. But something doesn’t work, tell me what is the problem?)

Code

....
const [boxShadow, setBoxShadow] = useState<boolean>(false);

const scrollHandler = useAnimatedScrollHandler((event) => {
    console.log(event.contentOffset.y)
    setBoxShadow(event.contentOffset.y > 10);
});

const styleTopBox = useAnimatedStyle(() => {
	if (boxShadow) {
		return {
			...Platform.select({
				ios: {
					shadowColor: theme.colors.colorBoxShadow,
					shadowOffset: {
						width: 0,
						height: 3,
					},
					shadowOpacity: 0.27,
					shadowRadius: 4.65,
				},
				android: {
					elevation: 10,
				}
			})
		}
	}
        return {};
});
<Animated.View
	style={{
           backgroundColor:  '#000'
             ...styleTopBox
	}}
>
...
</Animated.View>

Before scroll:

After scroll:

Package versions

• React: 16.13.1
• React Native: https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz
• React Native Reanimated: ^2.0.0-alpha.6

[karol-bisztyga]

This has been closed automatically with iOS solution being merged. @VictorPullzz if the problem persists, please reopen.

[charles-goode]

I was getting TypeError: Attempting to define property on object that is not extensible when merging styles like style={[{/*other styles */ shadowOffset: {width: 0, height: 0 }}, animateStyle]} where the animatedStyle was animating shadowRadius. It was fixed by moving the static definition of shadowOffset into the animatedStyle. Pretty weird and the error message wasn’t helpful. I got it through process of elimination.