Update/Fix Prettier + Eslint config for codebase

Run Prettier/Eslint on entire codebase, fix issues

Author: Adam Miskiewicz

.eslintignore

@@ -0,0 +1,6 @@
+flow-typed
+node_modules
+lib*
+
+## Temporary
+examples

.eslintrc

@@ -1,12 +1,16 @@
 {
   "extends": [
-    "airbnb",
+    "plugin:flowtype/recommended",
+    "plugin:react/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
     "prettier",
     "prettier/flowtype",
     "prettier/react"
   ],
   "parser": "babel-eslint",
   "plugins": [
+    "react",
     "flowtype",
     "prettier"
   ],
@@ -18,7 +22,7 @@
   },
   "rules": {
     "prettier/prettier": ["error", {
-      "trailingComma": "all",
+      "trailingComma": "es5",
       "singleQuote": true
     }],
 
@@ -65,7 +69,7 @@
   },
   "settings": {
     "flowtype": {
-      "onlyFilesWithFlowAnnotation": false
+      "onlyFilesWithFlowAnnotation": true
     }
   }
 }

.flowconfig

@@ -19,6 +19,9 @@
 <PROJECT_ROOT>/website/node_modules/react-native/.*
 <PROJECT_ROOT>/website/node_modules/fbjs/.*
 
+; Ignore misc packages
+.*/node_modules/eslint-.*
+
 ; Ignore duplicate module providers
 ; For RN Apps installed via npm, "Libraries" folder is inside
 ; "node_modules/react-native" but in the source repo it is in the root
@@ -55,6 +58,3 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
 unsafe.enable_getters_and_setters=true
-
-[version]
-^0.40.0

examples/NavigationPlayground/__exponent/rn-cli.config.js

@@ -9,13 +9,16 @@ const path = require('path');
 const config = require('../../../rn-cli.config');
 
 config.getBlacklist = () => [
-  new RegExp(`${path.resolve(__dirname, '../../..')}/node_modules/react-native/(.*)`),
+  new RegExp(
+    `${path.resolve(__dirname, '../../..')}/node_modules/react-native/(.*)`
+  ),
   new RegExp(`${path.resolve(__dirname, '../../..')}/node_modules/react/(.*)`),
   ...config.getBlacklistForExample('NavigationPlayground'),
   new RegExp(`^${path.resolve(__dirname, '..')}/package.json$`),
 ];
 
