Working with Device Features
1. Getting Device Information
| Property | Description | Example |
|---|---|---|
| DeviceInfo.getDeviceTypeAsync() | Gets the device type (phone, tablet, etc.) | |
| DeviceInfo.isDevice | Boolean indicating if the app is running on a physical device | |
| DeviceInfo.modelName | Model name of the device (e.g., iPhone 14 Pro) | |
| DeviceInfo.osVersion | Operating system version (e.g., iOS 16.0) | |
| DeviceInfo.systemVersion | System version (e.g., Android 13) | |
| DeviceInfo.brand | Brand of the device (e.g., Apple, Samsung) | |
2. Getting Device Name
| Property | Description | Example |
|---|---|---|
| expo-device | Provides device information including device name | import * as Device from 'expo-device'; |
| Device.deviceName | Gets the device name as a string | console.log(Device.deviceName); |
Example: Retrieving Device Name
import * as Device from 'expo-device';
export default function App() {
const deviceName = Device.deviceName;
return (
<View style={styles.container}>
<Text>Device Name: {deviceName}</Text>
</View>
);
}
3. Getting Device Type
| Property | Description | Values |
|---|---|---|
| deviceType | Indicates the type of device the app is running on | 'phone', 'tablet', 'desktop', 'web' |
Example: Detecting Device Type
import { Device } from 'expo-device';
const deviceType = Device.deviceType;
console.log(deviceType); // "phone", "tablet", or "desktop"
Note: On web platforms,
deviceType will always return 'web'.
4. Getting OS Version
| Property | Description | Example |
|---|---|---|
| Constants.platform | Platform-specific constants object | { android: { version: 10 }, ios: { version: 14 } } |
| Constants.systemVersion | Current OS version as a string | "14.0" |
Example: Check OS Version
import { Constants } from "expo";
const osVersion = Constants.systemVersion;
console.log("OS Version:", osVersion);
if (osVersion >= "14.0") {
console.log("Running on iOS 14+");
} else {
console.log("Running on older iOS version");
}
5. Getting Brand and Model
| Property | Description | Example |
|---|---|---|
| brand | Brand of the device (e.g., Apple, Samsung) | "Apple" |
| model | Model of the device (e.g., iPhone 14, Galaxy S21) | "iPhone 14" |
Example: Fetching Device Brand and Model
import { Device } from 'expo-device';
console.log(Device.brand); // "Apple"
console.log(Device.model); // "iPhone 14"
6. Checking Device Status
| Feature | Description | Status |
|---|---|---|
| Device.isDevice | Checks if the app is running on a physical device | NEW |
| Device.modelName | Gets the model name of the device (e.g., iPhone 14 Pro) | NEW |
| Device.osVersion | Gets the OS version of the device (e.g., iOS 16.0) | NEW |
| Device.isTablet | Checks if the device is a tablet (iPad, etc.) | NEW |
Example: Checking Device Status
import { Device } from 'expo-device';
console.log(Device.isDevice); // true if on physical device
console.log(Device.modelName); // "iPhone 14 Pro"
console.log(Device.osVersion); // "16.0"
console.log(Device.isTablet); // true if on iPad or similar
7. Using Device Constants
| Constant | Description | Values |
|---|---|---|
| Constants.platform | Platform information | android, ios, web |
| Constants.isDevice | Whether the app is running on a physical device | true, false |
| Constants.isEmulator | Whether the app is running on an emulator | true, false |
| Constants.isTablet | Whether the device is a tablet | true, false |
| Constants.systemVersion | Operating system version | "14.0", "12.0" |
| Constants.deviceId | Unique identifier for the device | "a1b2c3d4e5f6" |
Example: Check if running on a physical device
import { Constants } from "expo";
if (Constants.isDevice) {
console.log("Running on a physical device");
} else {
console.log("Running in an emulator or simulator");
}
Example: Get device platform
import { Constants } from "expo";
const platform = Constants.platform;
console.log("Platform: ", platform); // "android", "ios", or "web"
8. Getting App Version
| Property | Description | Example |
|---|---|---|
| expo-application | Provides information about the app, including version. | import * as Application from 'expo-application'; |
Example: Get App Version
import * as Application from 'expo-application';
const version = Application.nativeApplicationVersion;
console.log('App Version:', version);
9. Controlling Brightness
| Property | Description | Values |
|---|---|---|
| expo-brightness | Module to control screen brightness | setBrightnessAsync(), getBrightnessAsync() |
Example: Setting Brightness
import * as Brightness from 'expo-brightness';
await Brightness.setBrightnessAsync(0.5); // Sets brightness to 50%
Example: Getting Brightness
import * as Brightness from 'expo-brightness';
const brightness = await Brightness.getBrightnessAsync();
console.log(brightness); // Logs current brightness level (0.0 to 1.0)
Note: On iOS, setting brightness may not persist across app launches. On Android, the system UI brightness controls might override this.
10. Keeping Screen Awake
| Property | Description | Usage |
|---|---|---|
| keepAwake | Controls whether the screen stays on while the app is running. | true to keep screen awake, false to allow screen to turn off. |
Example: Enabling Screen Wake
import { keepAwake } from 'expo-keep-awake';
// Keep the screen awake
keepAwake(true);
// Or keep it awake only during a specific operation
setTimeout(() => {
keepAwake(false);
}, 5000);
Note: This feature is particularly useful for media playback or apps that require continuous user interaction.
11. Preventing Screen Capture
| Property | Description | Notes |
|---|---|---|
| expo-screen-capture | Controls screen capture prevention | Available on Android and iOS |
Example: Preventing Screen Capture
import * as ScreenCapture from 'expo-screen-capture';
ScreenCapture.preventScreenCaptureAsync();
Note: This feature is not available on all devices and may be overridden by system-level settings.
Warning: Users can still take screenshots using system-level tools or third-party apps.
Summary of Screen Capture Prevention
- Prevents screenshots and screen recordings
- Works on Android and iOS
- Does not guarantee complete protection
12. Setting App Badge
| Property | Description | Values |
|---|---|---|
| badge | Controls the app badge count on supported devices | number or null |
Example: Setting App Badge Count
import * as Notifications from 'expo-notifications';
Notifications.setBadgeCountAsync(5);
Note: The badge count is only supported on iOS and some Android devices. On Android, it requires the
android.permission.UPDATE_APP_BADGE permission.
Warning: Setting the badge count to
null will clear the badge on supported devices.