Useful React Native NPM Scripts

Coming from a web development background, React Native can seem like a Holy Grail of sorts. The sheer ability to use Javascript (and React/JSX) knowledge to write native applications for both Android and iOS is largely the reason why the platform has gained so much traction in the past couple months. It is fascinating to see how many open source packages the React Native community has created since it's birth last year. As of this writing, a quick search for 'react native' on the NPM registry yields over 2300 packages.

Source: NPM Registry

Along with the quick release cycles that the React Native team have adopted, React Native is far more stable now than it ever was. That being said, like with every new library or framework, there are still bugs and quirks that needs to be attended to. While most of these issues are dealt with at a core library level, some have to be resolved at development time.

React Native NPM Scripts

Over the past couple months I've been developing with React Native and I've gathered a lot of battle-testing knowledge around the React Native packager, the build system, and the overarching works of the library. Because of that, I've created a set of NPM scripts that have helped kickstart my React Native projects. Think of these as useful shortcuts for a more pleasant development experience with the platform.

I use these in all of my React Native projects and it really helps when things start getting weary (random failing builds, issues on library imports, and so on). Below is a quick breakdown of the actions each command performs.

npm run start / npm run rc-start

The start scripts are pretty straight forward. They simply run the React Native packager and waits for the JS Bundle to be fetched by a device or simulator. The rc-start command aids with the quick resetting of the cached data from the packager. You can run into caching issues when developing two or more different React Native applications in the same machine environment.

npm run clean / npm run clean-start

The clean scripts make sure you are always using a clean setup for best development experience. It helps you by deleting unnecessary cached old data from the React temporary folder. In addition to that it clears any files that were being watched by Watchman and resets any cache in your local NPM build. The clean-start effects all of the above and starts the packager (my most used script).

npm run fresh-install / npm run fresh-start

The fresh scripts follow the same pattern as the clean scripts but along with that it deletes and reinstalls the node_modules folder, and any left over build files. The fresh-start script run the fresh-install and starts a clean-cached React Native packager.

Bonus: Reactotron

Reactotron in use — https://github.com/skellock/reactotron

If you didn't notice, the last script is called tron and it runs a node server for the package Reactotron. Reactotron is an awesome tool that lets you debug and control your React Native (and Redux) application from your terminal shell. If you use React and/or Redux in your development flow, I'd suggest you check it out.

Feel free to use these scripts as I'm sure they can help speed up your React Native development as well. Also let me know of any other useful scripts that you use at your React Native development workflow as they might have some utility in my flow as well.

Cheers,

— AN