React native partial modals with pan responder

I'm trying to recreate an element that appears over the screen and that can be expanded, closed or resized by a scroll gesture.

I don't know the real name of this element but it can be found in Apple Maps, Google Maps or Apple Music for example.

Examples of partial modals:

I have tried to create a modal screen with a transparent background and a transparent element that I resize to expand the content element but I am not satisfied at all and I'm sure there is a better way to do this.

export class PartialModal extends Component {
  this.state = {
    isFullScreen: false
  }

  render () {
    return (
      <React.Fragment>
        <TouchableWithoutFeedback onPress={() => this.props.dismiss()}>
          <Animatable.View transition='height' style={{ height: this.state.isFullScreen ? statusBarHeight : Metrics.screenHeight * 0.6 }} />
        </TouchableWithoutFeedback>
        <GestureRecognizer
          onSwipeUp={() => this.setState({ isFullScreen: true })}
          onSwipeDown={() => this.state.isFullScreen ? this.setState({ isFullScreen: false }) : this.props.dismiss()}>
          ...
        </GestureRecognizer>
      </React.Fragment>
    )
}

In this exemple, I can not expand the "modal" by dragging it, it just recognize a swipe gesture.