React Native boilerplate (or sample app), with basic redux, native-base and login integration.
Follow the steps from the react-native getting started documentation page
Clone the repository:
git clone https://github.com/jraleman/Goten.git Goten/
cd Goten/
Install all the needed dependencies:
yarn install
The idea of having a good project structure is to have a cross platform project, to maximize code reuse, keep the configurations out of the code, and minimize the component state.
This is the main idea:
...
Basic walkthrough of the project structure. Describe the functionality of each directory.
...
-> Screens
Initialize and configure things here.
AppConfig.js
⇢ simple React Native configuration hereReduxPersist.js
⇢ configures Redux Persist
Contains json files that mimic API responses for quicker development.
An abbreviation for the word "internationalization". The term "i18n" is derived
from its spelling as the letter "i" plus 18 letters plus the letter "n".
Languages are defined by json files under ./App/I18n/languages
.
Primary and other navigation components reside here.
AppNavigation/
⇢ loads in the initial screen and creates the menu(s) in a StackNavigationDrawerNavigation/
⇢ ...
Contains the API service and other important utilities for the application.
Api.js
⇢ main API service, giving an interface to communicate with the back endFixtures/
⇢ mocks the API service (offline mode), making it faster to develop early on
Styling themes used throughout the app styles, acting like a global config style file.
Images/
⇢ app-wide stylesNativeBaseComponents/
⇢variables.js
⇢ defined colors and metrics (size measurements) of the app
This project follows the standardx, based on standard.
We follow all the rules form standard
, minus the following exceptions:
- Every function should include one and only return statement
(exceptions allowed), including
void
types. - ...
Check out .eslintrc
for more info.
After running yarn install
, you can run the following scripts (depending on
your platform), to check if the code follows our standardx
coding
style guide.
Command | Description |
---|---|
yarn lint |
Checks App/ code style. |
yarn lint-log |
Saves and open the log file. |
yarn lint-fix |
Fix the code style of the JavaScript files. |
If you have any problem running the lint from the project, try installing the following packages globally, like this:
npm install --global snazzy
npm install --global standardx
npm install --global babel-eslint
And then just run the lint from your end.
Checkout package.json
scripts! ;)
See ./App/Themes/variables.js
...
...
- Clean / Refactor project, use hooks and context
- Update dependencies, scripts, and structure
- Finish documentation of project
- Change logo width depending on landscape/portrait orientation
- Fetch from API via http (not secure) in iOS
- Landscape mode optimization
- React Native Cookbook - by Stan Bernshadskiy, Crysfel Villa
- Network Indicator
- Color API Tutorial
- Adding Redux to a Simple React App
- #1 WTF is Redux? | React Native App | The Basics
- Font - LIBRARY 3 AM
- Image - loginBackground
- Image - drawerNavigationBackground
- Image - avatar
- Abstract blue background, Designed by Kjpargeter
If you need help on how to get started, please follow this guideline.
If you like what you see, or if this project help you reduce time to develop your own projects, feel free to buy us a pint ;)
This project is under the MIT License. Meaning that you can use, copy, modify, merge, publish, distribute, sub-license, and/or sell copies of the final products. See the LICENSE file for more details.