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

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

Attributions

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.