React Native Project with Kotlin and Swift

When we create react native project using react native CLI (v2.0.1) it initialise Android project Java and iOS project with Objective-c. Right now Kotlin is default language for Android application development and Swift is default language for iOS application development. So we can use below guide to change language of react-native Android and iOS project as follows:-

Android Project:

1. Open android project in Android Studio by navigating in android folder and click on build.gradle as shown in below screenshot.

2. Approach 1: Select each java file (ReactNativeFlipper, MainActivity, MainApplication) one by one and click on “Code” menu option and the choose “convert java file to kotlin File” as shown in below screenshot. This action will download kotlin runtime, also do required changes in app level gradle file and in module level gradle file. Once you convert all java file to kotlin you are ready to use kotlin for native android module development.

Approach #2:

i) In app module gradle add following :

//Add appy plugin section
apply plugin: 'kotlin-android'

//Add in implemementation section
implementation 'androidx.core:core-ktx:$'
implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"

ii) In Project level gradle add following:

   repositories {
        google()
        ...
    }


dependencies {
    ...

    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}

Sync both gradle files and you are ready to go.

iOS Project:

1. Open iOS project in Xcode by navigating in ios folder and click on <projectname>.xcworkspace as shown in below screenshot.

2. Delete Appdelegate.m, Appdelegate.h, main.m files (shown by arrow in screenshot) and select “Move to trash” option while deleting these files.

3. Select project folder, right click and select “New File…” option as shown in screenshot.

Select swift file type and give file name “AppDelegate.swift”

Xcode display a prompt asking if you’d like to configure an Objective-C bridging header. Click Create Bridging Header.

4. Open <project_name>-Bridging-Header.h file and paste following code.

#import <React/RCTBridgeModule.h>

#import <React/RCTBridge.h>

#import <React/RCTEventDispatcher.h>

#import <React/RCTRootView.h>

#import <React/RCTUtils.h>

#import <React/RCTConvert.h>

#import <React/RCTBundleURLProvider.h>

5. Open AppDelegate.swift add following code.

@UIApplicationMain

class AppDelegate: UIResponder, UIApplicationDelegate {

var window: UIWindow?

var bridge: RCTBridge!

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

let jsCodeLocation: URL

jsCodeLocation = RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: “index”, fallbackResource:nil)

let rootView = RCTRootView(bundleURL: jsCodeLocation, moduleName: “<your-project-name>”, initialProperties: nil, launchOptions: launchOptions)

let rootViewController = UIViewController()

rootViewController.view = rootView

self.window = UIWindow(frame: UIScreen.main.bounds)

self.window?.rootViewController = rootViewController

self.window?.makeKeyAndVisible()

return true

}

}

Now you are ready to use swift for native iOS module development.

Once you complete above mentioned steps for Android and iOS and if all goes well you can now run Android and iOS applications from command prompt using following commands.

Android : react-native run-android

iOS: react-native run-ios

If you like this story, please click on clap. Suggestions and comments also welcome.

Bonus: How to change metro bundler port?

i) First add you port in place of <custom port> in Package.json

“scripts”: {

“android”: “react-native run-android — — port <custom port>”,

“ios”: “react-native run-ios --port <custom port>”,

“lint”: “eslint .”,

“start”: “react-native start --port <custom port>”,

“test”: “jest”

}

Now you can run npm run android or npm run ios, it will start bundler on custom port.

ii) You can change metro bundler port, while running application from Android Studio. Open Android project in Android Studio and add following line in gradle.properties. Here in place of <custom port> add your port.

reactNativeDevServerPort=<custom port>

iii) You can change metro bundler port, while running application from Xcode. Open iOS project in Xcode and update Build Phases-> Start Packager and replace <Custom Port> with your port as below :-

export RCT_METRO_PORT=”${RCT_METRO_PORT:=<Custom Port>}”

echo “export RCT_METRO_PORT=${RCT_METRO_PORT}” > “${SRCROOT}/../node_modules/react-native/scripts/.packager.env”

if [ -z “${RCT_NO_LAUNCH_PACKAGER+xxx}” ] ; then

if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then

if ! curl -s “http://localhost:${RCT_METRO_PORT}/status" | grep -q “packager-status:running” ; then

echo “Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly”

exit 2

fi

else

open