Getting IMEI from an Android device using React Native

The International Mobile Equipment Identity (better known by its acronym IMEI) is a number, usually unique, which identifies mobile phones. It is usually printed inside the battery slot, however you can also print it on the screen by typing*#06#.

This number also can be obtained, having the respective permissions of the Android OS, from an application. This time we’ll do it from an React Native application.

Prior to the process, you must ensure that you have an updated version of npm:

npm i -g npm

Later, if you still do not have the create-react-native-app package installed, install it as follows:

npm install -g create-react-native-app

Start by creating the react native project with the following statement:

create-react-native-app ReactIMEI

Next, go to the project directory that you just created:

cd ReactIMEI

And prove that the application runs successfully:

yarn start

Depending on where you are going to test our application, select the interactive CLI option that is shown after executing yarn start.

For this example we will use an Android emulator (Option a).

The device screen will present something like the following:

react-native-imei

It is a React Native library that allows us to easily obtain the IMEI, as long as the application is running on an Android device and has the READ_PHONE_STATE permission. This is the library that we’re going to use for our example.

Integrating react-native-imei to our project

To add the library for our example project, run the following command:

yarn add react-native-imei

Since react-native-device-imei is a library that includes native code, you must link it to our application.

Prior to the link to the native library, you need to eject from the CRNA application (Create React Native App) to convert it into a React Native Regular application. The steps to follow are described in the CRNA official documentation. The output of the process will look similar to the following:

After performing the eject process, you can link the library:

react-native link react-native-imei

The output will be similar to the following:

Once the library is linked, you can use it; for this, modify the App.js file that is in the project’s root directory.

First, modify the render function so that it shows a button (TouchableOpacity) which, after clicking on it, will show the device IMEI in a text field.

render () {
  return (
    <View style={styles.container}>
      <Text>{this.state.DeviceIMEI}</Text>
      <TouchableOpacity onPress={this.getDeviceIMEI}>
        <Text> CLICK HERE TO GET DEVICE IMEI </Text>
      </TouchableOpacity>
    </View>
  )
}

In addition to this, initialize DeviceIMEI as part of the state in the App component’s constructor:

constructor () {
  super()
  this.state = {
    DeviceIMEI: '',
  }
}

Finally, implement the function getDeviceIMEI which contains the logic to get the device IMEI:

getDeviceIMEI = () => {
  const IMEI = require('react-native-imei')
  this.setState({
    DeviceIMEI: IMEI.getImei(),
  })
}

After performing all the steps above, the complete file will look like this:

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

export default class App extends React.Component {

  constructor () {
    super()
    this.state = {
      DeviceIMEI: '',
    }
  }

  getDeviceIMEI = () => {
    const IMEI = require('react-native-imei')
    this.setState({
      DeviceIMEI: IMEI.getImei(),
    })
  }

  render () {
    return (
      <View style={styles.container}>
        <Text>{this.state.DeviceIMEI}</Text>
        <TouchableOpacity onPress={this.getDeviceIMEI}>
          <Text> CLICK HERE TO GET DEVICE IMEI </Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

Testing the operation in an emulator

To test the operation of the app, open the android/ directory in Android Studio.

The next step is to start Metro Bundler by yarn start:

As a final step, run the app in an emulator from Android Studio, the directory will be recognized as an Android project:

When pressing the CLICK HERE TO GET DEVICE IMEI button, you’ll obtain the device IMEI:

Final words

Even though the integration of React Native with features and resources specific to the Android system is not as trivial as if it were a 100% native project, it is not impossible if we use the right third-party libraries which facilitate work and if we get advise from more experienced people in the React Native field.

For you to have a better guide, the code that has been worked on when writing this article is in the following repository:

AlturaSoluciones/ReactNativeIMEI

If you liked this article, please applaud as many times as you wish. You can also read this article in Spanish. To see similar stories about technology, look at our publications. Do not hesitate to leave us in the comments box any concerns or suggestions you may have.

If you need a great team that will advise you in expressing your ideas in React JS or React Native, do not hesitate to contact us. You can go to our website and fill out the form and we will contact you as soon as possible.

Miguel Torres Vivanco
Mail: miguel@alturasoluciones.com
Twitter: @perrotedonperro
LinkedIn: www.linkedin.com/in/miguetv17

Troubleshooting

Problem: When creating the application using create-react-native-app, the following message appears at the end:

error An unexpected error occurred: "https://registry.yarnpkg.com/react-native-web-maps/-/react-native-web-maps-0.1.0.tgz: Invalid tar header. Maybe the tar is corrupted or it needs to be gunzipped?".

Cause: Usually it is because the create-react-app package uses (updated at the time of writing this publication) a discontinued version of Yarn. This message is found in the initial lines after executing the create-react-app command:

warning Your current version of Yarn is out of date. The latest version is "1.7.0" while you're on "0.23.3".

Solution: Update the Yarn version as suggested in the following lines:

info To upgrade, run the following command:
$ npm upgrade --global yarn

And verify that the version of Yarn is updated:

yarn --version

If the Yarn version has not changed, you can force the update to a specific version, the most recent stable version (1.7.0 at the time of writing this article)

npm install -g yarn@1.7.0

And verify the version again.

Next, delete the directory created that gave the error:

rm -rf ReactIMEI

Finally, create the application again:

create-react-native-app ReactIMEI

Problem:

react-native: command not found

Cause: The react-native-cli module is not installed in your system.

Solution: Install the module using NPM:

npm install -g react-native-cli