Quite a POC by now, currently work in progress
Visualize and monitor React Native bridge messages with a Web UI or RxJs
$ npm install --save-dev rn-bridge-monitor
or
$ yarn add -D rn-bridge-monitor
If you would like to only use the library to compute and read messages using RX, you may add the following lines at the top of your root file :
import MessageQueue from "react-native/Libraries/BatchedBridge/MessageQueue";
import RnBridgeMonitor from "rn-bridge-monitor";
RnBridgeMonitor
.prepareMobile(MessageQueue)
.stream()
.filter(yourFilterFunction) // apply any RX operator
.subscribe((message) => {
console.log('RxJs subscribe call. Message received: ', message);
});
See the message composition on What's inside ?
If you prefer to listen to bridge messages using a Web UI, let's add the following lines at the top of your root file :
import MessageQueue from "react-native/Libraries/BatchedBridge/MessageQueue";
import RnBridgeMonitor, { SocketWriter } from "rn-bridge-monitor";
RnBridgeMonitor
.prepareMobile(MessageQueue)
.stream()
.subscribe(SocketWriter.write());
Install the CLI :
$ npm install --save-dev rn-bridge-monitor-cli
or
$ yarn add -D rn-bridge-monitor-cli
And run the following command at your project root :
$ rnbridgemonitor start
or if it doesn't work :
$ ./node_modules/.bin/rnbridgemonitor start
It will start a Web UI at http://localhost:5000
See configurations details on What's inside ?