https://github.com/gorhom/react-navigation-scrollable-modal

This is a POC to replicate the native interaction behavior of iOS modal presentation with React Navigation.
https://github.com/gorhom/react-navigation-scrollable-modal

modal react-native react-navigation scrollable

Last synced: 14 days ago
JSON representation

This is a POC to replicate the native interaction behavior of iOS modal presentation with React Navigation.

• Host: GitHub
• URL: https://github.com/gorhom/react-navigation-scrollable-modal
• Owner: gorhom
• Created: 2021-09-11T19:36:01.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2021-10-18T20:21:16.000Z (about 3 years ago)
• Last Synced: 2024-10-14T10:18:19.806Z (27 days ago)
• Topics: modal, react-native, react-navigation, scrollable
• Language: TypeScript
• Homepage:
• Size: 1.28 MB
• Stars: 162
• Watchers: 5
• Forks: 11
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# React Navigation Scrollable Modal

This is a POC to replicate the native interaction behavior of iOS modal presentation with React Navigation.

![React Navigation Scrollable Modal](./preview.gif)

---

### Usage

In order to get this functionality working in your project, you have to:

- Copy `patches/@react-navigation+stack+6.0.7.patch` into your project root folder.

- Copy `src/useCardModalGestureInteraction.ts` into any place in your project.

- add `"postinstall": "npx patch-package"` into your project `package.json` in `scripts` node.

- run `yarn`

```tsx

export const ScrollableModalScreen = () => {

  const scrollableRef = useAnimatedRef();

  const { scrollableGestureRef, handleScrolling } =

    useCardModalGestureInteraction(scrollableRef);

  return (

    

      

    

  );

};

```

## How it works

React Navigation Stack implements a `PanGestureHandler` in the [Card](https://github.com/react-navigation/react-navigation/blob/6cba517b74f5fd092db21d5574b558ef2d80897b/packages/stack/src/views/Stack/Card.tsx#L530) component, which should allow us to manipulate the gesture behavior as we want.

To achieve the seamless scrolling / pan gesture interaction, We have to wrap the scrollable component with `NativeGestureHandler` from `react-native-gesture-handler` and pass its reference to the `Card`'s `PanGestureHandler` via the prop `simultaneousHandlers`.

Then we need to lock the scrollable component, whenever the user is reach to the top and start dragging the `Card`.

I have already prepare a custom hook `useCardModalGestureInteraction` that will handle all the interaction with the `Card`, all you have to do is to pass the scrollable ref, and attached the return variables to `NativeViewGestureHandler` and your scrollable

This solution was inspired by the [Bottom Sheet](https://github.com/gorhom/react-native-bottom-sheet) library, thanks to [@haibert](https://twitter.com/haibert8) for highlighting this issue.

---