Newby Coder header banner

Retrieving Device Info in React Native

react-native-device-info package can be used for retrieving device information such as system name, device type, ip address etc


Creating new React Native App

Check React Native Installation for installation related info

Use react-native init command to create a new React Native project (here named NcDeviceInfoApp)

react-native init NcDeviceInfoApp

This creates a directory named NcDeviceInfoApp and initializes it as a react native application directory

This can be skipped in case an existing react native project is being integrated into


Dependency

Go to project directory (here NcDeviceInfoApp)

cd NcDeviceInfoApp

Add react-native-device-info package to current project using yarn

yarn add react-native-device-info

or using npm

npm install react-native-device-info --save

iOS

After yarn add command, cd into ios folder inside project directory

cd ios

Use pod command to install any required CocoaPods dependencies:

pod install

Usage

react-native-device-info module provides DeviceInfo component

It can be used to retrieve device related information, some of which involve async calls

Import
import DeviceInfo from 'react-native-device-info';

App Code

Following code contains some static and async functions of DeviceInfo

ViewUser.js
import React, { Component } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar, Button,
} from 'react-native';
import DeviceInfo from 'react-native-device-info';


export default class App extends Component<{}> {

  constructor() {
    super();
    this.buildId = ""
    this.deviceName = ""
    this.ipAddress = ""
    this.macAddress = ""
    this.manufacturer = ""
    this.carrier = ""
    this.userAgent = ""
    this.landscape = ""
    this.state = {}
    this.counter = 0
  }

  componentDidMount() {
    this.update();
  }

  sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  async update() {
    var temp_counter = 0;
    DeviceInfo.getBuildId().then(value => { this.buildId = value; temp_counter++; }).catch(err => {temp_counter++});
    DeviceInfo.getDeviceName().then(value => { this.deviceName = value; temp_counter++; }).catch(x =>{temp_counter++});
    DeviceInfo.getIpAddress().then(value => { this.ipAddress = value; temp_counter++; }).catch(x =>{temp_counter++});
    DeviceInfo.getMacAddress().then(value => { this.macAddress = value; temp_counter++; }).catch(x =>{temp_counter++});
    DeviceInfo.getManufacturer().then(value => { this.manufacturer = value; temp_counter++; }).catch(x =>{temp_counter++});
    DeviceInfo.getCarrier().then(value => { this.carrier = value; temp_counter++; }).catch(x =>{temp_counter++});
    DeviceInfo.getUserAgent().then(value => { this.userAgent = value; temp_counter++; }).catch(x =>{temp_counter++});
    DeviceInfo.isLandscape().then(value => { this.landscape = String(value); temp_counter++; }).catch(x =>{temp_counter++});
    start_ = Date.now();
    while(temp_counter < 8 && (Date.now() - start_ < 2000)) {
      await this.sleep(100);
    }
    this.setState({});
  }

  render() {
    this.counter++;
    return (
      <View style={styles.container}>
          <Text style={styles.textStyle}> getApplicationName: {DeviceInfo.getApplicationName()}</Text>
          <Text style={styles.textStyle}> getBuildId: {this.buildId}</Text>
          <Text style={styles.textStyle}> getDeviceId: {DeviceInfo.getDeviceId()}</Text>
          <Text style={styles.textStyle}> getDeviceType: {DeviceInfo.getDeviceType()}</Text>
          <Text style={styles.textStyle}> getDeviceName: {this.deviceName}</Text>
          <Text style={styles.textStyle}> getIpAddress: {this.ipAddress}</Text>
          <Text style={styles.textStyle}> getMacAddress: {this.macAddress}</Text>
          <Text style={styles.textStyle}> getManufacturer: {this.manufacturer}</Text>
          <Text style={styles.textStyle}> getModel(): {DeviceInfo.getModel()}</Text>
          <Text style={styles.textStyle}> getVersion(): {DeviceInfo.getVersion()}</Text>
          <Text style={styles.textStyle}> getBuildId(): {this.buildId}</Text>
          <Text style={styles.textStyle}> getBrand(): {DeviceInfo.getBrand()}</Text>
          <Text style={styles.textStyle}> getCarrier(): {this.carrier}</Text>
          <Text style={styles.textStyle}> getUserAgent(): {this.userAgent}</Text>
          <Text style={styles.textStyle}> isLandscape(): {this.landscape}</Text>
          <Text style={styles.textStyle}> getSystemName(): {DeviceInfo.getSystemName()}</Text>
          <Text style={styles.textStyle}> getSystemVersion(): {DeviceInfo.getSystemVersion()}</Text>
          <Text style={styles.textStyle}> render counter: {this.counter} </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding:20,
    backgroundColor: '#D434F5',
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
  },
  textStyle: {
      fontSize: 15,
      color: '#fff'
  }
});

Run instructions

Running in Android

cd into project directory (here NcDeviceInfoApp)

cd NcDeviceInfoApp

Run metro server to serve js

react-native start

Go to project directory in another terminal tab

Enter following run command for Android:

react-native run-android
cl-react-native-device-info

Running in ios

cd into project directory (here NcDeviceInfoApp)

cd NcDeviceInfoApp

Enter following command :

react-native run-ios

This might take some time


If the app shows error about metro server not configured (check Running an App in iOS), then run metro server in another tab:

react-native start

Reload the app

Re-run react-native run-ios command if reloading doesn't work

cm-react-native-device-info-as1