If you want to get into mobile development with React Native, Expo is a great place to start. If you’re already doing React Native development with Expo, then you’re in luck, because I’m going to show you how to enhance your React Native Expo debugging experience by allowing you to integrate a great debugging tool called Reactotron.

If you’re not familiar with Reactotron, you can check out Darin Wilson’s talk at Chain React 2018 for an in-depth tour of the benefits of adding it to your toolchain, but in this article I’ll walk you through the simple setup to get Reactotron logging in your React Native Expo app in 3 easy steps!

This post assumes you already have a running React Native Expo Project.

Let’s Get Started!

Install Reactotron

Download Reactotron for your OS, unzip, and run.

Integrate Reactotron Into Your App

1. Install reactotron-react-native with your package manager of choice:

npm i --save-dev reactotron-react-nativeoryarn add --dev reactotron-react-native

2. Create ReactotronConfig.js in your editor and paste this:

import Reactotron from "reactotron-react-native"Reactotron
  .configure() // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .connect() // let's connect!

3. Finally, we import this on startup in yourApp.js:

if(__DEV__) {
  import("./ReactotronConfig")
}

If you refresh your app, you should see:

Reactotron is now hooked-up in your Expo app!

Now what? Let’s log!

Import Reactotron in your App.js:

import Reactotron from "reactotron-react-native"...

Methods

.log() — Log a single item like a string or an object.

In your App.js:

• Put this before your App component:

Reactotron.log("HELLO WORLD")...

• Refresh your app (iOS: Cmd + R; Android: r + r)

.display() — Descriptive logging and logging complex data.

• Put this before your App component:

Reactotron.display({
  name: "KNOCK KNOCK",
  preview: "Who's there?",
  value: "Orange."
})...

• Refresh your app (iOS: Cmd + R; Android: r + r)

• Click on theKNOCK KNOCK row to expand the log and see the value:

.error() — Log an eye-catching error message.

Reactotron.error(“WOOPS!”)...

• Refresh your app (iOS: Cmd + R; Android: r + r)

Let’s Try it with Expo’s Location Module

Using the Location and Permissions modules from Expo, we’ll setup a basic example that requests the user’s permission to access location, and then display the user’s location in the app and log the latitude and longitude in Reactotron.

1. We’ll request the user’s permission to access location when the app loads.

import React from "react"
import { StyleSheet, Text, View } from "react-native"
import { Location, Permissions } from "expo"
import Reactotron from "reactotron-react-native"export default class App extends React.Component {
  state = {
    location: null,
    errorMessage: null
  }  componentDidMount() {
    this._getLocationAsync() // <-- request location on mount
  }  ...}

2. Inside the _getLocationAsync function, let’s check for permission to access the user’s location, and request it if it’s not already granted.

_getLocationAsync = async () => {
  // check status of location permissions
  let {status} = await Permissions.askAsync(Permissions.LOCATION)
  if (status !== "granted") {
   this.setState({
    errorMessage: "Permission to access location was denied"
   })
  }  ...    }

3. Now we’ll get the user’s location, display it in Reactotron, and set it in state.

_getLocationAsync = async () => {
  // check status of location permissions
  const {status} = await Permissions.askAsync(Permissions.LOCATION)
  if (status !== "granted") {
   this.setState({
    errorMessage: "Permission to access location was denied"
   })
  }  // get user's position
  const location = await Location.getCurrentPositionAsync({})  const lat = location.coords.latitude // pull out latitude
  const lon = location.coords.longitude // pull out longitude
  
  // display location data with Reactotron.display()
  Reactotron.display({
    name: "coordinates",
    preview: `lat: ${lat}, lon: ${lon}`, // preview just the lat/lon
    value: location
  })

  this.setState({ location }) // set the location in state 👍
}

4. Finally render the location data in the app.

... render() {
  // give the user feedback while fetching the location
  let text = "Waiting.."
  if (this.state.errorMessage) {
    text = this.state.errorMessage
  } else if (this.state.location) {
    text = JSON.stringify(this.state.location)
  }
  return (
    <View style={{ flex: 1, alignItems: "center" }}>
      <Text style={{ margin: 20, fontSize: 16 }}>{text}</Text>
    </View>
  )
}

Show Me the Money! 💵

Reload the app and you should see the name & preview output in Reactotron:

Expand the “coordinates” row to see the value:

In your app you should see some thing like:

That’s It For Now!

These setup steps and 3 Reactotron methods (log, display, and error) will be enough to get you started debugging with Reactotron in your Expo app, but where Reactotron starts to shine is when you connect it to your state management in your app like Redux or MobX State Tree, which will allow you to track global errors, watch network requests, and more. You can check out the Reactotron demo app for examples of Reactotron logging with Redux.

About Frank

Frank von Hoven III is a Senior Software Engineer at Infinite Red, specializing in React Native mobile development, an instructor with Infinite Red Academy, and the Editor-in-Chief of The React Native Newsletter. Follow him on Twitter for React Native insights and funny gifs and thoughts.

Some other posts from Infinite Red about React Native:

1. Creating a Trivia App with Ignite Bowser — Part I by Robin Heinze
2. How to Create a Multi-Pane Drawer in React Native by Morgan Laco
3. React Native FAQ by Gant Laborde