Installation
Add the dependency:
npm i react-native-permissions-modalPeer Dependencies
IMPORTANT! You need install them
"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
import {
PermissionModal,
PermissionItem
} from "react-native-permissions-modal";Usage
<PermissionModal
panGestureEnabled={false}
closeOnOverlayTap={false}
ref={ref => (this.permModal = ref)}
>
<PermissionItem />
<PermissionItem
title="Camera"
iconStatusColor="red"
subtitle="To access camera features"
source={require("./assets/photo.png")}
onPress={() => alert("hello")}
/>
<PermissionItem
title="Internet"
source={require("./assets/wifi.png")}
subtitle="To access the services, give us the permission"
/>
</PermissionModal>Open Modal
this.permModal.openModal();Close Modal
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 to set it up.
Future Plans
-
LICENSE - Write an article about the lib on Medium
Credits
Thank you for this awesome inspiration João Angelo
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