How to inspect React Native apps elegantly with Reactotron
Tags: reactnative, react, mobile
Published: 2020-01-29 14:14:35

---
title: How to inspect React Native apps elegantly with Reactotron
published: true
description: A quick and simple way to inspect your React Native project using Reactotron
tags: React Native, React, Mobile
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/h8uasd3zz8o94da8ahbc.gif
canonical_url: https://helderburato.com/how-to-inspect-react-native-apps-elegantly-with-reactotron/
---

<center>Originally posted on [helderburato](https://helderburato.com/how-to-inspect-react-native-apps-elegantly-with-reactotron/)</center>

---

First of all, you need to download the [Reactotron App](https://github.com/infinitered/reactotron/blob/master/docs/installing.md)

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:

```js
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:

```js
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
![Device connected](https://dev-to-uploads.s3.amazonaws.com/i/a33jl7a4dgi3kv32zpo8.png)

### Timeline from Device
![Device Timeline](https://dev-to-uploads.s3.amazonaws.com/i/0pdrwy80vuc85olr6vs1.png)

## Conclusion

I really recommend reading the [Reactotron documentation](https://github.com/infinitered/reactotron). 

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](https://github.com/helderburato/RNExampleInspect).

Enjoy programming! ✨