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

Crear proyecto base en React Native

• Crea un nuevo proyecto de React Native:

• Inicia Metro en el directorio de tu proyecto:

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

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.

Open

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

Open

Referencias:

Integration with Existing Apps · React Native

Integrating react native with existing Android and iOS native projects