{"id":4323,"url":"https://github.com/heyman333/react-native-hide-modal","last_synced_at":"2025-08-21T20:26:25.431Z","repository":{"id":57337423,"uuid":"191978310","full_name":"heyman333/react-native-hide-modal","owner":"heyman333","description":"🙈 Modal components that can be hidden","archived":false,"fork":false,"pushed_at":"2019-08-12T00:38:29.000Z","size":523,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-13T11:12:49.668Z","etag":null,"topics":["alert","check","checkbox","dialog","localstorage","modal","npm","react","react-native","yarn"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/heyman333.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}},"created_at":"2019-06-14T16:56:20.000Z","updated_at":"2024-04-11T11:14:17.000Z","dependencies_parsed_at":"2022-09-13T02:41:22.146Z","dependency_job_id":null,"html_url":"https://github.com/heyman333/react-native-hide-modal","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-native-hide-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-native-hide-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-native-hide-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-native-hide-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heyman333","download_url":"https://codeload.github.com/heyman333/react-native-hide-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248703198,"owners_count":21148118,"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":["alert","check","checkbox","dialog","localstorage","modal","npm","react","react-native","yarn"],"created_at":"2024-01-05T20:17:08.247Z","updated_at":"2025-04-13T11:12:54.979Z","avatar_url":"https://github.com/heyman333.png","language":"JavaScript","funding_links":[],"categories":["Components","NOTICE"],"sub_categories":["UI"],"readme":"# react-native-hide-modal\n\n[![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/heyman333/react-native-responsive-fontSize/pulls)\n[![Platform](https://img.shields.io/badge/platform-react--native-lightgrey.svg)](http://facebook.github.io/react-native/)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/heyman333/react-native-responsive-fontSize/blob/master/LICENSE)\n\n\u003cstrong\u003eModal component that provides the ability to hide\u003c/strong\u003e\n\n\u003chr /\u003e\n\n## install\n\nThis library is based on the latest react-native version and uses the `react-native-community/async-storage`\n\nTherefore, the following procedure is required to use this library.\n\n1. link `react-native-community/async-storage` [Go to Guide](https://github.com/react-native-community/async-storage/tree/LEGACY#getting-started)\n\n2. install node_moduels using npm or yarn\n   ```shell\n     npm install react-native-hide-modal --save\n     #or\n     yarn add react-native-hide-modal\n   ```\n\n## props\n\n\u003ctable\u003e\n      \u003cthead\u003e\n        \u003ctr\u003e\n          \u003cth\u003e\u003c/th\u003e\n          \u003cth\u003etype\u003c/th\u003e\n          \u003cth\u003edefault\u003c/th\u003e\n          \u003cth\u003erequired\u003c/th\u003e\n          \u003cth\u003edesc\u003c/th\u003e\n        \u003c/tr\u003e\n      \u003c/thead\u003e\n      \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003cth\u003echildren\u003c/th\u003e\n          \u003ctd\u003ecomponent\u003c/td\u003e\n          \u003ctd\u003eundefined\u003c/td\u003e\n          \u003ctd align=\"center\" width=\"80\"\u003e✔️\u003c/td\u003e\n          \u003ctd\u003eYour modal component with check option\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003cth\u003eid\u003c/th\u003e\n          \u003ctd\u003estring\u003c/td\u003e\n          \u003ctd\u003eundefined\u003c/td\u003e\n          \u003ctd align=\"center\" width=\"80\"\u003e✔️\u003c/td\u003e\n          \u003ctd\u003eIt is used as a key value to distinguish the modal. And all key values must be unique \u003cstrong\u003e(important)\u003c/strong\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003cth\u003emodalProps\u003c/th\u003e\n          \u003ctd\u003eobject\u003c/td\u003e\n          \u003ctd\u003eundefined\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eRN's modal property except for visible\n            \u003cbr/\u003e\n            \u003ca href=\"https://facebook.github.io/react-native/docs/modal#props-1\" target=\"_blank\"\u003eOfficial document\u003c/a\u003e\n          \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003cth\u003emodalVisible\u003c/th\u003e\n          \u003ctd\u003eboolean\u003c/td\u003e\n          \u003ctd\u003efalse\u003c/td\u003e\n          \u003ctd align=\"center\" width=\"80\"\u003e✔️\u003c/td\u003e\n          \u003ctd\u003eBasically, determine if modal is visible or not\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003cth\u003ehideChecked\u003c/th\u003e\n          \u003ctd\u003eboolean\u003c/td\u003e\n          \u003ctd\u003efalse\u003c/td\u003e\n          \u003ctd align=\"center\" width=\"80\"\u003e✔️\u003c/td\u003e\n          \u003ctd\u003eIndicates whether the user checked the checkbox.\nModule does not work if the prop doesn't pass properly\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003cth\u003einvisibleDuration\u003c/th\u003e\n          \u003ctd\u003enumber\u003c/td\u003e\n          \u003ctd\u003enull\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eAssuming the data is set, decide how long to hide the modal. Modal is not visible permanently unless you pass the duration \u003ci\u003e(millisecond)\u003c/i\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/tbody\u003e\n\u003c/table\u003e\n\n## screenshots\n\n\u003cimg src=\"img/default.gif\" alt=\"screenshot1\" height=\"590\" /\u003e\n\u003cimg src=\"img/withInvisibleDuration.gif\" alt=\"screenshot1\" height=\"590\"/\u003e\n\n## examples\n\n[Link](https://github.com/heyman333/react-native-hide-modal/blob/master/examples/App.js) (only code)\n\n## author\n\n[heyman333](https://github.com/heyman333), Frontend Developer interested in React.js \u0026 React-Native\n\n## loadmap\n\n- [X] define index.d.ts file\n- [ ] make react-hide-modal(web version using React.js)\n- [ ] set circle ci\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheyman333%2Freact-native-hide-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheyman333%2Freact-native-hide-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheyman333%2Freact-native-hide-modal/lists"}