{"id":22763550,"url":"https://github.com/rodsarhan/react-native-magic-sheet","last_synced_at":"2025-04-14T21:52:33.494Z","repository":{"id":58288670,"uuid":"530725279","full_name":"RodSarhan/react-native-magic-sheet","owner":"RodSarhan","description":":sparkles: A bottom sheet library that can be called imperatively from anywhere!","archived":false,"fork":false,"pushed_at":"2023-12-14T09:40:42.000Z","size":47553,"stargazers_count":25,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T10:01:44.532Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-magic-sheet","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/RodSarhan.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}},"created_at":"2022-08-30T15:47:53.000Z","updated_at":"2024-07-16T12:54:27.000Z","dependencies_parsed_at":"2023-02-13T00:46:22.628Z","dependency_job_id":null,"html_url":"https://github.com/RodSarhan/react-native-magic-sheet","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RodSarhan%2Freact-native-magic-sheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RodSarhan%2Freact-native-magic-sheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RodSarhan%2Freact-native-magic-sheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RodSarhan%2Freact-native-magic-sheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RodSarhan","download_url":"https://codeload.github.com/RodSarhan/react-native-magic-sheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248968759,"owners_count":21191158,"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-12-11T11:08:57.960Z","updated_at":"2025-04-14T21:52:33.477Z","avatar_url":"https://github.com/RodSarhan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![React Native Magic Sheet Cover](/docs/assets/banner.png)\n\n_A Bottom Sheet library that can be called imperatively from anywhere!_\n\n## React Native Magic Sheet :sparkles: \n\nInspired by [react-native-magic-modal](https://github.com/GSTJ/react-native-magic-modal/) This library aims to solve the need to declaretively add bottom sheets to our screens by providing an imperative API that can be called from anywhere in the app (even outside of components) to show a fully customizeable bottom sheet with the ability to wait for it to resolve and get a response back.\n\nThis library relies on the modal component of [@gorhom/bottom-sheet](https://gorhom.github.io/react-native-bottom-sheet/modal/) and accepts the same props and children.\n\nTherefore the setup proccess of [@gorhom/bottom-sheet](https://gorhom.github.io/react-native-bottom-sheet/modal/) should be followed in order for this to work\n\n(ex: installing gesture handler, reanimated2, and @gorhom/bottom-sheet v4)\n\n## 📸 Examples\n\n| IOS                                                                                                                           | Android                                                                                                                       |\n| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |\n| \u003cimg src=\"/docs/assets/ios.gif\" height=500/\u003e | \u003cimg src=\"/docs/assets/android.gif\" height=500/\u003e  |\n\n## 🛠 Installation\n\n```sh\nyarn add react-native-magic-sheet\n```\n\n## ⚙️ Usage\n\nFirst, insert a `MagicSheetPortal` in the top of the application and make sure the app is wrapped with GestureHandlerRootView \u0026 BottomSheetModalProvider.\n\nYou can add the default props and styles of type BottomSheetProps (optional as you can override the props when calling the sheet later).\n\n```js\nimport {GestureHandlerRootView} from 'react-native-gesture-handler';\nimport {BottomSheetModalProvider} from '@gorhom/bottom-sheet';\nimport {MagicSheetPortal} from 'react-native-magic-sheet';\n\nexport default function App() {\n  return (\n    \u003cOtherProviders\u003e\n        \u003cGestureHandlerRootView style={{flex: 1}}\u003e\n            \u003cBottomSheetModalProvider\u003e\n                \u003cMagicSheetPortal {...defaultProps}/\u003e  // \u003c-- On the top of the app component hierarchy\n                \u003cAppComponents /\u003e // The rest of the app goes here\n            \u003c/BottomSheetModalProvider\u003e\n        \u003c/GestureHandlerRootView\u003e\n    \u003c/OtherProviders\u003e\n  );\n}\n```\n\nThen, you are free to use the `magicSheet` as shown from anywhere you want.\n\n```js\nimport React from 'react';\nimport { View, Text, TouchableOpacity } from 'react-native';\nimport { magicSheet } from 'react-native-magic-sheet';\n\nconst PickerSheet = (someProps) =\u003e (\n  \u003cView\u003e\n    \u003cTouchableOpacity \n    onPress={() =\u003e {\n        magicSheet.hide({userName: \"Rod\", id:1})\n    }}\u003e // This will hide the sheet, resolve the promise with the passed object\n      \u003cText\u003eReturn user\u003c/Text\u003e\n    \u003c/TouchableOpacity\u003e\n  \u003c/View\u003e\n);\n\nconst handlePickUser = async () =\u003e {\n  // We can call it with or without props, depending on the requirements.\n  const result = await magicSheet.show(PickerSheet);\n\n  //OR (with props)\n  const result = await magicSheet.show(() =\u003e \u003cPickerSheet {...someProps}/\u003e);\n\n  console.log(result) \n  // will show {userName: \"Rod\", id:1}, or undefined if sheet is dismissed\n};\n\nexport const Screen = () =\u003e {\n  return (\n    \u003cView\u003e\n      \u003cTouchableOpacity onPress={handlePickUser}\u003e\n        \u003cText\u003eShow sheet\u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\nAlternatively, if we don't care about waiting the resolved value of the promise we can just trigger some action instead.\n\n```js\nimport React from 'react';\nimport {View, Text, TouchableOpacity} from 'react-native';\nimport {magicSheet} from 'react-native-magic-sheet';\n\nconst PickerSheet = (props) =\u003e (\n  \u003cView\u003e\n    \u003cTouchableOpacity \n      onPress={() =\u003e {\n        magicSheet.hide();\n        props.onSelect({userName: \"Rod\", id:1})\n      }}\u003e \n      \u003cText\u003eReturn user\u003c/Text\u003e\n    \u003c/TouchableOpacity\u003e\n  \u003c/View\u003e\n);\n\nexport const Screen = () =\u003e {\n  const [user, setUser] = useState();\n\n  const handlePickUser = useCallback(\n    () =\u003e {\n      magicSheet.show(\n        () =\u003e \u003cPickerSheet onSelect={(value)=\u003e{setUser(value)}}/\u003e\n      )\n    }\n  ,[])\n\n  return (\n    \u003cView\u003e\n      \u003cTouchableOpacity \n        onPress={handlePickUser}\u003e\n        \u003cText\u003eShow sheet\u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\nmagicSheet.show( ) can take another optional argument of type BottomSheetProps if we need to override the default props and style of the bottom sheet container\n\nExample:\n```js\nmagicSheet.show(\n    () =\u003e \u003cSomeComponent {...someProps}\u003e,\n    {backgroundStyle: styles.bottomSheetContainer}\n)\n```\n## 😬 Notes\n\n### Inner components\nIt's recommended to use the components provided by [@gorhom/bottom-sheet](https://gorhom.github.io/react-native-bottom-sheet/modal/) inside of the bottom sheet as those components are made to adapt to the bottom sheet behavior, especially scrollables and text inputs.\n\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\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodsarhan%2Freact-native-magic-sheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodsarhan%2Freact-native-magic-sheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodsarhan%2Freact-native-magic-sheet/lists"}