Add the dependency:
npm i react-native-permissions-modal
####### 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"
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.
Thank you for this awesome inspiration João Angelo
FreakyCoder, kurayogun@gmail.com
Author: WrathChaos
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/WrathChaos/react-native-permissions-modal
License: MIT
#react-native #mobile-apps