Git Product home page Git Product logo

react-native-permissions-modal's Introduction

React Native Permissions Modal

Battle Tested ✅

Awesome & Fully Customizable Permissions Modal for React Native

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, [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

react-native-permissions-modal's People

Contributors

dependabot[bot] avatar wrathchaos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.