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

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

yarn start

yarn android

yarn ios

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

yarn add react-native

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

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

apply plugin: "com.android.application"
apply plugin: "com.facebook.react"

repositories {
	mavenCentral()
}

dependencies {
	// Other dependencies here
	implementation "com.facebook.react:react-android"
	implementation "com.facebook.react:hermes-android"
}

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

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

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

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

<!-- ... -->
<application
	android:usesCleartextTraffic="true" tools:targetApi="28" >
	<!-- ... -->
</application>
<!-- ... -->

import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';

const App = () => {
	return (
		<View style={styles.container}>
			<Text style={styles.hello}>Hello, World</Text>
		</View>
	);
};

var styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
	},
	hello: {
		fontSize: 20,
		textAlign: 'center',
		margin: 10,
	},
});

export default App;

AppRegistry.registerComponent(
	'MyReactNativeApp',
	() => App,
);

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

import android.os.Build
import android.provider.Settings

...

companion object {
	const val OVERLAY_PERMISSION_REQ_CODE = 1  // Choose any value
}

...

// Inside onCreate method:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
	if(!Settings.canDrawOverlays(this)) {
		val intent = Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
		Uri.parse("package: $packageName"))
		startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
	}
}

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

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

    override fun invokeDefaultOnBackPressed() {
        super.onBackPressed()
    }
}

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

override fun onPause() {
	super.onPause()
	reactInstanceManager.onHostPause(this)
}

override fun onResume() {
	super.onResume()
	reactInstanceManager.onHostResume(this, this)
}

override fun onDestroy() {
	super.onDestroy()
	reactInstanceManager.onHostDestroy(this)
	reactRootView.unmountReactApplication()
}

override fun onBackPressed() {
    reactInstanceManager.onBackPressed()
    super.onBackPressed()
}

override fun onKeyUp(keyCode: Int, event: KeyEvent?): Boolean {
    if (keyCode == KeyEvent.KEYCODE_MENU && reactInstanceManager != null) {
        reactInstanceManager.showDevOptionsDialog()
        return true
    }
    return super.onKeyUp(keyCode, event)
}

yarn start

yarn android --mode wii2debug --main-activity com.gigigo.wii.view.splash.SplashActivity --appId com.gigigo.wii.debug