{"id":13678910,"url":"https://github.com/th3rdwave/react-navigation-bottom-sheet","last_synced_at":"2025-05-16T08:04:41.545Z","repository":{"id":37355807,"uuid":"502422876","full_name":"th3rdwave/react-navigation-bottom-sheet","owner":"th3rdwave","description":null,"archived":false,"fork":false,"pushed_at":"2024-06-01T03:32:13.000Z","size":321,"stargazers_count":443,"open_issues_count":23,"forks_count":24,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-10T14:18:00.044Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/th3rdwave.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-11T18:11:47.000Z","updated_at":"2025-04-09T13:27:17.000Z","dependencies_parsed_at":"2024-01-14T14:51:23.613Z","dependency_job_id":"c97de53d-ff7b-4b15-a0bd-c46ec411f845","html_url":"https://github.com/th3rdwave/react-navigation-bottom-sheet","commit_stats":{"total_commits":21,"total_committers":3,"mean_commits":7.0,"dds":0.1428571428571429,"last_synced_commit":"b0cc729eeb675af8a51887b9e2940204183707f2"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/th3rdwave%2Freact-navigation-bottom-sheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/th3rdwave%2Freact-navigation-bottom-sheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/th3rdwave%2Freact-navigation-bottom-sheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/th3rdwave%2Freact-navigation-bottom-sheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/th3rdwave","download_url":"https://codeload.github.com/th3rdwave/react-navigation-bottom-sheet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493378,"owners_count":22080126,"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":[],"created_at":"2024-08-02T13:00:59.792Z","updated_at":"2025-05-16T08:04:37.667Z","avatar_url":"https://github.com/th3rdwave.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# @th3rdwave/react-navigation-bottom-sheet\n\nBottom sheet navigator for React Navigation.\n\nIntegrates [@gorhom/bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet) with [React Navigation](https://github.com/react-navigation/react-navigation).\n\n## Installation\n\n```sh\nyarn add @th3rdwave/react-navigation-bottom-sheet @react-navigation/native @gorhom/bottom-sheet\n```\n\nIf you don't have those already, you will also need to install the [@gorhom/bottom-sheet dependencies](https://gorhom.github.io/react-native-bottom-sheet/#dependencies) react-native-reanimated and react-native-gesture-handler.\n\n## Usage\n\n```js\nimport { createBottomSheetNavigator } from \"@th3rdwave/react-navigation-bottom-sheet\";\n\n// ...\n\nconst BottomSheet = createBottomSheetNavigator();\n\n\u003cBottomSheet.Navigator\n  // Default options\n  screenOptions={{ snapPoints: [\"60%\", \"90%\"] }}\n\u003e\n  {/* The first screen should be your app content */}\n  \u003cBottomSheet.Screen name=\"app\" component={MyApp} /\u003e\n  \u003cBottomSheet.Screen name=\"firstSheet\" component={FirstSheetComponent} /\u003e\n  \u003cBottomSheet.Screen\n    name=\"secondSheet\"\n    component={SecondSheetComponent}\n    // Can pass any prop from @gorhom/bottom-sheet's BottomSheetModal\n    options={{ snapPoints: [200, \"100%\"], index: 1 }}\n  /\u003e\n\u003c/BottomSheet.Navigator\u003e;\n\n// ...\n\n// Open like any regular react-navigation screen.\nnavigation.navigate(\"firstSheet\", { id: 1 });\n\n```\n\nSee the [example app](./example/src/SimpleExample.tsx) for full usage details.\n\n## API\n\n### Navigation options\n\n#### `snapPoints`\n\n```ts\nArray\u003cstring | number\u003e\n```\n\nPoints for the bottom sheet to snap to, points should be sorted from bottom to top. It accepts array of number and string.\n\nDefaults to `['66%']`.\n\n#### Other options\n\nMost props from `BottomSheetModal` are exposed as navigation options. See the [@gorhom/bottom-sheet website](https://gorhom.github.io/react-native-bottom-sheet/modal/props) for full documentation.\n\n### Navigation helpers\n\nNavigation helpers are available on the `navigation` object.\n\n#### `snapTo`\n\n```ts\n(index: number) =\u003e void\n```\n\nSnaps the current sheet to `index`.\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fth3rdwave%2Freact-navigation-bottom-sheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fth3rdwave%2Freact-navigation-bottom-sheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fth3rdwave%2Freact-navigation-bottom-sheet/lists"}