ModalAnimation.js

ModalAnimation.js

const MIDDLE_OF_THE_SCREEN_OFFSET = SCREEN_HEIGHT/2 - 120;

//initially 
    this.modalAnimation = new Animated.ValueXY({
      x: 0,
      y: MIDDLE_OF_THE_SCREEN_OFFSET
    });

//responser
      onPanResponderRelease: (e, gestureState) => {
        // vy = how fast dragged in y axis (- is up + down)
        // so when we swipe down fast or drag half the screen close the modal
        if (
          gestureState.vy >= 0.5 ||
          gestureState.dy >= MIDDLE_OF_THE_SCREEN_OFFSET
        ) {
          Animated.timing(this.modalAnimation.y, {
            toValue: gestureState.dy > 0 ? SCREEN_HEIGHT : -SCREEN_HEIGHT,
            duration: 300,
            easing: Easing.out(Easing.quad)
          }).start(() => this.handleClose());
        } else {
          this.openModalToFullHeight();
        }
      }

openModalHalfway = () => {
    Animated.timing(this.modalAnimation.y, {
      toValue: MIDDLE_OF_THE_SCREEN_OFFSET,
      duration: 300,
    }).start(() => {
      this.modalAnimation.setOffset({ x: 0, y: MIDDLE_OF_THE_SCREEN_OFFSET });
      this.modalAnimation.setValue({ x: 0, y: 0 });
      this.setState({
        modalState: MODAL_SHOWN_HALF
      });
    });
  };
  openModalToFullHeight = () => {
    //else open the modal to full
    this.modalAnimation.setOffset({x: 0, y:0});
    Animated.timing(this.modalAnimation.y, {
      toValue: 1,
      duration: 750,
      easing: Easing.out(Easing.poly(4))
    }).start(() => {
      this.setState({
        modalState: MODAL_SHOWN_FULL
      });
    });
  };

//styles 
    const contentTranslateOnY = this.modalAnimation.y.interpolate({
      inputRange: [0, SCREEN_HEIGHT],
      outputRange: [0, SCREEN_HEIGHT],
      extrapolate: 'clamp'
    });