Edit - [TIT]Spinfood

Crear proyecto base en React Native

Crea un nuevo proyecto de React Native:

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

Inicia Metro en el directorio de tu proyecto:

1yarn start

Ejecuta tu proyecto de React Native en Android y iOS:

1yarn android

1yarn 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:

1{
"name": "MyReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "yarn react-native start"
}
8}

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

1yarn add react-native

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

1includeBuild('../node_modules/react-native-gradle-plugin')

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

1buildscript {
repositories {
google()
mavenCentral()
}
dependencies {
	classpath("com.android.tools.build:gradle:7.3.1")
	classpath("com.facebook.react:react-native-gradle-plugin")
}
10}

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

1apply plugin: "com.android.application"
2apply plugin: "com.facebook.react"
3
4repositories {
5	mavenCentral()
6}
7
8dependencies {
9	// Other dependencies here
10	implementation "com.facebook.react:react-android"
11	implementation "com.facebook.react:hermes-android"
12}

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

1apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

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

1apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

Agrega el permiso de internet en el AndroidManifest.xml:

1<uses-permission android:name="android.permission.INTERNET" />

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

1<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

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

1<!-- ... -->
2<application
3	android:usesCleartextTraffic="true" tools:targetApi="28" >
4	<!-- ... -->
5</application>
6<!-- ... -->

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

1import React from 'react';
2import {AppRegistry, StyleSheet, Text, View} from 'react-native';
3
4const App = () => {
5	return (
6		<View style={styles.container}>
7			<Text style={styles.hello}>Hello, World</Text>
8		</View>
9	);
10};
11
12var styles = StyleSheet.create({
13	container: {
14		flex: 1,
15		justifyContent: 'center',
16	},
17	hello: {
18		fontSize: 20,
19		textAlign: 'center',
20		margin: 10,
21	},
22});
23
24export default App;
25
26AppRegistry.registerComponent(
27	'MyReactNativeApp',
28	() => App,
29);

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:

1distributionUrl=https\\://services.gradle.org/distributions/gradle-7.5.1-all.zip

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:

1import android.os.Build
2import android.provider.Settings
3
4...
5
6companion object {
7	const val OVERLAY_PERMISSION_REQ_CODE = 1  // Choose any value
8}
9
10...
11
12// Inside onCreate method:
13if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
14	if(!Settings.canDrawOverlays(this)) {
15		val intent = Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
16		Uri.parse("package: $packageName"))
17		startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
18	}
19}

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

1override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
      super.onActivityResult(requestCode, resultCode, data)
      if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
              if (!Settings.canDrawOverlays(this)) {
                  // SYSTEM_ALERT_WINDOW permission not granted
              }
          }
      }
      reactInstanceManager?.onActivityResult(this, requestCode, resultCode, data)
  }

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

1class MyReactActivity : Activity(), DefaultHardwareBackBtnHandler {
  private lateinit var reactRootView: ReactRootView
  private lateinit var reactInstanceManager: ReactInstanceManager
  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      SoLoader.init(this, false)
      reactRootView = ReactRootView(this)
      val packages: List<ReactPackage> = PackageList(application).packages
      // Packages that cannot be autolinked yet can be added manually here, for example:
      // packages.add(MyReactNativePackage())
      // Remember to include them in `settings.gradle` and `app/build.gradle` too.
      reactInstanceManager = ReactInstanceManager.builder()
          .setApplication(application)
          .setCurrentActivity(this)
          .setBundleAssetName("index.android.bundle")
          .setJSMainModulePath("index")
          .addPackages(packages)
          .setUseDeveloperSupport(BuildConfig.DEBUG)
          .setInitialLifecycleState(LifecycleState.RESUMED)
          .build()
      // The string here (e.g. "MyReactNativeApp") has to match
      // the string in AppRegistry.registerComponent() in index.js
      reactRootView?.startReactApplication(reactInstanceManager, "MyReactNativeApp", null)
      setContentView(reactRootView)
  }
26
  override fun invokeDefaultOnBackPressed() {
      super.onBackPressed()
  }
30}

En Android Studio ve a File > Sync Project With Gradle Files .
En el AndroidManifest.xml agrega el siguiente theme a tu activity launcher:

1<activity
2	android:name=".MyReactActivity"
3	android:label="@string/app_name"
4	android:theme="@style/Theme.AppCompat.Light.NoActionBar">
5</activity>

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

1override fun onPause() {
2	super.onPause()
3	reactInstanceManager.onHostPause(this)
4}
5
6override fun onResume() {
7	super.onResume()
8	reactInstanceManager.onHostResume(this, this)
9}
10
11override fun onDestroy() {
12	super.onDestroy()
13	reactInstanceManager.onHostDestroy(this)
14	reactRootView.unmountReactApplication()
15}
16
17override fun onBackPressed() {
18    reactInstanceManager.onBackPressed()
19    super.onBackPressed()
20}
21
22override fun onKeyUp(keyCode: Int, event: KeyEvent?): Boolean {
23    if (keyCode == KeyEvent.KEYCODE_MENU && reactInstanceManager != null) {
24        reactInstanceManager.showDevOptionsDialog()
25        return true
26    }
27    return super.onKeyUp(keyCode, event)
28}

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:

1yarn start

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:

1"scripts": {
...
  "android": "react-native run-android --appIdSuffix debug --variant wii2Debug --main-activity com.gigigo.wii.view.splash.SplashActivity",  // Compila la app en Debug
  "android:qa": "react-native run-android --appIdSuffix qa --variant wii2Qa --main-activity com.gigigo.wii.view.splash.SplashActivity",  // Compila la app en QA
  ...
},

// Las flag --variant <string> indican el ambiente, --main-activity <string> es la activity/pantalla a ejecutar (launcher), --appIdSuffix <string> indica el sufijo id de la app.

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

1yarn android

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

1yarn android: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