{"id":13901343,"url":"https://github.com/gorhom/react-navigation-scrollable-modal","last_synced_at":"2025-08-02T00:10:44.956Z","repository":{"id":41038631,"uuid":"405467360","full_name":"gorhom/react-navigation-scrollable-modal","owner":"gorhom","description":"This is a POC to replicate the native interaction behavior of iOS modal presentation with React Navigation.","archived":false,"fork":false,"pushed_at":"2021-10-18T20:21:16.000Z","size":1345,"stargazers_count":162,"open_issues_count":2,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-02T03:12:20.571Z","etag":null,"topics":["modal","react-native","react-navigation","scrollable"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gorhom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"gorhom"}},"created_at":"2021-09-11T19:36:01.000Z","updated_at":"2024-09-25T05:32:30.000Z","dependencies_parsed_at":"2022-08-25T15:01:49.438Z","dependency_job_id":null,"html_url":"https://github.com/gorhom/react-navigation-scrollable-modal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorhom%2Freact-navigation-scrollable-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorhom%2Freact-navigation-scrollable-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorhom%2Freact-navigation-scrollable-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorhom%2Freact-navigation-scrollable-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gorhom","download_url":"https://codeload.github.com/gorhom/react-navigation-scrollable-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorhom%2Freact-navigation-scrollable-modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259181101,"owners_count":22817877,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["modal","react-native","react-navigation","scrollable"],"created_at":"2024-08-06T21:01:14.114Z","updated_at":"2025-06-11T01:32:41.380Z","avatar_url":"https://github.com/gorhom.png","language":"TypeScript","funding_links":["https://github.com/sponsors/gorhom"],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Navigation Scrollable Modal\n\nThis is a POC to replicate the native interaction behavior of iOS modal presentation with React Navigation.\n\n![React Navigation Scrollable Modal](./preview.gif)\n\n---\n\n### Usage\n\nIn order to get this functionality working in your project, you have to:\n\n- Copy `patches/@react-navigation+stack+6.0.7.patch` into your project root folder.\n- Copy `src/useCardModalGestureInteraction.ts` into any place in your project.\n- add `\"postinstall\": \"npx patch-package\"` into your project `package.json` in `scripts` node.\n- run `yarn`\n\n```tsx\nexport const ScrollableModalScreen = () =\u003e {\n  const scrollableRef = useAnimatedRef\u003cFlatList\u003e();\n\n  const { scrollableGestureRef, handleScrolling } =\n    useCardModalGestureInteraction(scrollableRef);\n  return (\n    \u003cNativeViewGestureHandler ref={scrollableGestureRef}\u003e\n      \u003cAnimatedFlatList\n        ref={scrollableRef}\n        scrollEventThrottle={16}\n        onScroll={handleScrolling}\n        {...}\n      /\u003e\n    \u003c/NativeViewGestureHandler\u003e\n  );\n};\n```\n\n## How it works\n\nReact 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.\n\nTo 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`.\n\nThen we need to lock the scrollable component, whenever the user is reach to the top and start dragging the `Card`.\n\nI 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\n\nThis 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.\n\n---\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://gorhom.dev\" target=\"_blank\"\u003e\u003cimg alt=\"Mo Gorhom\" src=\"./gorhom.png\" height=\"46\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgorhom%2Freact-navigation-scrollable-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgorhom%2Freact-navigation-scrollable-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgorhom%2Freact-navigation-scrollable-modal/lists"}