Add kotlin sample code in "Integration with an Android Fragment" documentation (#2977)

Co-authored-by: Andrei Shikov <[email protected]>
Co-authored-by: Nicola Corti <[email protected]>
Co-authored-by: Simek <[email protected]>

Author: 4 people

docs/integration-with-android-fragment.md

@@ -3,6 +3,8 @@ id: integration-with-android-fragment
 title: Integration with an Android Fragment
 ---
 
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
 The guide for [Integration with Existing Apps](https://reactnative.dev/docs/integration-with-existing-apps) details how to integrate a full-screen React Native app into an existing Android app as an Activity. To use React Native components within Fragments in an existing app requires some additional setup. The benefit of this is that it allows for a native app to integrate React Native components alongside native fragments in an Activity.
 
 ### 1. Add React Native to your app
@@ -17,12 +19,50 @@ You will need to implement the ReactApplication interface in your main Applicati
 
 Ensure your main Application Java class implements ReactApplication:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class MyReactApplication: Application(), ReactApplication {...}
+```
+
+</TabItem>
+<TabItem value="java">
+
 ```java
 public class MyReactApplication extends Application implements ReactApplication {...}
 ```
 
+</TabItem>
+</Tabs>
+
 Override the required methods `getUseDeveloperSupport`, `getPackages` and `getReactNativeHost`:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+class MyReactApplication : Application(), ReactApplication {
+    override fun onCreate() {
+        super.onCreate()
+        SoLoader.init(this, false)
+    }
+    private val reactNativeHost =
+        object : ReactNativeHost(this) {
+            override fun getUseDeveloperSupport() = BuildConfig.DEBUG
+            override fun getPackages(): List<ReactPackage> {
+                val packages = PackageList(this).getPackages().toMutableList()
+                // Packages that cannot be autolinked yet can be added manually here
+                return packages
+            }
+        }
+    override fun getReactNativeHost(): ReactNativeHost = reactNativeHost
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
 ```java
 public class MyReactApplication extends Application implements ReactApplication {
     @Override
@@ -51,8 +91,27 @@ public class MyReactApplication extends Application implements ReactApplication
 }
 ```
 
+</TabItem>
+</Tabs>
+
 If you are using Android Studio, use Alt + Enter to add all missing imports in your class. Alternatively these are the required imports to include manually:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+import android.app.Application
+
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.soloader.SoLoader
+```
+
+</TabItem>
+<TabItem value="java">
+
 ```java
 import android.app.Application;
 
@@ -65,6 +124,9 @@ import com.facebook.soloader.SoLoader;
 import java.util.List;
 ```
 
+</TabItem>
+</Tabs>
+
 Perform a "Sync Project files with Gradle" operation.
 
 ### Step 3. Add a FrameLayout for the React Native Fragment
@@ -101,12 +163,49 @@ Now in your Activity class e.g. `MainActivity.java` you need to add an OnClickLi
 
 Add the button field to the top of your Activity:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+private lateinit var button: Button
+```
+
+</TabItem>
+<TabItem value="java">
+
 ```java
 private Button mButton;
 ```
 
+</TabItem>
+</Tabs>
+
 Update your Activity's onCreate method as follows:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+override fun onCreate(savedInstanceState: Bundle) {
+    super.onCreate(savedInstanceState)
+    setContentView(R.layout.main_activity)
+    button = findViewById<Button>(R.id.button)
+    button.setOnClickListener {
+        val reactNativeFragment = ReactFragment.Builder()
+                .setComponentName("HelloWorld")
+                .setLaunchOptions(getLaunchOptions("test message"))
+                .build()
+        getSupportFragmentManager()
+                .beginTransaction()
+                .add(R.id.reactNativeFragment, reactNativeFragment)
+                .commit()
+    }
+}
+```
+
+</TabItem>
+<TabItem value="java">
+
 ```java
 @Override
 protected void onCreate(Bundle savedInstanceState) {
@@ -131,12 +230,28 @@ protected void onCreate(Bundle savedInstanceState) {
 }
 ```
 
+</TabItem>
+</Tabs>
+
 In the code above `Fragment reactNativeFragment = new ReactFragment.Builder()` creates the ReactFragment and `getSupportFragmentManager().beginTransaction().add()` adds the Fragment to the Frame Layout.
 
 If you are using a starter kit for React Native, replace the "HelloWorld" string with the one in your `index.js` or `index.android.js` file (it’s the first argument to the AppRegistry.registerComponent() method).
 
 Add the `getLaunchOptions` method which will allow you to pass props through to your component. This is optional and you can remove `setLaunchOptions` if you don't need to pass any props.
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+private fun getLaunchOptions(message: String) = Bundle().apply {
+    putString("message", message)
+}
+
+```
+
+</TabItem>
+<TabItem value="java">
+
 ```java
 private Bundle getLaunchOptions(String message) {
     Bundle initialProperties = new Bundle();
@@ -145,8 +260,28 @@ private Bundle getLaunchOptions(String message) {
 }
 ```
 
+</TabItem>
+</Tabs>
+
 Add all missing imports in your Activity class. Be careful to use your package’s BuildConfig and not the one from the facebook package! Alternatively these are the required imports to include manually:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
+
+```kotlin
+import android.app.Application
+
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.shell.MainReactPackage
+import com.facebook.soloader.SoLoader
+
+```
+
+</TabItem>
+<TabItem value="java">
+
 ```java
 import android.app.Application;
 
@@ -157,6 +292,9 @@ import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
 ```
 
+</TabItem>
+</Tabs>
+
 Perform a "Sync Project files with Gradle" operation.
 
 ### Step 5. Test your integration

website/core/TabsConstants.js

@@ -19,6 +19,13 @@ const packageManagers = [
 ];
 const defaultPackageManager = 'npm';
 
+const androidLanguages = [
+  {label: 'Java', value: 'java'},
+  {label: 'Kotlin', value: 'kotlin'},
+];
+
+const defaultAndroidLanguage = 'java';
+
 const guides = [
   {label: 'Expo CLI Quickstart', value: 'quickstart'},
   {label: 'React Native CLI Quickstart', value: 'native'},
@@ -52,10 +59,12 @@ export default {
   defaultPackageManager,
   defaultPlatform,
   defaultSyntax,
+  defaultAndroidLanguage,
   getDevNotesTabs,
   guides,
   oses,
   packageManagers,
   platforms,
   syntax,
+  androidLanguages,
 };