What common native components and APIs does Expo provide? How to use them?

Expo provides rich native components and APIs, enabling developers to easily access various mobile device features. These components and APIs are carefully designed to provide a unified cross-platform interface.

Core Native Components:

1. Camera

javascript
import { Camera } from 'expo-camera';

// Request camera permission
const { status } = await Camera.requestCameraPermissionsAsync();

// Use camera component
<Camera style={{ flex: 1 }} type={type} />

1. Location

javascript
import * as Location from 'expo-location';

// Request location permission
const { status } = await Location.requestForegroundPermissionsAsync();

// Get current location
const location = await Location.getCurrentPositionAsync({});

1. Notifications

javascript
import * as Notifications from 'expo-notifications';

// Request notification permission
const { status } = await Notifications.requestPermissionsAsync();

// Send local notification
await Notifications.scheduleNotificationAsync({
  content: {
    title: 'Hello!',
    body: 'This is a notification',
  },
  trigger: { seconds: 2 },
});

1. Audio

javascript
import { Audio } from 'expo-av';

// Play audio
const { sound } = await Audio.Sound.createAsync(
  { uri: 'https://example.com/audio.mp3' }
);
await sound.playAsync();

1. FileSystem

javascript
import * as FileSystem from 'expo-file-system';

// Read file
const content = await FileSystem.readAsStringAsync(fileUri);

// Write file
await FileSystem.writeAsStringAsync(fileUri, 'Hello World');

1. ImagePicker

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

// Select image
const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ['images'],
  allowsEditing: true,
});

1. SecureStore

javascript
import * as SecureStore from 'expo-secure-store';

// Save sensitive data
await SecureStore.setItemAsync('token', 'user-token');

// Read sensitive data
const token = await SecureStore.getItemAsync('token');

1. Sensors

javascript
import { Accelerometer } from 'expo-sensors';

// Listen to accelerometer
Accelerometer.addListener(accelerometerData => {
  console.log(accelerometerData);
});

Common APIs:

1. Constants

javascript
import Constants from 'expo-constants';

// Get device information
const deviceName = Constants.deviceName;
const platform = Constants.platform;

1. Haptics

javascript
import * as Haptics from 'expo-haptics';

// Trigger haptic feedback
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);

1. Linking

javascript
import * as Linking from 'expo-linking';

// Open URL
await Linking.openURL('https://expo.dev');

// Handle deep linking
const url = await Linking.getInitialURL();

1. ScreenOrientation

javascript
import * as ScreenOrientation from 'expo-screen-orientation';

// Lock screen orientation
await ScreenOrientation.lockAsync(
  ScreenOrientation.OrientationLock.PORTRAIT
);

Permission Management:

Expo provides a unified permission request API:

javascript
import * as Permissions from 'expo-permissions';

// Request permissions
const { status, granted } = await Permissions.askAsync(
  Permissions.CAMERA,
  Permissions.LOCATION
);

Best Practices:

1. Permission Request Timing: Request permissions when users need to use the feature, provide clear explanations

2. Error Handling: Properly handle permission denial, provide user-friendly prompts

3. Performance Optimization: Release resources timely, such as stopping sensor listeners, canceling audio playback, etc.

4. Platform Differences: Be aware of API differences across platforms, use conditional rendering for platform-specific features

5. Async Operations: All native API calls are asynchronous, use async/await to handle them

These native components and APIs greatly simplify cross-platform development, allowing developers to focus on business logic rather than native implementation details.