Native features
- React Native course
- Advanced
- Lesson 81/83
- 6 min
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.
Practice 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 }.
Starter code
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>
);
}
// Add the useCamera hook hereSample 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 };
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match each flow piece to its role
| Term | Meaning |
|---|---|
expo-camera |
Takes a photo |
expo-location |
GPS coordinate |
Permissions |
Asks permission |
useCamera |
Wraps the state |
2 Camera takePictureAsync call
const r = await Camera.____();const r = await Camera.takePictureAsync();Explanation: takePictureAsync takes a photo.
3 What is requested before a native feature runs?
Camera.requestPermissionsAsync()- Permission Correct answer
- A password
- A payment
- An email
Explanation: Camera and location ask for permission.