quick-start-react-native.md

Quick Start for React Native

Installing Reactotron.app

Let’s download the desktop app to start. You can download for Linux, Windows, and Mac.

Unzip & run.

Configure Reactotron with your project

Let's install Reactotron on your project as a dev dependency. Don't have a React Native project yet? Follow the Getting Started guide in the React Native documentation.

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

I like a separate file for initializing. Create ReactotronConfig.js in your editor of choice and paste this:

import Reactotron from 'reactotron-react-native'

Reactotron
  .setAsyncStorageHandler(AsyncStorage) // AsyncStorage would either come from `react-native` or `@react-native-community/async-storage` depending on where you get it from
  .configure() // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .connect() // let's connect!

Or using a more advanced way to customize which plugins to include:

import Reactotron from 'reactotron-react-native'

Reactotron
  .setAsyncStorageHandler(AsyncStorage) // AsyncStorage would either come from `react-native` or `@react-native-community/async-storage` depending on where you get it from
  .configure({
    name: "React Native Demo"
  })
  .useReactNative({
    asyncStorage: false, // there are more options to the async storage.
    networking: { // optionally, you can turn it off with false.
      ignoreUrls: /symbolicate/
    },
    editor: false, // there are more options to editor
    errors: { veto: (stackFrame) => false }, // or turn it off with false
    overlay: false, // just turning off overlay
  })
  .connect();

Alternatively, you can create your own plugin and provide it via:

import Reactotron from 'reactotron-react-native'

const middleware = (tron) => { /* plugin definition */ };

Reactotron
  .setAsyncStorageHandler(AsyncStorage) // AsyncStorage would either come from `react-native` or `@react-native-community/async-storage` depending on where you get it from
  .configure({
    name: "React Native Demo"
  })
  .useReactNative() // add all built-in react native plugins
  .use(middleware) // plus some custom made plugin.
  .connect();

Finally, we import this on startup in

• App.js (Create React Native App) or
• index.js on line 1:

if(__DEV__) {
  import('./ReactotronConfig').then(() => console.log('Reactotron Configured'))
}

At this point, Reactotron is hooked up.

Note: If using an Android device or emulator run the following command to make sure it can connect to Reactotron:

adb reverse tcp:9090 tcp:9090

Refresh your app (or start it up react-native start) and have a look at Reactotron now. Do you see the CONNECTION line? Click that to expand.

Go back to your app and refresh it 5 or 6 times. Now look.

Pretty underwhelming huh?

Hello World

Let's do some classic programming.

Open up

• App.js (Create React Native App) or
• index.js

Right after the line you just added in the previous step lets put this:

import Reactotron from 'reactotron-react-native'

Next, inside the render() function, put this as the first line:

Reactotron.log('hello rendering world')

Save that file and refresh your app if you don't have live reloading.

Now Reactotron looks like this:

While collapsed, the grey area to the right shows a preview. Click to open.

Let's change our log statement to:

Reactotron.log({ numbers: [1, 2, 3], boolean: false, nested: { here: 'we go' } })

Or this

Reactotron.warn('*glares*')

Or this

Reactotron.error('Now you\'ve done it.')

Or this

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

Reactotron.display({
  name: 'ORANGE',
  preview: 'Who?',
  value: 'Orange you glad you don\'t know me in real life?',
  important: true
})

Monitor your Redux store state changes

Hooking up to redux requires some additional set up.

Now What?

Well, at this point, we have a complicated version of console.log.

Where Reactotron starts to shine is when you start plugging into Redux, tracking global errors, and watching network requests.

Check out our Demo for more goodies.