React Native - анимированный со свитком

Question

Может ли кто-нибудь помочь мне понять нижеследующее ..

Я приехал с ReactJS, поэтому Animated для меня очень новая.

Я быстро сделал следующее, чтобы убрать div на основе позиции прокрутки.

Это работает, но когда я прокручиваю назад вверх и хочу, чтобы div вернулся в поле зрения, если я удерживаю палец на экране, когда он находится ближе к верху, состояние прокрутки срабатывает от true до false, чтобы анимация выглядела очень резкой, так что я полагаю, что я не использую это правильно?

Также вторая проблема, я хочу, чтобы контейнер представления прокрутки занимал пространство, освобожденное div, когда он убирается, в настоящее время он просто оставляет пустое пространство: /

Благодарим вас за любую помощь и совет, спасибо!

import React, {useEffect, useState} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import {
  Animated,
  Easing,
  StyleSheet,
  View,
  Text,
  TouchableWithoutFeedback,
  StatusBar,
} from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';

const Card = () => {

  const [scroll,setScroll] = useState(false)
  const handleScroll = (event) => {
    setScroll(event.nativeEvent.contentOffset.y > 50 ? true : false)
  }

  let yTranslate = new Animated.Value(0); // declare an animated value

  const cardScale = yTranslate.interpolate({
    inputRange: [0, 1],
    outputRange: [0, -40]
  });

const handleHeader = (val1 = 1, val2 = 200) => {
  Animated.timing(yTranslate, {
    toValue: val1,
    duration: val2,
    easing: Easing.linear,
    useNativeDriver: true
  }).start();
}

useEffect(() => {

  scroll ? handleHeader(1,200) : handleHeader(0,200)

},[scroll])

  let transformStyle = { width: "100%", padding: 0, transform: [{ translateY: cardScale }] };

  return (
    <View>
      <Animated.View style={transformStyle}>
        <View style={{backgroundColor: "darkgrey"}}>
          <Text style={{padding: 10, color: "white"}}>Test</Text>
        </View>
      </Animated.View>
    <Animated.ScrollView onScroll={handleScroll} style={{transform: [{ translateY: cardScale }]}}>
      <View style={{height: 2000, backgroundColor: "white"}}>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>{scroll + 'scroll'}</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      </View>
    </Animated.ScrollView>
    </View>
  );
}

const Home = ({navigation}) => {

  return (
    <>
      <StatusBar backgroundColor="black" barStyle="light-content" />
      <View style={{flex: 1}}>
        <Card />
      </View>
    </>
  );
};

const Stack = createStackNavigator();

const App = () => {

  return(
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{
            title: 'Android Test Home',
            headerStyle: {
              backgroundColor: 'black',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
          }}
        />

      </Stack.Navigator>
    </NavigationContainer>
  )
}

const styles = StyleSheet.create({

});

export default App;