How to inspect React Native apps elegantly with Reactotron

First of all, you need to download the Reactotron App

After installed Reactotron you're able to use the app from your machine.

Let's create an empty project and access directory created like below:

$ npx react-native init RNExampleInspect
$ cd ./RNExampleInspect

After accessing the project directory, we can run the Reactotron app installed in your machine and leave it in the background.

Install Package

Let's install the Reactotron to React Native in our project like below:

$ npm i --save-dev reactotron-react-native

Configure

As documentation recommends we will create a separate file to create a configuration basis.

Create reactotron-config.js in your project RNExampleInspect root:

$ touch reactotron-config.js

Open reactotron-config.js file in your preferred editor and paste this code below:

import Reactotron, {networking} from 'reactotron-react-native';
import {AsyncStorage} from 'react-native';

export default Reactotron.setAsyncStorageHandler(AsyncStorage)
  .configure({name: 'React Native Example Inspect'})
  .use(
    networking({
      ignoreContentTypes: /^(image)\/.*$/i,
      ignoreUrls: /\/(logs|symbolicate)$/,
    }),
  )
  .connect();

We are configuring Reactotron to watch the network requests and async store keys.

Note: AsyncStorage import would either come from react-native or @react-native-community/async-storage depending on where you get it from.

Enable in App

On your RNExampleInspect/index.js at first line add the startup config, i.e:

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

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Note: In this case, we use the `DEV` to just import on the development environment.

At this point, Reactotron is running!!

Test in your simulator, in this case, I will open in iOS simulator:

$ yarn start
$ yarn ios

For android devices/simulator need to connect the Reactotron to the same port.

Run the following command to make sure it can connect:

$ adb reverse tcp:9090 tcp:9090

Check Reactotron App

In our Reactotron running in the background if we are connected to the device and the timeline will get the results like below:

Devices connected to Reactotron

Timeline from Device

Conclusion

I really recommend reading the Reactotron documentation.

It's an awesome tool that could really improve inspect powers.

Feel free to comment on your feedback about the tool and how it's improved the way you inspect React Native projects.

Access the example repository here.

Enjoy programming! ✨