Причудливое поведение для Android с Animated.event на onScroll prop

Question

Я попытался создать анимацию, где у меня есть виртуальный список, заполняющий только нижнюю часть экрана, с верхней панелью поиска и полем отображения. Когда пользователь поднимает элементы в списке, я использую реквизиты onScroll и Animated.event (), чтобы поднять дисплей и заблокировать панель поиска в верхней части экрана.

Для IOS моя анимация работает как положено. Однако для android он, кажется, работает при медленном и контролируемом использовании, но особенно при более быстром перемещении и касаниях, которые заканчиваются за пределами Виртуализированного списка, его границ есть некоторое странное поведение, когда анимация внезапно перемещается в перевернутом виде. направление.

Я сделал демонстрационный компонент, чтобы вы, ребята, могли посмотреть:

• Белый: дисплей
• Синий: панель поиска
• Зеленый: список

Чтобы воспроизвести нежелательное поведение, имитируйте прикосновение к зеленому цвету и двигайтесь вверх и вниз, также попытайтесь время от времени заканчивать прикосновение к белому. Медленно все работает хорошо, но при движении киккера вы должны увидеть причуды.

Компонент:

import React, { PureComponent, Fragment } from "react"

import {
    Text,
    View,
    Animated,
    StyleSheet,
    TouchableOpacity,
    Dimensions,
    VirtualizedList
} from "react-native";

const AnimatedDetailsList = Animated.createAnimatedComponent(VirtualizedList);

const PORTRAIT = Dimensions.get("window").height;
const width = Dimensions.get("window").width;
const DISPLAY_HEIGHT = 362;
const OUTPUT_DISPLAY_HEIGHT = 362;

const testData = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    17,
    18,
    19
].map(item => ({
    key: item,
    value: item
}));

class PullUp extends PureComponent {
    state = {
        open: false,
        scrollY: new Animated.Value(0),
        interpolation: {
            inputRange: [0, 500],
            outputRange: [0, -OUTPUT_DISPLAY_HEIGHT],
            extrapolate: "clamp"
        }
    };

    render() {
        const translateY = this.state.scrollY.interpolate(this.state.interpolation);

        const transform = [{ translateY }];

        const animatedEvent = Animated.event(
            [
                {
                    nativeEvent: {
                        contentOffset: { y: this.state.scrollY }
                    }
                }
            ],
            { useNativeDriver: true }
        );

        return (
            <Animated.View style={[styles.container, { transform }]}>
                <View style={styles.placeholder} />
                <View style={styles.list}>
                    <View style={styles.searchbar} />
                    <AnimatedDetailsList
                        data={testData}
                        style={styles.list}
                        scrollEventThrottle={1}
                        onScroll={animatedEvent}
                        getItemCount={data => data.length}
                        getItem={(data, index) => data[index]}
                        renderItem={({ item }) => {
                            return (
                                <TouchableOpacity>
                                    <View style={styles.item}>
                                        <Text>{item.value}</Text>
                                    </View>
                                </TouchableOpacity>
                            );
                        }}
                        keyExtractor={item => item.key}
                        showsVerticalScrollIndicator
                    />
                </View>
            </Animated.View>
        );
    }
}

export default PullUp;

const styles = StyleSheet.create({
    container: {
        position: "absolute",
        width,
        height: -(PORTRAIT + DISPLAY_HEIGHT)
    },
    placeholder: {
        height: DISPLAY_HEIGHT
    },
    searchbar: {
        height: 40,
        width,
        backgroundColor: "blue"
    },
    list: {
        height: Dimensions.get("window").height
    },
    item: {
        height: 100,
        backgroundColor: "green",
        width
    }
});

Я что-то не так делаю или это, может быть, реакция на реакцию?

Заранее большое спасибо.