https://github.com/wrathchaos/react-native-permissions-modal
Awesome & Fully Customizable Permissions Modal for React Native
https://github.com/wrathchaos/react-native-permissions-modal
android apple design freakycoder front-end google ios kuray react react-native reactjs software
Last synced: 3 months ago
JSON representation
Awesome & Fully Customizable Permissions Modal for React Native
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-permissions-modal
- Owner: WrathChaos
- License: mit
- Created: 2020-02-19T12:55:13.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-12T02:04:42.000Z (8 months ago)
- Last Synced: 2025-02-07T01:38:54.053Z (3 months ago)
- Topics: android, apple, design, freakycoder, front-end, google, ios, kuray, react, react-native, reactjs, software
- Language: JavaScript
- Homepage: https://freakycoder.com
- Size: 2.65 MB
- Stars: 34
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-permissions-modal)
[](https://github.com/WrathChaos/react-native-permissions-modal)
[](https://www.npmjs.com/package/react-native-permissions-modal)
[](https://www.npmjs.com/package/react-native-permissions-modal)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
# Installation
Add the dependency:
```ruby
npm i react-native-permissions-modal
```
## Peer Dependencies
###### IMPORTANT! You need install them
```js
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-gesture-handler": ">= 1.6.0",
"react-native-material-ripple": ">= 0.9.1",
"react-native-modalize": ">= 1.3.7"
```
# Usage
## Import
```js
import {
PermissionModal,
PermissionItem
} from "react-native-permissions-modal";
```
## Usage
```js
(this.permModal = ref)}
>
alert("hello")}
/>
```
## Open Modal
```js
this.permModal.openModal();
```
## Close Modal
```js
this.permModal.closeModal();
```
# Configuration - Props
## PermissionModal
| Property | Type | Default | Description |
| ---------- | :------: | :---------: | ------------------------------------------------------- |
| title | string | Permissions | change the title of the modal |
| subtitle | string | default | change the subtitle of the modal |
| openModal | function | default | to open the modal |
| closeModal | function | default | to close the modal |
| gradient | boolean | false | make the button with a gradient background and a shadow |
| width | number | 150 | change the button's width |
## PermissionItem
| Property | Type | Default | Description |
| ---------------------------- | :-------: | :-----------: | ---------------------------------------------------- |
| title | string | Location | change the title of the permission item |
| subtitle | string | default | change the subtitle of the permission item |
| source | image | default-image | change the image source of the permission item |
| iconComponent | component | default | set your own component instead of imaged icon |
| ImageComponent | component | Image | set your own component for Image such as `FastImage` |
| iconContainerBackgroundColor | color | #f7f7f7 | change icon's background color |
| titleTextStyle | style | default | change title's text style |
| subtitleTextStyle | style | default | change subtitle's text style |
# FAQ
### Android: Modal does not response the touchables :O
Check out [`react-native-gesture-handler`'s documentation](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html) to set it up.
## Future Plans
- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium
## Credits
Thank you for this awesome inspiration [João Angelo](https://dribbble.com/shots/9252130-iFood-Pending-Permissions/attachments/1296281?mode=media)
## Author
FreakyCoder, [email protected]
## License
React Native Permissions Modal is available under the MIT license. See the LICENSE file for more info.
Icons made by Prosymbols from www.flaticon.com
Icons made by Google from www.flaticon.com