React Native Starter Kit helps you get started with React Native. It contains a bunch of helpful components, building blocks and basic structure to allow you to jump straight into building an app.
What's more, it's now integrated with Firebase, to help you kick start your next full-stack product.
- Features
- Before you start
- Using RNSK
- Contributing
- Licence
Feature | Summary |
---|---|
MobX | Simple, scalable state management |
React Native Router Flux | Router for React Native based on new React Native Navigation API. 'How to' Guide → |
Firebase | Most apps needs some sort of data. RNSK is setup and ready to go with 'data from the cloud'. |
Sidebar / Hamburger Menu | ... |
React Native Elements | Cross Platform React Native UI Toolkit. |
Google Analytics | Shows how to track screen views (includes both a 'debug' mode tracker as well as 'release' mode so that data doesn't get obfuscated). Setup Guide → |
React Native Vector Icons | Easily use icons from a wide range of icon libraries, it's as simple as importing the icon font and then <Icon name={'ios-alert-outline'} size={50} color={"#CCC"} /> . |
Tcomb Form Validation | An example on how to create forms with validation. |
Component Style Guide | A bunch of elements and components to get you started - styled headings, buttons, list rows, alerts etc. |
Code Linting / Code Style Guide | We're using Airbnb's JS/React Style Guide with ESLint linting. Get started with linting for React Native → |
Boilerplate | An example directory/file structure I've found useful for scaling apps Learn more → |
- Ensure you've followed the React Native - Get Started Guide for the platform/s of choice
- Clone this project
git clone https://github.com/mcnamee/react-native-starter-app.git
- Run
npm install
from root directory - Create your own .env file (to store any app secrets) - simply run
cp .env.sample .env
- Setup your own Firebase API to get the full experience (optional)
- Start the app in an emulator
We've created a quick little "API server" on Google's Firebase Platform. You can get your own API up and running within minutes too:
- Signup for a Firebase account
- Create a new project - eg. "React Native Starter App"
- Turn on email/password Authentication
- Enable the Database feature, and import the
firebase-sample-data.json
file found in this repo - Get the Firebase project's API credentials, and add them to the respective variables in your
/.env
file (eg.APIKEY=d8f72k10s39djk29js
). You can get your projects details from Firebase, by clicking on the cog icon, next to overview > 'Add Firebase to your web app'. - Add the following rules to the Database
{
"rules": {
".read": false,
".write": false,
"meals": {
".read": true
},
"recipes": {
".read": true,
".indexOn": ["category"]
},
"users": {
"$uid": {
".read": "auth != null && auth.uid == $uid",
".write": "auth != null && auth.uid == $uid",
"firstName": { ".validate": "newData.isString() && newData.val().length > 0" },
"lastName": { ".validate": "newData.isString() && newData.val().length > 0" },
"lastLoggedIn": { ".validate": "newData.val() <= now" },
"signedUp": { ".validate": "newData.val() <= now" },
"role": {
".validate": "(root.child('users/'+auth.uid+'/role').val() === 'admin' && newData.val() === 'admin') || newData.val() === 'user'"
}
}
},
"favourites": {
"$uid": {
".read": "auth != null && auth.uid == $uid",
".write": "auth != null && auth.uid == $uid"
}
}
}
}
Want to experiment even more with Firebase? Check out the Firebase Cloud Functions
/android
- The native Android stuff/ios
- The native iOS stuff/src
- Contains the full React Native App codebase/components
- 'Dumb-components' / presentational. Read More →/constants
- App-wide variables and config/scenes
- screens for application/stores
- MobX stores (the business logic)/images
- Self explanatory right?/lib
- Utils, custom libraries, functions/theme
- Theme specific styles and variables