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.
|
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:
Screenshot in iOS device:
Also Read :
Example of Share Post URL from React Native App to Facebook
Upgrade Current React Native 0.63 Project to Latest Version 0.64 Guide
How to Convert Integer Variable to String in React Native Application
React Native New ImageBackground Component iOS Android Example
React Native JSON FlatList with Images and Text iOS Android Tutorial
