Challenge React Native

This project is a React Native challenge to present my knowledge.

Architecture

The driving goal of the architecture of the app is separation of concerns. Namely:

Presentational components are separated from containers (aka "screens").

Presentational components are small components that are concerned with how things look. Containers usually define whole application screens and are concerned with how things work: they include presentational components and wire everything together.

If you are interested you can read more about it here.
State is managed using global Redux stores.

When applications grow, sharing state and its changes can become very hard. Questions like "How can I access this data?" or "When did this change?" are common, just like passing data around components just to be able to use it in nested components.

With Redux, state is shared using global stores, and changes are predictable: actions are applied by reducers to the state. While the pattern can be a bit much for small projects, the clear separation of responsibilities and predictability helps with bigger applications.

If you are interested you can read more about it here.
Application side-effects (API calls, etc.) are separated from UI and state manipulation using Redux Saga.

Using Redux Saga has two benefits: keeping application side-effects and related business logic out of UI components, as well as executing that logic in an asynchronous way without ending in callback hell.

Sagas are triggered by Redux actions and can also trigger Redux actions to alter state. By using JavaScript generators (yield), sagas are written in a synchronous-like manner while still executing asynchronously.

The app contains:

a React Native (v0.57.8) application (in "ejected" mode to allow using dependencies that rely on native code)
a clear directory layout to provide a base architecture for your application
Redux (v3.7) to help manage state
Redux Persist (v5.9) to persist the Redux state
Redux Sagas (v5.0) to separate side-effects and logic from state and UI logic
React Navigation (v3.0.9) with a NavigationService to handle routing and navigation in the app, with a splash screen setup by default
reduxsauce (v0.7) to facilitate using Redux
apisauce (v0.15) to make axios even better
prettier and eslint preconfigured for React Native

Directory layout

App/Components: presentational components
App/Config: configuration of the application
App/Containers: container components, i.e. the application's screens
App/Images: images used by the application
App/Sagas: redux sagas
App/Services: application services, e.g. API clients
App/Stores: redux actions, reducers and stores
App/Theme: base styles for the application

Requirements

Node 8 or greater is required. Development for iOS requires a Mac and Xcode 9 or up, and will target iOS 9 and up.

You also need to install the dependencies required by React Native:

for Android development
for iOS development

Using the app

clone this repository
install the npm dependencies by running yarn

Running the project

Assuming you have all the requirements installed, you can setup and run the project by running: