chore: add eslint from react-native-community (#76)

Author: troZee

.circleci/config.yml

@@ -19,7 +19,6 @@ android_defaults: &android_defaults
   <<: *defaults
   docker:
     - image: circleci/android:api-27-node8-alpha
-  resource_class: "large"
   environment:
     - TERM: "dumb"
     - ADB_INSTALL_TIMEOUT: 10
@@ -30,7 +29,6 @@ android_defaults: &android_defaults
 # MACOS
 macos_defaults: &macos_defaults
   <<: *defaults
-  resource_class: "large"
   macos:
     xcode: "10.1.0"
 
@@ -65,9 +63,9 @@ aliases:
       yarn install --network-concurrency 1 --non-interactive --cache-folder ~/.cache/yarn & wait
 
   # ANALYSE
-  # - &eslint
-  #   name: ESLint Checks
-  #   command: yarn test:eslint
+  - &eslint
+    name: ESLint Checks
+    command: yarn lint
 
   - &flow
     name: Flow Checks
@@ -96,12 +94,12 @@ jobs:
           root: .
           paths: .
 
-  # eslint:
-  #   <<: *linux_defaults
-  #   steps:
-  #   - attach_workspace:
-  #       at: ~/react-native-viewpager
-  #   - run: *eslint
+  eslint:
+    <<: *linux_defaults
+    steps:
+    - attach_workspace:
+        at: ~/react-native-viewpager
+    - run: *eslint
 
   flow:
     <<: *linux_defaults
@@ -166,9 +164,9 @@ workflows:
   Test:
     jobs:
       - linux-checkout
-      # - eslint:
-      #     requires:
-      #     - linux-checkout
+      - eslint:
+          requires:
+          - linux-checkout
       - flow:
           requires:
             - linux-checkout

.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+    root: true,
+    extends: '@react-native-community',
+}; 

.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+    bracketSpacing: false,
+    jsxBracketSameLine: true,
+    singleQuote: true,
+    trailingComma: 'all',
+};

babel.config.js

@@ -1,14 +1,14 @@
 module.exports = {
-  presets: ["module:metro-react-native-babel-preset"],
+  presets: ['module:metro-react-native-babel-preset'],
   plugins: [
     [
-      "module-resolver",
+      'module-resolver',
       {
         alias: {
-          "@react-native-community/viewpager": "./js"
+          '@react-native-community/viewpager': './js',
         },
-        cwd: "babelrc"
-      }
-    ]
-  ]
-};
+        cwd: 'babelrc',
+      },
+    ],
+  ],
+};

example/ViewPagerExample.js

@@ -9,21 +9,21 @@
 
 'use strict';
 
-import * as React from "react";
-import { Image,
-  StyleSheet,
-  Text,
-  View,
-  SafeAreaView,
-} from 'react-native'
+import * as React from 'react';
+import {Image, StyleSheet, Text, View, SafeAreaView} from 'react-native';
 
 import ViewPager from '@react-native-community/viewpager';
-import { PAGES, BGCOLOR, IMAGE_URIS, createPage } from "./utils";
-import { Button } from "./src/component/Button";
-import { LikeCount } from "./src/component/LikeCount";
-import { ProgressBar } from "./src/component/ProgressBar";
-import type { CreatePage } from "./utils"
-import type {PageScrollEvent, PageScrollState, PageScrollStateChangedEvent, PageSelectedEvent} from "../js";
+import {PAGES, createPage} from './utils';
+import {Button} from './src/component/Button';
+import {LikeCount} from './src/component/LikeCount';
+import {ProgressBar} from './src/component/ProgressBar';
+import type {CreatePage} from './utils';
+import type {
+  PageScrollEvent,
+  PageScrollState,
+  PageScrollStateChangedEvent,
+  PageSelectedEvent,
+} from '../js';
 
 type State = {
   page: number,
@@ -34,11 +34,10 @@ type State = {
     offset: number,
   },
   pages: Array<CreatePage>,
-  scrollState: PageScrollState
+  scrollState: PageScrollState,
 };
 
 export default class ViewPagerExample extends React.Component<*, State> {
-
   viewPager: React.Ref<typeof ViewPager>;
 
   constructor(props: any) {
@@ -58,28 +57,32 @@ export default class ViewPagerExample extends React.Component<*, State> {
         offset: 0,
       },
       pages: pages,
-      scrollState: 'idle'
+      scrollState: 'idle',
     };
     this.viewPager = React.createRef();
-  };
+  }
 
   onPageSelected = (e: PageSelectedEvent) => {
     this.setState({page: e.nativeEvent.position});
   };
 
