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.
4. Import Platform, StyleSheet, View, Text and TouchableOpacity component in your project.
1 2 3 |
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.
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.
1 2 3 4 5 6 7 8 9 10 |
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.
1 2 3 4 5 6 7 8 9 10 11 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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> ); |
9. Creating Style.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
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', } }); |
Screenshot in Android device:
It shows evaluating ‘RNDeviceInfo.uniqueId’
Kavya which version of React Native you are using?
Hey Good tutorial! keep it up.
Could you please make a tutorial of how to make confirm dialog with alert and without customization?
Bro i have already posted tutorial on confirm dialog here is the custom alert dialog : https://reactnativecode.com/create-custom-alert-dialog-box/ and here is the normal alert dialog : https://reactnativecode.com/react-native-simple-alert-dialog-example/
It is nice!
How do we get device IMEI number?
Rohit i will soon publish tutorial on getting IMEI number 🙂 .
I am getting UDID for authentication of devices. It working fine on all models but on iPhone 6s(11.4) it giving me different UDID’s on each attemts. I don’t know why!. Please help me to figure it out. Thank You
Thanks for comment Arnold, we will check for your issue then reply you ASAP 🙂 .
I get an error “undefined is not an object (evaluating ‘RNDeviceInfo.uniqueId’)”
I see, I am using expo, no chance then
Yes Oriol it will not work in Expo.
so how to make it work in expo? because i already used real device android.
just import this library in expo and it will work.
I am getting
undefined is not a function (evaluating ‘DeviceInfo.getUniqueID()’)
Try to re-install the library again and this time start the command prompt as RUN AS ADMINISTRATOR mode.
brother make a lesson of fresher interview questions.
Rajat lesson for freshers question for react native developer interview purpose ? Please tell me.