0Pricing
React Academy · Lesson

Accessing Device APIs: Camera, Location & Push Notifications

Use Expo SDK modules to request permissions and access native device capabilities.

Accessing Device APIs: Camera, Location & Push Notifications is a free React Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Expo SDK Modules

The Expo SDK provides JavaScript APIs for native device capabilities. Install individual packages and request permissions before accessing hardware.

# Install what you need:
npx expo install expo-camera expo-location expo-notifications

Requesting Permissions

Always request permission before accessing sensitive device features. Check the result before proceeding.

import * as Location from 'expo-location';

async function getLocation() {
  const { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') {
    Alert.alert('Permission denied');
    return;
  }
  const location = await Location.getCurrentPositionAsync({});
  console.log(location.coords);
}

Camera Access

Use expo-camera to display a camera preview and capture photos.

import { CameraView, useCameraPermissions } from 'expo-camera';
import { useRef } from 'react';

export function CameraScreen() {
  const [permission, requestPermission] = useCameraPermissions();
  const cameraRef = useRef(null);

  if (!permission?.granted) {
    return <Button onPress={requestPermission} title="Grant camera" />;
  }

  const takePicture = async () => {
    const photo = await cameraRef.current?.takePictureAsync();
    console.log(photo?.uri);
  };

  return <CameraView ref={cameraRef} facing="back" />;
}

Image Picker

expo-image-picker lets users select images from their camera roll without showing the camera UI.

import * as ImagePicker from 'expo-image-picker';

async function pickImage() {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    quality: 0.8,
    allowsEditing: true,
    aspect: [4, 3],
  });

  if (!result.canceled) {
    console.log(result.assets[0].uri);
  }
}

Location Tracking

Subscribe to location updates with watchPositionAsync() for real-time tracking. Remove the subscription on unmount.

useEffect(() => {
  let subscription;
  (async () => {
    const { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') return;
    subscription = await Location.watchPositionAsync(
      { accuracy: Location.Accuracy.High, distanceInterval: 10 },
      location => setCoords(location.coords)
    );
  })();
  return () => subscription?.remove();
}, []);

Geocoding & Reverse Geocoding

Convert coordinates to addresses (reverse geocoding) or addresses to coordinates (geocoding) with expo-location.

const [address] = await Location.reverseGeocodeAsync({ latitude: 37.78, longitude: -122.43 });
console.log(`${address.street}, ${address.city}, ${address.country}`);

Push Notifications Setup

Use expo-notifications to register for push notifications and obtain an Expo push token.

import * as Notifications from 'expo-notifications';

async function registerForPushNotifications() {
  const { status } = await Notifications.requestPermissionsAsync();
  if (status !== 'granted') return null;
  const token = (await Notifications.getExpoPushTokenAsync()).data;
  return token; // send this to your server
}

Handling Incoming Notifications

Listen for notifications when the app is in the foreground and for taps on notifications.

useEffect(() => {
  const receivedSub = Notifications.addNotificationReceivedListener(notification => {
    console.log('Received:', notification);
  });
  const responseSub = Notifications.addNotificationResponseReceivedListener(response => {
    const data = response.notification.request.content.data;
    router.push(`/post/${data.postId}`);
  });
  return () => { receivedSub.remove(); responseSub.remove(); };
}, []);

Local Notifications

Schedule local notifications (no server required) with scheduleNotificationAsync.

await Notifications.scheduleNotificationAsync({
  content: { title: 'Reminder', body: 'Check your app!', data: {} },
  trigger: { seconds: 60 }, // fires after 60 seconds
});

Background Location

For background location, use expo-task-manager and Location.startLocationUpdatesAsync. Requires extra permissions in app.json.

Quick Check

What must you always do before accessing the device camera or location in Expo?

Recap

Use Expo SDK modules (expo-camera, expo-location, expo-notifications) for device access. Always request permissions first, check the result, and clean up subscriptions in useEffect. Register for push notifications and send the Expo push token to your backend.

Frequently asked questions

Is the “Accessing Device APIs: Camera, Location & Push Notifications” lesson free?

Yes — the full text of “Accessing Device APIs: Camera, Location & Push Notifications” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Accessing Device APIs: Camera, Location & Push Notifications”?

Use Expo SDK modules to request permissions and access native device capabilities. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Accessing Device APIs: Camera, Location & Push Notifications” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. React Native Core Components vs Web DOM
  2. Styling with StyleSheet API & Flexbox
  3. Navigation with Expo Router
  4. Accessing Device APIs: Camera, Location & Push Notifications
← Back to React Academy