Sunday, August 4, 2019

React Native Get Android or iOS Device Unique ID Dynamically

This tutorial explains how to get android or ios device unique ID in react native application. Every mobile phone device in the world has its unique ID(Identify Signature) which makes with the combination of Alphabetic and Numeric characters. Unique device ID is used in Push Notification, identify a device uniquely at login app and most of money making app’s usages this to prevent multiple app installation in same device.
Both android and iOS devices supports Unique ID and using the react-native-device-info NPM library we can easily retrieve Get Android iOS Device Unique ID Dynamically on button click in Android iOS react native application.

React Native Get Android or iOS Device Unique ID Dynamically


Installation of Dependency

To get unique device ID android or ios we have to install act-native-device-info package, in our project directory first.

NPM command :
npm install --save react-native-device-info

Automatic link using below command : 
react-native link react-native-device-info


React Native Get Unique ID of Device

Lets see the complete source code that helps to get android or ios device unique ID in react native application with simple example.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open your react native project folder in CMD or Terminal and execute the below command to install the react-native-device-info library.
NPM command :
npm install --save react-native-device-info

Automatic link using below command : 
react-native link react-native-device-info

Step 3: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 4: Through react , react-native, react-native-device-info packages import all required components.
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import DeviceInfo from 'react-native-device-info';

Step 5: create constructor block inside your App component and make a State named as DeviceID, this state is used to hold the Unique device id.
constructor() {
    super();
    this.state = {
      DeviceID: ''
    }
  }

Step 6: Create a function named as getUniqueDeviceID(), Inside this function we would simply get the unique device id using DeviceInfo.getUniqueID() method and store this into State.
getUniqueDeviceID = () => {
    var id = DeviceInfo.getUniqueID();
    this.setState({
      DeviceID: id
    })
  }

Step 7: Implement render method inside the App class and wrapped the below layout design inside the root View component.
render() {
    return (
      <View style={styles.Container}>

        <Text style={{ textAlign: 'center', fontSize: 20, marginBottom: 10 }}>{this.state.DeviceID}</Text>
        <TouchableOpacity onPress={this.getUniqueDeviceID} activeOpacity={0.5} style={styles.button} >
          <Text style={styles.TextStyle}> CLICK TO GET DEVICE UNIQUE ID </Text>
        </TouchableOpacity>

      </View>
    );
  }

Step 8 : Apply the below style sheet design. 
const styles = StyleSheet.create({
  Container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  TextStyle: {
    fontSize: 15,
    textAlign: 'center',
    color: 'white'
  },
  button: {
    paddingTop: 10,
    paddingBottom: 10,
    width: '90%',
    backgroundColor: '#673ab7',
  },
});

Complete Source Code for App.js 

Lets see the complete source code that helps to get android or ios device unique ID in react native application.

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import DeviceInfo from 'react-native-device-info';


export default class App extends Component {

  constructor() {
    super();
    this.state = {
      DeviceID: ''
    }
  }

  getUniqueDeviceID = () => {
    var id = DeviceInfo.getUniqueID();
    this.setState({
      DeviceID: id
    })
  }

  render() {
    return (
      <View style={styles.Container}>

        <Text style={{ textAlign: 'center', fontSize: 20, marginBottom: 10 }}>{this.state.DeviceID}</Text>
        <TouchableOpacity onPress={this.getUniqueDeviceID} activeOpacity={0.5} style={styles.button} >
          <Text style={styles.TextStyle}> CLICK TO GET DEVICE UNIQUE ID </Text>
        </TouchableOpacity>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  Container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  TextStyle: {
    fontSize: 15,
    textAlign: 'center',
    color: 'white'
  },
  button: {
    paddingTop: 10,
    paddingBottom: 10,
    width: '90%',
    backgroundColor: '#673ab7',
  },
});

Screenshot : 

React Native Get Android or iOS Device Unique ID Dynamically

React Native Get Android or iOS Device Unique ID Dynamically

This is all about React Native Get Android or iOS Device Unique ID Dynamically. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.


No comments:

Post a Comment