Upgraded linting components and ran lint

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   parser: "babel-eslint",
-  plugins: ["react", "react-native", "prettier", "fp", "flowtype"],
+  plugins: ["react", "react-native", "prettier", "fp", "flowtype", "import"],
   env: {
     jest: true
   },
@@ -13,9 +13,10 @@ module.exports = {
         extensions: [".js", ".jsx"]
       }
     },
+    "import/ignore": ["react-native"],
     react: {
       pragma: "React",
-      version: "16.6.1",
+      version: "16.11.0",
       flowVersion: "0.87"
     },
     parserOptions: {
@@ -40,9 +41,9 @@ module.exports = {
   extends: [
     "eslint:recommended",
     "plugin:react/recommended",
-    "airbnb-base",
     "prettier",
-    "plugin:flowtype/recommended"
+    "plugin:flowtype/recommended",
+    "@react-native-community",
   ],
   rules: {
     "react/no-deprecated": "warn",
@@ -87,6 +88,6 @@ module.exports = {
         bracketSpacing: false
       }
     ],
-    "fp/no-mutating-methods": "warn"
+    "fp/no-mutating-methods": "warn",
   }
 };

__tests__/__mocks__/react-native.mock.js

@@ -4,7 +4,7 @@ jest.mock('react-native/Libraries/Image/resolveAssetSource', () => {
 
 jest.mock('NativeEventEmitter', () => {
   function MockEventEmitter() {}
-  MockEventEmitter.prototype.addListener = function() {};
-  MockEventEmitter.prototype.removeListener = function() {};
+  MockEventEmitter.prototype.addListener = function () {};
+  MockEventEmitter.prototype.removeListener = function () {};
   return MockEventEmitter;
 });

__tests__/components/Camera.test.js

@@ -272,7 +272,7 @@ describe('Camera', () => {
           ],
         ];
 
-        testCases.forEach(c => {
+        testCases.forEach((c) => {
           expect(camera._hasCameraChanged(c[0], c[1])).toBe(true);
         });
       });
@@ -286,7 +286,7 @@ describe('Camera', () => {
           [{followPitch: 40}, {followPitch: 49}],
         ];
 
-        testCases.forEach(c => {
+        testCases.forEach((c) => {
           expect(camera._hasCameraChanged(c[0], c[1])).toBe(true);
         });
       });
@@ -297,7 +297,7 @@ describe('Camera', () => {
           [{animationMode: 'flyTo'}, {animationMode: 'easeTo'}],
         ];
 
-        testCases.forEach(c => {
+        testCases.forEach((c) => {
           expect(camera._hasCameraChanged(c[0], c[1])).toBe(true);
         });
       });

__tests__/components/UserLocation.test.js

@@ -37,7 +37,7 @@ describe('UserLocation', () => {
       jest.clearAllMocks();
     });
 
-    test('renders with CircleLayers by default', done => {
+    test('renders with CircleLayers by default', (done) => {
       const {getAllByType} = render(<UserLocation />);
 
       setTimeout(() => {
@@ -50,7 +50,7 @@ describe('UserLocation', () => {
       });
     });
 
-    test('does not render with visible set to false', done => {
+    test('does not render with visible set to false', (done) => {
       const {queryByType} = render(<UserLocation visible={false} />);
 
       setTimeout(() => {
@@ -63,7 +63,7 @@ describe('UserLocation', () => {
       });
     });
 
-    test('renders with CustomChild when provided', done => {
+    test('renders with CustomChild when provided', (done) => {
       const circleLayerProps = {
         key: 'testUserLocationCircle',
         id: 'testUserLocationCircle',

__tests__/interface.test.js

@@ -85,6 +85,6 @@ describe('Public Interface', () => {
       'AnimatedExtractCoordinateFromArray',
       'AnimatedRouteCoordinatesArray',
     ];
-    actualKeys.forEach(key => expect(expectedKeys).toContain(key));
+    actualKeys.forEach((key) => expect(expectedKeys).toContain(key));
   });
 });

__tests__/modules/location/locationManager.test.js

@@ -251,13 +251,13 @@ describe('LocationManager', () => {
       test('calls listeners with location', () => {
         const listeners = [jest.fn(), jest.fn(), jest.fn()];
 
-        listeners.forEach(listener => {
+        listeners.forEach((listener) => {
           locationManager.addListener(listener);
         });
 
         locationManager.onUpdate(location);
 
-        listeners.forEach(listener => {
+        listeners.forEach((listener) => {
           expect(listener).toHaveBeenCalledTimes(1);
           expect(listener).toHaveBeenCalledWith(location);
         });

__tests__/modules/offline/OfflineCreatePackOptions.test.js

@@ -6,7 +6,10 @@ describe('OfflineCreatePackOptions', () => {
   const options = {
     name: 'test',
     styleURL: 'mapbox://fake-style-url',
-    bounds: [[0, 1], [2, 3]],
+    bounds: [
+      [0, 1],
+      [2, 3],
+    ],
     minZoom: 1,
     maxZoom: 22,
     metadata: {

__tests__/modules/snapshot/SnapshotOptions.test.js

@@ -65,7 +65,7 @@ describe('SnapshotOptions', () => {
     };
 
     const geoJSONBounds = JSON.stringify(
-      makeFeatureCollection(expectedOptions.bounds.map(c => makePoint(c))),
+      makeFeatureCollection(expectedOptions.bounds.map((c) => makePoint(c))),
     );
 
     const options = new SnapshotOptions(expectedOptions);

__tests__/utils/animated/AnimatedCoordinatesArray.test.js

@@ -13,13 +13,13 @@ let clock = null;
 beforeAll(() => {
   clock = FakeTimers.install();
   clock._requestedAnimationFrames = [];
-  clock.requestAnimationFrame = callback => {
+  clock.requestAnimationFrame = (callback) => {
     clock._requestedAnimationFrames.push(callback);
   };
   clock.fireRequestAnimationFrames = () => {
     const oldRAF = clock._requestedAnimationFrames;
     clock._requestedAnimationFrames = [];
-    oldRAF.forEach(cb => cb(Date.now()));
+    oldRAF.forEach((cb) => cb(Date.now()));
   };
 });
 
@@ -32,22 +32,28 @@ const AnimatedShapeSource = Animated.createAnimatedComponent(ShapeSource);
 describe('AnimatedShapeSource', () => {
   test('testSetNativeProps', () => {
     AnimatedShapeSource.__skipSetNativeProps_FOR_TESTS_ONLY = false;
-    const coordinates = new AnimatedCoordinatesArray([[1, 1], [10, 10]]);
+    const coordinates = new AnimatedCoordinatesArray([
+      [1, 1],
+      [10, 10],
+    ]);
 
     let shapeSourceRef;
     // eslint-disable-next-line no-unused-vars
     const testRenderer = TestRenderer.create(
       <AnimatedShapeSource
         shape={new AnimatedShape({type: 'LineString', coordinates})}
-        ref={ref => (shapeSourceRef = ref)}
+        ref={(ref) => (shapeSourceRef = ref)}
       />,
     );
     const setNativeProps = jest.fn();
     shapeSourceRef._component.refs.nativeSource.setNativeProps = setNativeProps;
 
     coordinates
       .timing({
-        toValue: [[21, 21], [30, 30]],
+        toValue: [
+          [21, 21],
+          [30, 30],
+        ],
         duration: 20,
         easing: Easing.linear,
         useNativeDriver: false,
@@ -85,7 +91,7 @@ describe('AnimatedShapeSource', () => {
     const testRenderer = TestRenderer.create(
       <AnimatedShapeSource
         shape={new AnimatedShape({type: 'LineString', coordinates})}
-        ref={ref => (shapeSourceRef = ref)}
+        ref={(ref) => (shapeSourceRef = ref)}
       />,
     );
     const setNativeProps = jest.fn();
@@ -137,15 +143,18 @@ describe('AnimatedShapeSource', () => {
     const testRenderer = TestRenderer.create(
       <AnimatedShapeSource
         shape={new AnimatedShape({type: 'LineString', coordinates})}
-        ref={ref => (shapeSourceRef = ref)}
+        ref={(ref) => (shapeSourceRef = ref)}
       />,
     );
     const setNativeProps = jest.fn();
     shapeSourceRef._component.refs.nativeSource.setNativeProps = setNativeProps;
 
     coordinates
       .timing({
-        toValue: [[21, 21], [30, 30]],
+        toValue: [
+          [21, 21],
+          [30, 30],
+        ],
         duration: 20,
         easing: Easing.linear,
         useNativeDriver: false,

docs/Images.md

@@ -5,7 +5,7 @@
 ### props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
-| images | `object` | `none` | `false` | Specifies the external images in key-value pairs required for the shape source.<br/>Keys are names - see iconImage expressions, values can be either urls-s objects <br/>with format {uri: 'http://...'}` or `require('image.png')` or `import 'image.png'` |
+| images | `object` | `none` | `false` | Specifies the external images in key-value pairs required for the shape source.<br/>Keys are names - see iconImage expressions, values can be either urls-s objects<br/>with format {uri: 'http://...'}` or `require('image.png')` or `import 'image.png'` |
 | nativeAssetImages | `array` | `none` | `false` | If you have an asset under Image.xcassets on iOS and the drawables directory on android<br/>you can specify an array of string names with assets as the key `['pin']`. |
 | onImageMissing | `func` | `none` | `false` | Gets called when a Layer is trying to render an image whose key is not present in<br/>any of the `Images` component of the Map. |
 

docs/docs.json

@@ -1863,7 +1863,7 @@
         "required": false,
         "type": "object",
         "default": "none",
-        "description": "Specifies the external images in key-value pairs required for the shape source.\nKeys are names - see iconImage expressions, values can be either urls-s objects \nwith format {uri: 'http://...'}` or `require('image.png')` or `import 'image.png'`"
+        "description": "Specifies the external images in key-value pairs required for the shape source.\nKeys are names - see iconImage expressions, values can be either urls-s objects\nwith format {uri: 'http://...'}` or `require('image.png')` or `import 'image.png'`"
       },
       {
         "name": "nativeAssetImages",

example/__tests__/App-test.js

@@ -6,7 +6,7 @@ import 'react-native';
 import React from 'react';
 import renderer from 'react-test-renderer';
 
-import App from '../App'; // eslint-disable-line import/no-unresolved
+import App from '../App';
 
 // Note: test renderer must be required after react-native.
 

example/babel.config.js

@@ -3,28 +3,29 @@ module.exports = {
   plugins: [
     '@babel/plugin-transform-modules-commonjs',
     [
-        'module-resolver',
-        {
-          alias: {
-            '@react-native-mapbox-gl/maps': '../javascript/index',
-            // from maps/package.json
-            react: './node_modules/react',
-            'react-native': './node_modules/react-native',
-            '@turf/helpers': './node_modules/@turf/helpers',
-            '@turf/distance': './node_modules/@turf/distance',
-            '@turf/nearest-point-on-line': './node_modules/@turf/nearest-point-on-line',
-            '@turf/length': './node_modules/@turf/length',
-            '@turf/along': './node_modules/@turf/along',
-            '@mapbox/geo-viewport': './node_modules/@mapbox/geo-viewport',
-            'debounce': './node_modules/debounce',
+      'module-resolver',
+      {
+        alias: {
+          '@react-native-mapbox-gl/maps': '../javascript/index',
+          // from maps/package.json
+          react: './node_modules/react',
+          'react-native': './node_modules/react-native',
+          '@turf/helpers': './node_modules/@turf/helpers',
+          '@turf/distance': './node_modules/@turf/distance',
+          '@turf/nearest-point-on-line':
+            './node_modules/@turf/nearest-point-on-line',
+          '@turf/length': './node_modules/@turf/length',
+          '@turf/along': './node_modules/@turf/along',
+          '@mapbox/geo-viewport': './node_modules/@mapbox/geo-viewport',
+          debounce: './node_modules/debounce',
 
-            '@babel': './node_modules/@babel',
-            fbjs: './node_modules/fbjs',
-            'hoist-non-react-statics': './node_modules/hoist-non-react-statics',
-            invariant: './node_modules/invariant',
-            'prop-types': './node_modules/prop-types',
-          },
-        }
-    ]
+          '@babel': './node_modules/@babel',
+          fbjs: './node_modules/fbjs',
+          'hoist-non-react-statics': './node_modules/hoist-non-react-statics',
+          invariant: './node_modules/invariant',
+          'prop-types': './node_modules/prop-types',
+        },
+      },
+    ],
   ].filter(Boolean),
 };

example/metro.config.js

@@ -4,9 +4,9 @@
  *
  * @format
  */
-const blacklist = require('metro-config/src/defaults/blacklist');
 const path = require('path');
 
+const blacklist = require('metro-config/src/defaults/blacklist');
 const glob = require('glob-to-regexp');
 
 function getBlacklist() {
@@ -17,13 +17,13 @@ function getBlacklist() {
     glob(`${path.resolve(__dirname)}/node_modules/*/node_modules/fbjs/*`),
     glob(
       `${path.resolve(
-        __dirname
-      )}/node_modules/*/node_modules/hoist-non-react-statics/*`
+        __dirname,
+      )}/node_modules/*/node_modules/hoist-non-react-statics/*`,
     ),
     glob(
       `${path.resolve(
-        __dirname
-      )}/node_modules/react-native/node_modules/@babel/*`
+        __dirname,
+      )}/node_modules/react-native/node_modules/@babel/*`,
     ),
   ];
   return blacklist(nodeModuleDirs);

example/package.json

@@ -47,7 +47,7 @@
   "devDependencies": {
     "@babel/core": "^7.6.2",
     "@babel/runtime": "^7.6.2",
-    "@react-native-community/eslint-config": "^0.0.5",
+    "@react-native-community/eslint-config": "^1.0.0",
     "babel-jest": "^24.9.0",
     "eslint": "^6.8.0",
     "glob-to-regexp": "^0.4.0",

example/src/App.js

@@ -43,7 +43,7 @@ const AppStackNavigator = createStackNavigator(
     },
     defaultNavigationOptions: {
       headerShown: false,
-    }
+    },
   },
 );
 const AppContainer = createAppContainer(AppStackNavigator);

example/src/examples/AnimatedLine.js

@@ -190,7 +190,7 @@ class AnimatedLine extends React.Component {
     return (
       <Page {...this.props}>
         <MapView
-          ref={c => (this._map = c)}
+          ref={(c) => (this._map = c)}
           onPress={this.onPress}
           onDidFinishLoadingMap={this.onDidFinishLoadingMap}
           style={sheet.matchParent}>

example/src/examples/BugReportExample.js

@@ -49,7 +49,6 @@ const features = {
   ],
 };
 
-
 class BugReportExample extends React.Component {
   state = {
     radius: 20,
@@ -86,4 +85,4 @@ class BugReportExample extends React.Component {
   }
 }
 
-export default BugReportExample;
+export default BugReportExample;

example/src/examples/ChangeLayerColor.js

@@ -21,9 +21,7 @@ class ChangeLayerColor extends React.Component {
   };
 
   onPress = () => {
-    const fillColor = `#${Math.random()
-      .toString(16)
-      .substr(-6)}`;
+    const fillColor = `#${Math.random().toString(16).substr(-6)}`;
     this.setState({fillColor});
   };
 
@@ -32,7 +30,7 @@ class ChangeLayerColor extends React.Component {
     return (
       <Page {...this.props}>
         <MapboxGL.MapView
-          ref={c => (this._map = c)}
+          ref={(c) => (this._map = c)}
           onPress={this.onPress}
           style={{flex: 1}}>
           <MapboxGL.Camera defaultSettings={defaultCamera} />