Permissions handling in React Native - Mini App: Build & Ship

Build: Permissions Screen

This screen asks the user for camera permission and shows the status.

Target UI

-------------------------
| Permissions Screen     |
|-----------------------|
| Camera Permission:    |
| [Request Permission]  |
| Status: Not requested  |
-------------------------

Show a button labeled 'Request Permission'.

When pressed, ask for camera permission using React Native Permissions API.

Display the current permission status below the button.

Handle permission statuses: granted, denied, blocked, or unavailable.

Starter Code

React Native

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';

export default function PermissionsScreen() {
  const [status, setStatus] = useState('Not requested');

  const handleRequestPermission = async () => {
    // TODO: Add permission request logic here
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Camera Permission:</Text>
      <Button title="Request Permission" onPress={handleRequestPermission} />
      <Text style={styles.status}>Status: {status}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 },
  title: { fontSize: 20, marginBottom: 12 },
  status: { marginTop: 12, fontSize: 16 }
});

Task 1

Task 2

Task 3

Solution

React Native

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet, Platform } from 'react-native';
import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';

export default function PermissionsScreen() {
  const [status, setStatus] = useState('Not requested');

  const permissionType = Platform.select({
    ios: PERMISSIONS.IOS.CAMERA,
    android: PERMISSIONS.ANDROID.CAMERA
  });

  const handleRequestPermission = async () => {
    try {
      const currentStatus = await check(permissionType);
      if (currentStatus === RESULTS.GRANTED) {
        setStatus('Granted');
        return;
      }

      const result = await request(permissionType);

      switch (result) {
        case RESULTS.GRANTED:
          setStatus('Granted');
          break;
        case RESULTS.DENIED:
          setStatus('Denied');
          break;
        case RESULTS.BLOCKED:
          setStatus('Blocked');
          break;
        case RESULTS.UNAVAILABLE:
          setStatus('Unavailable');
          break;
        default:
          setStatus('Unknown');
      }
    } catch (error) {
      setStatus('Error');
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Camera Permission:</Text>
      <Button title="Request Permission" onPress={handleRequestPermission} accessibilityLabel="Request camera permission button" />
      <Text style={styles.status} accessibilityLiveRegion="polite">Status: {status}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 },
  title: { fontSize: 20, marginBottom: 12 },
  status: { marginTop: 12, fontSize: 16 }
});

This screen uses the react-native-permissions library to check and request camera permission.

We first detect the platform to use the correct permission constant.

When the user taps the button, we check the current permission status. If already granted, we update the status immediately.

If not granted, we request permission and update the status based on the user's choice.

The status text updates live to inform the user of the current permission state.

Accessibility labels and live region are added for screen reader support.

Final Result

Completed Screen

-------------------------
| Permissions Screen     |
|-----------------------|
| Camera Permission:    |
| [Request Permission]  |
| Status: Granted       |
-------------------------

User taps 'Request Permission' button.

App asks for camera permission from the device.

Status text updates to 'Granted', 'Denied', 'Blocked', or 'Unavailable' based on user response.

Stretch Goal

Add a button to open the app settings if permission is blocked.

💡 Hint

Use Linking.openSettings() from 'react-native' to open app settings.