-config.getTransformModulePath = () => path.resolve(__dirname, './transformer.js');
+config.getTransformModulePath = () =>
+  path.resolve(__dirname, './transformer.js');
 
 config.getTransformOptions = () => ({
   reactNativePath: path.resolve(__dirname, '../node_modules/react-native/'),

examples/NavigationPlayground/__exponent/transformer.js

@@ -19,21 +19,23 @@ const reactTransformPlugin = require('babel-plugin-react-transform').default;
 const hmrTransform = 'react-transform-hmr/lib/index.js';
 const transformPath = require.resolve(hmrTransform);
 
-const makeHMRConfig =  function(options, filename) {
-  const transform = filename ?
-      './' + path.relative(path.dirname(filename), transformPath) : // packager can't handle absolute paths
-      hmrTransform;
+const makeHMRConfig = function(options, filename) {
+  const transform = filename
+    ? './' + path.relative(path.dirname(filename), transformPath) // packager can't handle absolute paths
+    : hmrTransform;
 
   return {
     plugins: [
       [
         reactTransformPlugin,
         {
-          transforms: [{
-            transform,
-            imports: ['react-native'],
-            locals: ['module'],
-          }],
+          transforms: [
+            {
+              transform,
+              imports: ['react-native'],
+              locals: ['module'],
+            },
+          ],
         },
       ],
     ],
@@ -42,13 +44,22 @@ const makeHMRConfig =  function(options, filename) {
 
 const buildAliasPreset = (reactNativePath, reactPath) => ({
   plugins: [
-    [require('babel-plugin-module-resolver').default, {
-      alias: Object.assign({}, {
-        'react-native': path.resolve(`${reactNativePath || './node_modules/react-native'}`),
-        react: path.resolve(`${reactPath || './node_modules/react'}`),
-      }, require('babel-preset-exponent').plugins[0][1].alias),
-      cwd: path.resolve(__dirname, '..'),
-    }],
+    [
+      require('babel-plugin-module-resolver').default,
+      {
+        alias: Object.assign(
+          {},
+          {
+            'react-native': path.resolve(
+              `${reactNativePath || './node_modules/react-native'}`
+            ),
+            react: path.resolve(`${reactPath || './node_modules/react'}`),
+          },
+          require('babel-preset-exponent').plugins[0][1].alias
+        ),
+        cwd: path.resolve(__dirname, '..'),
+      },
+    ],
   ],
 });
 
@@ -59,7 +70,10 @@ const buildAliasPreset = (reactNativePath, reactPath) => ({
 function buildBabelConfig(filename, options) {
   const exponentBabelPreset = require('babel-preset-exponent');
   const babelConfig = {
-    presets: [...exponentBabelPreset.presets, buildAliasPreset(options.reactNativePath, options.reactPath)],
+    presets: [
+      ...exponentBabelPreset.presets,
+      buildAliasPreset(options.reactNativePath, options.reactPath),
+    ],
     plugins: [],
   };
 
@@ -97,7 +111,7 @@ function transform(src, filename, options) {
   };
 }
 
-module.exports = function (data, callback) {
+module.exports = function(data, callback) {
   let result;
   try {
     result = transform(data.sourceCode, data.filename, data.options);

examples/NavigationPlayground/index.js

@@ -1,6 +1,4 @@
-import {
-  AppRegistry,
-} from 'react-native';
+import { AppRegistry } from 'react-native';
 
 import App from './js/App';
 

examples/NavigationPlayground/js/App.js

@@ -49,8 +49,12 @@ const ExampleRoutes = {
     screen: CustomTabs,
   },
   ModalStack: {
-    name: Platform.OS === 'ios' ? 'Modal Stack Example' : 'Stack with Dynamic Header',
-    description: Platform.OS === 'ios' ? 'Stack navigation with modals' : 'Dynamically showing and hiding the header',
+    name: Platform.OS === 'ios'
+      ? 'Modal Stack Example'
+      : 'Stack with Dynamic Header',
+    description: Platform.OS === 'ios'
+      ? 'Stack navigation with modals'
+      : 'Dynamically showing and hiding the header',
     screen: ModalStack,
   },
   StacksInTabs: {
@@ -80,7 +84,7 @@ const ExampleRoutes = {
 const MainScreen = ({ navigation }) => (
   <ScrollView>
     <Banner />
-    {Object.keys(ExampleRoutes).map((routeName: string) =>
+    {Object.keys(ExampleRoutes).map((routeName: string) => (
       <TouchableOpacity
         key={routeName}
         onPress={() => {
@@ -92,28 +96,33 @@ const MainScreen = ({ navigation }) => (
       >
         <View style={styles.item}>
           <Text style={styles.title}>{ExampleRoutes[routeName].name}</Text>
-          <Text style={styles.description}>{ExampleRoutes[routeName].description}</Text>
+          <Text style={styles.description}>
+            {ExampleRoutes[routeName].description}
+          </Text>
         </View>
       </TouchableOpacity>
-    )}
+    ))}
   </ScrollView>
 );
 
-const AppNavigator = StackNavigator({
-  ...ExampleRoutes,
-  Index: {
-    screen: MainScreen,
+const AppNavigator = StackNavigator(
+  {
+    ...ExampleRoutes,
+    Index: {
+      screen: MainScreen,
+    },
   },
-}, {
-  initialRouteName: 'Index',
-  headerMode: 'none',
+  {
+    initialRouteName: 'Index',
+    headerMode: 'none',
 
-  /*
+    /*
    * Use modal on iOS because the card mode comes from the right,
    * which conflicts with the drawer example gesture
    */
-  mode: Platform.OS === 'ios' ? 'modal' : 'card',
-});
+    mode: Platform.OS === 'ios' ? 'modal' : 'card',
+  }
+);
 
 export default () => <AppNavigator />;
 

examples/NavigationPlayground/js/Banner.js

@@ -2,20 +2,11 @@
 
 import React from 'react';
 
-import {
-  Image,
-  Platform,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import { Image, Platform, StyleSheet, Text, View } from 'react-native';
 
 const Banner = () => (
   <View style={styles.banner}>
-    <Image
-      source={require('./assets/NavLogo.png')}
-      style={styles.image}
-    />
+    <Image source={require('./assets/NavLogo.png')} style={styles.image} />
     <Text style={styles.title}>React Navigation Examples</Text>
   </View>
 );

examples/NavigationPlayground/js/CustomTabs.js

@@ -33,29 +33,18 @@ const MyNavScreen = ({ navigation, banner }) => (
 );
 
 const MyHomeScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Home Screen"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Home Screen" navigation={navigation} />
 );
 
 const MyNotificationsScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Notifications Screen"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
 );
 
 const MySettingsScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner="Settings Screen"
-    navigation={navigation}
-  />
+  <MyNavScreen banner="Settings Screen" navigation={navigation} />
 );
 
-const CustomTabBar = ({
-  navigation,
-}) => {
+const CustomTabBar = ({ navigation }) => {
   const { routes } = navigation.state;
   return (
     <View style={styles.tabContainer}>
@@ -70,12 +59,9 @@ const CustomTabBar = ({
       ))}
     </View>
   );
-}
+};
 
-const CustomTabView = ({
-  router,
-  navigation,
-}) => {
+const CustomTabView = ({ router, navigation }) => {
   const { routes, index } = navigation.state;
   const ActiveScreen = router.getComponentForState(navigation.state);
   return (
@@ -91,25 +77,30 @@ const CustomTabView = ({
   );
 };
 
-const CustomTabRouter = TabRouter({
-  Home: {
-    screen: MyHomeScreen,
-    path: '',
-  },
-  Notifications: {
-    screen: MyNotificationsScreen,
-    path: 'notifications',
-  },
-  Settings: {
-    screen: MySettingsScreen,
-    path: 'settings',
+const CustomTabRouter = TabRouter(
+  {
+    Home: {
+      screen: MyHomeScreen,
+      path: '',
+    },
+    Notifications: {
+      screen: MyNotificationsScreen,
+      path: 'notifications',
+    },
+    Settings: {
+      screen: MySettingsScreen,
+      path: 'settings',
+    },
   },
-}, {
-  // Change this to start on a different tab
-  initialRouteName: 'Home',
-});
+  {
+    // Change this to start on a different tab
+    initialRouteName: 'Home',
+  }
+);
 
-const CustomTabs = createNavigationContainer(createNavigator(CustomTabRouter)(CustomTabView));
+const CustomTabs = createNavigationContainer(
+  createNavigator(CustomTabRouter)(CustomTabView)
+);
 
 const styles = StyleSheet.create({
   container: {
@@ -127,7 +118,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: '#ddd',
     borderRadius: 4,
-  }
+  },
 });
 
 export default CustomTabs;