integrate with react native

.gitignore

@@ -31,6 +31,7 @@ migrate_working_dir/
 .pub-cache/
 .pub/
 /build/
+/ios/build/
 
 # Web related
 lib/generated_plugin_registrant.dart
@@ -45,3 +46,4 @@ app.*.map.json
 /android/app/debug
 /android/app/profile
 /android/app/release
+node_modules

android/app/build.gradle

@@ -47,7 +47,7 @@ android {
         applicationId "com.example.flutter_call_native"
         // You can update the following values to match your application needs.
         // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.
-        minSdkVersion flutter.minSdkVersion
+        minSdkVersion 21
         targetSdkVersion flutter.targetSdkVersion
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
@@ -66,6 +66,16 @@ flutter {
     source '../..'
 }
 
+def jscFlavor = 'org.webkit:android-jsc:+'
+
 dependencies {
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+    implementation fileTree(dir: "libs", include: ["*.jar"])
+
+    //noinspection GradleDynamicVersion
+    implementation "com.facebook.react:react-native:+"  // From node_modules
+
+    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
+    implementation jscFlavor
+
 }

android/app/src/main/AndroidManifest.xml

@@ -1,17 +1,25 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.example.flutter_call_native">
+
+   <uses-permission android:name="android.permission.INTERNET" />
+
+
+
    <application
         android:label="flutter_call_native"
         android:name="${applicationName}"
-        android:icon="@mipmap/ic_launcher">
+        android:icon="@mipmap/ic_launcher"
+        android:usesCleartextTraffic="true"
+    >
         <activity
             android:name=".MainActivity"
             android:exported="true"
             android:launchMode="singleTop"
             android:theme="@style/LaunchTheme"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
             android:hardwareAccelerated="true"
-            android:windowSoftInputMode="adjustResize">
+            android:windowSoftInputMode="adjustResize"
+          >
             <!-- Specifies an Android theme to apply to this Activity as soon as
                  the Android process has started. This theme is visible to the user
                  while the Flutter UI initializes. After that, this theme continues
@@ -25,6 +33,11 @@
                 <category android:name="android.intent.category.LAUNCHER"/>
             </intent-filter>
         </activity>
+        <activity
+            android:name=".RNModuleActivity"
+            android:label="flutter_call_react"
+            android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
+        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
         <!-- Don't delete the meta-data below.
              This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
         <meta-data

android/app/src/main/kotlin/com/example/flutter_call_native/MainActivity.kt

@@ -3,6 +3,7 @@ package com.example.flutter_call_native
 import io.flutter.embedding.android.FlutterActivity
 import io.flutter.embedding.engine.FlutterEngine
 import io.flutter.plugin.common.*
+import android.content.Intent
 
 class MainActivity: FlutterActivity() {
     override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
@@ -15,14 +16,17 @@ class MainActivity: FlutterActivity() {
         // responsible to send the results of the call.
         MethodChannel(flutterEngine.dartExecutor, "methodChannelDemo")
                 .setMethodCallHandler { call, result ->
-                    val count: Int? = call.argument<Int>("count")
+                    val state: Int? = call.argument<Int>("state")
 
-                    if (count == null) {
-                        result.error("INVALID ARGUMENT", "Value of count cannot be null", null)
+                    if (state == null) {
+                        result.error("INVALID ARGUMENT", "Value of state cannot be null", null)
                     } else {
                         when (call.method) {
-                            "increment" -> result.success(count + 1)
-                            "decrement" -> result.success(count - 1)
+                            "goToReact" -> {
+                                val intent = Intent(this@MainActivity, RNModuleActivity::class.java)
+                                startActivity(intent)
+                                result.success(state)
+                            }
                             else -> result.notImplemented()
                         }
                     }

android/app/src/main/kotlin/com/example/flutter_call_native/RNModuleActivity.kt

@@ -0,0 +1,80 @@
+package com.example.flutter_call_native
+
+import android.app.Activity
+import android.os.Bundle
+import android.view.KeyEvent
+import com.facebook.react.ReactInstanceManager
+import com.facebook.react.ReactRootView
+import com.facebook.react.common.LifecycleState
+import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler
+import com.facebook.react.shell.MainReactPackage
+import com.facebook.soloader.SoLoader
+
+
+class RNModuleActivity : Activity(), DefaultHardwareBackBtnHandler {
+  private var mReactRootView: ReactRootView? = null
+  private var mReactInstanceManager: ReactInstanceManager? = null
+
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(savedInstanceState)
+    SoLoader.init(this, false)
+
+    // If not, navigation.goBack() not working
+    mReactRootView = ReactRootView(this);
+    mReactInstanceManager = ReactInstanceManager.builder()
+        .setApplication(application)
+        .setCurrentActivity(this)
+        .setBundleAssetName("index.android.bundle")
+        .setJSMainModulePath("index")
+        .addPackage(MainReactPackage())
+        .setUseDeveloperSupport(BuildConfig.DEBUG)
+        .setInitialLifecycleState(LifecycleState.RESUMED)
+        .build()
+
+    // Send message from native code
+    val initialProperties = Bundle()
+    initialProperties.putString("message_from_native", intent?.extras?.get("message_from_native")?.toString())
+
+    val mLaunchOptions = Bundle()
+    mLaunchOptions.putString("foo", "bar") 
+
+    mReactRootView?.startReactApplication(mReactInstanceManager, "MyReactNativeApp", mLaunchOptions)
+    setContentView(mReactRootView)
+  }
+
+  override fun invokeDefaultOnBackPressed() {
+    super.onBackPressed()
+  }
+
+  override fun onPause() {
+    super.onPause()
+    mReactInstanceManager?.onHostPause(this)
+  }
+
+  override fun onResume() {
+    super.onResume()
+    mReactInstanceManager?.onHostResume(this, this)
+  }
+
+  override fun onDestroy() {
+    super.onDestroy()
+    mReactInstanceManager?.onHostDestroy(this)
+    mReactRootView?.unmountReactApplication()
+  }
+
+  override fun onBackPressed() {
+    if (mReactInstanceManager != null) {
+      mReactInstanceManager!!.onBackPressed()
+    } else {
+      super.onBackPressed()
+    }
+  }
+
+  override fun onKeyUp(keyCode: Int, event: KeyEvent): Boolean {
+    if (keyCode == KeyEvent.KEYCODE_MENU) {
+      mReactInstanceManager?.showDevOptionsDialog()
+      return true
+    }
+    return super.onKeyUp(keyCode, event)
+  }
+}

android/build.gradle

@@ -1,20 +1,50 @@
 buildscript {
-    ext.kotlin_version = '1.6.10'
+    ext {
+        kotlin_version = '1.6.10'
+        buildToolsVersion = "31.0.0"
+        minSdkVersion = 21
+        compileSdkVersion = 31
+        targetSdkVersion = 31
+
+        if (System.properties['os.arch'] == "aarch64") {
+            // For M1 Users we need to use the NDK 24 which added support for aarch64
+            ndkVersion = "24.0.8215888"
+        } else {
+            // Otherwise we default to the side-by-side NDK version from AGP.
+            ndkVersion = "21.4.7075529"
+        }
+    }
     repositories {
         google()
         mavenCentral()
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:7.1.2'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+        classpath 'com.android.tools.build:gradle:7.1.2'
+        classpath "de.undercouch:gradle-download-task:5.0.1"
     }
 }
 
 allprojects {
     repositories {
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url("$rootDir/../node_modules/react-native/android")
+        }
+        maven {
+            // Android JSC is installed from npm
+            url("$rootDir/../node_modules/jsc-android/dist")
+        }
+        mavenCentral {
+            // We don't want to fetch react-native from Maven Central as there are
+            // older versions over there.
+            content {
+                excludeGroup "com.facebook.react"
+            }
+        }
         google()
-        mavenCentral()
+        maven { url 'https://www.jitpack.io' }
     }
 }
 

index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View
+} from 'react-native';
+
+const MyReactNativeApp = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.hello}>
+        Hello World 
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF'
+  },
+  hello: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10
+  },
+});
+
+// Module name
+AppRegistry.registerComponent('MyReactNativeApp', () => MyReactNativeApp);

ios/Flutter/Debug.xcconfig

@@ -1 +1,2 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
 #include "Generated.xcconfig"

ios/Flutter/Release.xcconfig

@@ -1 +1,2 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"
 #include "Generated.xcconfig"

ios/Podfile

@@ -0,0 +1,30 @@
+require_relative '../node_modules/react-native/scripts/react_native_pods'
+require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+
+platform :ios, '12.4'
+install! 'cocoapods', :deterministic_uuids => false
+
+production = ENV["PRODUCTION"] == "1"
+
+target 'Runner' do
+  config = use_native_modules!
+
+  # Flags change depending on the env values.
+  flags = get_default_flags()
+
+  use_react_native!(
+    :path => config[:reactNativePath],
+    # to enable hermes on iOS, change `false` to `true` and then install pods
+    :production => production,
+    :hermes_enabled => flags[:hermes_enabled],
+    :fabric_enabled => flags[:fabric_enabled],
+    :flipper_configuration => FlipperConfiguration.enabled,
+    # An absolute path to your application root.
+    :app_path => "#{Pod::Config.instance.installation_root}/.."
+  )
+
+  post_install do |installer|
+    react_native_post_install(installer)
+    __apply_Xcode_12_5_M1_post_install_workaround(installer)
+  end
+end