React Native - How to Check What Passes Through Your 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.

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.