Event Dispatcher - dispatch event from Swift

[LuongTruong]

Hi everyone, I follow this link and able to create an event in both Android and iOS using the new architecture.

The function to dispatch an event: emitOnValueChanged

However, from my previous project, I have a location tracking feature written in Swift and will send events to JS code.

Instead of re-write the code in Objective-C, I decide to call emitOnValueChanged method inside Swift and currently get stuck at it.

Below is the code and how I set it up. To be short, the below files only contain some very basic code so we can investigate in why Objective-C methods are not available in MyModule.swift.

I think if I can call one Objective-C method inside MyModule.swift, I can do the same with the emitOnValueChanged

Step 1: Create a sample library

npx create-react-native-library@0.42.2 my-module --reactNativeVersion 0.76.0

• Kotlin & Objective C
• Vanilla

Step 2: Add hello method

NativeMyModule.ts

import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  // Add this method
  hello(): void;

  multiply(a: number, b: number): number;
}

export default TurboModuleRegistry.getEnforcing<Spec>('MyModule');

index.tsx

const MyModule = require('./NativeMyModule').default;

// Export method
export function hello(): void {
  MyModule.hello();
}
export function multiply(a: number, b: number): number {
  return MyModule.multiply(a, b);
}

App.tsx

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { hello } from 'my-module';
import { useCallback } from 'react';

export default function App() {
  // Hello
  const sayHello = useCallback(() => {
    hello();
  }, []);

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={sayHello}>
        <Text style={styles.buttonText}>Say Hello</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 10,
  },
  button: {
    width: 200,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 5,
    backgroundColor: 'powderblue',
  },
  buttonText: {
    color: 'black',
    fontSize: 20,
  },
});

MyModule.swift

import Foundation

@objc(MySwiftClass)
class MySwiftClass: NSObject {
  // Apply single ton
  @objc static let shared = MySwiftClass()

  // This is the "hello" method will be called in Objective-C
  @objc func hello() -> Void {
    print("Hello from Swift")
  }
}

my-module-Bridging-Header.h

#import "MyModule.h"

MyModule.mm

#import "MyModule.h"
#import "my_module-Swift.h"

@implementation MyModule
RCT_EXPORT_MODULE()

// Don't compile this code when we build for the old architecture.
#ifdef RCT_NEW_ARCH_ENABLED
- (void)hello {
  // Call "hello"
  MySwiftClass *swiftInstance = [MySwiftClass shared];
  [swiftInstance hello];
}
- (NSNumber *)multiply:(double)a b:(double)b {
    NSNumber *result = @(a * b);

    return result;
}

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
    (const facebook::react::ObjCTurboModule::InitParams &)params
{
    return std::make_shared<facebook::react::NativeMyModuleSpecJSI>(params);
}
#endif

@end

I am able to call and print the "Hello from Swift" message

Step 3: Call multiply method of Objective-C inside MyModule.swift

MyModule.swift

import Foundation

@objc(MySwiftClass)
class MySwiftClass: NSObject {
  @objc static let shared = MySwiftClass()

  @objc func hello() -> Void {
    print("Hello from Swift")
    let myModule = MyModule()
    myModule.multiply(3, b: 7)      // <= Error: Value of type 'MyModule' has no member 'multiply'
  }
}

Please let me know if you have any suggestion.

Many thanks!

[atlj]

Hey, can you also share MyModule.h? I think you should declare the multiply method there before you're able to import from swift. So adding a declaration for the multiply function in the header might help here.

[LuongTruong]

Hello @atlj , I post my MyModule.h in this comment, please let me know if you have any idea.

Or, if you have any example to call the Objective-C methods from Swift files, please let me know.

Many thanks

[LuongTruong]

Hello @atlj , I tried to declare the multiply method, but the error is still there. Below is my MyModule.h

#ifdef RCT_NEW_ARCH_ENABLED
#import "RNMyModuleSpec.h"

@interface MyModule : NSObject <NativeMyModuleSpec>

- (NSNumber *)multiply:(double)a b:(double)b;
#else
#import <React/RCTBridgeModule.h>

@interface MyModule : NSObject <RCTBridgeModule>
#endif

@end

[LuongTruong]

Hello @atlj , I am able to call the Objective-C method inside Swift file by commenting the if else RCT_NEW_ARCH_ENABLED

However, by doing that, I am not able to build the project anymore and get the below error

// from RNAwesomeLibrarySpec
/.../awesome-library/ios/generated/RNAwesomeLibrarySpec/RNAwesomeLibrarySpec.h:15:2 This file must be compiled as Obj-C++. If you are importing it, you must change your file extension to .mm.

Note: I am using the latest version:

{
  "create-react-native-library": "0.44.1",
  "react-native": "0.76.2"
},

Please let me know if you need anything else for investigetion.

Many thanks!

[atlj]

Hey, I think I have a solution, you're trying to initialize MyModule on swift. And this is a class coming from objc. Instead of trying to initialize it, what you can do is, create a custom swift initializer:

import React // You don't need to rely on objective c to swift bridging header as the React framework already exposes a module

@objc(MySwiftClass)
class MySwiftClass: NSObject {
  weak let eventEmitter: RCTEventEmitter // This is weak so we don't prevent the objc module from getting freed

  @objc public init(eventEmitter: RCTEventEmitter) { // RCTEventEmitter class is coming from the React module. It's the base class for implementing event emitters
    self.eventEmitter = eventEmitter // Hold the reference
  }

  private func sendEvent(name: String, body: [String, Any]?) { // You can either wrap it inside a function or directly call the eventEmitter.
    self.eventEmitter?.sendEvent(
      withName: name,
      body: body
    )
  }
// ...

Then on objc side, you have to pass self while initializing this Swift class:

#import "MyModule.h"
#import "my_module-Swift.h"

@implementation MyModule
RCT_EXPORT_MODULE()

// Don't compile this code when we build for the old architecture.
#ifdef RCT_NEW_ARCH_ENABLED
- (void)hello {
  // Call "hello"
  MySwiftClass *swiftInstance = [[MySwiftClass alloc] initWithEventEmitter:self];
  [swiftInstance hello];
}

// ...

You should also make sure your base objc class is extending RCTEventEmitter, this way you'll be able to send events to JavaScript

#import <React/RCTEventEmitter.h>

@interface MyModule : RCTEventEmitter <NativeMyModuleSpec> // Use RCTEventEmitter as the base class instead of NSObject

This comment mostly focused on the Swift side, if you want to see a good example, please take a look at this awesome project: https://github.com/birdofpreyru/react-native-static-server/blob/254ad114ee117196be2f69ee68c6f23a8dbf4e62/ios/ReactNativeStaticServer.mm

[LuongTruong]

Hello @atlj , big thanks to the reply. I will try to implement this way. I hope you don't mind if there is any question come to me.