Expo Modules
Use this skill when working with Expo's extensive SDK modules for accessing device features and native functionality.
Key Concepts
Camera
import { Camera, CameraType } from 'expo-camera';
import { useState } from 'react';
import { Button, View } from 'react-native';
export default function CameraScreen() {
const [permission, requestPermission] = Camera.useCameraPermissions();
const [type, setType] = useState(CameraType.back);
if (!permission?.granted) {
return (
<View>
<Button title="Grant Permission" onPress={requestPermission} />
</View>
);
}
return (
<Camera style={{ flex: 1 }} type={type}>
<Button
title="Flip Camera"
onPress={() =>
setType(type === CameraType.back ? CameraType.front : CameraType.back)
}
/>
</Camera>
);
}Location
import * as Location from 'expo-location';
import { useEffect, useState } from 'react';
export function useLocation() {
const [location, setLocation] = useState<Location.LocationObject | null>(null);
useEffect(() => {
(async () => {
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') return;
const loc = await Location.getCurrentPositionAsync({});
setLocation(loc);
})();
}, []);
return location;
}Notifications
import * as Notifications from 'expo-notifications';
import { useEffect } from 'react';
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: true,
shouldSetBadge: false,
}),
});
export function useNotifications() {
useEffect(() => {
const subscription = Notifications.addNotificationReceivedListener(
(notification) => {
console.log(notification);
}
);
return () => subscription.remove();
}, []);
const sendNotification = async () => {
await Notifications.scheduleNotificationAsync({
content: {
title: 'Hello!',
body: 'This is a notification',
},
trigger: { seconds: 2 },
});
};
return { sendNotification };
}File System
import * as FileSystem from 'expo-file-system';
export async function saveFile(data: string, filename: string) {
const uri = `${FileSystem.documentDirectory}${filename}`;
await FileSystem.writeAsStringAsync(uri, data);
return uri;
}
export async function readFile(filename: string) {
const uri = `${FileSystem.documentDirectory}${filename}`;
const content = await FileSystem.readAsStringAsync(uri);
return content;
}
export async function downloadFile(url: string, filename: string) {
const uri = `${FileSystem.documentDirectory}${filename}`;
const download = await FileSystem.downloadAsync(url, uri);
return download.uri;
}Image Picker
import * as ImagePicker from 'expo-image-picker';
import { useState } from 'react';
import { Button, Image, View } from 'react-native';
export default function ImagePickerScreen() {
const [image, setImage] = useState<string | null>(null);
const pickImage = async () => {
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
if (!result.canceled) {
setImage(result.assets[0].uri);
}
};
return (
<View>
<Button title="Pick Image" onPress={pickImage} />
{image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
</View>
);
}Best Practices
Permission Handling
import * as Location from 'expo-location';
async function requestLocationPermission() {
const { status: foregroundStatus } =
await Location.requestForegroundPermissionsAsync();
if (foregroundStatus !== 'granted') {
console.log('Permission denied');
return false;
}
// Request background permission only if needed
const { status: backgroundStatus } =
await Location.requestBackgroundPermissionsAsync();
return backgroundStatus === 'granted';
}Secure Storage
import * as SecureStore from 'expo-secure-store';
export async function saveToken(key: string, value: string) {
await SecureStore.setItemAsync(key, value);
}
export async function getToken(key: string) {
return await SecureStore.getItemAsync(key);
}
export async function deleteToken(key: string) {
await SecureStore.deleteItemAsync(key);
}Device Info
import * as Device from 'expo-device';
import * as Application from 'expo-application';
import Constants from 'expo-constants';
export function getDeviceInfo() {
return {
deviceName: Device.deviceName,
deviceType: Device.deviceType,
osName: Device.osName,
osVersion: Device.osVersion,
appVersion: Application.nativeApplicationVersion,
buildVersion: Application.nativeBuildVersion,
expoVersion: Constants.expoVersion,
};
}Common Patterns
Persistent Storage
import AsyncStorage from '@react-native-async-storage/async-storage';
export const storage = {
async set(key: string, value: any) {
await AsyncStorage.setItem(key, JSON.stringify(value));
},
async get<T>(key: string): Promise<T | null> {
const item = await AsyncStorage.getItem(key);
return item ? JSON.parse(item) : null;
},
async remove(key: string) {
await AsyncStorage.removeItem(key);
},
async clear() {
await AsyncStorage.clear();
},
};Background Tasks
import * as BackgroundFetch from 'expo-background-fetch';
import * as TaskManager from 'expo-task-manager';
const BACKGROUND_FETCH_TASK = 'background-fetch';
TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
// Do work here
console.log('Background task running');
return BackgroundFetch.BackgroundFetchResult.NewData;
});
export async function registerBackgroundTask() {
return BackgroundFetch.registerTaskAsync(BACKGROUND_FETCH_TASK, {
minimumInterval: 60 * 15, // 15 minutes
stopOnTerminate: false,
startOnBoot: true,
});
}Sharing Content
import * as Sharing from 'expo-sharing';
export async function shareContent(uri: string) {
const isAvailable = await Sharing.isAvailableAsync();
if (!isAvailable) {
console.log('Sharing is not available');
return;
}
await Sharing.shareAsync(uri, {
mimeType: 'image/jpeg',
dialogTitle: 'Share this image',
});
}Related Skills
- expo-config: Configuring module permissions
- expo-build: Including modules in builds