Overview

What is PermissionsManager?

The PermissionsManager class is responsible for managing all app permissions. It provides functions to request one or multiple permissions and check their status simultaneously.

You can also access each permission individually and utilize various useful methods.

Custom Requester

The first parameter of the class is called requester, which is the method invoked when requesting a permission. You can use this to display a modal before the system permission prompt. Here’s an example using our @codeleap/modals package:

src/app/permissionsManager.tsx

import { PermissionsManager, Permission, PermissionStatus } from '@codeleap/permissions'
import { Linking } from 'react-native'

export const PermissionModal = modal<
  { permission: Permission },
  { status: PermissionStatus }
>({ id: 'permission-modal' }).content((props) => {
  const { permission, request } = props

  const { title, description } = permission.config

  const handleRequest = async () => {
    if (permission.isBlocked) {
      request.resolve({ status: permission.value })
      await Linking.openSettings()
    } else {
      const status = await permission.request()
      request.resolve({ status })
    }
  }

  const handleCancel = () => {
    request.resolve({ status: permission.value })
  }

  return (
    <View style={['alignCenter', 'gap:2']}>
      {title ? <Text text={title} style={['textCenter', 'h3']} /> : null}

      <Button
        text={permission.isBlocked ? `Open Settings` : `Continue`}
        debugName={'permissionModal:request'}
        onPress={handleRequest}
        style='flex'
      />
    </View>
  )
})

export const permissionsManager = new PermissionsManager(
  async (permission) => {
    const result = await PermissionModal.request({ permission })
    return result?.status
  },
)

Alternatively, you can simply use the permission request method directly:

src/app/permissionsManager.ts

import { PermissionsManager } from '@codeleap/permissions'

export const permissionsManager = new PermissionsManager(
  async (permission) => {
    return permission.request()
  },
)

Setting Up Permissions

The second parameter of the class is an object containing permissions. The key can be anything, and TypeScript will assist you, but we recommend using the permission name. The value is a configuration object:

• config: An optional object for storing specific settings. As seen in the previous example, it can be used to customize modals, but you can store anything here.
• check: A function that returns the current permission status. We recommend using the react-native-permissions library.
• request: A function that requests permission from the user and returns the granted status. We also recommend using the react-native-permissions library.

src/app/permissionsManager.ts

import { PermissionsManager } from '@codeleap/permissions'

export const permissionsManager = new PermissionsManager(null, {
  camera: {
    config: { title: 'Title' },
    check: () => null,
    request: () => null,
  }
})