Native features

Add camera, location and notification native features.

Camera and location native hooks

In this lesson we add two native features: camera and location. With expo-camera we take a photo; with expo-location we read GPS coordinates. Both ask for permission first; they will not run without user approval.

We wrap the photo state and capture function in a useCamera hook. A useLocation hook holds the location state similarly. Once these hooks live in App a field worker can snap a photo and record a location. Native modules reach the JS side through the bridge; permissions are requested through the Permissions API. This is a must for advanced apps.

The useCamera hook

useCamera is a custom hook that wraps photo capture logic. It holds a photo state and a takePhoto function. When takePhoto is called it runs Camera.takePictureAsync() and writes the result with setPhoto.

Example skeleton: export function useCamera() { const [photo, setPhoto] = useState(null); const takePhoto = async () => { const r = await Camera.takePictureAsync(); setPhoto(r.uri); }; return { photo, takePhoto }; }. This pattern adapts the native API to React's state model. Components get a clean interface with const { photo, takePhoto } = useCamera(); the native complexity stays behind.

Exercise Add the useCamera hook

On top of the previous code add a useCamera hook. Hold a photo state with useState(null). Define an async function takePhoto that calls setPhoto. The hook returns { photo, takePhoto }.

Show example solution

import React, { useState, createContext, useContext } from 'react';
import { Text, View } from 'react-native';

const AuthContext = createContext(null);
export function useAuth() { return useContext(AuthContext); }

function App() {
  const [tasks, setTasks] = useState([]);
  const [user, setUser] = useState(null);
  return (
    <AuthContext.Provider value={{ user, setUser }}>
      <View>
        <Text>Field Report</Text>
      </View>
    </AuthContext.Provider>
  );
}

export function useCamera() {
  const [photo, setPhoto] = useState(null);
  const takePhoto = async () => {
    setPhoto('photo-uri');
  };
  return { photo, takePhoto };
}

Test yourself

Match each flow piece to its role

expo-camera

Takes a photo
expo-location

GPS coordinate
Permissions

Asks permission
useCamera

Wraps the state

Camera takePictureAsync call

const r = await Camera.____();

Show answer

const r = await Camera.takePictureAsync();

What is requested before a native feature runs?
```
Camera.requestPermissionsAsync()
```
- Permission
- A password
- A payment
- An email
Show answer

Permission — Camera and location ask for permission.

Next lesson: Offline

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies