Перемещение абсолютных слоев на свитке

Question

Вот мой полный экранный компонент:

export const SearchScreen = () => {
  const screenHeight = Dimensions.get("window").height;
  const [formHeight, setFormHeight] = useState({
    formTitleHeight: 0,
    formContentHeight: 0,
  });
  const [dateLayerTranslateValue, setDateLayerTranslateValue] = useState<any>(
    new Animated.Value(screenHeight)
  );

  return (
    <View style={{ flex: 1, backgroundColor: blue }}>
      <MenuBar />
      <View
        style={{
          backgroundColor: "white",
          flex: 1,
          borderTopLeftRadius: 30,
          borderTopRightRadius: 30,
        }}
      >
        <Text
          style={{
            fontFamily: "Rubik-Regular",
            fontSize: 24,
            paddingTop: 20,
            paddingLeft: 20,
            paddingRight: 20,
          }}
          onLayout={(event: LayoutChangeEvent) => {
            console.log(event.nativeEvent.layout.height);
            setFormHeight({
              ...formHeight,
              formTitleHeight: event.nativeEvent.layout.height,
            });
          }}
        >
          Où voulez vous aller ?
        </Text>
        <SearchForm
          onSubmit={onSubmitHandler}
          onLayout={(event: LayoutChangeEvent) => {
            setFormHeight({
              ...formHeight,
              formContentHeight: event.nativeEvent.layout.height,
            });
          }}
        />
        <Animated.ScrollView
          style={{
            backgroundColor: orange,
            flex: 1,
            borderTopLeftRadius: 30,
            borderTopRightRadius: 30,
            transform: [{ translateY: dateLayerTranslateValue }],
            position: "absolute",
            width: "100%",
            height: 500,
          }}
        >
          <ImageBackground
            source={wavesBgSrc}
            resizeMode={"cover"}
            style={{
              flex: 1,
              justifyContent: "center",
            }}
          >
            <Text
              style={{
                color: "white",
                fontSize: 20,
                fontFamily: "Rubik-Regular",
                textAlign: "center",
                marginTop: 20,
              }}
            >
              Choisissez le mois de votre voyage
            </Text>
            <MonthsPicker />
          </ImageBackground>
        </Animated.ScrollView>
      </View>
    </View>
  );
};

Это выглядит так:

При прокрутке оранжевого слоя Я хотел бы перевести его в верхнюю часть экрана, над белым слоем.

Так что мне нужно отключить прокрутку, пока слой не находится в позиции 0, тогда я могу прокручивать содержимое. Я не уверен, как это сделать.

Я пробовал что-то вроде:

onScroll={(e: NativeSyntheticEvent<NativeScrollEvent>) => {
            const yOffset = e.nativeEvent.contentOffset.y;
            if (
              yOffset <
              formHeight.formTitleHeight + formHeight.formContentHeight + 40
            ) {
              setDateLayerTranslateValue(
                formHeight.formTitleHeight +
                  formHeight.formContentHeight +
                  40 -
                  e.nativeEvent.contentOffset.y
              );
            }
          }}

Он перемещает содержимое над белым слоем, но также прокручивает себя во время перевода. Мне нужно запретить прокрутку вида, пока он не находится в верхней части экрана.