React Native — How to check what passes through your bridge?

Piotr Drapich

blog content

Need help with React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

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. Personally, I always aim at sending as little data as possible because of potential performance issues and I would recommend you to do the same. Otherwise…

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.

Thank you for your time!

Piotr Drapich
Software developer working all across the stack, always glad to help you manage the technical aspect of a project and lead your team to success. Experienced in the native mobile and Web app development. Always looking forward to exploring the new cross-platform technologies from React Native to Kotlin/Native. Big lover of GraphQL.
arrow icon
MORE posts from this author

learn more

More posts from this category

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.