DEV Community

Cover image for How to inspect React Native apps elegantly with Reactotron
Helder Burato Berto
Helder Burato Berto

Posted on • Updated on • Originally published at helderburato.com

How to inspect React Native apps elegantly with Reactotron

Originally posted on [helderburato](https://helderburato.com/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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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();


Enter fullscreen mode Exit fullscreen mode

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);


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode




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

Timeline from Device

Device Timeline

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! ✨

Top comments (2)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
helderberto profile image
Helder Burato Berto

Personally, I prefer Reactotron.

I like the easy way to integrate to the projects and the integration with Redux.