Permissions

🔐 React Native Permissions: The Gatekeeper’s Guide

The Story of the Gatekeeper 🏰

Imagine your phone is a magical castle with many special rooms inside. There’s a Camera Room 📷, a Map Room 🗺️, and a Message Tower 🔔. Each room holds powerful treasures!

But here’s the thing: you are the castle owner. No one—not even the friendliest app—can enter these rooms without asking you first. That’s what permissions are: the polite knocking on your door before entering.

🎯 Permission Concepts

What Are Permissions?

Permissions are like permission slips at school. Remember when you needed a signed note from your parents to go on a field trip? Apps need the same thing from YOU!

Think of it this way:

• Your app is a student 🎒
• The phone’s features are special field trips 🚌
• YOU are the parent who signs the permission slip ✍️

// An app asking for permission is like:
// "Dear User, may I please use your camera?"
// You can say YES ✅ or NO ❌

Why Do We Need Permissions?

1. Privacy 🔒 – Your photos, location, and messages are YOURS
2. Security 🛡️ – Bad apps can’t spy on you
3. Control 🎮 – You decide what each app can do

📝 Requesting Permissions

The Polite Way to Ask

In React Native, we use special libraries to ask nicely:

import {
  request,
  PERMISSIONS
} from 'react-native-permissions';

// Asking for camera permission
const result = await request(
  PERMISSIONS.IOS.CAMERA
);

The Two-Step Dance 💃

Step 1: Check first!

import { check } from
  'react-native-permissions';

const status = await check(
  PERMISSIONS.ANDROID.CAMERA
);

Step 2: Ask if needed

if (status === 'denied') {
  const newStatus = await request(
    PERMISSIONS.ANDROID.CAMERA
  );
}

Why check first? It’s like peeking to see if the door is already open before knocking! 🚪

🚦 Permission States

Permissions can be in five different states—like a traffic light with extra colors!

graph TD
    A["🔘 unavailable"] --> B[Feature doesn't exist]
    C["⚪ denied"] --> D["User said NO or never asked"]
    E["🟡 limited"] --> F["Partial access only"]
    G["🟢 granted"] --> H["Full access - YES!"]
    I["🔴 blocked"] --> J["User said NEVER - go to Settings"]

Code Example:

import { RESULTS } from
  'react-native-permissions';

switch (status) {
  case RESULTS.UNAVAILABLE:
    console.log('No camera here!');
    break;
  case RESULTS.DENIED:
    console.log('Ask the user!');
    break;
  case RESULTS.GRANTED:
    console.log('Ready to snap!');
    break;
  case RESULTS.BLOCKED:
    console.log('Go to Settings');
    break;
}

🔄 Permission Request Flow

The Journey of a Permission Request

graph TD
    A["📱 App Starts"] --> B{Check Permission}
    B -->|granted| C["✅ Use Feature"]
    B -->|denied| D["📋 Request Permission"]
    D --> E{User Decides}
    E -->|Allow| C
    E -->|Don't Allow| F[😢 Can't use feature]
    E -->|Never Ask Again| G["🔒 Blocked forever"]
    G --> H["Open Settings"]

The Complete Flow in Code:

async function askCameraPermission() {
  // Step 1: Check current status
  const status = await check(
    PERMISSIONS.IOS.CAMERA
  );

  // Step 2: Already granted?
  if (status === RESULTS.GRANTED) {
    return true; // 🎉 Ready!
  }

  // Step 3: Blocked? Need Settings
  if (status === RESULTS.BLOCKED) {
    // Show "Go to Settings" button
    return false;
  }

  // Step 4: Ask nicely
  const result = await request(
    PERMISSIONS.IOS.CAMERA
  );

  return result === RESULTS.GRANTED;
}

🚫 Permission Denied Handling

When Users Say “No” 😔

It’s okay! Users have the right to say no. But we should:

1. Explain WHY we need it (before asking)
2. Handle gracefully when denied
3. Provide alternatives if possible

The Right Way:

async function handleCamera() {
  const granted = await askPermission();

  if (!granted) {
    // Option 1: Show explanation
    Alert.alert(
      '📷 Camera Needed',
      'We need camera access to ' +
      'scan QR codes. You can ' +
      'enable it in Settings.',
      [
        { text: 'Cancel' },
        {
          text: 'Open Settings',
          onPress: openSettings
        }
      ]
    );
  }
}

Opening Settings:

import { openSettings } from
  'react-native-permissions';

// Takes user directly to app settings
await openSettings();

📷 Camera Permission

The Window to the World

Camera permission lets your app:

• 🤳 Take selfies
• 📸 Capture photos
• 🎥 Record videos
• 📱 Scan QR codes

Platform Differences:

iOS (in Info.plist):

<key>NSCameraUsageDescription</key>
<string>
  We need camera to scan QR codes
</string>

Android (in AndroidManifest.xml):

<uses-permission
  android:name=
    "android.permission.CAMERA"/>

Complete Example:

import {
  check, request, PERMISSIONS,
  RESULTS, openSettings
} from 'react-native-permissions';
import { Platform, Alert } from
  'react-native';

