DEV Community

Cover image for iOS Native Modules in React Native: Achieving Two-Way Bridging🚀
Amit Kumar
Amit Kumar

Posted on • Edited on

iOS Native Modules in React Native: Achieving Two-Way Bridging🚀

#reactnative #bridge #programming #javascript

Let's dive deep into creating powerful native modules that bridge JavaScript and iOS seamlessly. ✨

🛠️ Step-by-Step: Create a Native Module in Swift

Let’s build a simple module called MyNativeModule that:

  • Sends data from JS to iOS 📤
  • Sends events from iOS to JS 📩

1️⃣ Create MyNativeModule.swift (Swift) 💻

Image description

📄 File: MyNativeModule.swift 

import Foundation
import React

@objc(MyNativeModule)
class MyNativeModule: RCTEventEmitter {

  // MARK: - JS → iOS
  @objc
  func receivedData(_ params: NSDictionary, callback: RCTResponseSenderBlock) {
    print("📦 Received from JS:", params)
    // callback(["✅ iOS received your data!"])
  }

  // MARK: - iOS → JS
  @objc
  func triggerMessageToRN() {
    let eventData: [String: Any] = ["message": "👋 Hello from iOS! 🎉"]
    sendEvent(withName: "onMessageFromNative", body: eventData)
  }

  // MARK: - Required Overrides
  override func supportedEvents() -> [String] {
    return ["onMessageFromNative"]
  }

  override static func requiresMainQueueSetup() -> Bool {
    return true
  }
}
Enter fullscreen mode Exit fullscreen mode

📝 This class extends RCTEventEmitter to support two-way communication.

2️⃣ Create Objective-C Bridge (MyNativeModule.m) 🔌

Even though you’re using Swift, React Native still requires an Objective-C header to expose the module to JS.

Image description

📄 File: MyNativeModule.m

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(MyNativeModule, NSObject)

RCT_EXTERN_METHOD(receivedData:(NSDictionary *)params callback:(RCTResponseSenderBlock)callback)
RCT_EXTERN_METHOD(triggerMessageToRN:(NSDictionary *)params callback:(RCTResponseSenderBlock)callback)
@end
Enter fullscreen mode Exit fullscreen mode

🔗 This bridges Swift methods to the RN JS runtime.

🧠 Using the Native Module in JS (React Native Side)

Let’s test our newly created native module in a sample React Native app:

📄 File: App.js 

import React, {useEffect} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Button,
  NativeModules,
  NativeEventEmitter,
} from 'react-native';

const {MyNativeModule} = NativeModules;
const eventEmitter = new NativeEventEmitter(MyNativeModule);

const App = () => {
  useEffect(() => {
    const subscription = eventEmitter.addListener(
      'onMessageFromNative',
      data => {
        console.log('📨 Message from iOS:', data.message);
      }
    );

    return () => subscription.remove();
  }, []);

  const sendDataToiOS = () => {
    MyNativeModule.receivedData(
      { userName: '[email protected]', age: '29' },
      response => console.log('✅ Callback from iOS:', response)
    );
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>🚀 React Native + Swift Bridge</Text>
      <Button title="📤 Send Data to iOS" onPress={sendDataToiOS} />
      <Button
        title="📨 Receive Event from iOS"
        onPress={() => MyNativeModule.triggerMessageToRN()}
      />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 20,
    marginBottom: 20,
    fontWeight: 'bold',
  },
});
Enter fullscreen mode Exit fullscreen mode

✅ Results

🧪 Try it out:

  • Tap Send Data to iOS → Check Xcode logs for received data.
  • Tap Trigger iOS to JS → Watch for JS console logs like 📨 Message from iOS: Hello from iOS! 🎉.

⚙️ Troubleshooting Tips

✅ Clean your build folder (Cmd + Shift + K)
✅ Make sure RCT_EXTERN_MODULE is present
✅ Check that Swift is correctly initialized in your project
✅ Use use_frameworks! in your Podfile for Swift support

🏁 Final Thoughts

It easier and faster to bridge native code with JavaScript. With TurboModules, native communication is now more optimized and type-safe.

💡 Whether you’re building a native camera module, voice recognition, or secure authentication — the same pattern applies.

💬 Drop a Comment
Was this guide helpful? Stuck somewhere?
Drop a comment below👇

🔁 Don’t forget to like and share to help others in the RN community!

Top comments (0)