Crear un módulo nativo con React Native
Hoy quiero compartir con ustedes una herramienta muy poderosa que podría alegrarles la vida en tiempos difíciles. Se trata de crear módulos para Android mediante el uso de Módulos Nativos en React Native. De esta forma, podremos acceder a todas las herramientas que Android nos ofrece, pudiendo implementar casi cualquier funcionalidad que queramos de forma nativa.
¿Suena difícil? En verdad no lo es y tampoco se requieren grandes conocimientos en Java para lograrlo. ¡Vamos a verlo!
Primero iniciaremos un nuevo proyecto de React Native con código nativo, tal como menciona la documentación:
Una vez creado nuestro nuevo “AwesomeProject”, lo primero que tenemos que hacer es crear un Módulo Nativo. A través de este link pueden ver y seguir la documentación de React Native para crear Módulos Nativos personalizados.
Para ello es recomendable utilizar Android Studio, ya que tiene opciones de autocompletado de código que ayudarán con la importación de paquetes, etc.
Nos dirigimos a la carpeta “java/com.awesomeproject/” y creamos los archivos “ConnectionStatusModuleManager.java” y “ConnectionStatusModulePackage.java”.
“ConnectionStatusModuleManager” será el encargado de suministrar las funciones que podremos llamar desde nuestro componente JS.
Definimos la clase según la documentación de React Native:
Es importante declarar el método “getName” devolviendo el nombre del modulo ya que más adelante, accederemos al Módulo Nativo mediante este string.
El método “checkConnectionStatus” acompañado por la annotation @ReactMethod será la forma a través de la cual comprobaremos (más adelante) de forma nativa el estado de la conexión ya sea vía WI-FI o Móvil. Este tipo de métodos nos permiten recibir callbacks para así de esta forma mantener una comunicación con el componente JS. Este es un detalle importante ya que toda la información que debamos enviar desde Nativo hasta nuestro componente JS debe ser transportada mediante el callback.
De momento dejaremos el nombre del método y devolveremos ese fabuloso string para comprender el funcionamiento del flujo.
Volviendo al archivo antes mencionado (ConnectionStatusModulePackage), según la documentación, lo definiremos de la siguiente forma:
Una vez definidas las bases de nuestro nuevo paquete, procedemos a crear una nueva instancia de nuestro módulo nativo y agregarlo a la lista de paquetes que serán cargados por React Native, para luego poder importarlo desde nuestros componentes JS.
Nos dirigimos a “/MainAplication.java” y agregamos nuestro paquete al “getPackages”:
El siguiente paso es importar nuestro nuevo módulo nativo en nuestro componente JS. Nos dirigimos a “AwesomeProject/app.js” e importamos NativeModules:
*Importante: El nombre “ConnectionStatusModule” corresponde con el string que utilizamos en la función getName() del ConnectionStatusModuleManager.java)*
Luego simplemente podemos llamar al método desde cualquier lugar de nuestro código.
¡Vamos a probar que tal funciona nuestro código nativo!
Para ello vamos a llamar a nuestro módulo luego de 3 segundos de que se monta el componente. Mediante el modulo enviaremos un Callback para recibir un String el cual luego mostraremos por la pantalla, utilizando asi, un string creado en el modulo nativo y dialogando con nuestro componente JS.
En el mismo archivo, “AwesomeProyect/app.js”, agregamos lo siguiente:
Recuerda declarar los estilos utilizados por los componentes (si es que tu proyecto no los tiene) *
¡Ahora corramos la app en un simulador a ver como funciona!
Una vez deslumbrados con la magnificencia de nuestro string, vamos a agregar una verdadera funcionalidad.
En este caso vamos a pedirle al módulo nativo que cada 3 segundos nos de una actualización del status de la red.
Para ellos comprobaremos prioritariamente si existe una conexión Móvil. En caso contrario, comprobaremos por una conexión WI-FI, de lo contrario mostraremos un mensaje indicando “DESCONECTADO”.
Tener en cuenta que si WI-FI y Móvil están activas conjuntamente, móvil permanecerá como Desconectada.
Empecemos agregando a nuestro app.js el código necesario:
Por ultimo volvemos a nuestro “ConnectionStatusModuleManage” donde agregaremos el connectivityManager y reemplazamos CheckConnectionStatus por lo siguiente:
Donde “connectivity.getActiveNetworkInfo()” nos devuelve toda la información de la red que se encuentre activa. Luego, mediante “activeNetwork.getType()” comprobaremos que tipo de conexión está activa para finalmente devolver el nombre de la misma y un booleano indicándolo. Mas información aquí Android Example
Como comente anteriormente, este método se encargará de avisarnos si la red móvil o wifi están activas, según el orden de prioridad y luego devolverá esa información mediante el uso del callback.
Antes de finalizar, será necesario agregar el siguiente permiso al AndroidManifest.xml
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />Ya que sin él no podremos acceder a la información deseada.
¡Listo! ¡Ahora a buildear y probar!
¡Eso sería todo! Este es un ejemplo sencillo para entender cómo con unos simples pasos podemos acceder a todas las herramientas y funcionalidades que Android nos provee. El límite se encuentra en vos.
Si te gustó este post , regalame unas manitos, seguime para ver mas contenido y prestá atención a la parte 2, “Servicios de android mediante Módulos Nativos de React Native”. ¡Llegará pronto!
¡No te olvides de dejar tus saludos, comentarios o dudas!
