teamlaserbeam / ignite

The unfair starting CLI, Generator, and more for React Native

🔥 The ideal starting app for React Native, best practices, generators, and more. 🔥

🌎 Tour Video and More on Ignite Web Page

Why Ignite?

• No Need to Fork! Command-line Generator
  • Apps
  • Components/Styles
  • Containers (smart components)
  • Screens (opinionated containers)
  • and more...
• JS Code Standard - Standard Compliant
• ALL CODE works with iOS and Android
• Documented Structure
• Battle Tested - We use this!
• Redux State Management
• Optional Redux Persistence (uses AsyncStorage via redux-persist)
• Redux Sagas
• Githooks
• AVA Tests - even React Native components!
• Code Coverage Reports
• API Ready
• Reactotron Ready
• Included Common Libs:
  • react-native-vector-icons
  • react-native-animatable
  • react-native-i18n
  • react-native-drawer
  • apisauce
  • reduxsauce
  • react-native-maps
  • rn-translate-template
• Included Developer Libs:
  • reactotron
  • AVA
  • enzyme
  • react-native-mock
  • mockery
  • nyc

To view the generated example project, just pull down the code and run ignite-base!

⬇️ Install

Make sure you're set up for React Native

Step 1: Install

npm install -g react-native-ignite

Step 2: Use

ignite new MyApplication

▶️ How to Run Generated App

1. cd to the repo
2. Run Build for either OS

• for iOS
  • run the command react-native run-ios
• for Android
  • Run Genymotion
  • run the command react-native run-android

3. Enjoy!

⬆️ Built-In Generators

Generate an app: ignite new MyApplication

• The application generator uses the ignite-base template to provide a fresh application with all the common tech wired up and ready to roll. Base applications come with common development screens, tools, and components. As for now, this is a 'Kitchen Sink' plan of attack. Eventually to be pared down, and adjustable in v2.0

Generate a component: ignite generate component SmoothButton

• The component generator creates a new 'dumb component' with the stylesheet. Both files are created and placed in their appropriate folders.

Generate a container: ignite generate container SubMenu

• A generated container is a smart component that is connected to Redux. Usually for containing other components. The component and stylesheet are placed in the Containers folder.

Generate a screen: ignite generate screen Settings

• A generated screen is an opinionated container with a generated route. Keyboard avoiding and other base code is placed in this connected smart component.

Generate a listview: ignite generate listview HotDates

• React Native listview container with easy step-by-step instructions on how to get started with an easy list template.

COMING BACK SOON (broken in latest maps) - Generate a mapview: ignite generate mapview MapScreen

• react-native-maps container, component, and map helpers with easy step-by-step instructions on how to get started with an simple map screen.

Import images: ignite import imagesfile

• Imports all files in Images folder and converts the names into key: value pairs in the image object inside of the Images.js file in the Themes folder.

↗️ This Repo Explained

• ignite-base aka [BASE] - is the generated default app. Some files are different and have a .template extension.
• ignite-cli aka [CLI] - is the app that wraps our yeowman generators, and other commands. This is the react-native-ignite node module.
• ignite-generator aka [GEN] - Yeowman generators for ignote. This is the generator-react-native-ignite node module that the CLI depends on for generating app items.
• fireDrill.sh - A shell script for verifying the necessary relationship between folders and files is in good shape. Since versions, templates, and linting is enforce, we have it all in one friendly script for developers and CI.
• testRelease.sh - A shell script that automatically ignites a project based on the repo to make sure it generates correctly, and functions to the best of automated testability. This script is run before every release.

🔀 Where to Go From Here

Contribute to Ignite - Getting up and running for your first pull request

Chat with us on Gitter - Infinite Red devs standing by

Chosen Tech Docs - Understand the Tech Inside

Roadmap Wiki Page - Future Plans of Ignite

Who are We? - Learn More About Infinite Red

Project Web Page - Our Github Page