Ein natives Legacy-Modul in Swift schreiben

iOS Native Modules Overview

Creating the Swift Module Class

// CalendarModule.swift
import Foundation

@objc(CalendarModule)
class CalendarModule: NSObject {

  @objc
  func createCalendarEvent(
    _ name: String,
    location: String
  ) {
    print('Creating event: \(name) at \(location)')
  }
}

The Objective-C Bridge File

// CalendarModuleBridge.m
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(CalendarModule, NSObject)

RCT_EXTERN_METHOD(
  createCalendarEvent:(NSString *)name
  location:(NSString *)location
)

@end

Exposing the Module Name

// JavaScript — accessing the iOS module
import { NativeModules } from 'react-native';

const { CalendarModule } = NativeModules;

if (!CalendarModule) {
  console.warn('CalendarModule not found — iOS only?');
} else {
  CalendarModule.createCalendarEvent('Team Lunch', 'Conference Room A');
}

Returning Data with Promises in Swift

// Swift method
@objc
func getDeviceModel(
  _ resolve: @escaping RCTPromiseResolveBlock,
  rejecter reject: @escaping RCTPromiseRejectBlock
) {
  let model = UIDevice.current.model
  resolve(model)
}

// Bridge file
RCT_EXTERN_METHOD(
  getDeviceModel:(RCTPromiseResolveBlock)resolve
  rejecter:(RCTPromiseRejectBlock)reject
)

// JavaScript
const model = await CalendarModule.getDeviceModel();

Running on the Main Thread

@objc
static func requiresMainQueueSetup() -> Bool {
  return true // init on main thread
}

@objc
func openAlert(_ message: String) {
  DispatchQueue.main.async {
    let alert = UIAlertController(
      title: 'Alert',
      message: message,
      preferredStyle: .alert
    )
    alert.addAction(UIAlertAction(title: 'OK', style: .default))
    UIApplication.shared.keyWindow?.rootViewController?
      .present(alert, animated: true)
  }
}

Exporting Constants to JavaScript

// Swift
@objc
func constantsToExport() -> [String: Any]! {
  return [
    'PLATFORM': 'ios',
    'OS_VERSION': UIDevice.current.systemVersion,
    'IS_PAD': UIDevice.current.userInterfaceIdiom == .pad
  ]
}

// Bridge file (add inside the interface)
RCT_EXPORT_MODULE()

// JavaScript
const { PLATFORM, IS_PAD } = NativeModules.CalendarModule;
console.log(PLATFORM, IS_PAD);

Sending Events to JavaScript

// Swift
@objc(LocationModule)
class LocationModule: RCTEventEmitter {
  override func supportedEvents() -> [String]! {
    return ['onLocationUpdate']
  }

  func startTracking() {
    sendEvent(withName: 'onLocationUpdate',
              body: ['lat': 37.7749, 'lng': -122.4194])
  }
}

// JavaScript
import { NativeModules, NativeEventEmitter } from 'react-native';
const emitter = new NativeEventEmitter(NativeModules.LocationModule);
const sub = emitter.addListener('onLocationUpdate', (loc) => {
  console.log(loc.lat, loc.lng);
});
// cleanup: sub.remove();

Cross-Platform Module Wrapper

// CalendarModule.js
import { NativeModules, Platform } from 'react-native';

const { CalendarModule: NativeCalendar } = NativeModules;

export const CalendarModule = {
  createEvent: (name, location) => {
    if (Platform.OS === 'ios' && NativeCalendar) {
      NativeCalendar.createCalendarEvent(name, location);
    } else {
      console.warn('CalendarModule not available on', Platform.OS);
    }
  }
};

Handling Bridging Header for Mixed Projects

// YourApp-Bridging-Header.h
// Auto-created by Xcode when adding first Swift file

#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>
#import <React/RCTLog.h>
#import <React/RCTUtils.h>

Testing the Native Module End-to-End

// Quick integration test in a component
import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import { CalendarModule } from './CalendarModule';

export function TestScreen() {
  useEffect(() => {
    CalendarModule.createEvent('Standup', 'Zoom')
      .then((result) => console.log('Event created:', result))
      .catch((err) => console.error('Error:', err));
  }, []);

  return <View><Text>Native Module Test</Text></View>;
}

Quick Check

Lesson Recap