Simply spy on the React Native bridge using ReactiveX/RxJs.

This is a fully functional alternative to jondot/rn-snoopy.

Usage

Installation

$ npm install --save-dev rn-watcher

# or

$ yarn add -D rn-watcher

In your code

Insert that snippet at the top of your application file :

import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue';
import RnWatcher from 'rn-watcher';

const messages$ = RnWatcher.createFrom(MessageQueue);

messages$.subscribe(console.log);

From that point, you're able to see every messages between the JavaScript and the Native realms inside your debugging browser console.

API and configuration

The module comes with a configuration object as second argument :

const configurations = { applyNoFilter: true, batchNumber: 5, batchTime: 1000 };

const messages$ = RnWatcher.createFrom(MessageQueue, configurations);

applyNoFilter

When working with React Native in debugging mode, there are more emitted messages than in production mode. It can be justified by the fact that debugging mode needs extra tools to ensure a good developer experience.

Since this module aims to focus on important messages, it provides a filter on different ones that are debugging related.

For example, rn-watcher excludes messages concerning the WebSocketModule, which aims to provide a websocket connection between the packager and your web browser.

The excluded modules are listed in this file (feel free to open a pull request to add more :blush: )

• Default value: false
• Possible values: false | true
• The output streams receives an Object corresponding to one message

batchNumber

When trying to listen to the bridge using the MessageQueue module, many messages can be emitted. It seems to be a good solution to be able to batch some messages by number before subscribing.

Using the batchNumber key allows to pack messages inside an array of batchNumber elements.

For example :

const messages$ = RnWatcher.createFrom(MessageQueue, { batchNumber: 5 );

messages$
	.subscribe(messages => {
		console.log(messages); // will only be printed when 5 messages have been received
	}):

• Default value: 0 (streams item one by one, each time it's received)
• Possible values: any Number
• The value received by subscription is an Array of Objects with size equals to batchNumber

batchTime

When trying to listen to the bridge using the MessageQueue module, many messages can be emitted. It seems to be a good solution to be able to batch some messages using time intervals.

Using the batchTime allows to pack messages inside array of elements picked within a period.

For example :

const messages$ = RnWatcher.createFrom(MessageQueue, { batchTime: 1000 );

messages$
	.subscribe(messages => {
		console.log(messages); // will only be printed every 1 second
	}):

• Default value: 0 (streams item one by one, each time it's received)
• Possible values: any Number (milliseconds)
• The value received by subscription is an Array of Objects

Using combined configuration

It's possible to combine the three previous configuration :

/**

Messages will be printed every 1 second OR when messages size have reached 5 elements.

We also have removed the filters on default module, so the ones like WebSocketModules will be printed.

*/
const messages$ = RnWatcher.createFrom(MessageQueue, { batchTime: 1000, batchNumber: 5, applyNoFilter: true );

messages$
	.subscribe(messages => {
		console.log(messages); 
	}):