Obteniendo IMEI de un dispositivo Android con React Native

El International Mobile Equipment Identity (más conocido por sus siglas IMEI) es un número, usualmente único, que identifica teléfonos móviles. Generalmente se encuentra impreso dentro del slot de la batería, sin embargo también se lo puede imprimir en pantalla escribiendo *#06# .

Este número también puede ser obtenido, teniendo los respectivos permisos del sistema Android, desde una aplicación. Esta vez lo haremos desde una aplicación creada con React Native.

Previo al proceso, debemos asegurarnos que tengamos una versión actualizada de npm:

npm i -g npm

Posteriormente, si aun no tenemos instalado el paquete de create-react-native-app, lo instalaremos de la siguiente manera:

npm install -g create-react-native-app

Comenzaremos creando el proyecto de react native con el siguiente comando

create-react-native-app ReactIMEI

Iremos al directorio del proyecto que acabamos de crear

cd ReactIMEI

Y probamos que nuestra aplicación corra con:

yarn start

Dependiendo de dónde vamos a probar nuestra aplicación, seleccionaremos la opción de la CLI interactiva que se nos presenta luego de ejecutar yarn start.

Para el ejemplo utilizaremos un emulador Android (Opción a).

La pantalla del dispositivo presentará algo como lo siguiente:

react-native-imei

Es una librería de React Native que nos permite obtener fácilmente el IMEI, siempre y cuando la aplicación se esté ejecutando en un dispositivo Android y tenga el permiso READ_PHONE_STATE. Es la librería que utilizaremos para nuestro ejemplo.

Integrando react-native-imei a nuestro proyecto

Para agregar la librería a nuestro ejemplo, ejecutaremos el siguiente comando:

yarn add react-native-imei

Dado que react-native-imei es una librería que incluye código nativo, debemos enlazarla a nuestra aplicación.

Previo al enlace de nuestra librería nativa, necesitaremos hacer eject desde nuestra aplicación CRNA (Create React Native App) para convertirla en una aplicación React Native Regular. Los pasos a seguir se describen en la documentación oficial de CRNA. La salida del proceso se verá similar a lo siguiente:

Luego de realizar el proceso de eject, podremos enlazar nuestra librería:

react-native link react-native-imei 

La salida será similar a lo siguiente:

Una vez que nuestra librería esté enlazada ya podremos hacer uso de ella; para ello modificaremos el archivo App.js que se encuentra en la raíz de nuestro proyecto.

Primero modificaremos la función render para que muestre un botón (TouchableOpacity)que será el encargado de mostrar el IMEI del dispositivo en un campo de texto.

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

Adicional a esto, inicializaremos DeviceIMEI como parte del estado en el constructor del componente App:

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

Finalmente implementaremos la función getDeviceIMEI que contiene la lógica para recuperar el IMEI del dispositivo:

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

El archivo completo tendrá la siguiente forma:

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',
},
})

Probando el funcionamiento en un emulador

Para probar el funcionamiento de nuestra app, abriremos el directorio android/ en Android Studio.

El siguiente paso es arrancar Metro Bundler mediante yarn start:

Como paso final, ejecutaremos nuestra app en un emulador desde Android Studio, el directorio será reconocido como un proyecto Android:

Cuando presionemos el botón CLICK HERE TO GET DEVICE IMEI, obtendremos el IMEI del dispositivo:

Conclusión

Si bien la integración de React Native con funcionalidades y recursos específicos del dispositivo Android no es tan trivial como si se tratase de un proyecto con código 100% nativo, tampoco es misión imposible si hacemos uso de librerías de terceros que facilitan el trabajo y nos asesoramos con gente de mayor experiencia en el área.

Para que tengas una mejor guía, el código que se ha trabajado al escribir este artículo se encuentra en el siguiente repositorio:

Si el artículo te gustó, por favor aplaude tantas veces como desees. Para ver historias similares acerca de tecnología, mira nuestras publicaciones. No dudes en dejarnos en la caja de comentarios cualquier inquietud o sugerencia que tengas.

Si necesitas un gran equipo que te asesore en plasmar tus ideas en React JS o React Nativo, no dudes en contactarnos. Puedes ir a nuestro sitio web y llenar el formulario y nos contactaremos contigo a la brevedad posible.

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

Solución de problemas

Problema: Al crear la aplicación mediante create-react-native-app, al final aparece el siguiente mensaje:

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

Causa: Usualmente se debe a que el paquete create-react-app utiliza (actualizado al momento de escribir esta publicación) una versión discontinuada de Yarn. Este mensaje se encuentra en las lineas iniciales luego de ejecutar el comando create-react-app:

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

Solución: Actualizaremos la versión de Yarn como se sugiere en las lineas posteriores:

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

Y verificamos que la versión de Yarn se encuentre actualizada:

yarn --version

Si la versión de Yarn no ha cambiado, forzaremos la actualización a una versión especifica, la estable más reciente(1.7.0 al momento de escribir este artículo)

npm install -g yarn@1.7.0

Y verificamos nuevamente la versión.

Borramos el directorio creado que dio el error:

rm -rf ReactIMEI

Finalmente creamos la aplicación:

create-react-native-app ReactIMEI

Problema:

react-native: command not found

Causa: El módulo react-native-cli no se encuentra instalado en nuestro sistema.

Solución: Instalar el módulo mediante NPM:

npm install -g react-native-cli
Like what you read? Give Miguel Torres a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.