0.0.1 • Published 4 years ago

react-native-permissions-modal v0.0.1

Weekly downloads
12
License
MIT
Repository
github
Last release
4 years ago

Battle Tested ✅

React Native Library Boiler Plate

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

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

PropertyTypeDefaultDescription
titlestringPermissionschange the title of the modal
subtitlestringdefaultchange the subtitle of the modal
openModalfunctiondefaultto open the modal
closeModalfunctiondefaultto close the modal
gradientbooleanfalsemake the button with a gradient background and a shadow
widthnumber150change the button's width

PermissionItem

PropertyTypeDefaultDescription
titlestringLocationchange the title of the permission item
subtitlestringdefaultchange the subtitle of the permission item
sourceimagedefault-imagechange the image source of the permission item
iconComponentcomponentdefaultset your own component instead of imaged icon
ImageComponentcomponentImageset your own component for Image such as FastImage
iconContainerBackgroundColorcolor#f7f7f7change icon's background color
titleTextStylestyledefaultchange title's text style
subtitleTextStylestyledefaultchange 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