Igniting React Native Projects

Published in

Inside the Hive

4 min readMar 20, 2019

React Native is an awesome framework for developing cross-platform mobile applications. React Native exposes JavaScript interfaces for platform APIs, so that your React Native apps can access platform features like the phone camera, or the user’s location. And there are lots of react-native applications out there like Instagram, UberEats, Airbnb, Facebook Ad manager, Bloomberg, etc.

But starting a new project with React Native is not exactly a cakewalk. Thinking of all tools that need to be installed may give you headaches. Starting a React Native project is daunting and takes time and effort.

Especially, people who work on multiple React Native projects have to set up the project with common tooling like redux,react-navigation, I18n . And some of the more professional libraries like redux-saga. For every project, they have to redo the process again and again from scratch. And they have to make sure that the project created with all these tools works perfectly.

If you feel sick of going through all these processes for creating a React Native project, again and again, meet Ignite.

Ignite tool for creating React Native projects

As I mentioned starting a new project takes time. And depending on the type of project and tools that you want to setup, it may take hours. What if I told you it could be reduced to a few minutes so that you can focus on the core business logic? This is possible with Ignite-CLI tool by infinite-red.

----------------------------------------------
  (                  )   (
  )\ )   (        ( /(   )\ )    *   )
 (()/(   )\ )     )\()) (()/(  ` )  /(   (
  /(_)) (()/(    ((_)\   /(_))  ( )(_))  )\
 (_))    /(_))_   _((_) (_))   (_(_())  ((_)
 |_ _|  (_)) __| | \| | |_ _|  |_   _|  | __|
  | |     | (_ | | .` |  | |     | |    | _|
 |___|     \___| |_|\_| |___|    |_|    |___|
-----------------------------------------------An unfair headstart for your React Native apps.
https://infinite.red/ignite-----------------------------------------------🔥 igniting app BossBoilerplate
✔ using the Infinite Red boilerplate
✔ added React Native 0.50.0 in 16.03s
✔ added ignite-ir-boilerplate in 5.63s
✔ configured git🍽 Time to get cooking!To run in iOS:
  cd MyNewAppName
  react-native run-iosTo run in Android:
  cd MyNewAppName
  react-native run-androidTo see what ignite can do for you:
  cd MyNewAppName
  ignite

🔥Ignite CLI is a boilerplate generator for React Native that lets you choose from various project templates to get your React Native project up and running quickly and efficiently.

Why Ignite CLI?

Easily spin up a new React Native app with best practices built-in
No runtime! This is a developer tool only, not a library you have to depend on and figure out how to upgrade
An ever-expanding list of boilerplates and plugins to jump-start your app
An amazing community of other Ignite / React Native developers when you need help
Battle tested and used every day by the developers at Infinite Red and thousands of developers around the world
Works on macOS, Windows, and Linux because not all React Native developers are on one platform
Saves an average of two weeks on your React Native development

So how do I get started with Ignite CLI?

It’s easy to set up the Ignite-CLI.

Make sure you have React Native installed and Node 7.6+. You can check your version of nodeJS by opening a shell and executing node -v. And if you haven't already, install yarn with a simple issuance of npm i -g yarn at the command line to install it globally. Then, again in the shell, simply run:

$ npm i -g ignite-cli 
$ ignite new MyAwesomeApp  //for creating React Native app

That’s all. Your super cool mobile app is ready to launch.

Plugins

Ignite supports a bunch of plugins. You can install supported plugins typing just one line.

Let’s say you need I18n in your application.

Internationalization plugin

that’s it. The syntax is very simple ignite add + PluginName

Creating Ignite Plugins

Creating plugins for Ignite is easy

Let’s look at the vector-icons plugin example

const NPM_MODULE_NAME = 'react-native-vector-icons'
    const EXAMPLE_FILE = 'vectorExample.js.ejs'
    
    /**
     * Add ourself to the project.
     */
    const add = async function (context) {
      const { ignite } = context
    
      // install a npm module
      await ignite.addModule(NPM_MODULE_NAME, { version: '4.3.0', link: true })
    
      // copy the example file (if examples are turned on)
      await ignite.addPluginComponentExample(EXAMPLE_FILE, { title: 'Vector Icons' })
    }
    
    /**
     * Remove ourself from the project.
     */
    const remove = async function (context) {
      const { ignite } = context
    
      // remove the npm module
      await ignite.removeModule(NPM_MODULE_NAME, { unlink: true })
    
      // remove the component example
      await ignite.removePluginComponentExample(EXAMPLE_FILE)
    }
    
    /**
     * Expose an ignite plugin interface.
     */
    module.exports = { add, remove }

That’s it, it’s a single page code for creating a plugin.

Run the provided plugin generator. Ignite CLI will automatically prepend your package name with ignite-.

$ ignite plugin new vector-icons

Check this document for more info.

My talk on igniting React Native Projects @ReactBangalore