Использование анимированного API для скрытия / отображения нижнего колонтитула в реагирующем

Question

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

const [footerFlex, setFooterFlex] = useState(new Animated.Value(0));

вот мой компонент flatList:

 <View style={styles.flatContainer}>
        <FlatList
          ref={(ref) => {
            myFlatList = ref;
          }}
          data={sourateDataAr.ayahs}
          renderItem={renderItem}
          keyExtractor={(item, index) => index.toString()}
          onScrollToIndexFailed={(error) => {
            myFlatList.scrollToOffset({
              offset: error.averageItemLength * error.index,
              animated: false,
            });
          }}

          scrollEventThrottle={16}
          onScroll={Animated.event([
            {nativeEvent: {contentOffset: {y: footerFlex}}},
          ])}
        />
      </View>
      {footer}

вот нижний колонтитул:

  const renderFooter = () => {
    const footerAnimatedFlex = footerFlex.interpolate({
      inputRange: [0, height * 0.085],
      outputRange: [height * 0.085, 0],
      extrapolate: 'clamp',
    });

    return (
      <Animated.View
        style={{
          ...styles.footer,
          height: footerAnimatedFlex,

        }}>
        <TouchableImage
          handlePress={handleModalVisibility}
          size={0.05}
          imagePath={require('Resources/leftArrow.png')}
          tintColor={'#4c4c4c'}
        />
        <TouchableImage
          handlePress={() => handleModalVisibility('lang')}
          size={0.07}
          imagePath={require('Resources/global.png')}
          tintColor={'#4c4c4c'}
        />
        <TouchableImage
          handlePress={() => handleModalVisibility('font')}
          size={0.05}
          imagePath={require('Resources/fontSize.png')}
          tintColor={'#4c4c4c'}
        />
        <TouchableImage
          handlePress={() => handleModalVisibility('theme')}
          size={0.08}
          imagePath={require('Resources/colors-black.png')}
          tintColor={'#4c4c4c'}
        />
        <TouchableImage
          handlePress={handleModalVisibility}
          size={0.05}
          imagePath={require('Resources/rightArrow.png')}
          tintColor={'#4c4c4c'}
        />
      </Animated.View>
    );
  };

СПАСИБО