React native partial modals with pan responder

Question

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.

Answer 1

I learned that it's called Bottom Sheet. So I searched for that and I found a few repos:

https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior

https://github.com/prscX/react-native-bottom-action-sheet

I will investigate a bit more but it's a good way to start.

Answer 2

Check out react-native-reanimated-bottom-sheet

You can also Check out react-navigation. And set it to modal. Then you can tweak it with cardStyleInterpolator