use-permissions.md

usePermissions

Get or ask permissions with Permissions

Other hooks   —   Usage   —   Changelog

expo install @use-expo/permissions expo-permissions

Usage

// full hook
const [permission, askPermission, getPermission] = usePermissions(Permissions.CAMERA);

// other options
usePermissions(Permissions.CAMERA);
usePermissions([Permissions.CAMERA, Permissions.CAMERA_ROLL]);
usePermissions(Permissions.LOCATION, { ask: true });
usePermissions(Permissions.NOTIFICATIONS, { get: false });

Example

import { usePermissions } from '@use-expo/permissions';
import { Camera } from 'expo-camera';
import * as Permissions from 'expo-permissions';
import { useState } from 'react';
import { Button, Linking, Text, TouchableOpacity, View } from 'react-native';

function CameraExample() {
    const [camera, setCamera] = useState(Camera.Constants.Type.back);
    const [permission, askPermission] = usePermissions(Permissions.CAMERA, { ask: true });

    if (!permission) {
        return null;
    }

    if (permission.status !== 'granted') {
         return (
            <View>
                <Text>We need permissions to use the camera</Text>
                {permission?.canAskAgain
                    ? <Button onPress={askPermission} title='Give permission' />
                    : <Button onPress={Linking.openSettings} title='Open app settings' />
                }
            </View>
        );
    }

    return (
        <View style={{ flex: 1 }}>
            <Camera style={{ flex: 1 }} type={camera}>
                <View style={{ flex: 1, backgroundColor: 'transparent', flexDirection: 'row' }}>
                    <TouchableOpacity
                        style={{ flex: 0.1, alignSelf: 'flex-end', alignItems: 'center' }}
                        onPress={() => {
                            setCamera(
                                camera === Camera.Constants.Type.back
                                    ? Camera.Constants.Type.front
                                    : Camera.Constants.Type.back
                            );
                        }}
                    >
                        <Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
                            Flip
                        </Text>
                    </TouchableOpacity>
                </View>
            </Camera>
        </View>
    );
}

API

import { PermissionType, PermissionResponse } from 'expo-permissions';

function usePermissions(type: PermissionType | PermissionType[], options?: Options): Result;

interface Options {
    /** If it should ask the permissions when mounted, defaults to `false` */
    ask?: boolean;
    /** If it should fetch information about the permissions when mounted, defaults to `true` */
    get?: boolean;
}

type Result = [
    /** The received permission response */
    PermissionResponse | undefined,
    /** Callback to ask the user for the permissions */
    () => Promise<void>,
    /** Callback to manually check if the permissions are granted */
    () => Promise<void>,
];

with ❤️ byCedric