Powering React Native with Kotlin and Swift

Although React Native has made a lot of progress, it still lacks builtin support for Kotlin and Swift. It is still shipped with Java and Objective-C templates for native code. Since both Android and iOS have made up their minds to shift their focus from legacy languages to Kotlin and Swift, it’s time for developers to switch to the latest trends.

Since both Android and iOS are providing first-class support to Kotlin and Swift respectively, they have built up good documentation for the languages. However, they will still work with Java and Objective-C, and there are still no plans to dump support for them.

Kotlin and Swift both come in handy for React Native developers when they need to build native implementations using the bridge. So if you are already using bridging or planning to learn/use bridge this post will be helpful for you.

Integrating Kotlin Support for Android

1. Open and edit android/build.gradle

Add the Kotlin version

buildscript {    
  ext {  
        kotlin_version = '1.3.61'
        ...
  }

Make sure google() is in the buildscript.repositories and allprojects.repositories

Update build.tools and add kotlin-grade-plugin classpath to dependencies.

dependencies {             
  classpath("com.android.tools.build:gradle:3.4.2")        
  classpath("org.jetbrains.kotlin:kotlin-gradle-
            plugin:$kotlin_version")
}

Finally, our android/build.gradle will be:

2. Add imports in android/app/build.gradle

apply plugin: "kotlin-android"
apply plugin: "kotlin-android-extensions"

3. Delete MainApplication.java and create a new file MainApplication.kt

4. Delete MainActivity.java and create a new file MainActivity.kt

Integrating Swift Support for iOS

1) Open Workspace project in Xcode

2) Delete these files:

• AppDelegate.h
• AppDelegate.m
• main.m

3) Create a new Swift file with the name AppDelegate and on “Next”, also click on create the Bridging header

4) Copy below in AppDelegate.swift

Replace text REPLACE_WITH_YOUR_PROJECT_NAME with your projectName. In my case it was KotlinSwiftRN.

5) Copy the below code in the Bridging header file

On the React Native Side we will keep our UI Simple with Platform-specific Image and Text.

Note: If the build fails, try switching to legacy build system by going to FileMenu→Workspace Settings and Choose Legacy Build System

You can refer my GitHub Repo for the full codebase:

KPS250/ReactNative_Kotlin-Swift