react-native-permissions-ui

react-native-permissions-ui

A React Native package for creating custom UI screens to request permissions, such as camera access, with a simple and customizable API.

Features

• Customizable UI for permission requests
• Support for camera permission
• Hooks for permission status management

Installation

npm install react-native-permissions-ui react-native-permissions

Usage

Basic Example

First, ensure you have the necessary setup for React Native Permissions. Follow the setup instructions

Then, you can use the CameraPermissionScreen component and usePermission hook in your project as shown below:

import React from "react";
import { View, StyleSheet } from "react-native";
import {
  CameraPermissionScreen,
  usePermission,
} from "react-native-permissions-ui";
import { PERMISSIONS } from "react-native-permissions";

const App: React.FC = () => {
  const { status, requestPermission } = usePermission(
    PERMISSIONS.ANDROID.CAMERA
  );

  return (
    <View style={styles.container}>
      <CameraPermissionScreen
        title="Camera Permission Required"
        description="We need access to your camera to take photos."
        buttonText="Grant Permission"
        onRequestPermission={requestPermission}
        icon={require("./assets/camera.png")}
        permissionStatus={status}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default App;

Customizing the UI

You can customize the CameraPermissionScreen component by passing styles and an icon:

<CameraPermissionScreen
  title="Camera Permission Required"
  description="We need access to your camera to take photos."
  buttonText="Grant Permission"
  onRequestPermission={requestPermission}
  icon={require("./assets/camera.png")}
  permissionStatus={status}
  titleStyle={{ fontSize: 24, color: "blue" }}
  descriptionStyle={{ fontSize: 16, color: "gray" }}
  buttonStyle={{ backgroundColor: "green" }}
  buttonTextStyle={{ color: "white" }}
/>

API

CameraPermissionScreen

A component that displays a screen to request camera permission.

Props

Prop	Type	Description
title	string	The title of the permission request screen.
description	string	The description of why the permission is needed.
buttonText	string	The text displayed on the permission request button.
onRequestPermission	() => void	The function to call when the button is pressed.
icon	mageSourcePropType	An optional icon to display on the screen.
titleStyle	TextStyle	Custom styles for the title text.
onRequestPermission	TextStyle	Custom styles for the button.
onRequestPermission	ViewStyle	Custom styles for the button.
onRequestPermission	TextStyle	Custom styles for the button text.
onRequestPermission	string | null	granted | denied | blocked | unavailable | limited |null

usePermission

A custom hook for managing permission status.

Parameter	Type	Description
permissionType	typeof PERMISSIONS.ANDROID.CAMERA | typeof PERMISSIONS.IOS.CAMERA	The type of permission to check.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT