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! ✨
Top comments (2)
Personally, I prefer Reactotron.
I like the easy way to integrate to the projects and the integration with Redux.