Integrate TSLint

.travis.yml

@@ -12,7 +12,7 @@ jobs:
       language: node_js
       node_js: 8.11.2
       install: yarn
-      script: npm run lint
+      script: yarn lint
     - stage: Build Android 🤖
       before_install:
         - sudo apt-get install build-essential checkinstall && sudo apt-get install libssl-dev

README.md

@@ -2,7 +2,7 @@
 
 ![License](https://img.shields.io/github/license/AmitM30/react-native-typescript-boilerplate.svg) ![Build](https://build.appcenter.ms/v0.1/apps/d3466edd-c992-45c8-abd3-a2f40f6a7fa1/branches/master/badge)
 
-### 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) + [Eslint](https://github.com/airbnb/javascript) to build iOS / 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) + [TSLint](https://github.com/airbnb/javascript) to build iOS / 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.
 
@@ -17,7 +17,11 @@ You might also want to [rename](https://medium.com/the-react-native-log/how-to-r
 _Disclaimer_:
 This is an **opinionated** approach to building apps with RN. The project structure is inspired by multiple production apps built by the contributors.
 
-The project uses and encourages to use industry best practices / tools / libraries like RNN, redux, eslint, separation of concern and structure to build a maintainable app.
+The project uses and encourages to use industry best practices / tools / libraries like RNN, redux, tslint, separation of concern and structure to build a maintainable app.
+
+| ![Splash](https://github.com/AmitM30/react-native-typescript-boilerplate/tree/master/src/view/assets/images/sample/1.png "Splash") | ![Home](https://github.com/AmitM30/react-native-typescript-boilerplate/tree/master/src/view/assets/images/sample/2.png "Home") |
+| :--------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------: |
+
 
 ### Table of Contents
 
@@ -62,10 +66,11 @@ The project uses and encourages to use industry best practices / tools / librari
 │   ├── presentation
 │   └── redux
 ├── .babelrc
-├── .eslintrc					Lint configuration - extending AirBnb
 ├── .gitignore
-├── .travis.yml				Travis CI
+├── .travis.yml					Travis CI
 ├── tsconfig.json				TypeScript Configuration
+├── tslint.js					TSLint configuration - extending AirBnb
+├── tsconfig.json
 ├── app.json
 ├── index.js					Application Entry point
 ├── package.json
@@ -113,16 +118,16 @@ and the launch from IDE.
 
 #### Lint
 
-To run lint on the application:
+To run tslint on the application:
 
 ```
-npm run lint
+yarn lint
 ```
 
-To fix lint issues automatically
+To fix most tslint issues automatically
 
 ```
-npm run lint:fix
+yarn lint:fix
 ```
 
 #### Unit Test
@@ -166,7 +171,7 @@ Please check out [Contributing](https://github.com/AmitM30/react-native-typescri
 
 #### Authors
 
-- **Anurag Chutani** - _Android Setup_ - [Profile](https://github.com/a7urag)
+- [**Anurag Chutani**](https://github.com/a7urag) - _Android Setup_
 
 See also the list of [contributors](https://github.com/AmitM30/react-native-typescript-boilerplate/contributors) who participated in this project.
 

__tests__/App.tsx

@@ -4,12 +4,12 @@
  */
 
 import 'react-native';
-import renderer from 'react-test-renderer';
+import reactTestRenderer from 'react-test-renderer';
 
-import App from '../src/navigators';
+import * as App from '../src/navigators';
 
 // Note: test renderer must be required after react-native.
 
 it('renders correctly', () => {
-  renderer.create(App());
+  reactTestRenderer.create(App());
 });

__tests__/views/home.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
 import 'react-native';
-import renderer from 'react-test-renderer';
+import reactTestRenderer from 'react-test-renderer';
 
-import Home from '../../src/view/screens/home';
+import * as Home from '../../src/view/screens/home';
 // Note: test renderer must be required after react-native.
 
 it('renders correctly with defaults', () => {
-  const tree = renderer.create(<Home name="Amit" />).toJSON();
+  const tree = reactTestRenderer.create(<Home name="Amit" />).toJSON();
   expect(tree).toMatchSnapshot();
 });

index.js

@@ -1,14 +1,7 @@
-// /**
-//  * @format
-//  * @lint-ignore-every XPLATJSCOPYRIGHT1
-//  */
-
-// import { AppRegistry } from "react-native";
-// import App from "./App";
-// import { name as appName } from "./app.json";
-
-// AppRegistry.registerComponent(appName, () => App);
-
-import App from './src/navigators';
+/**
+ * @format
+ * @lint-ignore-every XPLATJSCOPYRIGHT1
+ */
+import App from "./src/navigators";
 
 App();

package.json

@@ -26,8 +26,8 @@
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "test": "jest",
     "android": "react-native run-android --variant=Debug",
-    "lint": "eslint .",
-    "lint:fix": "npm run lint -- --fix"
+    "lint": "tslint --project ./tsconfig.json",
+    "lint:fix": "tslint --fix --project ./tsconfig.json"
   },
   "dependencies": {
     "react": "16.6.3",
@@ -67,6 +67,8 @@
     "react-test-renderer": "16.6.3",
     "regenerator-runtime": "^0.13.1",
     "ts-jest": "^23.10.5",
+    "tslint": "^5.12.1",
+    "tslint-config-airbnb": "^5.11.1",
     "typescript": "^3.2.4"
   },
   "jest": {

shared/redux/constants/actionTypes.tsx

@@ -1,8 +1,8 @@
 /* Add All Action constants here  */
 
-const ActionTypes = {
+const ACTION_TYPES = {
   // Splash Actions
-  SPLASH_LAUNCHED: 'SPLASH_LAUNCHED'
+  SPLASH_LAUNCHED: 'SPLASH_LAUNCHED',
 };
 
-export default ActionTypes;
+export { ACTION_TYPES };

shared/redux/reducers/app.tsx

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

shared/redux/reducers/index.tsx

@@ -8,5 +8,5 @@ import { combineReducers } from 'redux';
 import app from './app';
 
 export default combineReducers({
-  app
+  app,
 });

shared/redux/store/index.tsx

@@ -1,10 +1,10 @@
 import { applyMiddleware, createStore } from 'redux';
-import thunkMiddleware from 'redux-thunk';
+import * as thunkMiddleware from 'redux-thunk';
 import { createLogger } from 'redux-logger';
 
 import reducers from '../reducers';
 
-let middlewares = [thunkMiddleware];
+let middlewares = [thunkMiddleware.default];
 if (__DEV__) {
   const loggerMiddleware = createLogger();
   middlewares = [...middlewares, loggerMiddleware];

src/constants/screen.tsx

@@ -1,9 +1,9 @@
 // Screen ids constants
 
-const Screens = {
+const SCREENS = {
   Splash: 'Splash',
   Home: 'Home',
-  Settings: 'Settings'
+  Settings: 'Settings',
 };
 
-export default Screens;
+export { SCREENS };

src/navigators/index.tsx

@@ -2,24 +2,22 @@ import { Navigation } from 'react-native-navigation';
 import { Provider } from 'react-redux';
 
 import store from '../../shared/redux/store';
-import registerScreens from '../view/screens';
+import { registerScreens } from '../view/screens';
 import { showSplash } from './navigation';
 
 /**
  * Register screens and components for react native navigation
  */
 registerScreens({ store, Provider });
 
-const App = () => {
+const app = () => {
   Navigation.events().registerAppLaunchedListener(() => {
     Navigation.setDefaultOptions({
-      topBar: {
-        visible: true
-      }
+      topBar: { visible: true },
     });
 
     showSplash();
   });
 };
 
-export default App;
+export default app;