{"id":25591434,"url":"https://github.com/atlj/react-native-lightning-modal","last_synced_at":"2025-04-12T23:20:31.137Z","repository":{"id":42625319,"uuid":"394020789","full_name":"atlj/react-native-lightning-modal","owner":"atlj","description":"A performant bottom modal that works using React Native Reanimated 2","archived":false,"fork":false,"pushed_at":"2022-03-30T14:51:56.000Z","size":638,"stargazers_count":36,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-06T04:59:45.514Z","etag":null,"topics":["hacktoberfest","hacktoberfest2021","modal","npm-package","react","react-native","typescript"],"latest_commit_sha":null,"homepage":"","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/atlj.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":"2021-08-08T17:02:17.000Z","updated_at":"2025-03-19T10:16:06.000Z","dependencies_parsed_at":"2022-08-29T21:10:41.682Z","dependency_job_id":null,"html_url":"https://github.com/atlj/react-native-lightning-modal","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlj%2Freact-native-lightning-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlj%2Freact-native-lightning-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlj%2Freact-native-lightning-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlj%2Freact-native-lightning-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atlj","download_url":"https://codeload.github.com/atlj/react-native-lightning-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248643926,"owners_count":21138526,"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":["hacktoberfest","hacktoberfest2021","modal","npm-package","react","react-native","typescript"],"created_at":"2025-02-21T09:51:23.747Z","updated_at":"2025-04-12T23:20:31.112Z","avatar_url":"https://github.com/atlj.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-lightning-modal\n\n![2021-08-09 17-32-38](https://user-images.githubusercontent.com/23079646/128723844-c7317cf3-6d28-4d60-a6ac-5c1c108a4a50.gif)\n\nA fast bottom modal that works with React Native Reanimated 2!\n\n## Prerequisites\n\nThis module needs\n\n[React Native Reanimated 2](https://docs.swmansion.com/react-native-reanimated/docs/installation) \u0026\n\n[React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) to work\n\n## 🚀 Installation\n\nFirst make sure that you have installed all the prerequisites.\n\n### Using npm\n\n```sh\n\nnpm install react-native-lightning-modal\n\n```\n\n### Using Yarn\n\n```sh\n\nyarn add react-native-lightning-modal\n\n```\n\n## ⚙️ Usage\n\n### Using the useBottomModal hook 🪝\n\n\u003e This hook declares the ref for you\n\n```js\nimport React from 'react';\n\nimport { View } from 'react-native';\n\nimport { useBottomModal, BottomModal } from 'react-native-lightning-modal';\n\nexport default function App() {\n  const { dismiss, show, modalProps } = useBottomModal();\n\n  return (\n    \u003cView\u003e\n      \u003cBottomModal height={500} {...modalProps}\u003e\n        {/* Your Content */}\n      \u003c/BottomModal\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n\u003e Bottom modal component needs to be below other elements.\n\nYou can then use\n\n```js\nshow();\n```\n\nto show the modal\n\n---\n\n### Using a ref 📝\n\n```js\nimport React from 'react';\n\nimport { View } from 'react-native';\n\nimport { BottomModal, BottomModalRef } from 'react-native-lightning-modal';\n\nexport default function App() {\n  const bottomModalRef = React.useRef \u003c BottomModalRef \u003e null;\n\n  return (\n    \u003cView\u003e\n      \u003cBottomModal height={500} ref={bottomModalRef}\u003e\n        {/* Your Content */}\n      \u003c/BottomModal\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\nYou can than use\n\n```js\nbottomModalRef.show();\n```\n\nto show the modal\n\n## DOCUMENTATION\n\n### PROPS\n\n| Prop Name         | Description                                                                           |            Type             | Required |                            Defaults to |\n| ----------------- | ------------------------------------------------------------------------------------- | :-------------------------: | :------: | -------------------------------------: |\n| **height**        | Height of modal's presented state. This is required for animation to behave correctly |          _number_           |    ✅    |                                     ❌ |\n| **backdropColor** | Basically the color of a fullscreen view displayed below modaL                        |          _string_           |    ❌    |                            `undefined` |\n| **style**         | Style of modal's container                                                            |         _ViewStyle_         |    ❌    |                            `undefined` |\n| **animation**     | Animation type to use, can get spring and timing, defaults to timing animation        |   _'spring' \\| 'timing'_    |    ❌    |                             `'timing'` |\n| **timingConfig**  | Timing animation's config if animation prop is set to 'timing'                        | _Animated.WithTimingConfig_ |    ❌    | `{duration: 300, easing: Easing.quad}` |\n| **springConfig**  | Spring animation's config if animation prop is set to 'spring'                        | _Animated.WithSpringConfig_ |    ❌    |                            `undefined` |\n| **backdropStyle** | Style of the backdrop component                                                       |         _ViewStyle_         |    ❌    |                            `undefined` |\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%2Fatlj%2Freact-native-lightning-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatlj%2Freact-native-lightning-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatlj%2Freact-native-lightning-modal/lists"}