React Native Sample Project

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

---

Docs

1. Features
2. Before you start
   1. Getting Started with React Native
   2. React Native Quick Tips
   3. Code Editor Configaration
   4. Understanding the File Structure
   5. Common Components
   6. Opinions Guiding this Project
3. Using Template
   1. Getting Up and Running with Sample
   2. Renaming the App from New
   3. Routing / Navigating
   4. Using Google Analytics
   5. Interacting with the Firebase API
   6. Testing
4. Contributing
5. Licence

---

Third party libraries

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)

---

Common modules

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

---

Getting Started

1. Clone the project https://github.com/thuyiya/react-native-boilerplate.git
2. Change the name of the project from app.json, package.json and form index.js
3. Delete ios and android folder if its exist in the root of the file by using rm -rf ios android
4. Genarate ios and android folder again using react-native eject
5. For check run the project in ios or android using run command from the react native Docs
6. Setup version control, setup git environment in your machine
7. Remove existing .git file from the project rm -rf .git
8. Git init git init
9. Add git remote git remote add origin <YOUR_REPO_URL>
10. Checkout for other branches if that match for your case.

---

For Clear and clean code, we use EsLint and Vscode configaration Editor Configaration

Code Editor Configaration

1. Download the VScode
2. Install ESlint Extention for VScode
3. Press CMD + , Then and "eslint.autoFixOnSave": true,

Understanding the File Structure

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