{"id":18348727,"url":"https://github.com/paraboly/react-native-report-modal","last_synced_at":"2025-04-06T09:31:46.782Z","repository":{"id":34865653,"uuid":"184044433","full_name":"Paraboly/react-native-report-modal","owner":"Paraboly","description":"Customizable Report Modal via Paraboly for React Native.","archived":false,"fork":false,"pushed_at":"2023-03-04T03:39:42.000Z","size":2118,"stargazers_count":30,"open_issues_count":11,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-21T21:11:55.516Z","etag":null,"topics":["modal","paraboly","react","react-native","report"],"latest_commit_sha":null,"homepage":"https://www.paraboly.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Paraboly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-29T09:49:16.000Z","updated_at":"2022-05-06T00:39:04.000Z","dependencies_parsed_at":"2023-02-15T05:16:36.205Z","dependency_job_id":null,"html_url":"https://github.com/Paraboly/react-native-report-modal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Freact-native-report-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Freact-native-report-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Freact-native-report-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Freact-native-report-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Paraboly","download_url":"https://codeload.github.com/Paraboly/react-native-report-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247463744,"owners_count":20942935,"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":["modal","paraboly","react","react-native","report"],"created_at":"2024-11-05T21:18:58.076Z","updated_at":"2025-04-06T09:31:46.128Z","avatar_url":"https://github.com/Paraboly.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"Paraboly React Native Report Modal\" src=\"https://github.com/Paraboly/react-native-report-modal/blob/master/assets/op_logo.png\" width=\"1050\"/\u003e\n\nCustomizable Report Modal via Paraboly for React Native.\n\n[![npm version](https://img.shields.io/npm/v/@paraboly/react-native-report-modal.svg)](https://www.npmjs.com/package/@paraboly/react-native-report-modal)\n[![npm](https://img.shields.io/npm/dt/@paraboly/react-native-report-modal.svg)](https://www.npmjs.com/package/@paraboly/react-native-report-modal)\n![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"React Native Report Modal\" src=\"https://github.com/Paraboly/react-native-report-modal/blob/master/assets/Screenshots/example.png\" width=\"49.7%\"/\u003e\n\u003c/p\u003e\n\n\n## Installation\n\nAdd the dependency:\n\n```ruby\nnpm i @paraboly/react-native-report-modal\n```\n\n## Peer Dependencies\n\n##### IMPORTANT! You need install them.\n\n```\n\"react\": \"\u003e= 16.x\",\n\"react-native\": \"\u003e= 0.55.x\",\n\"react-native-vector-icons\": \"\u003e= 6.x.x\",\n\"@paraboly/react-native-modal-box\": \"\u003e= x.x.x\"\n```\n\n## Basic Usage\n\n```js\n\u003cReportModal /\u003e\n```\n\n\n## Advanced Usage\n\n```js\n\u003cReportModal\n  title=\"Sorun Bildiriniz\"\n  buttonText=\"Gönder\"\n  iconConfig={IcomoonConfig}\n  menuOptions={this.menuOptions}\n  onPress={selectedItems =\u003e {\n    this.onPress(selectedItems);\n  }}\n/\u003e\n```\n\n### Configuration - Props\n\n\n| Property              |    Type     |         Default         | Description                                                               |\n| --------------------- | :---------: | :---------------------: | ------------------------------------------------------------------------- |\n| isOpen                |   boolean   |          false          | use this to open modal directly                                           |\n| backdrop              |   boolean   |          false          | use this to add a backdrop for the modal                                  |\n| title                 |   string    |     Report Problem      | change the title of the modal                                             |\n| buttonText            |   string    |         Report          | change the button text of the modal                                       |\n| menuOptions           |    array    | check the usage section | set your own data array for the generation of multiple selection bar      |\n| refName               |   string    |       reportmodal       | use this to set the ref of the modal                                      |\n| onPress               |  function   |          null           | use this to handle the onPress of the right bottom button aka send button |\n| iconConfig            |    json     |         icomoon         | use this to set your own icomoon sets for the icons                       |\n| modalWidth            |   number    |      width * 0.75       | change the modal's width                                                  |\n| modalHeight           |   number    |           350           | change the modal's height                                                 |\n| dividerWidth          |   number    |      width * 0.62       | change the divider's width                                                |\n| titleStyle            |    style    |     check the code      | set your own style for button                                             |\n| buttonStyle           |    style    |     check the code      | set your own style for button                                             |\n| buttonTextColor       |    color    |     check the code      | change the button's text color                                            |\n| buttonFontFamily      | font family |         default         | set your own font family for the button text                              |\n| buttonRippleColor     |    color    |     check the code      | change the button's ripple color                                          |\n| buttonShadowColor     |    color    |     check the code      | change the button's shadow color                                          |\n| buttonBackgroundColor |    color    |     check the code      | change the button's background color                                      |\n| optionFontFamily      | font family |         default         | set your own font family for the each option's font family                |\n| backgroundColor       |    color    |         #a092d6         | use this to set background color for the header part of the modal         |\n| customIconComponent   |  component  |          null           | use this to set your own custom icon component for the generated buttons  |\n| onOpened              |  function   |          null           | use this to set your own onOpened function                                |\n| onClosed              |  function   |          null           | use this to set your own onClosed function                                |\n\n\n## Generated Menu Options Usage\nOkey, Report Modal is able to automatically generate each report menu options to do that we must follow this format. \"menuOptions\" prop accepts an array and it must be like this : (You can check the example)\n\n```js\nmenuOptions = [\n    {\n      id: 0,\n      iconSize: 40,\n      isSelect: false,\n      color: \"#b2b6c4\",\n      text: \"Işık Hatası\",\n      iconName: \"feedback_junction_alt1\"\n    },\n    {\n      id: 1,\n      iconSize: 40,\n      isSelect: false,\n      color: \"#b2b6c4\",\n      text: \"Trafik Kazası\",\n      iconName: \"feedback_accident_alt1\"\n    },\n    {\n      id: 2,\n      iconSize: 40,\n      isSelect: false,\n      color: \"#b2b6c4\",\n      text: \"Kavşak Arızası\",\n      iconName: \"feedback_light_alt1\"\n    },\n    {\n      id: 3,\n      iconSize: 40,\n      isSelect: false,\n      color: \"#b2b6c4\",\n      text: \"Yaya Butonu Arızası\",\n      iconName: \"feedback_pedestrian_alt1\"\n    }\n  ];\n```\n\n## Author\n\nFreakyCoder, kuray.ogun@paraboly.com || kurayogun@gmail.com\n\n## License\n\nReact Native Report Modal Library is available under the MIT license. See the LICENSE file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparaboly%2Freact-native-report-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparaboly%2Freact-native-report-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparaboly%2Freact-native-report-modal/lists"}