From 7c169ec854acdc1a0ef3d998c5cfe98f589193da Mon Sep 17 00:00:00 2001
From: Alan Hughes <hughesno1@gmail.com>
Date: Thu, 24 Mar 2022 14:15:14 +0000
Subject: [PATCH 1/8] integration-with-android-fragment

---
 website/core/TabsConstants.js                 |   3 +
 .../integration-with-android-fragment.md      | 173 +++++++++---------
 2 files changed, 91 insertions(+), 85 deletions(-)

diff --git a/website/core/TabsConstants.js b/website/core/TabsConstants.js
index 8aa29583a02..0aaf12d0760 100644
--- a/website/core/TabsConstants.js
+++ b/website/core/TabsConstants.js
@@ -23,7 +23,10 @@ const androidLanguages = [
   {label: 'Java', value: 'java'},
   {label: 'Kotlin', value: 'kotlin'},
 ];
+<<<<<<< HEAD
 
+=======
+>>>>>>> integration-with-android-fragment
 const defaultAndroidLanguage = 'java';
 
 const guides = [
diff --git a/website/versioned_docs/version-0.67/integration-with-android-fragment.md b/website/versioned_docs/version-0.67/integration-with-android-fragment.md
index 0a5b9677dd0..3e6a5a1f560 100644
--- a/website/versioned_docs/version-0.67/integration-with-android-fragment.md
+++ b/website/versioned_docs/version-0.67/integration-with-android-fragment.md
@@ -39,28 +39,6 @@ public class MyReactApplication extends Application implements ReactApplication
 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
@@ -92,24 +70,34 @@ 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
+class MyReactApplication: Application(), ReactApplication {
 
-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
+    override fun onCreate() {
+        super.onCreate()
+        SoLoader.init(this, false)
+    }
+
+    private val reactNativeHost = object: ReactNativeHost(this) {
+
+        override fun getUseDeveloperSupport() = BuildConfig.DEBUG
+
+        override fun getPackages() = PackageList(this).getPackages()
+    }
+
+    override fun getReactNativeHost() = reactNativeHost
+
+}
 ```
 
 </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="java">
 
 ```java
@@ -124,6 +112,20 @@ import com.facebook.soloader.SoLoader;
 import java.util.List;
 ```
 
+</TabItem>
+<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>
 </Tabs>
 
@@ -164,13 +166,6 @@ 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
@@ -178,34 +173,18 @@ 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()
-    }
-}
+private lateinit var button: Button
 ```
 
 </TabItem>
+</Tabs>
+
+Update your Activity's onCreate method as follows:
+
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
 <TabItem value="java">
 
 ```java
@@ -232,6 +211,29 @@ protected void onCreate(Bundle savedInstanceState) {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(savedInstanceState)
+    setContentView(R.layout.main_activity)
+
+    mButton = findViewById(R.id.button)
+    mButton.setOnClickListener {
+        val reactNativeFragment = ReactFragment.Builder()
+            .setComponentName("HelloWorld")
+            .setLaunchOptions(getLaunchOptions("test message"))
+            .build()
+
+        supportFragmentManager
+            .beginTransaction()
+            .add(R.id.reactNativeFragment, reactNativeFragment)
+            .commit()
+    }
+}
+```
+
 </TabItem>
 </Tabs>
 
@@ -242,16 +244,6 @@ If you are using a starter kit for React Native, replace the "HelloWorld" string
 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
@@ -263,25 +255,19 @@ 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
-
+ private fun getLaunchOptions(message: String) = Bundle().apply {
+     putString("message", 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="java">
 
 ```java
@@ -294,6 +280,19 @@ import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
 ```
 
+</TabItem>
+<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>
 </Tabs>
 
@@ -306,3 +305,7 @@ Make sure you run `yarn` to install your react-native dependencies and run `yarn
 ### Step 6. Additional setup - Native modules
 
 You may need to call out to existing Java code from your react component. Native modules allow you to call out to native code and run methods in your native app. Follow the setup here [native-modules-android](https://reactnative.dev/docs/native-modules-android)
+
+```
+
+```

From 4aa807e1dc002049faa56064637fdfc12e02a151 Mon Sep 17 00:00:00 2001
From: Alan Hughes <hughesno1@gmail.com>
Date: Thu, 24 Mar 2022 23:33:39 +0000
Subject: [PATCH 2/8] Update native-modules-android docs with Kotlin examples

---
 website/core/TabsConstants.js                 |   4 -
 .../integration-with-android-fragment.md      |   7 +-
 .../version-0.67/native-modules-android.md    | 499 +++++++++++++++++-
 3 files changed, 483 insertions(+), 27 deletions(-)

diff --git a/website/core/TabsConstants.js b/website/core/TabsConstants.js
index 0aaf12d0760..5735eb6a105 100644
--- a/website/core/TabsConstants.js
+++ b/website/core/TabsConstants.js
@@ -23,10 +23,6 @@ const androidLanguages = [
   {label: 'Java', value: 'java'},
   {label: 'Kotlin', value: 'kotlin'},
 ];
-<<<<<<< HEAD
-
-=======
->>>>>>> integration-with-android-fragment
 const defaultAndroidLanguage = 'java';
 
 const guides = [
diff --git a/website/versioned_docs/version-0.67/integration-with-android-fragment.md b/website/versioned_docs/version-0.67/integration-with-android-fragment.md
index 3e6a5a1f560..e91fe332402 100644
--- a/website/versioned_docs/version-0.67/integration-with-android-fragment.md
+++ b/website/versioned_docs/version-0.67/integration-with-android-fragment.md
@@ -84,7 +84,12 @@ class MyReactApplication: Application(), ReactApplication {
 
         override fun getUseDeveloperSupport() = BuildConfig.DEBUG
 
-        override fun getPackages() = PackageList(this).getPackages()
+        override fun getPackages(): List<ReactPackage> {
+            val packages: MutableList<ReactPackage> = PackageList(this).packages
+            // Packages that cannot be autolinked yet can be added manually here, for example:
+            // packages.add(new MyReactNativePackage());
+            return packages
+        }
     }
 
     override fun getReactNativeHost() = reactNativeHost
diff --git a/website/versioned_docs/version-0.67/native-modules-android.md b/website/versioned_docs/version-0.67/native-modules-android.md
index 811caf0ea2d..caf24ea8e58 100644
--- a/website/versioned_docs/version-0.67/native-modules-android.md
+++ b/website/versioned_docs/version-0.67/native-modules-android.md
@@ -3,11 +3,13 @@ id: native-modules-android
 title: Android Native Modules
 ---
 
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
 Welcome to Native Modules for Android. Please start by reading the [Native Modules Intro](native-modules-intro) for an intro to what native modules are.
 
 ## Create a Calendar Native Module
 
-In the following guide you will create a native module, `CalendarModule`, that will allow you to access Android’s calendar APIs from JavaScript. By the end, you will be able to call `CalendarModule.createCalendarEvent('Dinner Party', 'My House');` from JavaScript, invoking a Java method that creates a calendar event.
+In the following guide you will create a native module, `CalendarModule`, that will allow you to access Android’s calendar APIs from JavaScript. By the end, you will be able to call `CalendarModule.createCalendarEvent('Dinner Party', 'My House');` from JavaScript, invoking a Java/Kotlin method that creates a calendar event.
 
 > The React Native team is currently working on a re-architecture of the Native Module system. This new system is called TurboModules, and it will help facilitate more efficient type-safe communication between JavaScript and native, without relying on the React Native bridge. It will also enable new extensions that weren't possible with the legacy Native Module system. You can read more about it [here](https://github.com/react-native-community/discussions-and-proposals/issues/40). Throughout these docs we have added notes around parts of Native Modules that will change in the TurboModules release and how you can best prepare for a smooth upgrade to TurboModules.
 
@@ -22,11 +24,11 @@ To get started, open up the Android project within your React Native application
 
 We recommend using Android Studio to write your native code. Android studio is an IDE built for Android development and using it will help you resolve minor issues like code syntax errors quickly.
 
-We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide/gradle_daemon.html) to speed up builds as you iterate on Java code.
+We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide/gradle_daemon.html) to speed up builds as you iterate on Java/Kotlin code.
 
 ### Create A Custom Native Module File
 
-The first step is to create the CalendarModule.java Java file inside `android/app/src/main/java/com/your-app-name/` folder. This Java file will contain your native module Java class.
+The first step is to create the (CalendarModule.java or CalendarModule.kt) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder. This Java/Kotlin file will contain your native module Java/Kotlin class.
 
 <figure>
   <img src="/docs/assets/native-modules-android-add-class.png" width="700" alt="Image of adding a class called CalendarModule.java within the Android Studio." />
@@ -35,6 +37,9 @@ The first step is to create the CalendarModule.java Java file inside `android/ap
 
 Then add the following content:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 package com.your-app-name; // replace com.your-app-name with your app’s name
 import com.facebook.react.bridge.NativeModule;
@@ -52,15 +57,35 @@ public class CalendarModule extends ReactContextBaseJavaModule {
 }
 ```
 
-As you can see, your `CalendarModule` class extends the `ReactContextBaseJavaModule` class. For Android, Java native modules are written as classes that extend `ReactContextBaseJavaModule` and implement the functionality required by JavaScript.
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+package com.your-app-name // replace com.your-app-name with your app’s name
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+
+class CalendarModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {...}
+```
+
+</TabItem>
+</Tabs>
 
-> It is worth noting that technically Java classes only need to extend the `BaseJavaModule` class or implement the `NativeModule` interface to be considered a Native Module by React Native.
+As you can see, your `CalendarModule` class extends the `ReactContextBaseJavaModule` class. For Android, Java/Kotlin native modules are written as classes that extend `ReactContextBaseJavaModule` and implement the functionality required by JavaScript.
+
+> It is worth noting that technically Java/Kotlin classes only need to extend the `BaseJavaModule` class or implement the `NativeModule` interface to be considered a Native Module by React Native.
 
 > However we recommend that you use `ReactContextBaseJavaModule`, as shown above. `ReactContextBaseJavaModule` gives access to the `ReactApplicationContext` (RAC), which is useful for Native Modules that need to hook into activity lifecycle methods. Using `ReactContextBaseJavaModule` will also make it easier to make your native module type-safe in the future. For native module type-safety, which is coming in future releases, React Native looks at each native module's JavaScript spec and generates an abstract base class that extends `ReactContextBaseJavaModule`.
 
 ### Module Name
 
-All Java native modules in Android need to implement the `getName()` method. This method returns a string, which represents the name of the native module. The native module can then be accessed in JavaScript using its name. For example, in the below code snippet, `getName()` returns `"CalendarModule"`.
+All Java/Kotlin native modules in Android need to implement the `getName()` method. This method returns a string, which represents the name of the native module. The native module can then be accessed in JavaScript using its name. For example, in the below code snippet, `getName()` returns `"CalendarModule"`.
+
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
 
 ```java
 // add to CalendarModule.java
@@ -70,6 +95,17 @@ public String getName() {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+// add to CalendarModule.kt
+override fun getName() = "CalendarModule"
+```
+
+</TabItem>
+</Tabs>
+
 The native module can then be accessed in JS like this:
 
 ```jsx
@@ -82,14 +118,30 @@ Next you will need to add a method to your native module that will create calend
 
 Set up a method `createCalendarEvent()` for `CalendarModule` that can be invoked in JS through `CalendarModule.createCalendarEvent()`. For now, the method will take in a name and location as strings. Argument type options will be covered shortly.
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 @ReactMethod
 public void createCalendarEvent(String name, String location) {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+@ReactMethod fun createCalendarEvent(name: String, location: String) {}
+```
+
+</TabItem>
+</Tabs>
+
 Add a debug log in the method to confirm it has been invoked when you call it from your application. Below is an example of how you can import and use the [Log](https://developer.android.com/reference/android/util/Log) class from the Android util package:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 import android.util.Log;
 
@@ -100,6 +152,21 @@ public void createCalendarEvent(String name, String location) {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+import android.util.Log
+
+@ReactMethod
+fun createCalendarEvent(name: String, location: String) {
+    Log.d("CalendarModule", "Create event called with name: $name and location: $location")
+}
+```
+
+</TabItem>
+</Tabs>
+
 Once you finish implementing the native module and hook it up in JavaScript, you can follow [these steps](https://developer.android.com/studio/debug/am-logcat.html) to view the logs from your app.
 
 ### Synchronous Methods
@@ -118,10 +185,13 @@ Once a native module is written, it needs to be registered with React Native. In
 
 React Native invokes the method `createNativeModules()` on a `ReactPackage` in order to get the list of native modules to register. For Android, if a module is not instantiated and returned in createNativeModules it will not be available from JavaScript.
 
-To add your Native Module to `ReactPackage`, first create a new Java Class named `MyAppPackage.java` that implements `ReactPackage` inside the `android/app/src/main/java/com/your-app-name/` folder:
+To add your Native Module to `ReactPackage`, first create a new Java/Kotlin Class named (`MyAppPackage.java` or `MyAppPackage.kt`) that implements `ReactPackage` inside the `android/app/src/main/java/com/your-app-name/` folder:
 
 Then add the following content:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 package com.your-app-name; // replace your-app-name with your app’s name
 import com.facebook.react.ReactPackage;
@@ -153,14 +223,48 @@ public class MyAppPackage implements ReactPackage {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+package com.your-app-name // replace your-app-name with your app’s name
+
+import android.view.View
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ReactShadowNode
+import com.facebook.react.uimanager.ViewManager
+
+class MyAppPackage : ReactPackage {
+
+    override fun createViewManagers(reactContext: ReactApplicationContext):
+            MutableList<ViewManager<View, ReactShadowNode<*>>> =
+        mutableListOf()
+
+    override fun createNativeModules(reactContext: ReactApplicationContext):
+            MutableList<NativeModule> {
+        val modules = mutableListOf<NativeModule>()
+        modules.add(CalendarModule(reactContext))
+        return modules
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
 This file imports the native module you created, `CalendarModule`. It then instantiates `CalendarModule` within the `createNativeModules()` function and returns it as a list of `NativeModules` to register. If you add more native modules down the line, you can also instantiate them and add them to the list returned here.
 
 > It is worth noting that this way of registering native modules eagerly initializes all native modules when the application starts, which adds to the startup time of an application. You can use [TurboReactPackage](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/TurboReactPackage.java) as an alternative. Instead of `createNativeModules`, which return a list of instantiated native module objects, TurboReactPackage implements a `getModule(String name, ReactApplicationContext rac)` method that creates the native module object, when required. TurboReactPackage is a bit more complicated to implement at the moment. In addition to implementing a `getModule()` method, you have to implement a `getReactModuleInfoProvider()` method, which returns a list of all the native modules the package can instantiate along with a function that instantiates them, example [here](https://github.com/facebook/react-native/blob/8ac467c51b94c82d81930b4802b2978c85539925/ReactAndroid/src/main/java/com/facebook/react/CoreModulesPackage.java#L86-L165). Again, using TurboReactPackage will allow your application to have a faster startup time, but it is currently a bit cumbersome to write. So proceed with caution if you choose to use TurboReactPackages.
 
-To register the `CalendarModule` package, you must add `MyAppPackage` to the list of packages returned in ReactNativeHost's `getPackages()` method. Open up your `MainApplication.java` file, which can be found in the following path: `android/app/src/main/java/com/your-app-name/MainApplication.java`
+To register the `CalendarModule` package, you must add `MyAppPackage` to the list of packages returned in ReactNativeHost's `getPackages()` method. Open up your `MainApplication.java` or `MainApplication.kt` file, which can be found in the following path: `android/app/src/main/java/com/your-app-name/MainApplication.java` or `android/app/src/main/kotlin/com/your-app-name/MainApplication.kt`.
 
 Locate ReactNativeHost’s `getPackages()` method and add your package to the packages list `getPackages()` returns:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 @Override
   protected List<ReactPackage> getPackages() {
@@ -172,6 +276,22 @@ Locate ReactNativeHost’s `getPackages()` method and add your package to the pa
   }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+override fun getPackages(): List<ReactPackage> {
+    val packages: MutableList<ReactPackage> = PackageList(this).packages
+    // Packages that cannot be autolinked yet can be added manually here, for example:
+    // packages.add(new MyReactNativePackage());
+    packages.add(MyAppPackage())
+    return packages
+}
+```
+
+</TabItem>
+</Tabs>
+
 You have now successfully registered your native module for Android!
 
 ### Test What You Have Built
@@ -292,9 +412,9 @@ CalendarModule.createCalendarEvent('foo', 'bar');
 
 ### Argument Types
 
-When a native module method is invoked in JavaScript, React Native converts the arguments from JS objects to their Java object analogues. So for example, if your Java Native Module method accepts a double, in JS you need to call the method with a number. React Native will handle the conversion for you. Below is a list of the argument types supported for native module methods and the JavaScript equivalents they map to.
+When a native module method is invoked in JavaScript, React Native converts the arguments from JS objects to their Java/Kotlin object analogues. So for example, if your Java Native Module method accepts a double, in JS you need to call the method with a number. React Native will handle the conversion for you. Below is a list of the argument types supported for native module methods and the JavaScript equivalents they map to.
 
-| Java          | JavaScript |
+| Java/Kotlin   | JavaScript |
 | ------------- | ---------- |
 | Boolean       | ?boolean   |
 | boolean       | boolean    |
@@ -314,6 +434,9 @@ When a native module method is invoked in JavaScript, React Native converts the
 
 For argument types not listed above, you will need to handle the conversion yourself. For example, in Android, `Date` conversion is not supported out of the box. You can handle the conversion to the `Date` type within the native method yourself like so:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
     String dateFormat = "yyyy-MM-dd";
     SimpleDateFormat sdf = new SimpleDateFormat(dateFormat);
@@ -324,10 +447,28 @@ For argument types not listed above, you will need to handle the conversion your
 
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+    val dateFormat = "yyyy-MM-dd"
+    val sdf = SimpleDateFormat(dateFormat, Locale.US)
+    val eStartDate = Calendar.getInstance()
+    sdf.parse(startDate)?.let {
+        eStartDate.time = it
+    }
+```
+
+</TabItem>
+</Tabs>
+
 ### Exporting Constants
 
 A native module can export constants by implementing the native method `getConstants()`, which is available in JS. Below you will implement `getConstants()` and return a Map that contains a `DEFAULT_EVENT_NAME` constant you can access in JavaScript:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 @Override
 public Map<String, Object> getConstants() {
@@ -337,6 +478,20 @@ public Map<String, Object> getConstants() {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+override fun getConstants(): MutableMap<String, Any> {
+    val constants: MutableMap<String, Any> = HashMap()
+    constants["DEFAULT_EVENT_NAME"] = "New Event"
+    return constants
+}
+```
+
+</TabItem>
+</Tabs>
+
 The constant can then be accessed by invoking `getConstants` on the native module in JS:
 
 ```jsx
@@ -350,10 +505,13 @@ Technically it is possible to access constants exported in `getConstants()` dire
 
 ### Callbacks
 
-Native modules also support a unique kind of argument: a callback. Callbacks are used to pass data from Java to JavaScript for asynchronous methods. They can also be used to asynchronously execute JavaScript from the native side.
+Native modules also support a unique kind of argument: a callback. Callbacks are used to pass data from Java/Kotlin to JavaScript for asynchronous methods. They can also be used to asynchronously execute JavaScript from the native side.
 
 In order to create a native module method with a callback, first import the `Callback` interface, and then add a new parameter to your native module method of type `Callback`. There are a couple of nuances with callback arguments that will soon be lifted with TurboModules. First off, you can only have two callbacks in your function arguments- a successCallback and a failureCallback. In addition, the last argument to a native module method call, if it's a function, is treated as the successCallback, and the second to last argument to a native module method call, if it's a function, is treated as the failure callback.
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 import com.facebook.react.bridge.Callback;
 
@@ -362,7 +520,22 @@ public void createCalendarEvent(String name, String location, Callback callBack)
 }
 ```
 
-You can invoke the callback in your Java method, providing whatever data you want to pass to JavaScript. Please note that you can only pass serializable data from native code to JavaScript. If you need to pass back a native object you can use `WriteableMaps`, if you need to use a collection use `WritableArrays`. It is also important to highlight that the callback is not invoked immediately after the native function completes. Below the ID of an event created in an earlier call is passed to the callback.
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+import com.facebook.react.bridge.Callback
+
+@ReactMethod fun createCalendarEvent(name: String, location: String, callback: Callback) {}
+```
+
+</TabItem>
+</Tabs>
+
+You can invoke the callback in your Java/Kotlin method, providing whatever data you want to pass to JavaScript. Please note that you can only pass serializable data from native code to JavaScript. If you need to pass back a native object you can use `WriteableMaps`, if you need to use a collection use `WritableArrays`. It is also important to highlight that the callback is not invoked immediately after the native function completes. Below the ID of an event created in an earlier call is passed to the callback.
+
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
 
 ```java
   @ReactMethod
@@ -372,6 +545,20 @@ You can invoke the callback in your Java method, providing whatever data you wan
    }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+  @ReactMethod
+  fun createCalendarEvent(name: String, location: String, callback: Callback) {
+      val eventId = ...
+      callback.invoke(eventId)
+  }
+```
+
+</TabItem>
+</Tabs>
+
 This method could then be accessed in JavaScript using:
 
 ```jsx
@@ -390,14 +577,31 @@ Another important detail to note is that a native module method can only invoke
 
 There are two approaches to error handling with callbacks. The first is to follow Node’s convention and treat the first argument passed to the callback as an error object.
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
-@ReactMethod
-public void createCalendarEvent(String name, String location, Callback callBack) {
-    Integer eventId = ...
-    callBack.invoke(null, eventId);
-}
+  @ReactMethod
+   public void createCalendarEvent(String name, String location, Callback callBack) {
+       Integer eventId = ...
+       callBack.invoke(null, eventId);
+   }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+  @ReactMethod
+  fun createCalendarEvent(name: String, location: String, callback: Callback) {
+      val eventId = ...
+      callback.invoke(null, eventId)
+  }
+```
+
+</TabItem>
+</Tabs>
+
 In JavaScript, you can then check the first argument to see if an error was passed through:
 
 ```jsx
@@ -417,12 +621,31 @@ const onPress = () => {
 
 Another option is to use an onSuccess and onFailure callback:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 @ReactMethod
 public void createCalendarEvent(String name, String location, Callback myFailureCallback, Callback mySuccessCallback) {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+@ReactMethod
+  fun createCalendarEvent(
+      name: String,
+      location: String,
+      myFailureCallback: Callback,
+      mySuccessCallback: Callback
+  ) {}
+```
+
+</TabItem>
+</Tabs>
+
 Then in JavaScript you can add a separate callback for error and success responses:
 
 ```jsx
@@ -442,10 +665,13 @@ const onPress = () => {
 
 ### Promises
 
-Native modules can also fulfill a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), which can simplify your JavaScript, especially when using ES2016's [async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) syntax. When the last parameter of a native module Java method is a Promise, its corresponding JS method will return a JS Promise object.
+Native modules can also fulfill a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), which can simplify your JavaScript, especially when using ES2016's [async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) syntax. When the last parameter of a native module Java/Kotlin method is a Promise, its corresponding JS method will return a JS Promise object.
 
 Refactoring the above code to use a promise instead of callbacks looks like this:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 import com.facebook.react.bridge.Promise;
 
@@ -460,6 +686,24 @@ public void createCalendarEvent(String name, String location, Promise promise) {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+@ReactMethod
+fun createCalendarEvent(name: String, location: String, promise: Promise) {
+    try {
+        val eventId = ...
+        promise.resolve(eventId)
+    } catch (e: Throwable) {
+        promise.reject("Create Event Error", e)
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
 > Similar to callbacks, a native module method can either reject or resolve a promise (but not both) and can do so at most once. This means that you can either call a success callback or a failure callback, but not both, and each callback can only be invoked at most one time. A native module can, however, store the callback and invoke it later.
 
 The JavaScript counterpart of this method returns a Promise. This means you can use the `await` keyword within an async function to call it and wait for its result:
@@ -480,18 +724,44 @@ const onSubmit = async () => {
 
 The reject method takes different combinations of the following arguments:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 String code, String message, WritableMap userInfo, Throwable throwable
 ```
 
-For more detail, you can find the `Promise.java` interface [here](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/Promise.java#L1). If `userInfo` is not provided, ReactNative will set it to null. For the rest of the parameters React Native will use a default value. The `message` argument provides the error `message` shown at the top of an error call stack. Below is an example of the error message shown in JavaScript from the following reject call in Java.
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+code: String, message: String, userInfo: WritableMap, throwable: Throwable
+```
+
+</TabItem>
+</Tabs>
+
+For more detail, you can find the `Promise.java` interface [here](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/Promise.java#L1). If `userInfo` is not provided, ReactNative will set it to null. For the rest of the parameters React Native will use a default value. The `message` argument provides the error `message` shown at the top of an error call stack. Below is an example of the error message shown in JavaScript from the following reject call in Java/Kotlin.
 
-Java reject call:
+Java/Kotlin reject call:
+
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
 
 ```java
 promise.reject("Create Event error", "Error parsing date", e);
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+promise.reject("Create Event error", "Error parsing date", e)
+```
+
+</TabItem>
+</Tabs>
+
 Error message in React Native App when promise is rejected:
 
 <figure>
@@ -503,6 +773,9 @@ Error message in React Native App when promise is rejected:
 
 Native modules can signal events to JavaScript without being invoked directly. For example, you might want to signal to JavaScript a reminder that a calendar event from the native Android calendar app will occur soon. The easiest way to do this is to use the `RCTDeviceEventEmitter` which can be obtained from the `ReactContext` as in the code snippet below.
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 ...
 import com.facebook.react.modules.core.DeviceEventManagerModule;
@@ -532,6 +805,36 @@ params.putString("eventProperty", "someValue");
 sendEvent(reactContext, "EventReminder", params);
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+private fun sendEvent(reactContext: ReactContext, eventName: String, params: WritableMap?) {
+    reactContext
+      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+      .emit(eventName, params)
+}
+
+@ReactMethod
+fun addListener(eventName: String) {
+    // Set up any upstream listeners or background tasks as necessary
+}
+
+@ReactMethod
+fun removeListeners(count: Int) {
+    // Remove upstream listeners, stop unnecessary background tasks
+}
+...
+val params = Arguments.createMap().apply {
+    putString("eventProperty", "someValue")
+}
+...
+sendEvent(reactContext, "EventReminder", params)
+```
+
+</TabItem>
+</Tabs>
+
 JavaScript modules can then register to receive events by `addListener` on the [NativeEventEmitter](https://github.com/facebook/react-native/blob/master/Libraries/EventEmitter/NativeEventEmitter.js) class.
 
 ```jsx
@@ -556,12 +859,28 @@ import { NativeEventEmitter, NativeModules } from 'react-native';
 
 You'll need to listen to `onActivityResult` if you want to get results from an activity you started with `startActivityForResult`. To do this, you must extend `BaseActivityEventListener` or implement `ActivityEventListener`. The former is preferred as it is more resilient to API changes. Then, you need to register the listener in the module's constructor like so:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 reactContext.addActivityEventListener(mActivityResultListener);
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+reactContext.addActivityEventListener(mActivityResultListener);
+```
+
+</TabItem>
+</Tabs>
+
 Now you can listen to `onActivityResult` by implementing the following method:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 @Override
 public void onActivityResult(
@@ -573,8 +892,28 @@ public void onActivityResult(
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+override fun onActivityResult(
+    activity: Activity?,
+    requestCode: Int,
+    resultCode: Int,
+    intent: Intent?
+) {
+    // Your logic here
+}
+```
+
+</TabItem>
+</Tabs>
+
 Let's implement a basic image picker to demonstrate this. The image picker will expose the method `pickImage` to JavaScript, which will return the path of the image when called.
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```jsx
 public class ImagePickerModule extends ReactContextBaseJavaModule {
 
@@ -650,17 +989,113 @@ public class ImagePickerModule extends ReactContextBaseJavaModule {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+class ImagePickerModule(reactContext: ReactApplicationContext) :
+    ReactContextBaseJavaModule(reactContext) {
+
+    private var pickerPromise: Promise? = null
+
+    private val activityEventListener =
+        object : BaseActivityEventListener() {
+            override fun onActivityResult(
+                activity: Activity?,
+                requestCode: Int,
+                resultCode: Int,
+                intent: Intent?
+            ) {
+                if (requestCode == IMAGE_PICKER_REQUEST) {
+                    pickerPromise?.let { promise ->
+                        when (resultCode) {
+                            Activity.RESULT_CANCELED ->
+                                promise.reject(E_PICKER_CANCELLED, "Image picker was cancelled")
+                            Activity.RESULT_OK -> {
+                                val uri = intent?.data
+
+                                uri?.let { promise.resolve(uri.toString()) }
+                                    ?: promise.reject(E_NO_IMAGE_DATA_FOUND, "No image data found")
+                            }
+                        }
+
+                        pickerPromise = null
+                    }
+                }
+            }
+        }
+
+    init {
+        reactContext.addActivityEventListener(activityEventListener)
+    }
+
+    override fun getName() = "ImagePickerModule"
+
+    @ReactMethod
+    fun pickImage(promise: Promise) {
+
+        if (currentActivity == null) {
+            promise.reject(E_ACTIVITY_DOES_NOT_EXIST, "Activity doesn't exist")
+            return
+        }
+
+        // Store the promise to resolve/reject when picker returns data
+        pickerPromise = promise
+
+        try {
+            val galleryIntent = Intent(Intent.ACTION_PICK)
+
+            galleryIntent.type = "image/\*"
+
+            val chooserIntent = Intent.createChooser(galleryIntent, "Pick an image")
+
+            currentActivity!!.startActivityForResult(chooserIntent, IMAGE_PICKER_REQUEST)
+        } catch (t: Throwable) {
+            pickerPromise?.reject(E_FAILED_TO_SHOW_PICKER, t)
+            pickerPromise = null
+        }
+    }
+
+    companion object {
+        const val IMAGE_PICKER_REQUEST = 1
+        const val E_ACTIVITY_DOES_NOT_EXIST = "E_ACTIVITY_DOES_NOT_EXIST"
+        const val E_PICKER_CANCELLED = "E_PICKER_CANCELLED"
+        const val E_FAILED_TO_SHOW_PICKER = "E_FAILED_TO_SHOW_PICKER"
+        const val E_NO_IMAGE_DATA_FOUND = "E_NO_IMAGE_DATA_FOUND"
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
 ### Listening to Lifecycle Events
 
 Listening to the activity's LifeCycle events such as `onResume`, `onPause` etc. is very similar to how `ActivityEventListener` was implemented. The module must implement `LifecycleEventListener`. Then, you need to register a listener in the module's constructor like so:
 
-```jsx
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
+```java
 reactContext.addLifecycleEventListener(this);
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+reactContext.addLifecycleEventListener(this)
+```
+
+</TabItem>
+</Tabs>
+
 Now you can listen to the activity's LifeCycle events by implementing the following methods:
 
-```jsx
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
+```java
 @Override
 public void onHostResume() {
    // Activity `onResume`
@@ -675,6 +1110,26 @@ public void onHostDestroy() {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+override fun onHostResume() {
+    // Activity `onResume`
+}
+
+override fun onHostPause() {
+    // Activity `onPause`
+}
+
+override fun onHostDestroy() {
+    // Activity `onDestroy`
+}
+```
+
+</TabItem>
+</Tabs>
+
 ### Threading
 
 To date, on Android, all native module async methods execute on one thread. Native modules should not have any assumptions about what thread they are being called on, as the current assignment is subject to change in the future. If a blocking call is required, the heavy work should be dispatched to an internally managed worker thread, and any callbacks distributed from there.

From bb26ba24c9a23da7c01baf02e9d1b3b886da3fa1 Mon Sep 17 00:00:00 2001
From: Alan Hughes <hughesno1@gmail.com>
Date: Thu, 24 Mar 2022 23:36:42 +0000
Subject: [PATCH 3/8] Revert changes in different file

---
 .../integration-with-android-fragment.md      | 178 +++++++++---------
 1 file changed, 85 insertions(+), 93 deletions(-)

diff --git a/website/versioned_docs/version-0.67/integration-with-android-fragment.md b/website/versioned_docs/version-0.67/integration-with-android-fragment.md
index e91fe332402..0a5b9677dd0 100644
--- a/website/versioned_docs/version-0.67/integration-with-android-fragment.md
+++ b/website/versioned_docs/version-0.67/integration-with-android-fragment.md
@@ -39,6 +39,28 @@ public class MyReactApplication extends Application implements ReactApplication
 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
@@ -70,39 +92,24 @@ public class MyReactApplication extends Application implements ReactApplication
 ```
 
 </TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-class MyReactApplication: Application(), ReactApplication {
-
-    override fun onCreate() {
-        super.onCreate()
-        SoLoader.init(this, false)
-    }
-
-    private val reactNativeHost = object: ReactNativeHost(this) {
+</Tabs>
 
-        override fun getUseDeveloperSupport() = BuildConfig.DEBUG
+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:
 
-        override fun getPackages(): List<ReactPackage> {
-            val packages: MutableList<ReactPackage> = PackageList(this).packages
-            // Packages that cannot be autolinked yet can be added manually here, for example:
-            // packages.add(new MyReactNativePackage());
-            return packages
-        }
-    }
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="kotlin">
 
-    override fun getReactNativeHost() = reactNativeHost
+```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>
-</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="java">
 
 ```java
@@ -117,20 +124,6 @@ import com.facebook.soloader.SoLoader;
 import java.util.List;
 ```
 
-</TabItem>
-<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>
 </Tabs>
 
@@ -171,17 +164,17 @@ 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="java">
+<TabItem value="kotlin">
 
-```java
-private Button mButton;
+```kotlin
+private lateinit var button: Button
 ```
 
 </TabItem>
-<TabItem value="kotlin">
+<TabItem value="java">
 
-```kotlin
-private lateinit var button: Button
+```java
+private Button mButton;
 ```
 
 </TabItem>
@@ -190,6 +183,29 @@ private lateinit var button: Button
 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
@@ -216,29 +232,6 @@ protected void onCreate(Bundle savedInstanceState) {
 }
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-override fun onCreate(savedInstanceState: Bundle?) {
-    super.onCreate(savedInstanceState)
-    setContentView(R.layout.main_activity)
-
-    mButton = findViewById(R.id.button)
-    mButton.setOnClickListener {
-        val reactNativeFragment = ReactFragment.Builder()
-            .setComponentName("HelloWorld")
-            .setLaunchOptions(getLaunchOptions("test message"))
-            .build()
-
-        supportFragmentManager
-            .beginTransaction()
-            .add(R.id.reactNativeFragment, reactNativeFragment)
-            .commit()
-    }
-}
-```
-
 </TabItem>
 </Tabs>
 
@@ -249,6 +242,16 @@ If you are using a starter kit for React Native, replace the "HelloWorld" string
 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
@@ -260,19 +263,25 @@ 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
- private fun getLaunchOptions(message: String) = Bundle().apply {
-     putString("message", message)
-}
+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>
-</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="java">
 
 ```java
@@ -285,19 +294,6 @@ import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
 ```
 
-</TabItem>
-<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>
 </Tabs>
 
@@ -310,7 +306,3 @@ Make sure you run `yarn` to install your react-native dependencies and run `yarn
 ### Step 6. Additional setup - Native modules
 
 You may need to call out to existing Java code from your react component. Native modules allow you to call out to native code and run methods in your native app. Follow the setup here [native-modules-android](https://reactnative.dev/docs/native-modules-android)
-
-```
-
-```

From 7a3b8e65fdb9568d2657308ea03ae88fea25647d Mon Sep 17 00:00:00 2001
From: Alan Hughes <hughesno1@gmail.com>
Date: Fri, 25 Mar 2022 11:37:34 +0000
Subject: [PATCH 4/8] Modify correct page and revert changes in versioned_docs

---
 docs/native-modules-android.md                | 499 +++++++++++++++++-
 .../version-0.67/native-modules-android.md    | 499 +-----------------
 2 files changed, 499 insertions(+), 499 deletions(-)

diff --git a/docs/native-modules-android.md b/docs/native-modules-android.md
index 811caf0ea2d..caf24ea8e58 100644
--- a/docs/native-modules-android.md
+++ b/docs/native-modules-android.md
@@ -3,11 +3,13 @@ id: native-modules-android
 title: Android Native Modules
 ---
 
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
 Welcome to Native Modules for Android. Please start by reading the [Native Modules Intro](native-modules-intro) for an intro to what native modules are.
 
 ## Create a Calendar Native Module
 
-In the following guide you will create a native module, `CalendarModule`, that will allow you to access Android’s calendar APIs from JavaScript. By the end, you will be able to call `CalendarModule.createCalendarEvent('Dinner Party', 'My House');` from JavaScript, invoking a Java method that creates a calendar event.
+In the following guide you will create a native module, `CalendarModule`, that will allow you to access Android’s calendar APIs from JavaScript. By the end, you will be able to call `CalendarModule.createCalendarEvent('Dinner Party', 'My House');` from JavaScript, invoking a Java/Kotlin method that creates a calendar event.
 
 > The React Native team is currently working on a re-architecture of the Native Module system. This new system is called TurboModules, and it will help facilitate more efficient type-safe communication between JavaScript and native, without relying on the React Native bridge. It will also enable new extensions that weren't possible with the legacy Native Module system. You can read more about it [here](https://github.com/react-native-community/discussions-and-proposals/issues/40). Throughout these docs we have added notes around parts of Native Modules that will change in the TurboModules release and how you can best prepare for a smooth upgrade to TurboModules.
 
@@ -22,11 +24,11 @@ To get started, open up the Android project within your React Native application
 
 We recommend using Android Studio to write your native code. Android studio is an IDE built for Android development and using it will help you resolve minor issues like code syntax errors quickly.
 
-We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide/gradle_daemon.html) to speed up builds as you iterate on Java code.
+We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide/gradle_daemon.html) to speed up builds as you iterate on Java/Kotlin code.
 
 ### Create A Custom Native Module File
 
-The first step is to create the CalendarModule.java Java file inside `android/app/src/main/java/com/your-app-name/` folder. This Java file will contain your native module Java class.
+The first step is to create the (CalendarModule.java or CalendarModule.kt) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder. This Java/Kotlin file will contain your native module Java/Kotlin class.
 
 <figure>
   <img src="/docs/assets/native-modules-android-add-class.png" width="700" alt="Image of adding a class called CalendarModule.java within the Android Studio." />
@@ -35,6 +37,9 @@ The first step is to create the CalendarModule.java Java file inside `android/ap
 
 Then add the following content:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 package com.your-app-name; // replace com.your-app-name with your app’s name
 import com.facebook.react.bridge.NativeModule;
@@ -52,15 +57,35 @@ public class CalendarModule extends ReactContextBaseJavaModule {
 }
 ```
 
-As you can see, your `CalendarModule` class extends the `ReactContextBaseJavaModule` class. For Android, Java native modules are written as classes that extend `ReactContextBaseJavaModule` and implement the functionality required by JavaScript.
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+package com.your-app-name // replace com.your-app-name with your app’s name
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+
+class CalendarModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {...}
+```
+
+</TabItem>
+</Tabs>
 
-> It is worth noting that technically Java classes only need to extend the `BaseJavaModule` class or implement the `NativeModule` interface to be considered a Native Module by React Native.
+As you can see, your `CalendarModule` class extends the `ReactContextBaseJavaModule` class. For Android, Java/Kotlin native modules are written as classes that extend `ReactContextBaseJavaModule` and implement the functionality required by JavaScript.
+
+> It is worth noting that technically Java/Kotlin classes only need to extend the `BaseJavaModule` class or implement the `NativeModule` interface to be considered a Native Module by React Native.
 
 > However we recommend that you use `ReactContextBaseJavaModule`, as shown above. `ReactContextBaseJavaModule` gives access to the `ReactApplicationContext` (RAC), which is useful for Native Modules that need to hook into activity lifecycle methods. Using `ReactContextBaseJavaModule` will also make it easier to make your native module type-safe in the future. For native module type-safety, which is coming in future releases, React Native looks at each native module's JavaScript spec and generates an abstract base class that extends `ReactContextBaseJavaModule`.
 
 ### Module Name
 
-All Java native modules in Android need to implement the `getName()` method. This method returns a string, which represents the name of the native module. The native module can then be accessed in JavaScript using its name. For example, in the below code snippet, `getName()` returns `"CalendarModule"`.
+All Java/Kotlin native modules in Android need to implement the `getName()` method. This method returns a string, which represents the name of the native module. The native module can then be accessed in JavaScript using its name. For example, in the below code snippet, `getName()` returns `"CalendarModule"`.
+
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
 
 ```java
 // add to CalendarModule.java
@@ -70,6 +95,17 @@ public String getName() {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+// add to CalendarModule.kt
+override fun getName() = "CalendarModule"
+```
+
+</TabItem>
+</Tabs>
+
 The native module can then be accessed in JS like this:
 
 ```jsx
@@ -82,14 +118,30 @@ Next you will need to add a method to your native module that will create calend
 
 Set up a method `createCalendarEvent()` for `CalendarModule` that can be invoked in JS through `CalendarModule.createCalendarEvent()`. For now, the method will take in a name and location as strings. Argument type options will be covered shortly.
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 @ReactMethod
 public void createCalendarEvent(String name, String location) {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+@ReactMethod fun createCalendarEvent(name: String, location: String) {}
+```
+
+</TabItem>
+</Tabs>
+
 Add a debug log in the method to confirm it has been invoked when you call it from your application. Below is an example of how you can import and use the [Log](https://developer.android.com/reference/android/util/Log) class from the Android util package:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 import android.util.Log;
 
@@ -100,6 +152,21 @@ public void createCalendarEvent(String name, String location) {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+import android.util.Log
+
+@ReactMethod
+fun createCalendarEvent(name: String, location: String) {
+    Log.d("CalendarModule", "Create event called with name: $name and location: $location")
+}
+```
+
+</TabItem>
+</Tabs>
+
 Once you finish implementing the native module and hook it up in JavaScript, you can follow [these steps](https://developer.android.com/studio/debug/am-logcat.html) to view the logs from your app.
 
 ### Synchronous Methods
@@ -118,10 +185,13 @@ Once a native module is written, it needs to be registered with React Native. In
 
 React Native invokes the method `createNativeModules()` on a `ReactPackage` in order to get the list of native modules to register. For Android, if a module is not instantiated and returned in createNativeModules it will not be available from JavaScript.
 
-To add your Native Module to `ReactPackage`, first create a new Java Class named `MyAppPackage.java` that implements `ReactPackage` inside the `android/app/src/main/java/com/your-app-name/` folder:
+To add your Native Module to `ReactPackage`, first create a new Java/Kotlin Class named (`MyAppPackage.java` or `MyAppPackage.kt`) that implements `ReactPackage` inside the `android/app/src/main/java/com/your-app-name/` folder:
 
 Then add the following content:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 package com.your-app-name; // replace your-app-name with your app’s name
 import com.facebook.react.ReactPackage;
@@ -153,14 +223,48 @@ public class MyAppPackage implements ReactPackage {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+package com.your-app-name // replace your-app-name with your app’s name
+
+import android.view.View
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ReactShadowNode
+import com.facebook.react.uimanager.ViewManager
+
+class MyAppPackage : ReactPackage {
+
+    override fun createViewManagers(reactContext: ReactApplicationContext):
+            MutableList<ViewManager<View, ReactShadowNode<*>>> =
+        mutableListOf()
+
+    override fun createNativeModules(reactContext: ReactApplicationContext):
+            MutableList<NativeModule> {
+        val modules = mutableListOf<NativeModule>()
+        modules.add(CalendarModule(reactContext))
+        return modules
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
 This file imports the native module you created, `CalendarModule`. It then instantiates `CalendarModule` within the `createNativeModules()` function and returns it as a list of `NativeModules` to register. If you add more native modules down the line, you can also instantiate them and add them to the list returned here.
 
 > It is worth noting that this way of registering native modules eagerly initializes all native modules when the application starts, which adds to the startup time of an application. You can use [TurboReactPackage](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/TurboReactPackage.java) as an alternative. Instead of `createNativeModules`, which return a list of instantiated native module objects, TurboReactPackage implements a `getModule(String name, ReactApplicationContext rac)` method that creates the native module object, when required. TurboReactPackage is a bit more complicated to implement at the moment. In addition to implementing a `getModule()` method, you have to implement a `getReactModuleInfoProvider()` method, which returns a list of all the native modules the package can instantiate along with a function that instantiates them, example [here](https://github.com/facebook/react-native/blob/8ac467c51b94c82d81930b4802b2978c85539925/ReactAndroid/src/main/java/com/facebook/react/CoreModulesPackage.java#L86-L165). Again, using TurboReactPackage will allow your application to have a faster startup time, but it is currently a bit cumbersome to write. So proceed with caution if you choose to use TurboReactPackages.
 
-To register the `CalendarModule` package, you must add `MyAppPackage` to the list of packages returned in ReactNativeHost's `getPackages()` method. Open up your `MainApplication.java` file, which can be found in the following path: `android/app/src/main/java/com/your-app-name/MainApplication.java`
+To register the `CalendarModule` package, you must add `MyAppPackage` to the list of packages returned in ReactNativeHost's `getPackages()` method. Open up your `MainApplication.java` or `MainApplication.kt` file, which can be found in the following path: `android/app/src/main/java/com/your-app-name/MainApplication.java` or `android/app/src/main/kotlin/com/your-app-name/MainApplication.kt`.
 
 Locate ReactNativeHost’s `getPackages()` method and add your package to the packages list `getPackages()` returns:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 @Override
   protected List<ReactPackage> getPackages() {
@@ -172,6 +276,22 @@ Locate ReactNativeHost’s `getPackages()` method and add your package to the pa
   }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+override fun getPackages(): List<ReactPackage> {
+    val packages: MutableList<ReactPackage> = PackageList(this).packages
+    // Packages that cannot be autolinked yet can be added manually here, for example:
+    // packages.add(new MyReactNativePackage());
+    packages.add(MyAppPackage())
+    return packages
+}
+```
+
+</TabItem>
+</Tabs>
+
 You have now successfully registered your native module for Android!
 
 ### Test What You Have Built
@@ -292,9 +412,9 @@ CalendarModule.createCalendarEvent('foo', 'bar');
 
 ### Argument Types
 
-When a native module method is invoked in JavaScript, React Native converts the arguments from JS objects to their Java object analogues. So for example, if your Java Native Module method accepts a double, in JS you need to call the method with a number. React Native will handle the conversion for you. Below is a list of the argument types supported for native module methods and the JavaScript equivalents they map to.
+When a native module method is invoked in JavaScript, React Native converts the arguments from JS objects to their Java/Kotlin object analogues. So for example, if your Java Native Module method accepts a double, in JS you need to call the method with a number. React Native will handle the conversion for you. Below is a list of the argument types supported for native module methods and the JavaScript equivalents they map to.
 
-| Java          | JavaScript |
+| Java/Kotlin   | JavaScript |
 | ------------- | ---------- |
 | Boolean       | ?boolean   |
 | boolean       | boolean    |
@@ -314,6 +434,9 @@ When a native module method is invoked in JavaScript, React Native converts the
 
 For argument types not listed above, you will need to handle the conversion yourself. For example, in Android, `Date` conversion is not supported out of the box. You can handle the conversion to the `Date` type within the native method yourself like so:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
     String dateFormat = "yyyy-MM-dd";
     SimpleDateFormat sdf = new SimpleDateFormat(dateFormat);
@@ -324,10 +447,28 @@ For argument types not listed above, you will need to handle the conversion your
 
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+    val dateFormat = "yyyy-MM-dd"
+    val sdf = SimpleDateFormat(dateFormat, Locale.US)
+    val eStartDate = Calendar.getInstance()
+    sdf.parse(startDate)?.let {
+        eStartDate.time = it
+    }
+```
+
+</TabItem>
+</Tabs>
+
 ### Exporting Constants
 
 A native module can export constants by implementing the native method `getConstants()`, which is available in JS. Below you will implement `getConstants()` and return a Map that contains a `DEFAULT_EVENT_NAME` constant you can access in JavaScript:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 @Override
 public Map<String, Object> getConstants() {
@@ -337,6 +478,20 @@ public Map<String, Object> getConstants() {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+override fun getConstants(): MutableMap<String, Any> {
+    val constants: MutableMap<String, Any> = HashMap()
+    constants["DEFAULT_EVENT_NAME"] = "New Event"
+    return constants
+}
+```
+
+</TabItem>
+</Tabs>
+
 The constant can then be accessed by invoking `getConstants` on the native module in JS:
 
 ```jsx
@@ -350,10 +505,13 @@ Technically it is possible to access constants exported in `getConstants()` dire
 
 ### Callbacks
 
-Native modules also support a unique kind of argument: a callback. Callbacks are used to pass data from Java to JavaScript for asynchronous methods. They can also be used to asynchronously execute JavaScript from the native side.
+Native modules also support a unique kind of argument: a callback. Callbacks are used to pass data from Java/Kotlin to JavaScript for asynchronous methods. They can also be used to asynchronously execute JavaScript from the native side.
 
 In order to create a native module method with a callback, first import the `Callback` interface, and then add a new parameter to your native module method of type `Callback`. There are a couple of nuances with callback arguments that will soon be lifted with TurboModules. First off, you can only have two callbacks in your function arguments- a successCallback and a failureCallback. In addition, the last argument to a native module method call, if it's a function, is treated as the successCallback, and the second to last argument to a native module method call, if it's a function, is treated as the failure callback.
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 import com.facebook.react.bridge.Callback;
 
@@ -362,7 +520,22 @@ public void createCalendarEvent(String name, String location, Callback callBack)
 }
 ```
 
-You can invoke the callback in your Java method, providing whatever data you want to pass to JavaScript. Please note that you can only pass serializable data from native code to JavaScript. If you need to pass back a native object you can use `WriteableMaps`, if you need to use a collection use `WritableArrays`. It is also important to highlight that the callback is not invoked immediately after the native function completes. Below the ID of an event created in an earlier call is passed to the callback.
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+import com.facebook.react.bridge.Callback
+
+@ReactMethod fun createCalendarEvent(name: String, location: String, callback: Callback) {}
+```
+
+</TabItem>
+</Tabs>
+
+You can invoke the callback in your Java/Kotlin method, providing whatever data you want to pass to JavaScript. Please note that you can only pass serializable data from native code to JavaScript. If you need to pass back a native object you can use `WriteableMaps`, if you need to use a collection use `WritableArrays`. It is also important to highlight that the callback is not invoked immediately after the native function completes. Below the ID of an event created in an earlier call is passed to the callback.
+
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
 
 ```java
   @ReactMethod
@@ -372,6 +545,20 @@ You can invoke the callback in your Java method, providing whatever data you wan
    }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+  @ReactMethod
+  fun createCalendarEvent(name: String, location: String, callback: Callback) {
+      val eventId = ...
+      callback.invoke(eventId)
+  }
+```
+
+</TabItem>
+</Tabs>
+
 This method could then be accessed in JavaScript using:
 
 ```jsx
@@ -390,14 +577,31 @@ Another important detail to note is that a native module method can only invoke
 
 There are two approaches to error handling with callbacks. The first is to follow Node’s convention and treat the first argument passed to the callback as an error object.
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
-@ReactMethod
-public void createCalendarEvent(String name, String location, Callback callBack) {
-    Integer eventId = ...
-    callBack.invoke(null, eventId);
-}
+  @ReactMethod
+   public void createCalendarEvent(String name, String location, Callback callBack) {
+       Integer eventId = ...
+       callBack.invoke(null, eventId);
+   }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+  @ReactMethod
+  fun createCalendarEvent(name: String, location: String, callback: Callback) {
+      val eventId = ...
+      callback.invoke(null, eventId)
+  }
+```
+
+</TabItem>
+</Tabs>
+
 In JavaScript, you can then check the first argument to see if an error was passed through:
 
 ```jsx
@@ -417,12 +621,31 @@ const onPress = () => {
 
 Another option is to use an onSuccess and onFailure callback:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 @ReactMethod
 public void createCalendarEvent(String name, String location, Callback myFailureCallback, Callback mySuccessCallback) {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+@ReactMethod
+  fun createCalendarEvent(
+      name: String,
+      location: String,
+      myFailureCallback: Callback,
+      mySuccessCallback: Callback
+  ) {}
+```
+
+</TabItem>
+</Tabs>
+
 Then in JavaScript you can add a separate callback for error and success responses:
 
 ```jsx
@@ -442,10 +665,13 @@ const onPress = () => {
 
 ### Promises
 
-Native modules can also fulfill a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), which can simplify your JavaScript, especially when using ES2016's [async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) syntax. When the last parameter of a native module Java method is a Promise, its corresponding JS method will return a JS Promise object.
+Native modules can also fulfill a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), which can simplify your JavaScript, especially when using ES2016's [async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) syntax. When the last parameter of a native module Java/Kotlin method is a Promise, its corresponding JS method will return a JS Promise object.
 
 Refactoring the above code to use a promise instead of callbacks looks like this:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 import com.facebook.react.bridge.Promise;
 
@@ -460,6 +686,24 @@ public void createCalendarEvent(String name, String location, Promise promise) {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+@ReactMethod
+fun createCalendarEvent(name: String, location: String, promise: Promise) {
+    try {
+        val eventId = ...
+        promise.resolve(eventId)
+    } catch (e: Throwable) {
+        promise.reject("Create Event Error", e)
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
 > Similar to callbacks, a native module method can either reject or resolve a promise (but not both) and can do so at most once. This means that you can either call a success callback or a failure callback, but not both, and each callback can only be invoked at most one time. A native module can, however, store the callback and invoke it later.
 
 The JavaScript counterpart of this method returns a Promise. This means you can use the `await` keyword within an async function to call it and wait for its result:
@@ -480,18 +724,44 @@ const onSubmit = async () => {
 
 The reject method takes different combinations of the following arguments:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 String code, String message, WritableMap userInfo, Throwable throwable
 ```
 
-For more detail, you can find the `Promise.java` interface [here](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/Promise.java#L1). If `userInfo` is not provided, ReactNative will set it to null. For the rest of the parameters React Native will use a default value. The `message` argument provides the error `message` shown at the top of an error call stack. Below is an example of the error message shown in JavaScript from the following reject call in Java.
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+code: String, message: String, userInfo: WritableMap, throwable: Throwable
+```
+
+</TabItem>
+</Tabs>
+
+For more detail, you can find the `Promise.java` interface [here](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/Promise.java#L1). If `userInfo` is not provided, ReactNative will set it to null. For the rest of the parameters React Native will use a default value. The `message` argument provides the error `message` shown at the top of an error call stack. Below is an example of the error message shown in JavaScript from the following reject call in Java/Kotlin.
 
-Java reject call:
+Java/Kotlin reject call:
+
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
 
 ```java
 promise.reject("Create Event error", "Error parsing date", e);
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+promise.reject("Create Event error", "Error parsing date", e)
+```
+
+</TabItem>
+</Tabs>
+
 Error message in React Native App when promise is rejected:
 
 <figure>
@@ -503,6 +773,9 @@ Error message in React Native App when promise is rejected:
 
 Native modules can signal events to JavaScript without being invoked directly. For example, you might want to signal to JavaScript a reminder that a calendar event from the native Android calendar app will occur soon. The easiest way to do this is to use the `RCTDeviceEventEmitter` which can be obtained from the `ReactContext` as in the code snippet below.
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 ...
 import com.facebook.react.modules.core.DeviceEventManagerModule;
@@ -532,6 +805,36 @@ params.putString("eventProperty", "someValue");
 sendEvent(reactContext, "EventReminder", params);
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+private fun sendEvent(reactContext: ReactContext, eventName: String, params: WritableMap?) {
+    reactContext
+      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+      .emit(eventName, params)
+}
+
+@ReactMethod
+fun addListener(eventName: String) {
+    // Set up any upstream listeners or background tasks as necessary
+}
+
+@ReactMethod
+fun removeListeners(count: Int) {
+    // Remove upstream listeners, stop unnecessary background tasks
+}
+...
+val params = Arguments.createMap().apply {
+    putString("eventProperty", "someValue")
+}
+...
+sendEvent(reactContext, "EventReminder", params)
+```
+
+</TabItem>
+</Tabs>
+
 JavaScript modules can then register to receive events by `addListener` on the [NativeEventEmitter](https://github.com/facebook/react-native/blob/master/Libraries/EventEmitter/NativeEventEmitter.js) class.
 
 ```jsx
@@ -556,12 +859,28 @@ import { NativeEventEmitter, NativeModules } from 'react-native';
 
 You'll need to listen to `onActivityResult` if you want to get results from an activity you started with `startActivityForResult`. To do this, you must extend `BaseActivityEventListener` or implement `ActivityEventListener`. The former is preferred as it is more resilient to API changes. Then, you need to register the listener in the module's constructor like so:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 reactContext.addActivityEventListener(mActivityResultListener);
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+reactContext.addActivityEventListener(mActivityResultListener);
+```
+
+</TabItem>
+</Tabs>
+
 Now you can listen to `onActivityResult` by implementing the following method:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 @Override
 public void onActivityResult(
@@ -573,8 +892,28 @@ public void onActivityResult(
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+override fun onActivityResult(
+    activity: Activity?,
+    requestCode: Int,
+    resultCode: Int,
+    intent: Intent?
+) {
+    // Your logic here
+}
+```
+
+</TabItem>
+</Tabs>
+
 Let's implement a basic image picker to demonstrate this. The image picker will expose the method `pickImage` to JavaScript, which will return the path of the image when called.
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```jsx
 public class ImagePickerModule extends ReactContextBaseJavaModule {
 
@@ -650,17 +989,113 @@ public class ImagePickerModule extends ReactContextBaseJavaModule {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+class ImagePickerModule(reactContext: ReactApplicationContext) :
+    ReactContextBaseJavaModule(reactContext) {
+
+    private var pickerPromise: Promise? = null
+
+    private val activityEventListener =
+        object : BaseActivityEventListener() {
+            override fun onActivityResult(
+                activity: Activity?,
+                requestCode: Int,
+                resultCode: Int,
+                intent: Intent?
+            ) {
+                if (requestCode == IMAGE_PICKER_REQUEST) {
+                    pickerPromise?.let { promise ->
+                        when (resultCode) {
+                            Activity.RESULT_CANCELED ->
+                                promise.reject(E_PICKER_CANCELLED, "Image picker was cancelled")
+                            Activity.RESULT_OK -> {
+                                val uri = intent?.data
+
+                                uri?.let { promise.resolve(uri.toString()) }
+                                    ?: promise.reject(E_NO_IMAGE_DATA_FOUND, "No image data found")
+                            }
+                        }
+
+                        pickerPromise = null
+                    }
+                }
+            }
+        }
+
+    init {
+        reactContext.addActivityEventListener(activityEventListener)
+    }
+
+    override fun getName() = "ImagePickerModule"
+
+    @ReactMethod
+    fun pickImage(promise: Promise) {
+
+        if (currentActivity == null) {
+            promise.reject(E_ACTIVITY_DOES_NOT_EXIST, "Activity doesn't exist")
+            return
+        }
+
+        // Store the promise to resolve/reject when picker returns data
+        pickerPromise = promise
+
+        try {
+            val galleryIntent = Intent(Intent.ACTION_PICK)
+
+            galleryIntent.type = "image/\*"
+
+            val chooserIntent = Intent.createChooser(galleryIntent, "Pick an image")
+
+            currentActivity!!.startActivityForResult(chooserIntent, IMAGE_PICKER_REQUEST)
+        } catch (t: Throwable) {
+            pickerPromise?.reject(E_FAILED_TO_SHOW_PICKER, t)
+            pickerPromise = null
+        }
+    }
+
+    companion object {
+        const val IMAGE_PICKER_REQUEST = 1
+        const val E_ACTIVITY_DOES_NOT_EXIST = "E_ACTIVITY_DOES_NOT_EXIST"
+        const val E_PICKER_CANCELLED = "E_PICKER_CANCELLED"
+        const val E_FAILED_TO_SHOW_PICKER = "E_FAILED_TO_SHOW_PICKER"
+        const val E_NO_IMAGE_DATA_FOUND = "E_NO_IMAGE_DATA_FOUND"
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
 ### Listening to Lifecycle Events
 
 Listening to the activity's LifeCycle events such as `onResume`, `onPause` etc. is very similar to how `ActivityEventListener` was implemented. The module must implement `LifecycleEventListener`. Then, you need to register a listener in the module's constructor like so:
 
-```jsx
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
+```java
 reactContext.addLifecycleEventListener(this);
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+reactContext.addLifecycleEventListener(this)
+```
+
+</TabItem>
+</Tabs>
+
 Now you can listen to the activity's LifeCycle events by implementing the following methods:
 
-```jsx
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
+```java
 @Override
 public void onHostResume() {
    // Activity `onResume`
@@ -675,6 +1110,26 @@ public void onHostDestroy() {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+override fun onHostResume() {
+    // Activity `onResume`
+}
+
+override fun onHostPause() {
+    // Activity `onPause`
+}
+
+override fun onHostDestroy() {
+    // Activity `onDestroy`
+}
+```
+
+</TabItem>
+</Tabs>
+
 ### Threading
 
 To date, on Android, all native module async methods execute on one thread. Native modules should not have any assumptions about what thread they are being called on, as the current assignment is subject to change in the future. If a blocking call is required, the heavy work should be dispatched to an internally managed worker thread, and any callbacks distributed from there.
diff --git a/website/versioned_docs/version-0.67/native-modules-android.md b/website/versioned_docs/version-0.67/native-modules-android.md
index caf24ea8e58..811caf0ea2d 100644
--- a/website/versioned_docs/version-0.67/native-modules-android.md
+++ b/website/versioned_docs/version-0.67/native-modules-android.md
@@ -3,13 +3,11 @@ id: native-modules-android
 title: Android Native Modules
 ---
 
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-
 Welcome to Native Modules for Android. Please start by reading the [Native Modules Intro](native-modules-intro) for an intro to what native modules are.
 
 ## Create a Calendar Native Module
 
-In the following guide you will create a native module, `CalendarModule`, that will allow you to access Android’s calendar APIs from JavaScript. By the end, you will be able to call `CalendarModule.createCalendarEvent('Dinner Party', 'My House');` from JavaScript, invoking a Java/Kotlin method that creates a calendar event.
+In the following guide you will create a native module, `CalendarModule`, that will allow you to access Android’s calendar APIs from JavaScript. By the end, you will be able to call `CalendarModule.createCalendarEvent('Dinner Party', 'My House');` from JavaScript, invoking a Java method that creates a calendar event.
 
 > The React Native team is currently working on a re-architecture of the Native Module system. This new system is called TurboModules, and it will help facilitate more efficient type-safe communication between JavaScript and native, without relying on the React Native bridge. It will also enable new extensions that weren't possible with the legacy Native Module system. You can read more about it [here](https://github.com/react-native-community/discussions-and-proposals/issues/40). Throughout these docs we have added notes around parts of Native Modules that will change in the TurboModules release and how you can best prepare for a smooth upgrade to TurboModules.
 
@@ -24,11 +22,11 @@ To get started, open up the Android project within your React Native application
 
 We recommend using Android Studio to write your native code. Android studio is an IDE built for Android development and using it will help you resolve minor issues like code syntax errors quickly.
 
-We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide/gradle_daemon.html) to speed up builds as you iterate on Java/Kotlin code.
+We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide/gradle_daemon.html) to speed up builds as you iterate on Java code.
 
 ### Create A Custom Native Module File
 
-The first step is to create the (CalendarModule.java or CalendarModule.kt) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder. This Java/Kotlin file will contain your native module Java/Kotlin class.
+The first step is to create the CalendarModule.java Java file inside `android/app/src/main/java/com/your-app-name/` folder. This Java file will contain your native module Java class.
 
 <figure>
   <img src="/docs/assets/native-modules-android-add-class.png" width="700" alt="Image of adding a class called CalendarModule.java within the Android Studio." />
@@ -37,9 +35,6 @@ The first step is to create the (CalendarModule.java or CalendarModule.kt) Java/
 
 Then add the following content:
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```java
 package com.your-app-name; // replace com.your-app-name with your app’s name
 import com.facebook.react.bridge.NativeModule;
@@ -57,35 +52,15 @@ public class CalendarModule extends ReactContextBaseJavaModule {
 }
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-package com.your-app-name // replace com.your-app-name with your app’s name
-import com.facebook.react.bridge.NativeModule
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReactContext
-import com.facebook.react.bridge.ReactContextBaseJavaModule
-import com.facebook.react.bridge.ReactMethod
-
-class CalendarModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {...}
-```
-
-</TabItem>
-</Tabs>
+As you can see, your `CalendarModule` class extends the `ReactContextBaseJavaModule` class. For Android, Java native modules are written as classes that extend `ReactContextBaseJavaModule` and implement the functionality required by JavaScript.
 
-As you can see, your `CalendarModule` class extends the `ReactContextBaseJavaModule` class. For Android, Java/Kotlin native modules are written as classes that extend `ReactContextBaseJavaModule` and implement the functionality required by JavaScript.
-
-> It is worth noting that technically Java/Kotlin classes only need to extend the `BaseJavaModule` class or implement the `NativeModule` interface to be considered a Native Module by React Native.
+> It is worth noting that technically Java classes only need to extend the `BaseJavaModule` class or implement the `NativeModule` interface to be considered a Native Module by React Native.
 
 > However we recommend that you use `ReactContextBaseJavaModule`, as shown above. `ReactContextBaseJavaModule` gives access to the `ReactApplicationContext` (RAC), which is useful for Native Modules that need to hook into activity lifecycle methods. Using `ReactContextBaseJavaModule` will also make it easier to make your native module type-safe in the future. For native module type-safety, which is coming in future releases, React Native looks at each native module's JavaScript spec and generates an abstract base class that extends `ReactContextBaseJavaModule`.
 
 ### Module Name
 
-All Java/Kotlin native modules in Android need to implement the `getName()` method. This method returns a string, which represents the name of the native module. The native module can then be accessed in JavaScript using its name. For example, in the below code snippet, `getName()` returns `"CalendarModule"`.
-
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
+All Java native modules in Android need to implement the `getName()` method. This method returns a string, which represents the name of the native module. The native module can then be accessed in JavaScript using its name. For example, in the below code snippet, `getName()` returns `"CalendarModule"`.
 
 ```java
 // add to CalendarModule.java
@@ -95,17 +70,6 @@ public String getName() {
 }
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-// add to CalendarModule.kt
-override fun getName() = "CalendarModule"
-```
-
-</TabItem>
-</Tabs>
-
 The native module can then be accessed in JS like this:
 
 ```jsx
@@ -118,30 +82,14 @@ Next you will need to add a method to your native module that will create calend
 
 Set up a method `createCalendarEvent()` for `CalendarModule` that can be invoked in JS through `CalendarModule.createCalendarEvent()`. For now, the method will take in a name and location as strings. Argument type options will be covered shortly.
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```java
 @ReactMethod
 public void createCalendarEvent(String name, String location) {
 }
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-@ReactMethod fun createCalendarEvent(name: String, location: String) {}
-```
-
-</TabItem>
-</Tabs>
-
 Add a debug log in the method to confirm it has been invoked when you call it from your application. Below is an example of how you can import and use the [Log](https://developer.android.com/reference/android/util/Log) class from the Android util package:
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```java
 import android.util.Log;
 
@@ -152,21 +100,6 @@ public void createCalendarEvent(String name, String location) {
 }
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-import android.util.Log
-
-@ReactMethod
-fun createCalendarEvent(name: String, location: String) {
-    Log.d("CalendarModule", "Create event called with name: $name and location: $location")
-}
-```
-
-</TabItem>
-</Tabs>
-
 Once you finish implementing the native module and hook it up in JavaScript, you can follow [these steps](https://developer.android.com/studio/debug/am-logcat.html) to view the logs from your app.
 
 ### Synchronous Methods
@@ -185,13 +118,10 @@ Once a native module is written, it needs to be registered with React Native. In
 
 React Native invokes the method `createNativeModules()` on a `ReactPackage` in order to get the list of native modules to register. For Android, if a module is not instantiated and returned in createNativeModules it will not be available from JavaScript.
 
-To add your Native Module to `ReactPackage`, first create a new Java/Kotlin Class named (`MyAppPackage.java` or `MyAppPackage.kt`) that implements `ReactPackage` inside the `android/app/src/main/java/com/your-app-name/` folder:
+To add your Native Module to `ReactPackage`, first create a new Java Class named `MyAppPackage.java` that implements `ReactPackage` inside the `android/app/src/main/java/com/your-app-name/` folder:
 
 Then add the following content:
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```java
 package com.your-app-name; // replace your-app-name with your app’s name
 import com.facebook.react.ReactPackage;
@@ -223,48 +153,14 @@ public class MyAppPackage implements ReactPackage {
 }
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-package com.your-app-name // replace your-app-name with your app’s name
-
-import android.view.View
-import com.facebook.react.ReactPackage
-import com.facebook.react.bridge.NativeModule
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.uimanager.ReactShadowNode
-import com.facebook.react.uimanager.ViewManager
-
-class MyAppPackage : ReactPackage {
-
-    override fun createViewManagers(reactContext: ReactApplicationContext):
-            MutableList<ViewManager<View, ReactShadowNode<*>>> =
-        mutableListOf()
-
-    override fun createNativeModules(reactContext: ReactApplicationContext):
-            MutableList<NativeModule> {
-        val modules = mutableListOf<NativeModule>()
-        modules.add(CalendarModule(reactContext))
-        return modules
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
 This file imports the native module you created, `CalendarModule`. It then instantiates `CalendarModule` within the `createNativeModules()` function and returns it as a list of `NativeModules` to register. If you add more native modules down the line, you can also instantiate them and add them to the list returned here.
 
 > It is worth noting that this way of registering native modules eagerly initializes all native modules when the application starts, which adds to the startup time of an application. You can use [TurboReactPackage](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/TurboReactPackage.java) as an alternative. Instead of `createNativeModules`, which return a list of instantiated native module objects, TurboReactPackage implements a `getModule(String name, ReactApplicationContext rac)` method that creates the native module object, when required. TurboReactPackage is a bit more complicated to implement at the moment. In addition to implementing a `getModule()` method, you have to implement a `getReactModuleInfoProvider()` method, which returns a list of all the native modules the package can instantiate along with a function that instantiates them, example [here](https://github.com/facebook/react-native/blob/8ac467c51b94c82d81930b4802b2978c85539925/ReactAndroid/src/main/java/com/facebook/react/CoreModulesPackage.java#L86-L165). Again, using TurboReactPackage will allow your application to have a faster startup time, but it is currently a bit cumbersome to write. So proceed with caution if you choose to use TurboReactPackages.
 
-To register the `CalendarModule` package, you must add `MyAppPackage` to the list of packages returned in ReactNativeHost's `getPackages()` method. Open up your `MainApplication.java` or `MainApplication.kt` file, which can be found in the following path: `android/app/src/main/java/com/your-app-name/MainApplication.java` or `android/app/src/main/kotlin/com/your-app-name/MainApplication.kt`.
+To register the `CalendarModule` package, you must add `MyAppPackage` to the list of packages returned in ReactNativeHost's `getPackages()` method. Open up your `MainApplication.java` file, which can be found in the following path: `android/app/src/main/java/com/your-app-name/MainApplication.java`
 
 Locate ReactNativeHost’s `getPackages()` method and add your package to the packages list `getPackages()` returns:
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```java
 @Override
   protected List<ReactPackage> getPackages() {
@@ -276,22 +172,6 @@ Locate ReactNativeHost’s `getPackages()` method and add your package to the pa
   }
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-override fun getPackages(): List<ReactPackage> {
-    val packages: MutableList<ReactPackage> = PackageList(this).packages
-    // Packages that cannot be autolinked yet can be added manually here, for example:
-    // packages.add(new MyReactNativePackage());
-    packages.add(MyAppPackage())
-    return packages
-}
-```
-
-</TabItem>
-</Tabs>
-
 You have now successfully registered your native module for Android!
 
 ### Test What You Have Built
@@ -412,9 +292,9 @@ CalendarModule.createCalendarEvent('foo', 'bar');
 
 ### Argument Types
 
-When a native module method is invoked in JavaScript, React Native converts the arguments from JS objects to their Java/Kotlin object analogues. So for example, if your Java Native Module method accepts a double, in JS you need to call the method with a number. React Native will handle the conversion for you. Below is a list of the argument types supported for native module methods and the JavaScript equivalents they map to.
+When a native module method is invoked in JavaScript, React Native converts the arguments from JS objects to their Java object analogues. So for example, if your Java Native Module method accepts a double, in JS you need to call the method with a number. React Native will handle the conversion for you. Below is a list of the argument types supported for native module methods and the JavaScript equivalents they map to.
 
-| Java/Kotlin   | JavaScript |
+| Java          | JavaScript |
 | ------------- | ---------- |
 | Boolean       | ?boolean   |
 | boolean       | boolean    |
@@ -434,9 +314,6 @@ When a native module method is invoked in JavaScript, React Native converts the
 
 For argument types not listed above, you will need to handle the conversion yourself. For example, in Android, `Date` conversion is not supported out of the box. You can handle the conversion to the `Date` type within the native method yourself like so:
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```java
     String dateFormat = "yyyy-MM-dd";
     SimpleDateFormat sdf = new SimpleDateFormat(dateFormat);
@@ -447,28 +324,10 @@ For argument types not listed above, you will need to handle the conversion your
 
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-    val dateFormat = "yyyy-MM-dd"
-    val sdf = SimpleDateFormat(dateFormat, Locale.US)
-    val eStartDate = Calendar.getInstance()
-    sdf.parse(startDate)?.let {
-        eStartDate.time = it
-    }
-```
-
-</TabItem>
-</Tabs>
-
 ### Exporting Constants
 
 A native module can export constants by implementing the native method `getConstants()`, which is available in JS. Below you will implement `getConstants()` and return a Map that contains a `DEFAULT_EVENT_NAME` constant you can access in JavaScript:
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```java
 @Override
 public Map<String, Object> getConstants() {
@@ -478,20 +337,6 @@ public Map<String, Object> getConstants() {
 }
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-override fun getConstants(): MutableMap<String, Any> {
-    val constants: MutableMap<String, Any> = HashMap()
-    constants["DEFAULT_EVENT_NAME"] = "New Event"
-    return constants
-}
-```
-
-</TabItem>
-</Tabs>
-
 The constant can then be accessed by invoking `getConstants` on the native module in JS:
 
 ```jsx
@@ -505,13 +350,10 @@ Technically it is possible to access constants exported in `getConstants()` dire
 
 ### Callbacks
 
-Native modules also support a unique kind of argument: a callback. Callbacks are used to pass data from Java/Kotlin to JavaScript for asynchronous methods. They can also be used to asynchronously execute JavaScript from the native side.
+Native modules also support a unique kind of argument: a callback. Callbacks are used to pass data from Java to JavaScript for asynchronous methods. They can also be used to asynchronously execute JavaScript from the native side.
 
 In order to create a native module method with a callback, first import the `Callback` interface, and then add a new parameter to your native module method of type `Callback`. There are a couple of nuances with callback arguments that will soon be lifted with TurboModules. First off, you can only have two callbacks in your function arguments- a successCallback and a failureCallback. In addition, the last argument to a native module method call, if it's a function, is treated as the successCallback, and the second to last argument to a native module method call, if it's a function, is treated as the failure callback.
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```java
 import com.facebook.react.bridge.Callback;
 
@@ -520,22 +362,7 @@ public void createCalendarEvent(String name, String location, Callback callBack)
 }
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-import com.facebook.react.bridge.Callback
-
-@ReactMethod fun createCalendarEvent(name: String, location: String, callback: Callback) {}
-```
-
-</TabItem>
-</Tabs>
-
-You can invoke the callback in your Java/Kotlin method, providing whatever data you want to pass to JavaScript. Please note that you can only pass serializable data from native code to JavaScript. If you need to pass back a native object you can use `WriteableMaps`, if you need to use a collection use `WritableArrays`. It is also important to highlight that the callback is not invoked immediately after the native function completes. Below the ID of an event created in an earlier call is passed to the callback.
-
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
+You can invoke the callback in your Java method, providing whatever data you want to pass to JavaScript. Please note that you can only pass serializable data from native code to JavaScript. If you need to pass back a native object you can use `WriteableMaps`, if you need to use a collection use `WritableArrays`. It is also important to highlight that the callback is not invoked immediately after the native function completes. Below the ID of an event created in an earlier call is passed to the callback.
 
 ```java
   @ReactMethod
@@ -545,20 +372,6 @@ You can invoke the callback in your Java/Kotlin method, providing whatever data
    }
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-  @ReactMethod
-  fun createCalendarEvent(name: String, location: String, callback: Callback) {
-      val eventId = ...
-      callback.invoke(eventId)
-  }
-```
-
-</TabItem>
-</Tabs>
-
 This method could then be accessed in JavaScript using:
 
 ```jsx
@@ -577,31 +390,14 @@ Another important detail to note is that a native module method can only invoke
 
 There are two approaches to error handling with callbacks. The first is to follow Node’s convention and treat the first argument passed to the callback as an error object.
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```java
-  @ReactMethod
-   public void createCalendarEvent(String name, String location, Callback callBack) {
-       Integer eventId = ...
-       callBack.invoke(null, eventId);
-   }
-```
-
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-  @ReactMethod
-  fun createCalendarEvent(name: String, location: String, callback: Callback) {
-      val eventId = ...
-      callback.invoke(null, eventId)
-  }
+@ReactMethod
+public void createCalendarEvent(String name, String location, Callback callBack) {
+    Integer eventId = ...
+    callBack.invoke(null, eventId);
+}
 ```
 
-</TabItem>
-</Tabs>
-
 In JavaScript, you can then check the first argument to see if an error was passed through:
 
 ```jsx
@@ -621,31 +417,12 @@ const onPress = () => {
 
 Another option is to use an onSuccess and onFailure callback:
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```java
 @ReactMethod
 public void createCalendarEvent(String name, String location, Callback myFailureCallback, Callback mySuccessCallback) {
 }
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-@ReactMethod
-  fun createCalendarEvent(
-      name: String,
-      location: String,
-      myFailureCallback: Callback,
-      mySuccessCallback: Callback
-  ) {}
-```
-
-</TabItem>
-</Tabs>
-
 Then in JavaScript you can add a separate callback for error and success responses:
 
 ```jsx
@@ -665,13 +442,10 @@ const onPress = () => {
 
 ### Promises
 
-Native modules can also fulfill a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), which can simplify your JavaScript, especially when using ES2016's [async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) syntax. When the last parameter of a native module Java/Kotlin method is a Promise, its corresponding JS method will return a JS Promise object.
+Native modules can also fulfill a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), which can simplify your JavaScript, especially when using ES2016's [async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) syntax. When the last parameter of a native module Java method is a Promise, its corresponding JS method will return a JS Promise object.
 
 Refactoring the above code to use a promise instead of callbacks looks like this:
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```java
 import com.facebook.react.bridge.Promise;
 
@@ -686,24 +460,6 @@ public void createCalendarEvent(String name, String location, Promise promise) {
 }
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-@ReactMethod
-fun createCalendarEvent(name: String, location: String, promise: Promise) {
-    try {
-        val eventId = ...
-        promise.resolve(eventId)
-    } catch (e: Throwable) {
-        promise.reject("Create Event Error", e)
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
 > Similar to callbacks, a native module method can either reject or resolve a promise (but not both) and can do so at most once. This means that you can either call a success callback or a failure callback, but not both, and each callback can only be invoked at most one time. A native module can, however, store the callback and invoke it later.
 
 The JavaScript counterpart of this method returns a Promise. This means you can use the `await` keyword within an async function to call it and wait for its result:
@@ -724,44 +480,18 @@ const onSubmit = async () => {
 
 The reject method takes different combinations of the following arguments:
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```java
 String code, String message, WritableMap userInfo, Throwable throwable
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-code: String, message: String, userInfo: WritableMap, throwable: Throwable
-```
-
-</TabItem>
-</Tabs>
-
-For more detail, you can find the `Promise.java` interface [here](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/Promise.java#L1). If `userInfo` is not provided, ReactNative will set it to null. For the rest of the parameters React Native will use a default value. The `message` argument provides the error `message` shown at the top of an error call stack. Below is an example of the error message shown in JavaScript from the following reject call in Java/Kotlin.
+For more detail, you can find the `Promise.java` interface [here](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/Promise.java#L1). If `userInfo` is not provided, ReactNative will set it to null. For the rest of the parameters React Native will use a default value. The `message` argument provides the error `message` shown at the top of an error call stack. Below is an example of the error message shown in JavaScript from the following reject call in Java.
 
-Java/Kotlin reject call:
-
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
+Java reject call:
 
 ```java
 promise.reject("Create Event error", "Error parsing date", e);
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-promise.reject("Create Event error", "Error parsing date", e)
-```
-
-</TabItem>
-</Tabs>
-
 Error message in React Native App when promise is rejected:
 
 <figure>
@@ -773,9 +503,6 @@ Error message in React Native App when promise is rejected:
 
 Native modules can signal events to JavaScript without being invoked directly. For example, you might want to signal to JavaScript a reminder that a calendar event from the native Android calendar app will occur soon. The easiest way to do this is to use the `RCTDeviceEventEmitter` which can be obtained from the `ReactContext` as in the code snippet below.
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```java
 ...
 import com.facebook.react.modules.core.DeviceEventManagerModule;
@@ -805,36 +532,6 @@ params.putString("eventProperty", "someValue");
 sendEvent(reactContext, "EventReminder", params);
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-private fun sendEvent(reactContext: ReactContext, eventName: String, params: WritableMap?) {
-    reactContext
-      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
-      .emit(eventName, params)
-}
-
-@ReactMethod
-fun addListener(eventName: String) {
-    // Set up any upstream listeners or background tasks as necessary
-}
-
-@ReactMethod
-fun removeListeners(count: Int) {
-    // Remove upstream listeners, stop unnecessary background tasks
-}
-...
-val params = Arguments.createMap().apply {
-    putString("eventProperty", "someValue")
-}
-...
-sendEvent(reactContext, "EventReminder", params)
-```
-
-</TabItem>
-</Tabs>
-
 JavaScript modules can then register to receive events by `addListener` on the [NativeEventEmitter](https://github.com/facebook/react-native/blob/master/Libraries/EventEmitter/NativeEventEmitter.js) class.
 
 ```jsx
@@ -859,28 +556,12 @@ import { NativeEventEmitter, NativeModules } from 'react-native';
 
 You'll need to listen to `onActivityResult` if you want to get results from an activity you started with `startActivityForResult`. To do this, you must extend `BaseActivityEventListener` or implement `ActivityEventListener`. The former is preferred as it is more resilient to API changes. Then, you need to register the listener in the module's constructor like so:
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```java
 reactContext.addActivityEventListener(mActivityResultListener);
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-reactContext.addActivityEventListener(mActivityResultListener);
-```
-
-</TabItem>
-</Tabs>
-
 Now you can listen to `onActivityResult` by implementing the following method:
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```java
 @Override
 public void onActivityResult(
@@ -892,28 +573,8 @@ public void onActivityResult(
 }
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-override fun onActivityResult(
-    activity: Activity?,
-    requestCode: Int,
-    resultCode: Int,
-    intent: Intent?
-) {
-    // Your logic here
-}
-```
-
-</TabItem>
-</Tabs>
-
 Let's implement a basic image picker to demonstrate this. The image picker will expose the method `pickImage` to JavaScript, which will return the path of the image when called.
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
 ```jsx
 public class ImagePickerModule extends ReactContextBaseJavaModule {
 
@@ -989,113 +650,17 @@ public class ImagePickerModule extends ReactContextBaseJavaModule {
 }
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-class ImagePickerModule(reactContext: ReactApplicationContext) :
-    ReactContextBaseJavaModule(reactContext) {
-
-    private var pickerPromise: Promise? = null
-
-    private val activityEventListener =
-        object : BaseActivityEventListener() {
-            override fun onActivityResult(
-                activity: Activity?,
-                requestCode: Int,
-                resultCode: Int,
-                intent: Intent?
-            ) {
-                if (requestCode == IMAGE_PICKER_REQUEST) {
-                    pickerPromise?.let { promise ->
-                        when (resultCode) {
-                            Activity.RESULT_CANCELED ->
-                                promise.reject(E_PICKER_CANCELLED, "Image picker was cancelled")
-                            Activity.RESULT_OK -> {
-                                val uri = intent?.data
-
-                                uri?.let { promise.resolve(uri.toString()) }
-                                    ?: promise.reject(E_NO_IMAGE_DATA_FOUND, "No image data found")
-                            }
-                        }
-
-                        pickerPromise = null
-                    }
-                }
-            }
-        }
-
-    init {
-        reactContext.addActivityEventListener(activityEventListener)
-    }
-
-    override fun getName() = "ImagePickerModule"
-
-    @ReactMethod
-    fun pickImage(promise: Promise) {
-
-        if (currentActivity == null) {
-            promise.reject(E_ACTIVITY_DOES_NOT_EXIST, "Activity doesn't exist")
-            return
-        }
-
-        // Store the promise to resolve/reject when picker returns data
-        pickerPromise = promise
-
-        try {
-            val galleryIntent = Intent(Intent.ACTION_PICK)
-
-            galleryIntent.type = "image/\*"
-
-            val chooserIntent = Intent.createChooser(galleryIntent, "Pick an image")
-
-            currentActivity!!.startActivityForResult(chooserIntent, IMAGE_PICKER_REQUEST)
-        } catch (t: Throwable) {
-            pickerPromise?.reject(E_FAILED_TO_SHOW_PICKER, t)
-            pickerPromise = null
-        }
-    }
-
-    companion object {
-        const val IMAGE_PICKER_REQUEST = 1
-        const val E_ACTIVITY_DOES_NOT_EXIST = "E_ACTIVITY_DOES_NOT_EXIST"
-        const val E_PICKER_CANCELLED = "E_PICKER_CANCELLED"
-        const val E_FAILED_TO_SHOW_PICKER = "E_FAILED_TO_SHOW_PICKER"
-        const val E_NO_IMAGE_DATA_FOUND = "E_NO_IMAGE_DATA_FOUND"
-    }
-}
-```
-
-</TabItem>
-</Tabs>
-
 ### Listening to Lifecycle Events
 
 Listening to the activity's LifeCycle events such as `onResume`, `onPause` etc. is very similar to how `ActivityEventListener` was implemented. The module must implement `LifecycleEventListener`. Then, you need to register a listener in the module's constructor like so:
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
-```java
+```jsx
 reactContext.addLifecycleEventListener(this);
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-reactContext.addLifecycleEventListener(this)
-```
-
-</TabItem>
-</Tabs>
-
 Now you can listen to the activity's LifeCycle events by implementing the following methods:
 
-<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
-<TabItem value="java">
-
-```java
+```jsx
 @Override
 public void onHostResume() {
    // Activity `onResume`
@@ -1110,26 +675,6 @@ public void onHostDestroy() {
 }
 ```
 
-</TabItem>
-<TabItem value="kotlin">
-
-```kotlin
-override fun onHostResume() {
-    // Activity `onResume`
-}
-
-override fun onHostPause() {
-    // Activity `onPause`
-}
-
-override fun onHostDestroy() {
-    // Activity `onDestroy`
-}
-```
-
-</TabItem>
-</Tabs>
-
 ### Threading
 
 To date, on Android, all native module async methods execute on one thread. Native modules should not have any assumptions about what thread they are being called on, as the current assignment is subject to change in the future. If a blocking call is required, the heavy work should be dispatched to an internally managed worker thread, and any callbacks distributed from there.

From 2fc8f3bd574d157d994a0b99c3318112a6f830b1 Mon Sep 17 00:00:00 2001
From: Alan Hughes <hughesno1@gmail.com>
Date: Fri, 25 Mar 2022 12:37:49 +0000
Subject: [PATCH 5/8] Update to reflect feedback

---
 docs/native-modules-android.md | 96 ++++++++++++++++++----------------
 1 file changed, 52 insertions(+), 44 deletions(-)

diff --git a/docs/native-modules-android.md b/docs/native-modules-android.md
index caf24ea8e58..7bf2d691b97 100644
--- a/docs/native-modules-android.md
+++ b/docs/native-modules-android.md
@@ -28,7 +28,7 @@ We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide
 
 ### Create A Custom Native Module File
 
-The first step is to create the (CalendarModule.java or CalendarModule.kt) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder. This Java/Kotlin file will contain your native module Java/Kotlin class.
+The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder (the folder is the same for both for either Kotlin of Java). This Java/Kotlin file will contain your native module Java/Kotlin class.
 
 <figure>
   <img src="/docs/assets/native-modules-android-add-class.png" width="700" alt="Image of adding a class called CalendarModule.java within the Android Studio." />
@@ -173,10 +173,23 @@ Once you finish implementing the native module and hook it up in JavaScript, you
 
 You can pass `isBlockingSynchronousMethod = true` to a native method to mark it as a synchronous method.
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 @ReactMethod(isBlockingSynchronousMethod = true)
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+@ReactMethod(isBlockingSynchronousMethod = true)
+```
+
+</TabItem>
+</Tabs>
+
 At the moment, we do not recommend this, since calling methods synchronously can have strong performance penalties and introduce threading-related bugs to your native modules. Additionally, please note that if you choose to enable `isBlockingSynchronousMethod`, your app can no longer use the Google Chrome debugger. This is because synchronous methods require the JS VM to share memory with the app. For the Google Chrome debugger, React Native runs inside the JS VM in Google Chrome, and communicates asynchronously with the mobile devices via WebSockets.
 
 ### Register the Module (Android Specific)
@@ -238,16 +251,13 @@ import com.facebook.react.uimanager.ViewManager
 
 class MyAppPackage : ReactPackage {
 
-    override fun createViewManagers(reactContext: ReactApplicationContext):
-            MutableList<ViewManager<View, ReactShadowNode<*>>> =
-        mutableListOf()
+    override fun createViewManagers(
+        reactContext: ReactApplicationContext
+    ): MutableList<ViewManager<View, ReactShadowNode<*>>> = mutableListOf()
 
-    override fun createNativeModules(reactContext: ReactApplicationContext):
-            MutableList<NativeModule> {
-        val modules = mutableListOf<NativeModule>()
-        modules.add(CalendarModule(reactContext))
-        return modules
-    }
+    override fun createNativeModules(
+        reactContext: ReactApplicationContext
+    ): MutableList<NativeModule> = listOf(CalendarModule(reactContext)).toMutableList()
 }
 ```
 
@@ -258,7 +268,7 @@ This file imports the native module you created, `CalendarModule`. It then insta
 
 > It is worth noting that this way of registering native modules eagerly initializes all native modules when the application starts, which adds to the startup time of an application. You can use [TurboReactPackage](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/TurboReactPackage.java) as an alternative. Instead of `createNativeModules`, which return a list of instantiated native module objects, TurboReactPackage implements a `getModule(String name, ReactApplicationContext rac)` method that creates the native module object, when required. TurboReactPackage is a bit more complicated to implement at the moment. In addition to implementing a `getModule()` method, you have to implement a `getReactModuleInfoProvider()` method, which returns a list of all the native modules the package can instantiate along with a function that instantiates them, example [here](https://github.com/facebook/react-native/blob/8ac467c51b94c82d81930b4802b2978c85539925/ReactAndroid/src/main/java/com/facebook/react/CoreModulesPackage.java#L86-L165). Again, using TurboReactPackage will allow your application to have a faster startup time, but it is currently a bit cumbersome to write. So proceed with caution if you choose to use TurboReactPackages.
 
-To register the `CalendarModule` package, you must add `MyAppPackage` to the list of packages returned in ReactNativeHost's `getPackages()` method. Open up your `MainApplication.java` or `MainApplication.kt` file, which can be found in the following path: `android/app/src/main/java/com/your-app-name/MainApplication.java` or `android/app/src/main/kotlin/com/your-app-name/MainApplication.kt`.
+To register the `CalendarModule` package, you must add `MyAppPackage` to the list of packages returned in ReactNativeHost's `getPackages()` method. Open up your `MainApplication.java` or `MainApplication.kt` file, which can be found in the following path: `android/app/src/main/java/com/your-app-name/`.
 
 Locate ReactNativeHost’s `getPackages()` method and add your package to the packages list `getPackages()` returns:
 
@@ -280,13 +290,13 @@ Locate ReactNativeHost’s `getPackages()` method and add your package to the pa
 <TabItem value="kotlin">
 
 ```kotlin
-override fun getPackages(): List<ReactPackage> {
-    val packages: MutableList<ReactPackage> = PackageList(this).packages
-    // Packages that cannot be autolinked yet can be added manually here, for example:
-    // packages.add(new MyReactNativePackage());
-    packages.add(MyAppPackage())
-    return packages
-}
+override fun getPackages(): List<ReactPackage> =
+    PackageList(this).packages.apply {
+        // Packages that cannot be autolinked yet can be added manually here, for example:
+        // packages.add(new MyReactNativePackage());
+        add(MyAppPackage())
+    }
+
 ```
 
 </TabItem>
@@ -414,23 +424,23 @@ CalendarModule.createCalendarEvent('foo', 'bar');
 
 When a native module method is invoked in JavaScript, React Native converts the arguments from JS objects to their Java/Kotlin object analogues. So for example, if your Java Native Module method accepts a double, in JS you need to call the method with a number. React Native will handle the conversion for you. Below is a list of the argument types supported for native module methods and the JavaScript equivalents they map to.
 
-| Java/Kotlin   | JavaScript |
-| ------------- | ---------- |
-| Boolean       | ?boolean   |
-| boolean       | boolean    |
-| Double        | ?number    |
-| double        | number     |
-| String        | string     |
-| Callback      | Function   |
-| ReadableMap   | Object     |
-| ReadableArray | Array      |
+| Java          | Kotlin        | JavaScript |
+| ------------- | ------------- | ---------- |
+| Boolean       | Boolean       | ?boolean   |
+| boolean       |               | boolean    |
+| Double        | Double        | ?number    |
+| double        |               | number     |
+| String        | String        | string     |
+| Callback      | Callback      | Function   |
+| ReadableMap   | ReadableMap   | Object     |
+| ReadableArray | ReadableArray | Array      |
 
 > The following types are currently supported but will not be supported in TurboModules. Please avoid using them:
 >
-> - Integer -> ?number
-> - int -> number
-> - Float -> ?number
-> - float -> number
+> - Integer Java/Kotlin -> ?number
+> - Float Java/Kotlin -> ?number
+> - int Java -> number
+> - float Java -> number
 
 For argument types not listed above, you will need to handle the conversion yourself. For example, in Android, `Date` conversion is not supported out of the box. You can handle the conversion to the `Date` type within the native method yourself like so:
 
@@ -454,8 +464,10 @@ For argument types not listed above, you will need to handle the conversion your
     val dateFormat = "yyyy-MM-dd"
     val sdf = SimpleDateFormat(dateFormat, Locale.US)
     val eStartDate = Calendar.getInstance()
-    sdf.parse(startDate)?.let {
-        eStartDate.time = it
+    try {
+        sdf.parse(startDate)?.let {
+            eStartDate.time = it
+        }
     }
 ```
 
@@ -482,11 +494,8 @@ public Map<String, Object> getConstants() {
 <TabItem value="kotlin">
 
 ```kotlin
-override fun getConstants(): MutableMap<String, Any> {
-    val constants: MutableMap<String, Any> = HashMap()
-    constants["DEFAULT_EVENT_NAME"] = "New Event"
-    return constants
-}
+override fun getConstants(): MutableMap<String, Any> =
+    hashMapOf("DEFAULT_EVENT_NAME" to "New Event")
 ```
 
 </TabItem>
@@ -1033,28 +1042,27 @@ class ImagePickerModule(reactContext: ReactApplicationContext) :
 
     @ReactMethod
     fun pickImage(promise: Promise) {
+        val currentActivity = currentActivity
 
         if (currentActivity == null) {
             promise.reject(E_ACTIVITY_DOES_NOT_EXIST, "Activity doesn't exist")
             return
         }
 
-        // Store the promise to resolve/reject when picker returns data
         pickerPromise = promise
 
         try {
-            val galleryIntent = Intent(Intent.ACTION_PICK)
-
-            galleryIntent.type = "image/\*"
+            val galleryIntent = Intent(Intent.ACTION_PICK).apply { type = "image\/*" }
 
             val chooserIntent = Intent.createChooser(galleryIntent, "Pick an image")
 
-            currentActivity!!.startActivityForResult(chooserIntent, IMAGE_PICKER_REQUEST)
+            currentActivity.startActivityForResult(chooserIntent, IMAGE_PICKER_REQUEST)
         } catch (t: Throwable) {
             pickerPromise?.reject(E_FAILED_TO_SHOW_PICKER, t)
             pickerPromise = null
         }
     }
+}
 
     companion object {
         const val IMAGE_PICKER_REQUEST = 1

From 3d39bee701605c8fea549cee0ff645e744ed512d Mon Sep 17 00:00:00 2001
From: Alan Hughes <hughesno1@gmail.com>
Date: Fri, 25 Mar 2022 14:31:05 +0000
Subject: [PATCH 6/8] Update: don't shadow variable name in pickImage method

---
 docs/native-modules-android.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/native-modules-android.md b/docs/native-modules-android.md
index 7bf2d691b97..5f07e9b25c5 100644
--- a/docs/native-modules-android.md
+++ b/docs/native-modules-android.md
@@ -1042,9 +1042,9 @@ class ImagePickerModule(reactContext: ReactApplicationContext) :
 
     @ReactMethod
     fun pickImage(promise: Promise) {
-        val currentActivity = currentActivity
+        val activity = currentActivity
 
-        if (currentActivity == null) {
+        if (activity == null) {
             promise.reject(E_ACTIVITY_DOES_NOT_EXIST, "Activity doesn't exist")
             return
         }
@@ -1056,7 +1056,7 @@ class ImagePickerModule(reactContext: ReactApplicationContext) :
 
             val chooserIntent = Intent.createChooser(galleryIntent, "Pick an image")
 
-            currentActivity.startActivityForResult(chooserIntent, IMAGE_PICKER_REQUEST)
+            activity.startActivityForResult(chooserIntent, IMAGE_PICKER_REQUEST)
         } catch (t: Throwable) {
             pickerPromise?.reject(E_FAILED_TO_SHOW_PICKER, t)
             pickerPromise = null

From 2bc6beb3aea140cb06d487d1a79318abe954a92c Mon Sep 17 00:00:00 2001
From: Alan Hughes <hughesno1@gmail.com>
Date: Fri, 25 Mar 2022 14:43:49 +0000
Subject: [PATCH 7/8] Update: remove unecessary whitespace and extra bracket
 causing error

---
 docs/native-modules-android.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/native-modules-android.md b/docs/native-modules-android.md
index 5f07e9b25c5..c03b5ef5374 100644
--- a/docs/native-modules-android.md
+++ b/docs/native-modules-android.md
@@ -296,7 +296,6 @@ override fun getPackages(): List<ReactPackage> =
         // packages.add(new MyReactNativePackage());
         add(MyAppPackage())
     }
-
 ```
 
 </TabItem>
@@ -1062,7 +1061,6 @@ class ImagePickerModule(reactContext: ReactApplicationContext) :
             pickerPromise = null
         }
     }
-}
 
     companion object {
         const val IMAGE_PICKER_REQUEST = 1

From b6d32b53c45ce38df93ddd854aaded400616bebc Mon Sep 17 00:00:00 2001
From: Alan Hughes <hughesno1@gmail.com>
Date: Fri, 25 Mar 2022 15:01:54 +0000
Subject: [PATCH 8/8] Update: add missing imports

---
 docs/native-modules-android.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/native-modules-android.md b/docs/native-modules-android.md
index c03b5ef5374..50f78ea9cb3 100644
--- a/docs/native-modules-android.md
+++ b/docs/native-modules-android.md
@@ -817,6 +817,12 @@ sendEvent(reactContext, "EventReminder", params);
 <TabItem value="kotlin">
 
 ```kotlin
+...
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.modules.core.DeviceEventManagerModule
+...
+
 private fun sendEvent(reactContext: ReactContext, eventName: String, params: WritableMap?) {
     reactContext
       .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)