React native make smooth scrolling animation with collapsing header

I am pretty new to react native. I am trying to make a collapsable header when I scroll upwards with a scrollview. Something like this:

https://medium.com/swlh/making-a-collapsible-sticky-header-animations-with-react-native-6ad7763875c3

I got it wokring but I am not really it’s not exactly what I want. So this only works when the scrollview is long enough so you can actually scroll and let it collapse.

So I was trying to make it work so when the scrollview is not long enough it will collapse no matter what. I only got it working by adding a padding on the bottom of the scrollview. What I don’t like as well.

And another thing that I want, but do not know how to perform. Is when I start scrolling that the scrollview go automatically to the top of the screen, instead of it staying where I dragged it to.

This is what I have atm:

const [listHeight, setListHeight] = useState(null)

    const insets = useSafeAreaInsets();

    const HEADER_HEIGHT = 200;
    const scrollOffsetY = useRef(new Animated.Value(0)).current;

    const headerHeight = scrollOffsetY.interpolate({
        inputRange: [0, HEADER_HEIGHT],
        outputRange: [HEADER_HEIGHT + insets.top, insets.top + 40 ],
        extrapolateRight: 'clamp'
    });

    return (
        <SafeAreaProvider style={{backgroundColor: colors.bgColor, flex: 1 }} >

            <SafeAreaView style={globalStyles.droidSafeArea} forceInset={{ top: 'always' }}>
                <Animated.ScrollView
                    contentInsetAdjustmentBehavior="automatic"
                    stickyHeaderIndices={[1]}
                    bounces={false}
                    contentContainerStyle={{
                        paddingBottom: listHeight / 2.3 - insets.top,
                    }}
                    scrollEventThrottle={16}
                    onScroll={ Animated.event(
                        [
                            {
                                nativeEvent:
                                    {
                                        contentOffset: { y: scrollOffsetY }
                                    }
                            }
                        ], {useNativeDriver: false})
                    }
                    onLayout={(evt) => {
                        const listH = evt.nativeEvent.layout.height;
                        setListHeight(listH)
                    }}
                >

                    <Animated.View
                        style={{
                            justifyContent: "center",
                            alignItems: "center",
                            height: headerHeight,
                        }}
                    >
                        <Animated.Text
                            style={[
                                {
                                    color: "white"
                                }
                            ]}
                        >My progression</Animated.Text>
                    </Animated.View>

                    <Animated.View
                        style={{
                            justifyContent: "center",
                            backgroundColor: colors.bgColor,
                            padding: 10,
                            height: 40,
                        }}
                    >
                        <Animated.Text
                            style={[
                                {
                                    color: "white"
                                }
                            ]}
                        >My progression</Animated.Text>
                    </Animated.View>

                    <View
                        style={{padding: 10}}
                    >
                        <View
                            style={[
                                {height: 80, backgroundColor: colors.secondary2, borderRadius: 8, marginBottom: 10}
                            ]}
                        >

                        </View>

                        <View
                            style={[
                                {height: 80, backgroundColor: colors.secondary2, borderRadius: 8, marginBottom: 10}
                            ]}
                        >

                        </View>

                        <View
                            style={[
                                {height: 80, backgroundColor: colors.secondary2, borderRadius: 8, marginBottom: 10}
                            ]}
                        >

                        </View>

                        <View
                            style={[
                                {height: 80, backgroundColor: colors.secondary2, borderRadius: 8, marginBottom: 10}
                            ]}
                        >

                        </View>

                        <View
                            style={[
                                {height: 80, backgroundColor: colors.secondary2, borderRadius: 8, marginBottom: 10}
                            ]}
                        >

                        </View>

                        <View
                            style={[
                                {height: 80, backgroundColor: colors.secondary2, borderRadius: 8, marginBottom: 10}
                            ]}
                        >

                        </View>
                        <View
                            style={[
                                {height: 80, backgroundColor: colors.secondary2, borderRadius: 8, marginBottom: 10}
                            ]}
                        >

                        </View><View
                        style={[
                            {height: 80, backgroundColor: colors.secondary2, borderRadius: 8, marginBottom: 10}
                        ]}
                    >

                    </View><View
                        style={[
                            {height: 80, backgroundColor: colors.secondary2, borderRadius: 8, marginBottom: 10}
                        ]}
                    >

                    </View>



                    </View>
                </Animated.ScrollView>
            </SafeAreaView>
        </SafeAreaProvider>

Could you guys please help me?

Thanks in advance