title: React native partial modals with pan responder
body: <p>I'm trying to recreate an element that appears over the screen and that can be expanded, closed or resized by a scroll gesture.</p>
  
  <p>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.</p>
  
  <p>Examples of partial modals:</p>
  
  <p><a href="https://i.stack.imgur.com/4kC0E.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4kC0E.jpg" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <pre class="lang-js prettyprint-override"><code>export class PartialModal extends Component {
    this.state = {
      isFullScreen: false
    }
  
    render () {
      return (
        &lt;React.Fragment&gt;
          &lt;TouchableWithoutFeedback onPress={() =&gt; this.props.dismiss()}&gt;
            &lt;Animatable.View transition='height' style={{ height: this.state.isFullScreen ? statusBarHeight : Metrics.screenHeight * 0.6 }} /&gt;
          &lt;/TouchableWithoutFeedback&gt;
          &lt;GestureRecognizer
            onSwipeUp={() =&gt; this.setState({ isFullScreen: true })}
            onSwipeDown={() =&gt; this.state.isFullScreen ? this.setState({ isFullScreen: false }) : this.props.dismiss()}&gt;
            ...
          &lt;/GestureRecognizer&gt;
        &lt;/React.Fragment&gt;
      )
  }
  </code></pre>
  
  <p>In this exemple, I can not expand the "modal" by dragging it, it just recognize a swipe gesture.</p>