Device features: camera, location and notifications

npx expo install expo-camera expo-location expo-notifications

import { useState } from "react";
import { View, Text, Pressable, Linking, StyleSheet } from "react-native";
import { CameraView, useCameraPermissions } from "expo-camera";

export default function Scan() {
  const [permission, requestPermission] = useCameraPermissions();
  const [scanned, setScanned] = useState(null);

  // Permission status is still loading
  if (!permission) {
    return <View style={styles.center} />;
  }

  // Not granted yet: explain, then ask
  if (!permission.granted) {
    return (
      <View style={styles.center}>
        <Text style={styles.message}>
          We use the camera only to scan the pickup code on your receipt.
        </Text>
        {permission.canAskAgain ? (
          <Pressable style={styles.button} onPress={requestPermission}>
            <Text style={styles.buttonText}>Allow camera</Text>
          </Pressable>
        ) : (
          <Pressable style={styles.button} onPress={() => Linking.openSettings()}>
            <Text style={styles.buttonText}>Open settings</Text>
          </Pressable>
        )}
      </View>
    );
  }

  return (
    <View style={styles.flex}>
      <CameraView
        style={styles.flex}
        facing="back"
        barcodeScannerSettings={{ barcodeTypes: ["qr"] }}
        onBarcodeScanned={scanned ? undefined : ({ data }) => setScanned(data)}
      />
      {scanned && (
        <View style={styles.result}>
          <Text style={styles.resultText}>Scanned: {scanned}</Text>
          <Pressable style={styles.button} onPress={() => setScanned(null)}>
            <Text style={styles.buttonText}>Scan again</Text>
          </Pressable>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  flex: { flex: 1 },
  center: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24, backgroundColor: "#fff8f0" },
  message: { fontSize: 16, textAlign: "center", color: "#2b1a0e", marginBottom: 20 },
  button: { backgroundColor: "#4a2c17", paddingVertical: 12, paddingHorizontal: 24, borderRadius: 10 },
  buttonText: { color: "white", fontSize: 16 },
  result: { position: "absolute", bottom: 40, left: 20, right: 20, backgroundColor: "white", padding: 16, borderRadius: 12, alignItems: "center", gap: 12 },
  resultText: { fontSize: 16, color: "#2b1a0e" },
});

<Stack.Screen name="scan" options={{ title: "Scan pickup code" }} />

import { useState } from "react";
import { View, Text, Pressable, StyleSheet } from "react-native";
import * as Location from "expo-location";

// Approximate position of Indiranagar, Bengaluru. Replace with your own shop's coordinates.
const SHOP = { lat: 12.9719, lng: 77.6412 };

function distanceKm(lat1, lng1, lat2, lng2) {
  const toRad = (deg) => (deg * Math.PI) / 180;
  const R = 6371; // Earth radius in km
  const dLat = toRad(lat2 - lat1);
  const dLng = toRad(lng2 - lng1);
  const a =
    Math.sin(dLat / 2) ** 2 +
    Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2;
  return 2 * R * Math.asin(Math.sqrt(a));
}

export default function Nearby() {
  const [message, setMessage] = useState("");
  const [busy, setBusy] = useState(false);

  async function findDistance() {
    setBusy(true);
    try {
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        setMessage("Location is off. You can still order, we just cannot show the distance.");
        return;
      }
      const position = await Location.getCurrentPositionAsync({
        accuracy: Location.Accuracy.Balanced,
      });
      const km = distanceKm(position.coords.latitude, position.coords.longitude, SHOP.lat, SHOP.lng);
      setMessage("You are about " + km.toFixed(1) + " km from Brew & Bean.");
    } catch (e) {
      setMessage("Could not get your location. Is GPS switched on?");
    } finally {
      setBusy(false);
    }
  }

  return (
    <View style={styles.box}>
      <Pressable style={styles.button} onPress={findDistance} disabled={busy}>
        <Text style={styles.buttonText}>{busy ? "Finding..." : "How far is the shop?"}</Text>
      </Pressable>
      {message ? <Text style={styles.message}>{message}</Text> : null}
    </View>
  );
}

const styles = StyleSheet.create({
  box: { marginTop: 16 },
  button: { backgroundColor: "#4a2c17", padding: 14, borderRadius: 10, alignItems: "center" },
  buttonText: { color: "white", fontSize: 16 },
  message: { marginTop: 12, fontSize: 16, color: "#2b1a0e" },
});

import { useState } from "react";
import { View, Text, Pressable, Platform, StyleSheet } from "react-native";
import * as Notifications from "expo-notifications";
import NearbyShop from "../../components/NearbyShop";
import { Link } from "expo-router";

// Show notifications even when the app is open
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowBanner: true,
    shouldShowList: true,
    shouldPlaySound: false,
    shouldSetBadge: false,
  }),
});

export default function Pickup() {
  const [info, setInfo] = useState("");

  async function scheduleReminder() {
    if (Platform.OS === "android") {
      await Notifications.setNotificationChannelAsync("default", {
        name: "Order updates",
        importance: Notifications.AndroidImportance.DEFAULT,
      });
    }

    let { status } = await Notifications.getPermissionsAsync();
    if (status !== "granted") {
      ({ status } = await Notifications.requestPermissionsAsync());
    }
    if (status !== "granted") {
      setInfo("Notifications are off. Turn them on in the phone settings to get order updates.");
      return;
    }

    await Notifications.scheduleNotificationAsync({
      content: {
        title: "Your order is ready",
        body: "Your cappuccino is waiting at Brew & Bean.",
      },
      trigger: {
        type: Notifications.SchedulableTriggerInputTypes.TIME_INTERVAL,
        seconds: 5,
      },
    });
    setInfo("Reminder set. It will appear in 5 seconds. Try sending the app to the background.");
  }

  return (
    <View style={styles.container}>
      <Link href="/scan" asChild>
        <Pressable style={styles.button}>
          <Text style={styles.buttonText}>Scan pickup code</Text>
        </Pressable>
      </Link>

      <NearbyShop />

      <Pressable style={[styles.button, styles.spaced]} onPress={scheduleReminder}>
        <Text style={styles.buttonText}>Remind me in 5 seconds</Text>
      </Pressable>
      {info ? <Text style={styles.info}>{info}</Text> : null}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: "#fff8f0" },
  button: { backgroundColor: "#4a2c17", padding: 14, borderRadius: 10, alignItems: "center" },
  spaced: { marginTop: 16 },
  buttonText: { color: "white", fontSize: 16 },
  info: { marginTop: 12, fontSize: 16, color: "#2b1a0e" },
});

<Tabs.Screen
  name="pickup"
  options={{
    title: "Pickup",
    tabBarIcon: ({ color, size }) => <Ionicons name="location-outline" size={size} color={color} />,
  }}
/>

{
  "expo": {
    "plugins": [
      [
        "expo-camera",
        { "cameraPermission": "Brew & Bean uses the camera to scan your pickup code." }
      ],
      [
        "expo-location",
        { "locationWhenInUsePermission": "Brew & Bean uses your location to show how far the shop is." }
      ]
    ]
  }
}

I am building a mobile app for [describe your app]. The feature [camera / location / notifications] is used for [what it does]. Write: (1) a one-sentence permission message for the operating system dialog, (2) a short screen text explaining the benefit to the user before I ask, and (3) text for when the user has refused. Use plain English, no jargon, and do not ask for more than the feature needs.