Add the dependency:
npm i react-native-permissions-modal
"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"
import {
PermissionModal,
PermissionItem
} from "react-native-permissions-modal";
<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>
this.permModal.openModal();
this.permModal.closeModal();
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 |
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 |
Check out react-native-gesture-handler
's documentation to set it up.
-
LICENSE - Write an article about the lib on Medium
Thank you for this awesome inspiration João Angelo
FreakyCoder, kurayogun@gmail.com
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