How to Get Device Information in React Native

Hey folks! 👋 Ever wondered how to tap into your user's device secrets in a React Native app? Well, buckle up because today, I'm going to show you a nifty trick using the magic wand called react-native-device-info!

In our React Native journey, we've got this cool DeviceInfoComponent that's going to spill the beans about the device your app is running on. From the device ID to the brand, model, and even a secret unique ID – we're about to uncover it all.

In this article, we'll see how to get device information in react native, react native get device information using react-native-device-info, and how to get device data in react-native, react-native-device-info expo.

Just follow along as we dance through the code, and by the end, you'll have a screen displaying your user's device info like a digital Sherlock Holmes. 🕵️‍♂️ Let's dive into the wonderful world of device exploration! 🚀✨

To get device information in a React Native app, you can use the react-native-device-info library. This library provides an easy way to access various device-related information.

Here's a step-by-step guide with a code snippet:

If you haven't already, create a new React Native project:

npx react-native init DeviceInfoExample
cd DeviceInfoExample

Install the react-native-device-info library:

npm install react-native-device-info

For React Native versions 0.60 and above, linking is done automatically. For earlier versions, you might need to run:

react-native link react-native-device-info

Create a new file named DeviceInfoComponent.js and add the following code:

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import DeviceInfo from 'react-native-device-info';

const DeviceInfoComponent = () => {
  const [deviceInfo, setDeviceInfo] = useState(null);

  useEffect(() => {
    // Fetch device information when the component mounts
    const getDeviceInfo = async () => {
      const deviceId = DeviceInfo.getDeviceId();
      const brand = DeviceInfo.getBrand();
      const model = DeviceInfo.getModel();
      const systemName = DeviceInfo.getSystemName();
      const systemVersion = DeviceInfo.getSystemVersion();
      const uniqueId = DeviceInfo.getUniqueId();

      // Set device information in state
      setDeviceInfo({
        deviceId,
        brand,
        model,
        systemName,
        systemVersion,
        uniqueId,
      });
    };

    getDeviceInfo();
  }, []);

  return (
    <View>
      <Text>Device Information:</Text>
      {deviceInfo && (
        <View>
          <Text>Device ID: {deviceInfo.deviceId}</Text>
          <Text>Brand: {deviceInfo.brand}</Text>
          <Text>Model: {deviceInfo.model}</Text>
          <Text>System Name: {deviceInfo.systemName}</Text>
          <Text>System Version: {deviceInfo.systemVersion}</Text>
          <Text>Unique ID: {deviceInfo.uniqueId}</Text>
        </View>
      )}
    </View>
  );
};

export default DeviceInfoComponent;

Open App.js and import and use the DeviceInfoComponent:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import DeviceInfoComponent from './DeviceInfoComponent';

const App = () => {
  return (
    <View style={styles.container}>
      <DeviceInfoComponent />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

Start your React Native project:

npx react-native run-android

or

npx react-native run-ios

This will launch your app on either an Android or iOS emulator or a physical device.

That's it! Now, when you run your app, you'll see device information displayed on the screen. This information includes the device ID, brand, model, system name, system version, and a unique identifier for the device.

You might also like:

• Read Also: Laravel 10 REST API CRUD Operation
• Read Also: How to Upload file in React Native using Expo
• Read Also: How to Add Days in Date in React Native Calendar
• Read Also: How to Create Multiple Authentication in Laravel 10