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.

From Scratch

Let's start a brand new app from scratch. If you want to use your own, skip to the next section.

Download react-native-cli if you haven't yet:

npm i -g react-native-cli

Then spin up a brand new React Native app.

react-native init ReactotronDemo
cd ReactotronDemo

You'll need to run this in an emulator for Android or the simulator for iOS. Facebook has some great guides on getting started.

Installing Reactotron

Let's install Reactotron as a dev dependency.

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
  .configure() // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .connect() // let's connect!

Finally, we import this on startup in index.ios.js and index.android.js on line 1:

import './ReactotronConfig'

At this point, Reactotron is hooked up.

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 index.ios.js or index.android.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 web page 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.