React Native Get Android iOS Device Unique ID Dynamically Example

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.

Contents in this project Get Android iOS Device Unique ID Dynamically on Button Click in iOS Android React Native App:

1. Open your react native project folder in Command Prompt / Terminal.

2. Execute the npm install --save react-native-device-info@0.11.0 command in your react native’s project like i did in below screenshot.

3. Now we need to execute react-native link react-native-device-info command in order to link this installed library to our current react native project.

4. Import Platform, StyleSheet, View, Text and TouchableOpacity component in your project.

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

import React, { Component } from 'react';

import { Platform, StyleSheet, View, Text, TouchableOpacity } from 'react-native';

5. Import react-native-device-info module in your app using a variable named as DeviceInfo. We would use this object to retrieve device unique id.

var DeviceInfo = require('react-native-device-info');

1	var DeviceInfo = require('react-native-device-info');

6. Create constructor() in your project and make a State named as DeviceID , this state is used to hold the Unique device id.

constructor(){

    super();

    this.state={

      DeviceID : ' '

    }
  }

constructor(){

super();

this.state={

DeviceID : ' '

}

7. Create a function named as getDeviceID(), Inside this function we would simply get the unique device id using DeviceInfo.getUniqueID() method and store this into State. We would call this function on Button onPress event.

getDeviceID=()=>{

    var id = DeviceInfo.getUniqueID();

    this.setState({
 
      DeviceID : id
     
    })

  }

getDeviceID=()=>{

var id = DeviceInfo.getUniqueID();

this.setState({

DeviceID : id

})

}

8. Create a Root View in render’s return block and Inside this View would make a Text component and 1 TouchableOpacity button.

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

      
          <Text style={{textAlign: 'center', fontSize: 20, marginBottom: 10}}>{this.state.DeviceID}</Text>

          
          <TouchableOpacity onPress={this.getDeviceID} activeOpacity={0.5} style={styles.button} >

            <Text style={styles.TextStyle}> CLICK HERE TO GET DEVICE UNIQUE ID </Text>

          </TouchableOpacity>

      
      </View>
            
    );

render() {

return (

<Text style={{textAlign: 'center', fontSize: 20, marginBottom: 10}}>{this.state.DeviceID}</Text>

<Text style={styles.TextStyle}> CLICK HERE TO GET DEVICE UNIQUE ID </Text>

</TouchableOpacity>

</View>

);

9. Creating Style.

const styles = StyleSheet.create({
 
 MainContainer :{
 
   justifyContent: 'center',
   alignItems: 'center',
   flex:1,
   paddingTop: (Platform.OS == 'ios' ? 20 : 0)

 },

 button: {
    
  paddingTop: 10,
  paddingBottom: 10,
  width: '90%',
  backgroundColor: '#4CAF50',
},

TextStyle:{
    color:'#fff',
    textAlign:'center',
}
 
});

const styles = StyleSheet.create({

MainContainer :{

justifyContent: 'center',

alignItems: 'center',

flex:1,

paddingTop: (Platform.OS == 'ios' ? 20 : 0)

button: {

paddingTop: 10,

paddingBottom: 10,

width: '90%',

backgroundColor: '#4CAF50',

TextStyle:{

color:'#fff',

textAlign:'center',

}

});

10. Complete source code for App.js File :

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

var DeviceInfo = require('react-native-device-info');
 
export default class Myproject extends Component {

  constructor(){

    super();

    this.state={

      DeviceID : ' '

    }
  }
 
  getDeviceID=()=>{

    var id = DeviceInfo.getUniqueID();

    this.setState({
 
      DeviceID : id
     
    })

  }

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

      
          <Text style={{textAlign: 'center', fontSize: 20, marginBottom: 10}}>{this.state.DeviceID}</Text>

          
          <TouchableOpacity onPress={this.getDeviceID} activeOpacity={0.5} style={styles.button} >

            <Text style={styles.TextStyle}> CLICK HERE TO GET DEVICE UNIQUE ID </Text>

          </TouchableOpacity>

      
      </View>
            
    );
  }
}
 
const styles = StyleSheet.create({
 
 MainContainer :{
 
   justifyContent: 'center',
   alignItems: 'center',
   flex:1,
   paddingTop: (Platform.OS == 'ios' ? 20 : 0)

 },

 button: {
    
  paddingTop: 10,
  paddingBottom: 10,
  width: '90%',
  backgroundColor: '#4CAF50',
},

TextStyle:{
    color:'#fff',
    textAlign:'center',
}
 
});