links: React Native MOC

---

Integrate Reactotron Flipper with React Native

Required Dependencies

Install necessary dependencies

yarn add -D reactotron-react-native @react-native-async-storage/async-storage react-native-flipper

Optional Dependencies

For this example let’s use mobx state tree

yarn add -D reactotron-mst

Setup

Create a file called reactotron-config.js

import Reactotron from 'reactotron-react-native';
import ReactotronFlipper from 'reactotron-react-native/dist/flipper';
import AsyncStorage from '@react-native-community/async-storage';
import { mst } from 'reactotron-mst';
 
// ignore some chatty `mobx-state-tree` actions
const RX = /postProcessSnapshot|@APPLY_SNAPSHOT/;
 
Reactotron.setAsyncStorageHandler(AsyncStorage) // AsyncStorage would either come from `react-native` or `@react-native-community/async-storage` depending on where you get it from
	.configure({
		name: 'React Native App',
		createSocket: (path) => new ReactotronFlipper(path),
	}) // controls connection & communication settings
	.useReactNative() // add all built-in react native plugins
	.use(
		mst({
			filter: (event) => RX.test(event.name) === false,
		})
	) // connect to mst
	.connect(); // let's connect!

Finally in your index.js file

if (__DEV__) {
	import('./reactotron-config').then(() =>
		console.log('Reactotron Configured')
	);
}

Mobx State Tree configuration

Open your root-store.js

You can subscribe to MST events using onSnapShot

import Reactotron from 'reactotron-react-native';
 
onSnapshot(rootStore, (snapshot) => {
	if (__DEV__) {
		Reactotron.display({
			name: 'ROOT_STORE',
			value: snapshot,
			preview: 'New State',
		});
	}
 
	if (__DEV__) {
		Reactotron.trackMstNode(rootStore);
	}
}

Hooray 😁 😀

---

tags: reactotron, react-native , flipper, tools