This Boiler Plate 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.
Before you use the app set your app facebook and google clientid to constent/consts.js
- Features
- Before you start
- Using Template
- Contributing
- Licence
library | Summary |
---|---|
Redux | A predictable state container - Helping you write applications that behave consistently and run in different environments. |
React Navigation | Routing and navigation for your React Native apps, based on new React Native Navigation API. 'How to' Guide → |
axios | Promise based HTTP client for the browser and node.js |
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 → |
Vector Icons | 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"} /> . |
Redux Promise Middleware | Redux middleware for resolving and rejecting promises with conditional optimistic updates |
Redux Form | The best way to manage your form state in Redux |
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 →](#understanding-the-file-structure) |
Feature | Summary |
---|---|
Language feature | translate |
Theme | App theme, color chnages |
Empty Data Set Image Generator | Add 'No data' images |
UI Tips | For help disck for users |
- Clone the project
https://github.com/thuyiya/react-native-boilerplate.git
- Change the name of the project from
app.json
,package.json
and formindex.js
- Delete ios and android folder if its exist in the root of the file by using
rm -rf ios android
- Genarate ios and android folder again using
react-native eject
- For check run the project in ios or android using run command from the react native Docs
- Setup version control, setup git environment in your machine
- Remove existing .git file from the project
rm -rf .git
- Git init
git init
- Add git remote
git remote add origin <YOUR_REPO_URL>
- Checkout for other branches if that match for your case.
For Clear and clean code, we use EsLint and Vscode configaration Editor Configaration
- Download the VScode
- Install ESlint Extention for VScode
- Press CMD + , Then and
"eslint.autoFixOnSave": true,
react-native-template
│
└───assets
│ │ fonts
│ │ icons
│
└───constants
│ │ api.js
│ │ Theme.js
│ │ consts.js
│
└───helpers
│ │ cachedFonts.js
│ │ index.js
│
└───src
│ │ index.js
│ │ Root.js
│ │
│ └───routes
│ │ HomeNavigator.js
│ │ Navigator.js
│ │
│ commons
│ │ styles
│ │ └───LoadingScreen.js
│ │ index.js
│ │ LoadingScreen.js
│ │ TextInputWithValidations.js
│ │
│ redux
│ │ reducer.js
│ │ store.js
│ │
│ screens
│ index.js
│ home
│ │ └───components
│ │ │ styles
│ │ │ └───DataList.js
│ │ │ DataList.js
│ │ │
│ │ styles
│ │ │
│ │ HomeScreen.js
│ │ index.js
│ │
│ addView
│ │ └───components
│ │ │ styles
│ │ │ └───addViewForm.js
│ │ │ addViewForm.js
│ │ │ index.js
│ │ │
│ │ styles
│ │ └───addViewScreen.js
│ │ addViewScreen.js
│ │ index.js
│ │ validations.js
│ │
│ Notification
│ │ NotificationScreen.js
│ │ index.js
│ │
│ Profile
│ │ ProfileScreen.js
│ │ index.js
│
│ .babelrc
│ .eslintrc
│ .editorconfig
│ App.js
│ app.json
│ jsconfig.json
│ package.json
│ README.md