[interpolate] Exception NSException * "Mouting block is expected to not be set"

[chareefdev]

Description

I'm trying to implement collapsible header , it works on android without crashing but not ios,
On ios if i scrolled to top agian it crashed
Exception NSException * "Mouting block is expected to not be set" 0x0000600003805dd0
For android -> facebook/react-native#21801 [exactly like this one]

Expected behavior

without app crashing

Actual behavior & steps to reproduce

Check details below

Snack or minimal code example

This works

const TestReanimated = () => {
    const scrollY = useSharedValue(0);
    const scrollHandler = useAnimatedScrollHandler({
        onScroll: e => {
            scrollY.value = e.contentOffset.y;
        },
    });
    const animatedStyles = useAnimatedStyle(() => {
        const height = interpolate(scrollY.value, [0, 200], [230, 0], {
            extrapolateRight: Extrapolate.CLAMP,
        });

        return {
            height,
        };
    });

    return (
        <SafeAreaView flex={1}>
            <Animated.View
                style={[
                    animatedStyles,
                    {
                        backgroundColor: 'blue',
                    },
                ]}
            />
            <View style={{height:300}}>
                <Animated.ScrollView
                    scrollEventThrottle={16}
                    style={[
                        {
                            backgroundColor: 'green',
                        },
                    ]}
                    onScroll={scrollHandler}>
                    {new Array(100).fill().map(() => {
                        return (
                            <View>
                                <Text>sad</Text>
                            </View>
                        );
                    })}
                </Animated.ScrollView>
            </View>
            <View>
                <Text>footer</Text>
            </View>
        </SafeAreaView>
    );
};

This doesn't work

  <SafeAreaView flex={1}>
            <Animated.View
                style={[
                    animatedStyles,
                    {
                        backgroundColor: 'blue',
                    },
                ]}
            />
            <Animated.ScrollView
                scrollEventThrottle={16}
                style={[
                    {
                        backgroundColor: 'green',
                    },
                ]}
                onScroll={scrollHandler}>
                {new Array(100).fill().map(() => {
                    return (
                        <View>
                            <Text>sad</Text>
                        </View>
                    );
                })}
            </Animated.ScrollView>
            <View>
                <Text>footer</Text>
            </View>
        </SafeAreaView>

Package versions

• React Native:0.66.4
• React Native Reanimated:2.3.1
• NodeJS:14.18.0
• Xcode:13.0
• Java & Gradle:

Affected platforms

• Android
• iOS
• Web

[github-actions]

Issue validator

The issue is valid!

[piaskowyk]

Hey, thanks for your report! This is the same issue as here: #2285 and I'm working on a solution.