Set up your own React-Native IDE

An Android Developer’s Roadmap to React Native : Part 2

Coming from an Android background, I am used to working on Android Studio, an amazing IDE built on top of IntelliJ IDEA. A few days working in React-Native, I started missing the auto-completions, file switching shortcuts, and the suggestions that I was so used to in Android Studio. The IDE is the most important tool for a developer and React-Native does not have one. Here is a setup that I use that will work close to something like an IDE.

We will be using Atom as our text editor. Sure, we could use Sublime or something else but the extensions that Atom provides are numerous and will help us set up our React-Native IDE.

Download and install from here.

Now that Atom is installed, lets customize Atom with the power of plugins. Atom has its own package manager and installing third-party plugins is super easy. Open Atom preferences and go to Install tab.

Here you can search and install each of the packages mentioned below and get ready to code your mobile applications in React Native. I have tried to keep the plugins to minimum, so as not to clutter Atom.

Nuclide is a package for Atom developed by Facebook to provide an environment for working with React Native, Hack or Flow projects.
Looks like we have found the missing piece.

Wohoo!! We already have an official IDE

Not quite so.
I initially installed Nuclide, but I felt a lot of functionality from Nuclide was not required. Nuclide also installs a lot of package dependencies that I did not find useful for React Native. Further, I did not find auto-completions and suggestions for JavaScript. Sure, there are a lot of good features in Nuclide that are essential to a productive coding environment, but the good thing is that these features are available as standalone packages as well. So we can pick and install the ones we require. So lets begin.

This package adds IDE capabilities to Atom with support for auto-completions, code diagnostics and basic debugging tools including line breaks, stepping and viewing stack-traces. Further, the most important is the addition of a terminal that can be opened right in Atom’s window pane. While working in React Native you will be using npm and running builds for Android and iOS through terminal commands, so it seems sensible to have a terminal window alongside. This speeds up things quite a bit.

Flow provides on the fly code linting and suggestions. Along with this flow also adds jump-to-definition so that you can ctrl + clickor cmd + click on variables or classes to see their source.

JavaScript is the language for React-Native and a few auto-completions for the same will be good, right?. For someone like me who is new to JavaScript, auto-completions are a must. This package will do just that for you. It provides first class auto-completions for JavaScript code along with documentation for the methods and classes in JavaScript.

ide-typescript plugin settings

Disable diagnostics in ide-typescript settings because it gives unnecessary errors. Also we do not need it since flow does it for us.

The above packages will help you setup an IDE like environment in Atom. This will also bring most of the features that are a part of Nuclide for React-Native. One good feature in Nuclide is that the Metro bundler is built right inside so you can easily instantiate your JS server right from Atom. I could not find a standalone package for this and will have to work without this feature.

Now, lets look at some packages specific to React and React-Native that will provide you with further assistance.

This package will help you easily create style-sheets in React Native by providing you with suggestions for style properties.

This package adds support for JSX syntax and highlighting. The suggestions provide by the plugin are not relevant for React Native, but still the syntax highlighting is useful enough to have this plugin in this list.

Who does not like properly formatted code? With just a single key-combination this plugin will prettify your poorly indented code. What’s better, this works for JSX too. So the inline JSX will also get formatted along with your JavaScript code.

This plugin will display visually distinct icons for different file extensions in your project in the project folder tree. Helps you spot files quickly. Hah, finally, some eye-candy.

This setup will bring you close to an IDE like environment but is still far away from something like Android Studio or XCode. This does enough to make developing in React Native less troublesome for beginners. The last thing left in this setup is debugging. Debugging in React Native can be done using Chrome Dev Tools but here is an alternative that brings all debugging features in a common place.

This is a standalone app for debugging React Native. The downside with using Chrome for debugging is that it does not have React inspector. You need to install extensions to view the UI element hierarchy in Chrome. Also the Redux state logs require additional setup in Chrome. React Native Debugger brings all the power in a single app where you can view console logs, network calls, UI element inspector along with Redux Dev Tools. React Native Debugger works out of the box for all these features. For Redux Dev Tools you just need to add an npm package and a single line of code and you are good to go. You can find the setup for Redux Dev Tools here.

React Native Debugger in action

This was the second part to the series An Android Developer’s Roadmap to React Native. The series aims at providing initial steps to learning React Native while solving some pitfalls in React Native development.

Music, Basketball, Life, Learning. Finding my way in life, trying to pursue what I believe in.