-  onPageScroll = (e: PageScrollEvent)=> {
-    this.setState({progress: {
-      position: e.nativeEvent.position,
-      offset: e.nativeEvent.offset,
-    }});
+  onPageScroll = (e: PageScrollEvent) => {
+    this.setState({
+      progress: {
+        position: e.nativeEvent.position,
+        offset: e.nativeEvent.offset,
+      },
+    });
   };
 
   onPageScrollStateChanged = (e: PageScrollStateChangedEvent) => {
     this.setState({scrollState: e.nativeEvent.pageScrollState});
   };
 
   addPage = () => {
-    this.setState(prevState => ({ pages: [...prevState.pages, createPage(prevState.pages.length)]}));
+    this.setState(prevState => ({
+      pages: [...prevState.pages, createPage(prevState.pages.length)],
+    }));
   };
 
   move = (delta: number) => {
@@ -100,14 +103,11 @@ export default class ViewPagerExample extends React.Component<*, State> {
   renderPage(page: CreatePage) {
     return (
       <View key={page.key} style={page.style} collapsable={false}>
-        <Image
-          style={styles.image}
-          source={page.imgSource}
-        />
+        <Image style={styles.image} source={page.imgSource} />
         <LikeCount />
       </View>
     );
-  };
+  }
 
   render() {
     const {page, pages, animationsAreEnabled} = this.state;
@@ -124,9 +124,9 @@ export default class ViewPagerExample extends React.Component<*, State> {
           // Lib does not support dynamically orientation change
           orientation="horizontal"
           // Lib does not support dynamically transitionStyle change
-          transitionStyle="scroll" 
+          transitionStyle="scroll"
           ref={this.viewPager}>
-          { pages.map( page => this.renderPage(page)) }
+          {pages.map(page => this.renderPage(page))}
         </ViewPager>
         <View style={styles.buttons}>
           <Button
@@ -177,8 +177,15 @@ export default class ViewPagerExample extends React.Component<*, State> {
           />
         </View>
         <View style={styles.progress}>
-          <Text style={styles.buttonText}> Page {page + 1} / {pages.length} </Text>
-          <ProgressBar numberOfPages={pages.length} size={300} progress={this.state.progress} />
+          <Text style={styles.buttonText}>
+            {' '}
+            Page {page + 1} / {pages.length}{' '}
+          </Text>
+          <ProgressBar
+            numberOfPages={pages.length}
+            size={300}
+            progress={this.state.progress}
+          />
         </View>
       </SafeAreaView>
     );

example/index.js

@@ -3,14 +3,12 @@
 import React from 'react';
 import {AppRegistry} from 'react-native';
 
-import {name as appName}  from './app.json';
-import ViewPagerExample from "./ViewPagerExample";
+import {name as appName} from './app.json';
+import ViewPagerExample from './ViewPagerExample';
 
 class ExampleApp extends React.Component<{}> {
   render() {
-    return (
-        <ViewPagerExample />
-    )
+    return <ViewPagerExample />;
   }
 }
 

example/src/component/Button.js

@@ -8,12 +8,7 @@
  */
 
 import React from 'react';
-import {
-  StyleSheet,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native'
+import {StyleSheet, Text, TouchableWithoutFeedback, View} from 'react-native';
 
 type Props = $ReadOnly<{|
   enabled?: boolean,

example/src/component/LikeCount.js

@@ -8,14 +8,9 @@
  */
 
 import React from 'react';
-import {
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native'
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 
-import { thumbsUp } from '../../utils'
+import {thumbsUp} from '../../utils';
 
 type Props = $ReadOnly<{||}>;
 type State = {|likes: number|};
@@ -26,7 +21,7 @@ export class LikeCount extends React.Component<Props, State> {
   };
 
   onClick = () => {
-    this.setState(state => ({ likes: state.likes + 1}));
+    this.setState(state => ({likes: state.likes + 1}));
   };
 
   render() {
@@ -47,10 +42,10 @@ const styles = StyleSheet.create({
     height: 45,
   },
   likesText: {
-      flex: 1,
-      fontSize: 18,
-      alignSelf: 'center',
-    },
+    flex: 1,
+    fontSize: 18,
+    alignSelf: 'center',
+  },
   likeButton: {
     backgroundColor: 'rgba(0, 0, 0, 0.1)',
     borderColor: '#333333',

example/src/component/ProgressBar.js

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {StyleSheet, View} from 'react-native'
+import {StyleSheet, View} from 'react-native';
 
 type Props = {
   progress: {
@@ -17,12 +17,14 @@ type Props = {
   },
   numberOfPages: number,
   size: number,
-}
+};
 
 export class ProgressBar extends React.Component<Props> {
   render() {
-    const fractionalPosition = this.props.progress.position + this.props.progress.offset;
-    const progressBarSize = (fractionalPosition / (this.props.numberOfPages - 1)) * this.props.size;
+    const fractionalPosition =
+      this.props.progress.position + this.props.progress.offset;
+    const progressBarSize =
+      (fractionalPosition / (this.props.numberOfPages - 1)) * this.props.size;
     return (
       <View style={[styles.progressBarContainer, {width: this.props.size}]}>
         <View style={[styles.progressBar, {width: progressBarSize}]} />
@@ -32,15 +34,15 @@ export class ProgressBar extends React.Component<Props> {
 }
 
 const styles = StyleSheet.create({
-    progressBarContainer: {
-      height: 10,
-      margin: 10,
-      borderColor: '#eeeeee',
-      borderWidth: 2,
-    },
-    progressBar: {
-      alignSelf: 'flex-start',
-      flex: 1,
-      backgroundColor: '#eeeeee',
-    },
-  });
+  progressBarContainer: {
+    height: 10,
+    margin: 10,
+    borderColor: '#eeeeee',
+    borderWidth: 2,
+  },
+  progressBar: {
+    alignSelf: 'flex-start',
+    flex: 1,
+    backgroundColor: '#eeeeee',
+  },
+});

example/utils.js

@@ -17,22 +17,22 @@ export const IMAGE_URIS = [
   'https://apod.nasa.gov/apod/image/1510/lunareclipse_27Sep_beletskycrop4.jpg',
 ];
 export const thumbsUp = '\uD83D\uDC4D';
-import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 
 export type CreatePage = {
   key: number,
   style: ViewStyleProp,
-  imgSource: { uri: string }
-}
+  imgSource: {uri: string},
+};
 
 export const createPage = (key: number): CreatePage => {
-    return {
-      key: key,
-      style: {
-        backgroundColor: BGCOLOR[key % BGCOLOR.length],
-        alignItems: 'center',
-        padding: 20,
-      },
-      imgSource: { uri: IMAGE_URIS[key % BGCOLOR.length] }
-    }
+  return {
+    key: key,
+    style: {
+      backgroundColor: BGCOLOR[key % BGCOLOR.length],
+      alignItems: 'center',
+      padding: 20,
+    },
+    imgSource: {uri: IMAGE_URIS[key % BGCOLOR.length]},
   };
+};