React Native Get Android Device IMEI Number on Button Click Example Tutorial

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.

npm install react-native-imei --save

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.

<uses-permission android:name="android.permission.READ_PHONE_STATE"/>

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.

<uses-sdk android:minSdkVersion="16"
          android:targetSdkVersion="23"
           />

<uses-sdk android:minSdkVersion="16"

android:targetSdkVersion="23"

Source code of AndroidManifest.xml file after adding above code:

<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>

<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>

</intent-filter>

</activity>

</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.

import React, { Component } from 'react';

import { Platform, StyleSheet, View, PermissionsAndroid, Text, Alert, Button } from 'react-native';

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.

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 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.

export default class App extends Component {




}

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.

  constructor(){

    super();

    this.state={

      device_IMEI : ''

    }
  }

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.

async componentDidMount() {
 
    await request_READ_PHONE_STATE() ;
 
  }

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.

get_IMEI_Number=()=>{

    const IMEI = require('react-native-imei');

    var IMEI_2 = IMEI.getImei();

    this.setState({ device_IMEI : IMEI_2 });
    
  }

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.

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>
 
    );
  }

render() {

return (

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

</View>

);

}

13. Creating Style.

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

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 :

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
 
  }
 
});