Lighthouse Boilerplate for Ignite

NOTE: This documentation is currently being rewritten

A Ignite boilerplate used from Lighthouse developer teams

This is a boilerplate develop for the Ignite CLI is used at Lighthouse for our developer team to make the development of React Native apps more simple and

Currently includes:

• React Native 0.50.4
• React Navigation
• Redux
• Redux Sagas
• Redux Persist
• Screen Tracking with Google Analitycs
• Push Notifications with One Signal
• Fastlane for fast stores deployment
• Microsoft Mobile App Center (Coming soon)
• And more!

Quick Start

When you've installed the Ignite CLI, you can get started with this boilerplate like this:

ignite new MyCoolestApp -b lighthouse-boilerplate

We'll ask you some required questions during install as to setup the application.

Boilerplate generators

Explain about generators here

Screens

• ignite g screen NewScreen - Will create a folder called NewScreen with the files NewScreen.js, Container.js and also a Styles.js.
• ignite g list NewList - The same as the screen command, but it will give you a walkthrough to generate a FlatList screen. Some other options will be available for you to choose.

Those commands will also add the new screen to the navigations file.

Components

React components go here...pretty self-explanatory. We won't go through each in detail -- open each file to read the comments and view the code.

To generate a new Component you can use the following generator commands:

• ignite g component NewComponent - Will create a folder called NewComponent with the files NewComponent.js and also a Style.js.

Redux

Contains a preconfigured Redux setup. Review each file carefully to see how Redux interacts with your application.

Here again we have generators to help you out. You just have to use one of the following:

• ignite g redux NewRedux - Will generate and link the redux for NewRedux.

Navigation

Your primary and other navigation components reside here.

• AppNavigation.js - loads in your initial screen and creates your menu(s) in a TabNavigation
• Styles.js - styling for the navigation

Sagas

Explain about Sagas generator here.

Storybook

Storybook has been setup to show off components in the different states. Storybook is a great way to develop and test components outside of use in your app. Simply run npm run storybook to get started. All stores are contained in the *.story.js files along side the components.

Themes

Styling themes used throughout your app styles.

• ApplicationStyles.js - app-wide styles
• Colors.js - defined colors for your app
• Fonts.js - defined fonts for your app
• Images.js - loads and caches images used in your app
• Metrics.js - useful measurements of things like navBarHeight

Config

Initialize and configure things here.

• AppConfig.js - simple React Native configuration here
• DebugConfig.js - define how you want your debug environment to act
• ReactotronConfig.js - configures Reactotron in your project (Note: this will be extracted into a plugin in the future)

Fixtures

Contains json files that mimic API responses for quicker development. These are used by the Services/FixtureApi.js object to mock API responses.

You can get more informations about Redux here https://redux.js.org

Services

Contains your API service and other important utilities for your application.

• Api.js - main API service, giving you an interface to communicate with your back end
• FixtureApi.js - mocks your API service, making it faster to develop early on in your app

Lib

We recommend using this folder for modules that can be extracted into their own NPM packages at some point.

Images

Contains actual images (usually png) used in your application.

Transforms

Helpers for transforming data between API and your application and vice versa. An example is provided that you can look at to see how it works.

Tests

This folder (located as a sibling to App) contains sample Jest snapshot and unit tests for your application.

If you would like to have the ignite generate command include the generation of tests when avaiable, add "test": "jest" or "test": "ava" to ./ignite/ignite.json, depending on the test runner you are using.

Thank you Ignite CLI

Ignite CLI

Lighthouse

Lighthouse offers general mobile app design/development services. Email us at [email protected] to get in touch with us for more details.