IMEI number also known as International Mobile Equipment Identity Number is a unique number given to every mobile phone in the world. IMEI number helps the mobile department to identify each and every mobile present on the globe. IMEI number is most probably used to stop a stolen mobile phone to used again by some other person and helps the police and telecom department track the stolen mobile phone. But in many cases like identifying every device uniquely from the application server its very helpful to because with them the application developer can easily take record of its user individually. So in this tutorial we would going to make a tutorial to Get Android Device IMEI Number on Button Click in React Native Example Tutorial.
Note: Apple dose not allow us to access device personal information like IMEI number so you cannot get the IMEI number in IOS devices. Read this post for further information.
Contents in this project Get Android Device IMEI Number on Button Click in React Native Example Tutorial:
1. Before getting started we need to install the react-native-imei npm library in our current react native project. So open your project folder in CMD or terminal and execute below command.
|
1
|
npm install react–native–imei —save
|
Screenshot of CMD :s
Screenshot of CMD after successfully executing above command:
2. Now we need to execute the
react–native link react–native–imei command into our project folder, This command would refresh the complete react native project folder and index the newly installed IMEI library.
3. We need to put the android’s READ_PHONE_STATE permission in the AndroidManifest.xml file. Because this type of personal information can be only be accessible after asking for this permission. So goto YourReactNativeProject-> android -> app -> src -> main -> AndroidManifest.xml file and put the below permission inside it.
|
1
|
<uses–permission android:name=“android.permission.READ_PHONE_STATE”/>
|
4. Now we need to specify android:minSdkVersion and android:targetSdkVersion in our AndroidManifest.xml . This step is very important.
|
1
2
3
|
<uses–sdk android:minSdkVersion=“16”
android:targetSdkVersion=“23”
/>
|
Source code of AndroidManifest.xml file after adding above code:
|
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
|
<manifest xmlns:android=“http://schemas.android.com/apk/res/android”
package=“com.newproject”>
<uses–permission android:name=“android.permission.INTERNET” />
<uses–permission android:name=“android.permission.SYSTEM_ALERT_WINDOW”/>
<uses–permission android:name=“android.permission.READ_PHONE_STATE”/>
<uses–sdk android:minSdkVersion=“16”
android:targetSdkVersion=“23”
/>
<application
android:name=“.MainApplication”
android:label=“@string/app_name”
android:icon=“@mipmap/ic_launcher”
android:allowBackup=“false”
android:theme=“@style/AppTheme”>
<activity
android:name=“.MainActivity”
android:label=“@string/app_name”
android:configChanges=“keyboard|keyboardHidden|orientation|screenSize”
android:windowSoftInputMode=“adjustResize”>
<intent–filter>
<action android:name=“android.intent.action.MAIN” />
<category android:name=“android.intent.category.LAUNCHER” />
<action android:name=“android.intent.action.DOWNLOAD_COMPLETE”/>
</intent–filter>
</activity>
<activity android:name=“com.facebook.react.devsupport.DevSettingsActivity” />
</application>
</manifest>
|
5. Open YourReactNativeProject -> android -> app -> build.gradle file and find targetSdkVersion and set its to 23 like targetSdkVersion 23 in default Config block.
6. Import Platform, StyleSheet, View, PermissionsAndroid, Text, Alert and Button component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, PermissionsAndroid, Text, Alert, Button } from ‘react-native’;
|
7. Create a ASYNC function named as request_READ_PHONE_STATE() in your App.js class. Using this function we will ask for READ_PHONE_STATE permission from application user. If you want to learn more about Requesting runtime permissions then read our this explained tutorial.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
export async function request_READ_PHONE_STATE() {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_PHONE_STATE ,
{
‘title’: ‘ReactNativeCode wants to READ_PHONE_STATE’,
‘message’: ‘ReactNativeCode App needs access to your personal data. ‘
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
Alert.alert(“Permission Granted.”);
}
else {
Alert.alert(“Permission Not Granted”);
}
} catch (err) {
console.warn(err)
}
}
|
8. Create a class named as App, This would be our main export default class.
|
1
2
3
4
5
6
|
export default class App extends Component {
}
|
9. Creating constructor() method in your App class and inside the constructor we would make a State named as device_IMEI . This state is used to shoe the IMEI number inside text component.
|
1
2
3
4
5
6
7
8
9
10
|
constructor(){
super();
this.state={
device_IMEI : ”
}
}
|
10. Creating a async componentDidMount() function and call the request_READ_PHONE_STATE() function using await method. So when the app starts for the first time then it will ask for runtime permission.
|
1
2
3
4
5
|
async componentDidMount() {
await request_READ_PHONE_STATE() ;
}
|
11. Creating a function named as get_IMEI_Number() in your class, We would call this function on button onPress event . Inside this function we would first import the require(‘react-native-imei’) library object into IMEI constant, Now using the IMEI.getImei() inbuilt function of library we would get the IMEI number of device and set into STATE.
|
1
2
3
4
5
6
7
8
9
|
get_IMEI_Number=()=>{
const IMEI = require(‘react-native-imei’);
var IMEI_2 = IMEI.getImei();
this.setState({ device_IMEI : IMEI_2 });
}
|
12. Creating a Button and Text component inside the render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
render() {
return (
<View style={styles.MainContainer}>
<Text style={{textAlign: ‘center’ , marginBottom: 20, fontSize: 20}}> {this.state.device_IMEI} </Text>
<Button title=“Click Here to Get Device IMEI Number” onPress={this.get_IMEI_Number}/>
</View>
);
}
|
13. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
justifyContent: ‘center’,
alignItems: ‘center’,
margin: 20
}
});
|
14. 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
80
81
82
83
84
85
86
87
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, PermissionsAndroid, Text, Alert, Button } from ‘react-native’;
export async function request_READ_PHONE_STATE() {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_PHONE_STATE ,
{
‘title’: ‘ReactNativeCode wants to READ_PHONE_STATE’,
‘message’: ‘ReactNativeCode App needs access to your personal data. ‘
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
Alert.alert(“Permission Granted.”);
}
else {
Alert.alert(“Permission Not Granted”);
}
} catch (err) {
console.warn(err)
}
}
export default class App extends Component {
constructor(){
super();
this.state={
device_IMEI : ”
}
}
async componentDidMount() {
await request_READ_PHONE_STATE() ;
}
get_IMEI_Number=()=>{
const IMEI = require(‘react-native-imei’);
var IMEI_2 = IMEI.getImei();
this.setState({ device_IMEI : IMEI_2 });
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={{textAlign: ‘center’ , marginBottom: 20, fontSize: 20}}> {this.state.device_IMEI} </Text>
<Button title=“Click Here to Get Device IMEI Number” onPress={this.get_IMEI_Number}/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
justifyContent: ‘center’,
alignItems: ‘center’,
margin: 20
}
});
|
Screenshots:
Also Read :
React Native Create Custom Alert Dialog Box in Android iOS App Tutorial
React Native Change Button Upper Title Text Using State Dynamically
React Native Increase Width Height of View using Animation Tutorial
How to Create Custom Triangle Shape View in React Native
React Native Open Specific App in Google Play Store from App in Android
