jraleman / Goten

React Native base app

Goten

React Native boilerplate (or sample app), with basic redux, native-base and login integration.

Setup

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

Project Structure

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:

...

Project Structure Walkthrough

Basic walkthrough of the project structure. Describe the functionality of each directory.

Components

...

Containers

-> Screens

Config

Initialize and configure things here.

• AppConfig.js ⇢ simple React Native configuration here
• ReduxPersist.js ⇢ configures Redux Persist

Fixtures

Contains json files that mimic API responses for quicker development.

I18n

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.

Click here to see more

Navigation

Primary and other navigation components reside here.

• AppNavigation/ ⇢ loads in the initial screen and creates the menu(s) in a StackNavigation
• DrawerNavigation/ ⇢ ...

Services

Contains the API service and other important utilities for the application.

• Api.js ⇢ main API service, giving an interface to communicate with the back end
• Fixtures/ ⇢ mocks the API service (offline mode), making it faster to develop early on

Themes

Styling themes used throughout the app styles, acting like a global config style file.

• Images/ ⇢ app-wide styles
• NativeBaseComponents/ ⇢
• variables.js ⇢ defined colors and metrics (size measurements) of the app

Style Guide

Code

This project follows the standardx, based on standard.

Rules

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.

Lint

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! ;)

Colors

See ./App/Themes/variables.js

Color Palette

Info / Success / Warning / Error

Look & Feel

• NativeBase

Font

...

Icons

...

TODO

• 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

Resources

• 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

Attributions

• Font - LIBRARY 3 AM
• Image - loginBackground
• Image - drawerNavigationBackground
• Image - avatar
• Abstract blue background, Designed by Kjpargeter

Support!

If you need help on how to get started, please follow this guideline.

Donate

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 ;)

License

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.