Regnite - React Native + Firebase boilerplate

The famous Ignite boilerplate with extra batteries included

Ignite boilerplate by Infinite Red is well known in the React Native community. It is a reliable battle-tested boilerplate to kickstart your React Native app.

Here at oneflex, we extended the Ignite boilerplate to include firebase authentication and better support for Expo.

Tech Stack

Regnite uses the Ignite tech stack with some additions and modifications:

• Expo
• TypeScript
• Firebase
• React Navigation 5
• Redux (Why Redux?)
• Redux Thunk and Redux Persist
• Emotion for reactive theming
• React Native Debugger
• Storybook (Usage)
• i18n

Quick Start

Clone the boilerplate:

git clone https://github.com/oneflex/regnite.git my-app
cd my-app && npm i

Create a Firebase project (How?), add a web app, and copy your Firebase config to a .env.development file in the top level of your project:

FIREBASE_API_KEY=[...]
FIREBASE_AUTH_DOMAIN=[...]
FIREBASE_DATABASE_URL=[...]
FIREBASE_PROJECT_ID=[...]
FIREBASE_STORAGE_BUCKET=[...]
FIREBASE_MESSENAGING_SENDER_ID=[...]
FIREBASE_APP_ID=[...]

If you want to use Google and Facebook authentication, include the respective auth keys from these platforms in the .env.development file:

FACEBOOK_APP_ID=[...]
GOOGLE_IOS_CLIENT_ID=[...]
GOOGLE_ANDROID_CLIENT_ID=[...]

Note that Facebook login doesn't work in the Expo Go app yet.

Generators

We use Ignite Generators to quickly create screens, components etc.

You can create your own, or use our ready made generators for:

• components
• screens
• navigator
• redux actions and reducers

Using a generator:

npm run g component TodoItem
npm run g screen Home
npm run g action auth

Storybook Usage

To register a component in storybook, simply require it in the storybook-registry.ts file:

require("../app/components/heading/heading.story");

Expo doesn't yet allow adding options to the developer menu, so in order to launch storybook you need to change the SHOW_STORYBOOK variable in App.js to true:

// Should we show storybook instead of our app?
//
// ⚠️ Leave this as `false` when checking into git.
const SHOW_STORYBOOK = true;

Why Redux?

You may have noticed we use Redux instead of MST (Ignite choice of state management). Redux was a requirement for the project that kickstarted this boilerplate, so we replaced MST with Redux.

We plan on publishing an alternative Regnite boilerplate with Zustand instead of Redux in the future. Any contributions will be highly appreciated!