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: 1 day 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 (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-12T02:04:42.000Z (4 months ago)
• Last Synced: 2024-12-25T18:06:22.913Z (2 days 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

        


[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-permissions-modal)

[![Awesome & Fully Customizable Permissions Modal for React Native](https://img.shields.io/badge/-Awesome%20%26%20Fully%20Customizable%20Permissions%20Modal%20for%20React%20Native-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-permissions-modal)

[![npm version](https://img.shields.io/npm/v/react-native-permissions-modal.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-permissions-modal)

[![npm](https://img.shields.io/npm/dt/react-native-permissions-modal.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-permissions-modal)

![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](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