Added thunk sample, Push screen example (#49)

* Add thunk sample, push example, cleanup
* Update Readme
* fix lint issues

Author: AmitM30

README.md

@@ -2,53 +2,63 @@
 
 ![Travis](https://api.travis-ci.com/AmitM30/react-native-typescript-boilerplate.svg?branch=master) [![Code Climate](https://codeclimate.com/github/AmitM30/react-native-typescript-boilerplate/badges/gpa.svg)](https://codeclimate.com/github/AmitM30/react-native-typescript-boilerplate) ![License](https://img.shields.io/github/license/AmitM30/react-native-typescript-boilerplate.svg) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](./CONTRIBUTING.md)
 
-### An opinionated [React Native](https://facebook.github.io/react-native/docs/getting-started) Starter Kit with [React Native Navigation](https://github.com/wix/react-native-navigation) + [Redux](https://github.com/reactjs/redux) + [Airbnb TSLint](https://github.com/airbnb/javascript) to build iOS and Android apps using [TypeScript](https://github.com/Microsoft/TypeScript-React-Native-Starter)
+#### An opinionated [React Native](https://facebook.github.io/react-native/docs/getting-started) Starter Kit with [React Native Navigation](https://github.com/wix/react-native-navigation) + [Redux](https://github.com/reactjs/redux) + [Airbnb TSLint](https://github.com/airbnb/javascript) to build iOS and Android apps using [TypeScript](https://github.com/Microsoft/TypeScript-React-Native-Starter)
+
+___
 
 The project has been setup based off [RN Getting Started](https://facebook.github.io/react-native/docs/getting-started) and instructions from [Microsoft's Github TypeScript React Native Starter](https://github.com/Microsoft/TypeScript-React-Native-Starter) repo.
 
 ### Supports React Native 0.63.3, React Native Navigation v7 and Flipper
 
-This repo supports the latest version of React Native compatible with React Native Navigation.
-
-| UPDATE  | RNN | RN | React | Comments |
+|  | RNN | RN | React | Comments |
 |---|---|---|---|---|
-|  7th October '20 | 7.1.0 | 0.63.3 | 16.13.1 | Major Upgrade, Support for Flipper
-|  27th April '20 | 3.7.0 | 0.61.5 | 16.9.0 | Support for RN > 0.60
-|  2nd Nov '19 | 2.26.2 | 0.59.10 |  | Maintenance |
-|  30th April '19 | 2.18.3 | 0.59.5 | 16.8.6 | Maintenance |
-|  8th March '19 | 2.13.1 | 0.58.6 | 16.8.4 |
-
-### Who is this for?
-
-Jumpstart building robust apps using React Native, with TypeScript. The base setup has been taken care of, just `yarn install` and get going from respective IDEs.
-
-You might also want to [rename](https://medium.com/the-react-native-log/how-to-rename-a-react-native-app-dafd92161c35) the app for your own use.
+|  07 Oct '20 | 7.1.0 | 0.63.3 | 16.13.1 | Support for Flipper
+|  27 Apr '20 | 3.7.0 | 0.61.5 | 16.9.0 | Support for RN > 0.60, Android X
+|  02 Nov '19 | 2.26.2 | 0.59.10 |  | Maintenance |
+|  08 Mar '19 | 2.13.1 | 0.58.6 | 16.8.4 |
+
+## Introduction
+
+Jumpstart building robust apps using React Native and TypeScript with most commoly needed tools already setup. Just `yarn install` and get going from respective IDEs.
+
+- Routing and Navigation
+  - Tabbed navigation using [React Native Navigation v7](https://github.com/wix/react-native-navigation)
+  - Side Menu support
+- State Management using Flux Architecture
+  - [Redux](https://redux.js.org/introduction/getting-started)
+  - [Redux-Thunk](https://github.com/reduxjs/redux-thunk) middleware
+- Widgets / Elements
+  
+  Build your own design system with these building blocks.
+  - **elements**: `<BUTTON_DEFAULT>` or `<CText>`. They are custom elements that have default properties like font, size and so on.
+  - **widgets**: Any component providing a complete functionality. E.g. carousels component, banner component, etc.
+- Typography
+  - Base Typography setup - Color, Font, LAYOUT, CTA, FONTS, TEXT, TEXT_INPUT
+- Code Lint
+  - [Airbnb's JS](https://github.com/airbnb/javascript) Linting
 
 > _Disclaimer_: This is an **opinionated** approach to building apps with RN. The project structure is inspired by multiple production apps built by the contributors.
 
-#### App Screens
+##### App Screens
 
 | ![Splash](./src/view/assets/images/sample/1.png "Splash") | ![Home](./src/view/assets/images/sample/2.png "Home") |![Side Menu](./src/view/assets/images/sample/3.png "Side Menu") |
 | :-------------------------------------------------------: | :---------------------------------------------------: | :---------------------------------------------------: |
 
-#### Flipper Support
+##### Flipper Support
 
 ![Flipper](./src/view/assets/images/sample/4.png "Flipper")
 
 ### Table of Contents
 
 - [Project Structure](#project-structure)
-- [Running](#running)
-- [Lint](#lint)
-- [Unit Tests](#unit-tests)
+- [Getting Started](#getting-started)
 - [Cheat Sheet](#cheat-sheet)
   - [Single Screen vs Tabbed Based Navigation](#single-screen-vs-tabbed-based-navigation)
-  - [Styles](#styles)
-  - [Widgets / Elements](#widgets---elements)
+  - [Renaming the App](#renaming-the-app)
 - [Contributing](#contributing)
 - [TODO](#todo)
 
-#### Project Structure
+### Project Structure
 
 ```
 /
@@ -90,95 +100,75 @@ You might also want to [rename](https://medium.com/the-react-native-log/how-to-r
 ```
 
 `shared`
-Everything related to application business logic (store) resides under this directory.
+Everything related to application business logic. The redux store.
 
 `src`
-Only presentation layer for the app, styles, images, icons are meant to be under this.
-
-#### Running
+Presentation layer for the app - screens, styles, images, icons etc.
 
-Make sure node version installed is `>=10.x.x`
+### Getting Started
 
+Make sure node version installed is `>=10.x.x`. Then install using yarn (or npm):
 ```
 yarn install
 ```
 
-#### Launch
-
-###### iOS
-
-```
-cd ios && pod install
-```
-
-Launch application from XCode
-
-###### Android
-
-For android, run the Metro Bundler from the terminal
-
+Start the Metro Bundler:
 ```
-npm run start
+yarn start
 ```
 
-and then launch from IDE.
-
-#### Lint
+###### iOS
 
-To run lint on the application:
+One time. Move to `ios` folder and install pods:
 
 ```
-yarn lint
+cd ios && pod install
 ```
 
-Fixes most tslint issues automatically:
+Launch application from XCode (`Command + R`) Or launch from Terminal:
 
 ```
-yarn lint:fix
+yarn ios
+# runs the following command. change device name here
+# `npx react-native run-ios --simulator='iPhone 11'`
 ```
 
-#### Unit Test
-
-Unit tests are under `__test__` directory at root.
-
-To run unit test on the application:
+###### Android
 
+Start an Android Simulator from:
 ```
-npm run test
+Android Studio > Tools > AVD Manager > Run any device
 ```
 
-To find unit test coverage for the application:
-
+Similarly, run from Android Studio itself Or from Terminal:
 ```
-npm run test:coverage
+yarn android
+# runs the following command
+# react-native run-android --variant=Debug
 ```
 
-#### Cheat Sheet
+### Cheat Sheet
 
-##### Single Screen vs Tabbed Based Navigation
+#### Single Screen vs Tabbed Based Navigation
 
 The application launches with a splash screen, and then moves to a tabbed based navigation. Splash screen is a good place to fetch data / build application launch logic like getting user token from API or Async Store, load persist state etc.
 
 For Single screen application, replace this tabbed based navigation with a single screen - just `home`, or simply use the splash screen to setup the app, may be with a burger menu.
 
-##### Styles
-
-The `styles` folder contains `global` style and `typography` for the application. Styles for each screen has been placed with the screen, as they are used together with the screen, unlike web.
-
-##### Widgets / Elements
+#### Renaming the App
 
-The custom components have been broken into 2 major categories, namely - **widgets**, **elements**
+You might also want to rename the app for your own use. Follow any of the links below.
+- [How to Rename A React Native App](https://medium.com/the-react-native-log/how-to-rename-a-react-native-app-dafd92161c35)
 
-A Good use case would be:
+Or
 
-- **widgets**: Any component providing a complete functionality. Like carousels component, banner component, etc.
-- **elements**: Smallest building blocks of application. A custom element, may be `<ButtonPrimary>` or `<CText>`, that has default font properties like font, size and so on.
+- NPM Package: [react-native-rename](https://www.npmjs.com/package/react-native-rename)
 
-#### Contributing
+### Contributing
 
 Please check out [Contributing](https://github.com/AmitM30/react-native-typescript-boilerplate/blob/master/CONTRIBUTING.md).
 
-#### Authors
+### Authors
 
 - [**Anurag Chutani**](https://github.com/a7urag) - _Android Setup_
 - [**Brian Varley**](https://github.com/BrianJVarley) - _Windows Setup_

package.json

@@ -26,7 +26,8 @@
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "test": "cross-env-shell jest",
-    "android": "react-native run-android --variant=Debug",
+    "ios": "npx react-native run-ios --simulator='iPhone 11'",
+    "android": "npx react-native run-android --variant=Debug",
     "build:android:debug": "./gradlew assembleDebug",
     "build:android:release": "./gradlew assembleRelease -x bundleReleaseJsAndAssets",
     "lint": "cross-env-shell tslint --project ./tsconfig.json",
@@ -43,16 +44,16 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.8.4",
-    "@babel/runtime": "^7.8.4",
-    "@react-native-community/eslint-config": "^1.1.0",
     "@babel/plugin-proposal-class-properties": "^7.3.0",
     "@babel/preset-env": "^7.3.1",
+    "@babel/runtime": "^7.8.4",
+    "@react-native-community/eslint-config": "^1.1.0",
     "@types/jest": "^24.0.23",
     "@types/react": "^16.7.21",
     "@types/react-native": "^0.57.32",
     "@types/react-redux": "^7.0.1",
     "@types/react-test-renderer": "^16.0.3",
-    "@types/redux-logger": "^3.0.6",
+    "@types/redux-logger": "^3.0.8",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^25.1.0",

shared/redux/actions/app.ts

@@ -0,0 +1,8 @@
+/**
+ * Single location for Actions dispatched at `app` level
+ */
+import { ACTION_TYPES } from '../constants/actionTypes';
+
+export const splashLaunched = () => ({
+  type: ACTION_TYPES.SPLASH.SPLASH_LAUNCHED,
+});

shared/redux/constants/actionTypes.tsx

@@ -1,8 +1,14 @@
 /* Add All Action constants here  */
 
 const ACTION_TYPES = {
-  // Splash Actions
-  SPLASH_LAUNCHED: 'SPLASH_LAUNCHED',
+  // Splash Screen Actions
+  SPLASH: {
+    SPLASH_LAUNCHED: 'SPLASH_LAUNCHED',
+  },
+  // Home Screen Actions
+  HOME: {
+    HOME_LAUNCHED: 'HOME_LAUNCHED',
+  },
 };
 
 export { ACTION_TYPES };

shared/redux/reducers/app.tsx

@@ -1,14 +1,15 @@
 import { ACTION_TYPES } from '../constants/actionTypes';
 
 const initialState = {
-  isLoading: false,
+  isLoading: true,
 };
 
 export default (state = initialState, action: any) => {
   switch (action.type) {
-    case ACTION_TYPES.SPLASH_LAUNCHED:
+    case ACTION_TYPES.SPLASH.SPLASH_LAUNCHED:
       return {
         ...state,
+        isLoading: false,
       };
     default:
       return state;

shared/redux/reducers/index.tsx

@@ -1,8 +1,7 @@
 /**
  * This file includes all the reducers under reducers directory,
  * Import all and add to combineReducers to use any among whole app
- *
- * ** */
+ */
 import { combineReducers } from 'redux';
 
 import app from './app';

shared/redux/store/index.tsx

@@ -1,14 +1,18 @@
 import { applyMiddleware, createStore } from 'redux';
 import * as thunkMiddleware from 'redux-thunk';
-import { createLogger } from 'redux-logger';
 
 import reducers from '../reducers';
 
 let middlewares = [thunkMiddleware.default];
 if (__DEV__) {
-  const loggerMiddleware = createLogger();
+  const logger = require('redux-logger');
+  const loggerMiddleware = logger.createLogger({
+    duration: true,
+  });
   middlewares = [...middlewares, loggerMiddleware];
 }
 const store = createStore(reducers, applyMiddleware(...middlewares));
 
+export type AppDispatch = typeof store.dispatch;
+
 export default store;

shared/redux/thunk/app.ts

@@ -0,0 +1,15 @@
+/**
+ * Thunks are a great place for application business logic
+ */
+import { splashLaunched } from '../actions/app';
+import { AppDispatch } from '../store';
+
+export const splashScreenLaunched = () => async (dispatch: AppDispatch) => {
+  dispatch(splashLaunched());
+  /**
+   * Application launch Logic can go here, like
+   * - Validating user token
+   * - Getting data from async storage
+   * - Making an API call needed for booting app
+   */
+};

src/constants/screen.tsx

@@ -1,10 +1,12 @@
-// Screen ids constants
-
+/**
+ * Define screen names as constants here
+ */
 const SCREENS = {
   Splash: 'Splash',
   Home: 'Home',
   Settings: 'Settings',
   Drawer: 'Drawer',
+  Dummy: 'Dummy',
 };
 
 export { SCREENS };

src/navigators/index.tsx

@@ -9,10 +9,19 @@ import { showSplash } from './navigation';
  */
 registerScreens({ store });
 
+/**
+ * Entry point for the app
+ * showSplash() -> As the name suggests, shows the splash screen.
+ *                 If you do not want a splash screen, directly call `tabbedNavigation()`
+ *                 defined in './navigation'
+ */
 const app = () => {
   Navigation.events().registerAppLaunchedListener(() => {
     Navigation.setDefaultOptions({
-      topBar: { visible: true },
+      /**
+       * Add default options right here
+       */
+      topBar: { visible: true, elevation: 0 },
     });
 
     showSplash();