React Native with Kotlin Native

Overview

This is a "hello world" example of a React Native application which includes a "native module" (NativeModules.Greeting) which is implemented using Kotlin multiplatform. The Greeting module requires some Java/Swift glue code to export its interface in the way React Native requires, but the idea here is to minimise that glue code and to be able to keep all the business logic in one place, in the Kotlin module.

The commits from 948ff89 to 3ff1dda should roughly demonstrate the process I went through to create this example in a step-by-step fashion.

Diagram

                           Android glue code
                         ↗                   ↘ 
"greeting" Kotlin module                       "Greeting" native module → React Native JS code
                         ↘                   ↗
                             iOS glue code
                        

• greeting Kotlin module
• Android glue code
• iOS glue code
• Usage in React Native JS code

Use cases

1. Creating native modules that require shared Android/iOS business logic.
2. Creating native modules using pre-existing Kotlin modules.
3. Sharing code between fully native Android/iOS apps and React Native apps.

Random notes

1. When you want to use the shared Kotlin module from the iOS code you need to add a script build phase to run this script:

   "$SRCROOT/../greeting/gradlew" -p "$SRCROOT/../greeting" copyFramework \
   -Pconfiguration.build.dir="$CONFIGURATION_BUILD_DIR"          \
   -Pkotlin.build.type="$KOTLIN_BUILD_TYPE"                      \
   -Pkotlin.target="$KOTLIN_TARGET"
   

   and you also need to add the .framework using the Build Target > General > Embedded Binaries > + option.