⚛️Integración React Native con apps existentes (Android)

Owned by Rolando Selvera (Unlicensed)
Last updated: Mar 16, 2023
6 min read

Crear proyecto base en React Native

  • Crea un nuevo proyecto de React Native:

npx react-native@latest init NombreDeProyecto --template react-native-template-typescript

  • Inicia Metro en el directorio de tu proyecto:

yarn start

  • Ejecuta tu proyecto de React Native en Android y iOS:

yarn android

Integrar proyecto existente Android a proyecto React Native

NOTA: Antes de comenzar, verifica que tu proyecto Android compila correctamente con Android Studio y ejecútalo en un emulador o dispositivo físico.

  • En tu proyecto de React Native, ve al directorio /android y elimina todo el contenido. Asegúrate de eliminar también los elementos ocultos (en MacOS: CMD + Shift + .)

  • Copia tu proyecto existente Android en tu proyecto React Native en el directorio /android.

  • Verifica que tu package.json contenga las siguientes propiedades, si no es así, agrégalas:

  • Abre una terminal en la raíz de tu proyecto React Native y ejecuta el siguiente comando para agregar las dependencias (/node_modules):

  • Agrega en el archivo settings.gradle la siguiente línea:

  • Agrega en el archivo build.gradle en la raíz de tu proyecto la siguiente dependencia:

  • Agrega en el archivo app/build.gradle (a nivel de app) las siguientes dependencias:

  • Agrega en el archivo settings.gradle lo siguiente (autolinking):

  • Agrega al final del archivo app/build.gradle (a nivel de app) lo siguiente (autolinking):

  • Agrega el permiso de internet en el AndroidManifest.xml:

  • Agrega lo siguiente en el AndroidManifest.xml (solo se usa en el modo de desarrollo cuando se vuelve a cargar JavaScript desde el servidor de desarrollo, por lo que puede quitarlo en las compilaciones de lanzamiento si es necesario):

  • Agrega la siguiente opción en el AndroidManifest.xml:

  • En tu App.tsx agrega lo siguiente (register component):

  • Para las siguientes modificaciones, abre el proyecto Android que integraste dentro del directorio /android de tu proyecto React Native. Al abrirlo, comenzará a compilar el proyecto automáticamente. Si te da el siguiente error al compilar This declaration is experimental and its usage must be marked with '@kotlin.ExperimentalStdlibApi' or '@OptIn(kotlin.ExperimentalStdlibApi::class)’ entonces modifica en el archivo gradle-wrapper.properties la propiedad distributionUrl para que quede de la siguiente forma y vuelve a compilar el proyecto:

  • En tu activity launcher (en el caso de la app de Diiki B2C, agregar en la clase BaseActivityBinder ), en el método onCreate agrega lo siguiente:

  • Agrega fuera del método onCreate lo siguiente (en el caso de la app de Diiki B2C, agregar en la clase BaseActivityBinder ):

  • Agrega la siguiente configuración en tu activity launcher (algunas van dentro del método onCreate) (en el caso de la app de Diiki B2C, agregar en la clase BaseActivityBinder ):

  • En Android Studio ve a File > Sync Project With Gradle Files .

  • En el AndroidManifest.xml agrega el siguiente theme a tu activity launcher:

  • Agrega lo siguiente a tu activity launcher (en el caso de la app de Diiki B2C, agregar en la clase BaseActivityBinder ):

  • Ejecuta la app desde Android Studio para confirmar que no presente errores. Puede ser que se requieran actualizar determinadas dependencias en app/build.gradle.

  • Si ya no tienes errores con el paso anterior, toca ahora ejecutar la app desde el proyecto de React Native. Abre una terminal, ve a tu proyecto e inicia Metro con el siguiente comando:

  • En el archivo package.json que se encuentra en el directorio raíz del proyecto React Native, agrega las variables de compilación (ambiente) y verifica que coincidan con las variantes en app/build.gradle o build variants de tu proyecto Android. Para la app Diiki B2C establecemos lo siguiente:

  • Ejecuta el proyecto Android con el siguiente comando (debug):

  • Ejecuta el proyecto Android con el siguiente comando (qa):

Issues Android (15 Mar 2023):

  • Problema con consola de depuración Metro (React Native). No detecta los comandos “reload (r)", "open developer menu (d)", da el siguiente error (ver imagen más abajo): No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB . Cabe mencionar que si detecta Metro al iniciar la app desde React Native (muestra una barra de progreso al compilar y ejecutar la app) pero esos comandos no los detecta. En la documentación oficial mencionan sobre agregar al AndroidManifest.xml la propiedad android:usesCleartextTraffic="true" para que Metro establezca esa comunicación con la app, esa propiedad se agregó pero el problema persiste.

SOLUCIÓN: Se “mueve” la lógica de integración Android del activity launcher (SplashActivity) a la clase BaseActivityBinder . Esta clase tiene el papel de ser la superclase o clase padre de la mayoría de las pantallas (activity) del proyecto B2C Android. Al hacer esta modificación y usar los comandos en la terminal de Metro “reload (r)" y "open developer menu (d)" se eliminó el error y ya muestra el menú en modo desarrollador (ver imagen abajo).

Referencias:

Integration with Existing Apps · React Native

Integrating react native with existing Android and iOS native projects