{"id":17700880,"url":"https://github.com/wrathchaos/react-native-basic-modal","last_synced_at":"2025-07-24T01:32:54.972Z","repository":{"id":35162147,"uuid":"214824707","full_name":"WrathChaos/react-native-basic-modal","owner":"WrathChaos","description":"Basic \u0026 Elegant Modal for React Native","archived":false,"fork":false,"pushed_at":"2025-05-12T06:58:20.000Z","size":27384,"stargazers_count":11,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-03T19:56:13.371Z","etag":null,"topics":["android","apple","basic","elegant","freakycoder","google","halloween","halloween-theme","ios","modal","modalize","react","react-native","reactjs","theme","ui"],"latest_commit_sha":null,"homepage":"https://freakycoder.com","language":"Java","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/WrathChaos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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,"zenodo":null}},"created_at":"2019-10-13T13:25:33.000Z","updated_at":"2025-05-12T06:58:17.000Z","dependencies_parsed_at":"2023-11-06T23:06:01.910Z","dependency_job_id":"925e9443-c4b9-46fc-943b-f90477e63d2d","html_url":"https://github.com/WrathChaos/react-native-basic-modal","commit_stats":{"total_commits":110,"total_committers":4,"mean_commits":27.5,"dds":"0.36363636363636365","last_synced_commit":"fb2ae99291ea9947523360c52f1952b289c9e17f"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/WrathChaos/react-native-basic-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-basic-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-basic-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-basic-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-basic-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WrathChaos","download_url":"https://codeload.github.com/WrathChaos/react-native-basic-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-basic-modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266779182,"owners_count":23982881,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["android","apple","basic","elegant","freakycoder","google","halloween","halloween-theme","ios","modal","modalize","react","react-native","reactjs","theme","ui"],"created_at":"2024-10-24T17:43:34.185Z","updated_at":"2025-07-24T01:32:54.945Z","avatar_url":"https://github.com/WrathChaos.png","language":"Java","readme":"\u003cimg alt=\"React Native Basic Modal\" src=\"assets/logo.png\" width=\"1050\"/\u003e\n\n[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-basic-modal)\n\n[![Basic \u0026 Elegant UI Modal for React Native](https://img.shields.io/badge/-Basic%20%26%20Elegant%20UI%20Modal%20for%20React%20Native-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-basic-modal)\n\n[![npm version](https://img.shields.io/npm/v/react-native-basic-modal.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-basic-modal)\n[![npm](https://img.shields.io/npm/dt/react-native-basic-modal.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-basic-modal)\n![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"React Native Basic Modal\"\n        src=\"assets/screenshots/react-native-basic-modal.png\" /\u003e\n\u003c/p\u003e\n\nVersion 1 😍\n- Written from scratch  🍻\n- Typescript 💪\n- Much better API\n- Better customizations\n- Much better library fundamentals\n- Husky Setup 🐶\n    - Commit Linter\n    - Prettier\n\n# Installation\n\nAdd the dependency:\n\n```ruby\nnpm i react-native-basic-modal\n```\n\n## Peer Dependencies\n\n###### IMPORTANT! You need install them\n\n```json\n\"react-native-modal\": \"\u003e= 11.4.0\"\n```\n\n# Usage\n\n## Import\n\n```js\nimport BasicModal, { Button } from \"react-native-basic-modal\";\n```\n## BasicModal Usage\n\n### Default Usage\n\n```jsx\n\u003cBasicModal\n  isVisible\n  title=\"Hold on!\"\n  description=\"Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh.\"\n/\u003e\n```\n\n\n### Advanced Usage with custom header component and custom footer component\n\n```jsx\n\u003cBasicModal\n  isVisible\n  title=\"Hold on!\"\n  description=\"Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh.\"\n  headerComponent={\n    \u003cView\u003e\n      \u003cText\u003eHey Header\u003c/Text\u003e\n    \u003c/View\u003e\n  }\n  footerComponent={\n    \u003cView\u003e\n      \u003cText\u003eHey Footer\u003c/Text\u003e\n    \u003c/View\u003e\n  }\n/\u003e\n```\n\n\n### Advanced Usage with **custom buttons**\n\nOf course you do not need to use `built-in` Button component from library. You can put anything into the `children`  \n_Note:_If you need to customize the default buttons, you should use this method instead, it will be much easier and customizable\n\n```jsx\n\u003cBasicModal\n  isVisible\n  title=\"Hold on!\"\n  description=\"Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh.\"\u003e\n  \u003cView style={styles.buttonsContainer}\u003e\n    \u003cButton text=\"Cancel\" onPress={() =\u003e {}} /\u003e\n    \u003cButton text=\"Okay\" onPress={() =\u003e {}} /\u003e\n  \u003c/View\u003e\n\u003c/BasicModal\u003e\n```\n\n\n### How can I hide the modal by pressing outside its content?\n\nThe prop `onBackdropPress` allows you to handle this situation:\n\n```jsx\n\u003cBasicModal\n  isVisible={this.state.isVisible}\n  onBackdropPress={() =\u003e this.setState({ isVisible: false })}\n/\u003e\n```\n\n# For more FAQ about Modal: \n\n#### [Modal FAQ](https://github.com/react-native-community/react-native-modal#frequently-asked-questions)\n\n\n## Example Project 😍\n\nYou can check out the example project 🥰\n\nSimply run\n\n- `npm i`\n- `react-native run-ios/android`\n\nshould work of the example project.\n\n# Configuration - Props\n\n| Property               |   Type    | Default  | Required | Description                                                         |\n|------------------------|:---------:|:--------:|:--------:|---------------------------------------------------------------------|\n| isVisible              |   bool    |  false   |    🟢    | set the modal's visibility                                          |\n| title                  |  string   | Hold on! |    🟢    | set your own title text                                             |\n| description            |  string   | default  |    🟢    | set your own description text                                       |\n| primaryButtonText      |  string   | default  |    🟡    | change default primary button's text                                |\n| secondaryButtonText    |  string   | default  |    🟡    | change default secondary button's text                              |\n| onPrimaryButtonPress   | function  | default  |    🟡    | set the function when the primary button is pressed                 |\n| onSecondaryButtonPress | function  | default  |    🟡    | set the function when the secondary button is pressed               |\n| onBackdropPress        | function  | default  |    🟡    | set the function when the backdrop of the modal is pressed          |\n| headerComponent        | component |   none   |    🟡    | set your own component if you need to add/customize header component |\n| footerComponent        | component |   none   |    🟡    | set your own component if you need to add/customize footer component |\n| style                  | ViewStyle | default  |    🟡    | set/override the default style                        |\n| modalContainerStyle                  | ViewStyle | default  |    🟡    | set/override the default style                   |\n| contentContainerStyle                  | ViewStyle | default  |    🟡    | set/override the default style            |\n| buttonsContainerStyle                  | ViewStyle | default  |    🟡    | set/override the default style                         |\n| titleTextStyle                  | TextStyle | default  |    🟡    | set/override the default style                         |\n| descriptionTextStyle                  | TextStyle | default  |    🟡    | set/override the default style                         |\n\n# Configuration - Props [Button] Component\n\n| Property               |   Type    | Default  | Required | Description                                                   |\n|------------------------|:---------:|:--------:|:--------:|---------------------------------------------------------------|\n| text                   |  string   | Hold on! |    🟡    | set text                                              |\n| style                  | ViewStyle | default  |    🟡    | set/override the default style                                |\n| onPress                | function  | default  |    🟡    | set the function           |\n| textStyle              | TextStyle | default  |    🟡    | set/override the default style                                |\n\n## Credits\nI inspired by [Orizon Design](https://www.instagram.com/p/BtHuW3sBpkG/) Thank you so much guys, nice UI / UX :)\n\n## Future Plans\n\n- [x] ~~LICENSE~~\n- [x] ~~Typescript~~\n- [x] ~~Version 1.0.0~~\n- [ ] Write an article about the lib on Medium\n\n## Author\n\nFreakyCoder, kurayogun@gmail.com\n\n## License\n\nReact Native Basic Modal is available under the MIT license. See the LICENSE file for more info.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-basic-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwrathchaos%2Freact-native-basic-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-basic-modal/lists"}