{
  "platforms": ["ios", "android"],
  "ios": {
    "modules": ["MyNativeScannerModule"]
  },
  "android": {
    "modules": ["com.mynativescanner.MyNativeScannerModule"]
  }
}

Writing the iOS Implementation with Swift

On iOS, Expo modules are written in Swift using the ExpoModulesCore framework. This framework provides clean macros that make exporting functions, constants, and event listeners straightforward.

Here is a simple example of an iOS module that retrieves device battery status or performs a native task:

import ExpoModulesCore

public class MyNativeScannerModule: Module {
  public func definition() -> ModuleDefinition {
    // Sets the name of the module in JavaScript
    Name("MyNativeScanner")

    // Defines synchronous functions callable from JS
    Function("getSystemInfo") { () -> String in
      return "iOS Native Bridge Active"
    }

    // Defines asynchronous functions using promises
    AsyncFunction("scanCode") { (options: [String: Any], promise: Promise) in
      DispatchQueue.main.async {
        // Perform native scanning logic here
        let success = true
        if success {
          promise.resolve("SCAN_RESULT_12345")
        } else {
          promise.reject("SCAN_ERROR", "Failed to scan code", nil)
        }
      }
    }
  }
}

Writing the Android Implementation with Kotlin

On Android, you implement the corresponding module in Kotlin using the same architectural patterns. Kotlin makes interacting with Android system APIs concise and readable.

Here is how the Android counterpart looks:

package com.mynativescanner

import expo.modules.kotlin.modules.Module
import expo.modules.kotlin.modules.ModuleDefinition

public class MyNativeScannerModule : Module {
  override fun definition() = ModuleDefinition {
    Name("MyNativeScanner")

    Function("getSystemInfo") {
      return@Function "Android Native Bridge Active"
    }

    AsyncFunction("scanCode") { options: Map<String, Any>, promise: expo.modules.kotlin.promise.Promise ->
      // Perform native Android scanning logic here
      val success = true
      if (success) {
        promise.resolve("SCAN_RESULT_12345")
      } else {
        promise.reject("SCAN_ERROR", "Failed to scan code", null)
      }
    }
  }
}

Exposing the Module to TypeScript

Once your Swift and Kotlin code are in place, you expose them through your TypeScript entry file using requireNativeModule provided by expo-modules-core.

import { requireNativeModule } from 'expo-modules-core';

// Import the native module by the name defined in Swift/Kotlin
const MyNativeScanner = requireNativeModule('MyNativeScanner');

export function getSystemInfo(): string {
  return MyNativeScanner.getSystemInfo();
}

export async function scanCode(options: { timeout: number }): Promise<string> {
  return await MyNativeScanner.scanCode(options);
}

Now, you can import this function anywhere in your React Native app just like any standard TypeScript module.

Testing and Building with EAS

Because custom native modules contain compiled Swift and Kotlin code, standard Expo Go will not be able to execute your native changes directly. You will need to use development builds (npx expo run:ios and npx expo run:release or npx expo run:android) to test your code locally.

When you are ready for production, EAS Build handles compiling your custom Swift and Kotlin code automatically in the cloud, exactly as it does for any other native dependency.

Wrapping Up

Writing custom native modules used to be a major headache in cross-platform mobile development. Today, the Expo Modules API makes it remarkably clean and maintainable. By keeping your native code encapsulated and well-tested, you can extend your React Native apps to do almost anything a fully native app can do.

Need help building a custom mobile app or integrating complex native SDKs into your Expo project? Get in touch and let's talk about your requirements.