feat: eslint, prettier and project lint

Added missing Eslint and Prettier config. Also execute a general
lint for template with added configs.

template/.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  root: true,
+  extends: '@react-native-community',
+  plugins: ['import', 'react-hooks'],
+  parser: 'babel-eslint',
+  settings: {
+    'import/resolver': {
+      node: {
+        paths: ['src'],
+        alias: {
+          _assets: './src/assets',
+          _components: './src/components',
+          _constants: './src/constants',
+          _helpers: './src/helpers',
+          _interfaces: './src/interfaces',
+          _navigators: './src/navigators',
+          _middlewares: './src/middlewares',
+          _screens: './src/screens',
+          _services: './src/services',
+          _store: './src/store',
+          _utils: './src/utils',
+        },
+      },
+      'babel-module': {},
+    },
+  },
+  rules: {
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+  },
+};

template/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

template/index.js

@@ -1,5 +1,5 @@
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from './src/App';
-import {name as appName} from './app.json';
+import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

template/package.json

@@ -6,7 +6,8 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "start": "react-native start",
-    "lint": "eslint ."
+    "lint": "eslint src --ext .js,.jsx",
+    "lint:fix": "eslint src --ext .js,.jsx --fix"
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.10",

template/src/App.jsx

@@ -5,9 +5,9 @@
 
 import 'react-native-gesture-handler';
 import React from 'react';
-import {Provider} from 'react-redux';
+import { Provider } from 'react-redux';
 
-import {AppNavigator} from '_navigators';
+import { AppNavigator } from '_navigators';
 import store from '_store';
 
 const App = () => (

template/src/components/ErynLogo.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import {Image, StyleSheet} from 'react-native';
+import { Image, StyleSheet } from 'react-native';
 
 import erynImage from '_assets/eryn.jpg';
 
-function ErynLogo({style}) {
+function ErynLogo({ style }) {
   return <Image style={[styles.image, style]} source={erynImage} />;
 }
 

template/src/components/Loader.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import {View, ActivityIndicator, StyleSheet} from 'react-native';
-import {SafeAreaView} from 'react-native-safe-area-context';
+import { View, ActivityIndicator, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
-import {SCREEN_WIDTH} from '_constants/screen';
+import { SCREEN_WIDTH } from '_constants/screen';
 
 function Loader() {
   return (

template/src/components/Text.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {Text as RNText, StyleSheet} from 'react-native';
+import { Text as RNText, StyleSheet } from 'react-native';
 
-function Text({style, heading, bold, center, children}) {
+function Text({ style, heading, bold, center, children }) {
   const combinedStyles = [
     heading && styles.heading,
     bold && styles.bold,

template/src/components/index.js

@@ -1,3 +1,3 @@
-export {default as Loader} from './Loader';
-export {default as Text} from './Text';
-export {default as ErynLogo} from './ErynLogo';
+export { default as Loader } from './Loader';
+export { default as Text } from './Text';
+export { default as ErynLogo } from './ErynLogo';

template/src/constants/screen.js

@@ -1,4 +1,4 @@
-import {Dimensions} from 'react-native';
+import { Dimensions } from 'react-native';
 
 export const SCREEN_WIDTH = Dimensions.get('window').width;
 export const SCREEN_HEIGHT = Dimensions.get('window').height;

template/src/navigators/AppNavigator.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import {NavigationContainer} from '@react-navigation/native';
-import {createStackNavigator} from '@react-navigation/stack';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
 
-import {WelcomeScreen, StartScreen} from '_screens';
+import { WelcomeScreen, StartScreen } from '_screens';
 
 const RootStack = createStackNavigator();
 
-const DEFAULT_OPTIONS = {gestureEnabled: false};
+const DEFAULT_OPTIONS = { gestureEnabled: false };
 
 function AppNavigator(props) {
   return (

template/src/navigators/index.js

@@ -1 +1 @@
-export {default as AppNavigator} from './AppNavigator';
+export { default as AppNavigator } from './AppNavigator';

template/src/screens/StartScreen.jsx

@@ -1,9 +1,9 @@
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
 
-import {Loader} from '_components';
-import {wait} from '_utils/functions';
+import { Loader } from '_components';
+import { wait } from '_utils/functions';
 
-function StartScreen({navigation}) {
+function StartScreen({ navigation }) {
   useEffect(() => {
     const loaded = async () => {
       await wait(2);

template/src/screens/WelcomeScreen.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
-import {SafeAreaView} from 'react-native-safe-area-context';
-import {connect} from 'react-redux';
+import { StyleSheet, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { connect } from 'react-redux';
 
-import {Text, ErynLogo} from '_components';
+import { Text, ErynLogo } from '_components';
 
-function StartScreen({name}) {
+function StartScreen({ name }) {
   return (
     <SafeAreaView>
       <ErynLogo style={styles.image} />

template/src/screens/index.js

@@ -1,2 +1,2 @@
-export {default as StartScreen} from './StartScreen';
-export {default as WelcomeScreen} from './WelcomeScreen';
+export { default as StartScreen } from './StartScreen';
+export { default as WelcomeScreen } from './WelcomeScreen';

template/src/store/index.js

@@ -1,11 +1,11 @@
-import {createStore, applyMiddleware, combineReducers} from 'redux';
+import { createStore, applyMiddleware, combineReducers } from 'redux';
 import thunkMiddleware from 'redux-thunk';
 
 // List Project Middlewares
-import {logger as loggerMiddleware} from '_middlewares/logger';
+import { logger as loggerMiddleware } from '_middlewares/logger';
 
 // Place your Reducers
-import {userReducer} from './user';
+import { userReducer } from './user';
 
 // Add Reducers to Root Reducer
 const rootReducer = combineReducers({

template/src/store/user/index.js

@@ -1,4 +1,4 @@
 import userReducer from './reducers';
 import * as userActions from './actions';
 
-export {userActions, userReducer};
+export { userActions, userReducer };