Inside the Hive
Published in

Inside the Hive

Igniting React Native Projects

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-ios
To run in Android:
cd MyNewAppName
react-native run-android
To 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
The app is working well and it’s skinny

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store