HOME
|
COMMUNITY
|
BLOG
|
Sending Events to JavaScript From Your Native Module in React Native

Sending Events to JavaScript From Your Native Module in React Native

In short

In React Native, communication between native modules and the JavaScript thread involves passing data through an event bus or bridge. On Android, use <rte-code>RCTDeviceEventEmitter<rte-code>, while on iOS, subclass <rte-code>RCTEventEmitter<rte-code> and use <rte-code>sendEventWithName<rte-code>. Implementing event listeners in JavaScript varies, and on iOS, it's crucial to unsubscribe to prevent memory leaks. The article offers a concise guide to implementing and using events in native modules on both platforms.

Introduction

Communication between native modules and JavaScript thread happens through an event bus or, to be more specific, the bridge. In my last article I described how to check what passes through your bridge in a React Native application, which can be really helpful to debug your events. In this one, I will describe how to pass something through your bridge.

When building our apps with React Native, we often want them to be cross-platform. And the platforms we usually target are Android and iOS. Let’s check the differences between these two!

Android

Sending events from your Java module to JavaScript is pretty simple. The easiest way to do this is to use <rte-code>RCTDeviceEventEmitter<rte-code> which can be obtained from the <rte-code>ReactContext<rte-code> by using <rte-code>.getJSModule()<rte-code> method. When you have <rte-code>RCTDeviceEventEmitter<rte-code> instance you can invoke
<rte-code>emit(String eventName, WritableMap parameters)<rte-code> method on it.

If your Java code is set, you can register a listener in JavaScript module by <rte-code>addListener<rte-code> method called on <rte-code>DeviceEventEmitter<rte-code>

That’s it! You will get the sent data on JavaScript side in your <rte-code>onSessionCreate function<rte-code>.

iOS

Here’s where it gets a bit more complicated. You can’t get the instance of <rte-code>EventEmitter<rte-code> and use it to send a message as easily as it is on Android. You need to subclass <rte-code>RCTEventEmitter<rte-code> and then implement <rte-code>supportedEvents<rte-code> method that should return an array of supported events. After that, you’ll be able to use <rte-code>self sendEventWithName<rte-code>.That boils down to:

1. Subclass <rte-code>RCTEventEmitter<rte-code>

2. Implement <rte-code>supportedEvents<rte-code>

3. Send the event using <rte-code>sendEventWithName<rte-code>

4. One more thing. You will get a warning notice if you emit an event while there are no listeners. The easiest way to optimize your module and avoid this warning is to override <rte-code>startObserving<rte-code> and <rte-code>stopObserving methods<rte-code> where you set flag hasListeners and send events only when it is <rte-code>YES<rte-code>.

Now you are ready to do the JavaScript part which is also different than on Android. JavaScript code can subscribe to these events by creating a new <rte-code>NativeEventEmitter<rte-code> instance in your module.

It’s really important to unsubscribe your listeners once they’re not needed anymore or you’ll end up leaking memory. Don’t forget that!

Note that you can create more than one module with the event emitter in iOS. To do that, you need to create the specified amount of <rte-code>NativeEventEmitter<rte-code> in your JavaScript module.

This is the difference between iOS and Android but if you have just one module with event emitter, you can simplify it by creating something like this:

You have now one file with the emitter for both platforms. It will work only if you have one module with the event emitter, though.

Summary

I hope that I’ve managed to help you understand how to implement and use events in your native module, and that now you’ll be able to do it yourself. If, however, you need help with that, or you’re a tech leader looking for a React Native development company to team up with, give us a shout – we’ll be more than happy to find out how we can help.

React Galaxy City
Get our newsletter
Sign up

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook
Download

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.