Как я могу анимировать на этой скользящей панели и при этом сохранить диапазон перетаскивания?

Question

Я работаю над приложением React Native и использую этот пакет: https://github.com/octopitus/rn-sliding-up-panel для отображения информации / содержимого места на карте.

Что я хотел бы достичь, но не могу понять, как это сделать, это:

1) Вид карты виден с х количество маркеров / штифтов. В это время скользящая панель вообще не видна.

2) Пользователь нажимает на маркер и передает необходимую информацию о маркерах моему компоненту <DetailsPanel/>, который содержит мою скользящую панель, и панель сдвигается вверх и постепенно переходит в «режим предварительного просмотра».

3) Теперь пользователь может перетащить / развернуть эту панель из этой позиции в ее полное положение, но не должен перетаскивать ее под позиция предварительного просмотра.

4) Пользователь нажимает за пределы панели / закрывает ее, панель полностью сдвигается вниз / полностью = маркер равен нулю.

Это то, что я пока имею, но не могу понять Как сделать правильные настройки для перетаскиваемого значения, анимированного значения, анимировать его в et c.

import React from "react";
import { Text, View, Dimensions, Animated } from "react-native";

import SlidingUpPanel from "rn-sliding-up-panel";

const { height } = Dimensions.get("window");
const tabBarHeight = 40;
const contentPreviewHeight = 100;
const panelExpandedY = height - (tabBarHeight + 60 + 20 + 56 + 20 + 20);

const styles = {
  container: {
    flex: 1,
    width: '100%',
    alignItems: "center",
    zIndex: 30000
  },
  panel: {
    flex: 1,
    backgroundColor: "pink",
    position: "relative"
  },
  panelContent: {
    backgroundColor: "#ffff00",
    padding: 20
  },
  backdrop: {
      zIndex: 50000,
      backgroundColor: "#000000"
  }
};

class DetailsPanel extends React.Component {

  static defaultProps = {
    draggableRange: { top: panelExpandedY, bottom: contentPreviewHeight + tabBarHeight }
  };

  _draggedValue = new Animated.Value(0);

  render() {
      console.log("MARKER: ", this.props.marker);

      if(!this.props.marker){
          return null;
      }

    return (
      <View style={styles.container}>
        <SlidingUpPanel
          ref={c => (this._panel = c)}
          draggableRange={this.props.draggableRange}
          snappingPoints={[panelExpandedY]}
          backdropStyle={styles.backdrop}
          height={height - tabBarHeight}
          friction={0.7}
        >
          <View style={styles.panel}>
            <View style={styles.panelContent}>
              <Text>This is my content</Text>
            </View>
          </View>
        </SlidingUpPanel>
      </View>
    );
  }
}

export default DetailsPanel;