React Native Device Information

15.0.2 · active · verified Sun Apr 19

react-native-device-info is a comprehensive library for React Native applications that provides access to various device-specific information across iOS, Android, and Windows platforms. It allows developers to retrieve details such as device unique ID, brand, model, OS version, system name, application build number, and more. The current stable version is 15.0.2, released in early 2026. The package maintains a frequent release cadence, often issuing multiple patch and minor versions monthly, with major versions typically arriving a few times a year, indicating active development and timely updates for new device capabilities and platform changes. Its key differentiators include broad platform support, a rich API covering a wide range of device properties, and a commitment to keeping up with the latest React Native and platform SDK versions, which sometimes introduces breaking changes related to compilation targets or permissions.

Common errors

Warnings

Install

Imports

Quickstart

This React Native component demonstrates how to fetch and display various device and application details using `react-native-device-info`'s named and default exports. It fetches asynchronous details like unique ID and manufacturer, along with synchronous details like system name, and renders them in a simple UI.

import DeviceInfo, {
  getUniqueId,
  getManufacturer,
  getSystemName,
  getSystemVersion,
  isTablet,
  getApplicationName,
  getVersion,
  getBuildNumber
} from 'react-native-device-info';
import { View, Text, StyleSheet } from 'react-native';
import React from 'react';

const App = () => {
  const [deviceDetails, setDeviceDetails] = React.useState({});

  React.useEffect(() => {
    async function fetchDeviceInfo() {
      const uniqueId = await getUniqueId();
      const manufacturer = await getManufacturer();
      const systemName = getSystemName();
      const systemVersion = getSystemVersion();
      const isTabletDevice = isTablet();
      const appName = getApplicationName();
      const appVersion = getVersion();
      const buildNumber = getBuildNumber();

      setDeviceDetails({
        uniqueId,
        manufacturer,
        systemName,
        systemVersion,
        isTablet: isTabletDevice,
        appName,
        appVersion,
        buildNumber,
        deviceBrand: DeviceInfo.getBrand(),
        model: DeviceInfo.getModel(),
        hasNotch: DeviceInfo.hasNotch(),
      });
    }
    fetchDeviceInfo();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Device Information:</Text>
      {Object.entries(deviceDetails).map(([key, value]) => (
        <Text key={key} style={styles.detailText}>
          {key}: {String(value)}
        </Text>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f0f0f0',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  detailText: {
    fontSize: 16,
    marginBottom: 5,
    color: '#555',
  },
});

export default App;

view raw JSON →