react-native-permissions-modal

Awesome & Fully Customizable Permissions Modal for React Native

Usage no npm install needed!

<script type="module">
  import reactNativePermissionsModal from 'https://cdn.skypack.dev/react-native-permissions-modal';
</script>

README

React Native Permissions Modal

Battle Tested ✅

React Native Library Boiler Plate

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Permissions Modal React Native Permissions Modal

Installation

Add the dependency:

npm i react-native-permissions-modal

Peer 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, kurayogun@gmail.com

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