HOME
|
COMMUNITY
|
BLOG
|
React Native — How to Check What Passes Through Your Bridge?

React Native — How to Check What Passes Through Your Bridge?

In short

When building a React Native app, it's common to require native functionality. While npm libraries often provide solutions, there are instances where you must develop your custom native modules. This article delves into the communication between JavaScript and native code, enabled by the bridge, and explores methods for debugging this vital interaction.

What is bridge?

When writing a React Native app, I often find myself in a need of a native functionality. Now, if you are like me, the first thing you do is go over to <rte-code>npm<rte-code> and look for a library. In most cases, thanks to the community, I find what I need. But sometimes I’m forced to implement my own native module due to lack of a library that fits my needs. In this article, we will take a look the communication between JavaScript and native which is possible thanks to the thing we call the bridge and debug it.

Bridge can be overloaded

Communication between the native side (Objective-C/Java) and JavaScript is based on the bridge. Every data that has to be sent from JavaScript or to JavaScript goes through it.

Most of the time people don’t care about how many and how often they’re passing data to the bridge, which might be a cause of an overload. When the bridge is overloaded, your application will tend to freeze, which happens to be a very frequent case. I always aim at sending as little data as possible because of potential performance issues and I would recommend you to do the same.

Debug with MessageQueue

There is no need to be worried though, let me show you how to check how much data is being passed to the bridge. All you need to do is import <rte-code>MessageQueue<rte-code> from a weird path <rte-code>react-native/Libraries/BatchedBridge/MessageQueue.js<rte-code> and add a <rte-code>spy()<rte-code>function.

When you add this to your application, you’ll see something like the above in your console.

WebSocketModule

This is actually very helpful because you can spy on what data is being passed to the bridge and you can determine yourself if sending this particular data is necessary. The type field determines whether data comes from JavaScript, or from native.

If <rte-code>type<rte-code> equals <rte-code>0<rte-code> that means that the data is going from native to JavaScript; if it equals <rte-code>1<rte-code>, the data goes from JavaScript to native.

I hope that I’ve managed to help you understand how to debug the bridge in your native module and that now you’ll be able to do it yourself.

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.