async function requestCamera() {
  const permission = Platform.select({
    ios: PERMISSIONS.IOS.CAMERA,
    android: PERMISSIONS.ANDROID.CAMERA,
  });

  const status = await check(permission);

  if (status === RESULTS.GRANTED) {
    // 🎉 Open camera!
    openCameraScreen();
    return;
  }

  if (status === RESULTS.BLOCKED) {
    Alert.alert(
      'Camera Blocked',
      'Please enable in Settings',
      [{
        text: 'Settings',
        onPress: openSettings
      }]
    );
    return;
  }

  const result = await request(permission);

  if (result === RESULTS.GRANTED) {
    openCameraScreen();
  }
}

🗺️ Location Permission

Finding Your Place in the World

Location permission helps apps know where you are. But location has levels:

The Location Options:

// Just while using the app
PERMISSIONS.IOS.LOCATION_WHEN_IN_USE

// All the time (background)
PERMISSIONS.IOS.LOCATION_ALWAYS

// Android coarse (city level)
PERMISSIONS.ANDROID.ACCESS_COARSE_LOCATION

// Android fine (exact)
PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION

// Android background
PERMISSIONS.ANDROID.ACCESS_BACKGROUND_LOCATION

Best Practice - Start Small!

graph TD
    A["🌍 Need Location?"] --> B["Ask for WHEN_IN_USE first"]
    B --> C{Works for your app?}
    C -->|Yes| D["✅ Done!"]
    C -->|Need background?| E["Ask for ALWAYS later"]

Example:

async function getLocation() {
  // Start with "while using"
  const permission = Platform.select({
    ios: PERMISSIONS.IOS
          .LOCATION_WHEN_IN_USE,
    android: PERMISSIONS.ANDROID
          .ACCESS_FINE_LOCATION,
  });

  const status = await check(permission);

  if (status !== RESULTS.GRANTED) {
    // Explain first!
    Alert.alert(
      '📍 Location Needed',
      'We use your location to ' +
      'show nearby restaurants.',
      [
        { text: 'Not Now' },
        {
          text: 'Allow',
          onPress: () => request(permission)
        }
      ]
    );
  }
}

🔔 Notification Permission

The Message Tower

Notifications are those little pop-ups that tell you important things. But apps must ask first!

iOS vs Android:

The Code:

import {
  check, request, PERMISSIONS
} from 'react-native-permissions';

async function askNotifications() {
  // iOS always needs permission
  if (Platform.OS === 'ios') {
    const status = await request(
      PERMISSIONS.IOS.NOTIFICATIONS
    );
    return status === RESULTS.GRANTED;
  }

  // Android 13+ (API 33+)
  if (Platform.OS === 'android') {
    const status = await request(
      PERMISSIONS.ANDROID
        .POST_NOTIFICATIONS
    );
    return status === RESULTS.GRANTED;
  }
}

Pro Tips for Notifications:

1. Ask at the right time – Not immediately on app start!
2. Explain the value – “Get notified about deals!”
3. Make it optional – App should work without them

// Good: Ask after user shows interest
function onUserSubscribes() {
  Alert.alert(
    '🔔 Stay Updated!',
    'Get notified about new deals?',
    [
      { text: 'Skip' },
      {
        text: 'Enable',
        onPress: askNotifications
      }
    ]
  );
}

🎁 The Complete Permission Helper

Here’s a reusable helper for all permissions:

import {
  check,
  request,
  PERMISSIONS,
  RESULTS,
  openSettings,
} from 'react-native-permissions';
import { Platform, Alert } from
  'react-native';

const PermissionHelper = {
  async request(type, message) {
    const permission = this.getPermission(type);
    const status = await check(permission);

    if (status === RESULTS.GRANTED) {
      return true;
    }

    if (status === RESULTS.BLOCKED) {
      this.showSettingsAlert(message);
      return false;
    }

    const result = await request(permission);
    return result === RESULTS.GRANTED;
  },

  getPermission(type) {
    const permissions = {
      camera: Platform.select({
        ios: PERMISSIONS.IOS.CAMERA,
        android: PERMISSIONS.ANDROID.CAMERA,
      }),
      location: Platform.select({
        ios: PERMISSIONS.IOS
              .LOCATION_WHEN_IN_USE,
        android: PERMISSIONS.ANDROID
              .ACCESS_FINE_LOCATION,
      }),
      notifications: Platform.select({
        ios: PERMISSIONS.IOS.NOTIFICATIONS,
        android: PERMISSIONS.ANDROID
              .POST_NOTIFICATIONS,
      }),
    };
    return permissions[type];
  },

  showSettingsAlert(message) {
    Alert.alert(
      'Permission Required',
      message,
      [
        { text: 'Cancel' },
        {
          text: 'Settings',
          onPress: openSettings
        }
      ]
    );
  },
};

// Usage:
// PermissionHelper.request('camera',
//   'Camera needed for photos');

🌟 Key Takeaways

1. Always check before requesting – Don’t ask if already granted!
2. Explain before asking – Users say YES more often when they understand WHY
3. Handle all states – granted, denied, blocked, unavailable
4. Respect “No” – Provide alternatives when possible
5. Platform differences – iOS and Android have different rules
6. Ask at the right time – Not on app launch!

🚀 You’ve Got This!

Permissions might seem scary at first, but remember:

You’re the gatekeeper protecting the user’s castle. 🏰

Every time you handle permissions well, you’re building trust with your users. They’ll feel safe using your app because you respect their privacy.

Now go build something amazing! 🎉