Supporting React Native 0.81.0, Updating Project Dependencies, Fixing ESLint and Typescript Warnings and Errors

.eslintrc.js

@@ -78,6 +78,7 @@ module.exports = {
     'no-unused-expressions': ['error', { allowTaggedTemplates: true }],
     'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
     'react-native/no-inline-styles': 0,
+    '@typescript-eslint/no-explicit-any': ['error', { ignoreRestArgs: true }],
     // NOTE: @typescript-eslint rules are configured under the TS override below
     'jest/expect-expect': [
       'warn',
@@ -121,6 +122,8 @@ module.exports = {
         'no-shadow': 'off',
         'import/named': 'off',
         'react-native/no-inline-styles': 0,
+        'no-unused-vars': 'off',
+        '@typescript-eslint/no-unused-vars': ['warn', { args: 'none' }],
         '@typescript-eslint/no-explicit-any': [
           'warn',
           { ignoreRestArgs: true },

.prettierrc.js

@@ -1,4 +1,8 @@
+/** @type {import('prettier').Config} */
 module.exports = {
-  singleQuote: true,
-  trailingComma: 'all',
-};
+  arrowParens: 'avoid',       // (x) => x  ⟶  x => x
+  singleQuote: true,          // prefer 'test' over "test"
+  trailingComma: 'all',       // multi-line trailing commas
+  semi: true,                 // for compatibility and clarity with ESLint default
+  tabWidth: 2,
+};

__tests__/__mocks__/react-native.mock.js

@@ -4,7 +4,6 @@ jest.mock('react-native/Libraries/Image/resolveAssetSource', () => {
 
 jest.mock('../../src/assets/heading.png', () => 'heading.png');
 
-
 jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter', () => {
   function MockEventEmitter() {}
   MockEventEmitter.prototype.addListener = jest.fn(() => ({
@@ -16,12 +15,11 @@ jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter', () => {
   };
 });
 
-
 jest.mock('react-native/Libraries/Utilities/Platform', () => ({
   __esModule: true,
   default: {
     OS: 'ios', // or 'android'
-    select: (x) => {
+    select: x => {
       if (x.android) {
         return x.android;
       } else if (x.native) {
@@ -30,7 +28,7 @@ jest.mock('react-native/Libraries/Utilities/Platform', () => ({
         return x.default;
       }
     },
-  }
+  },
 }));
 
 jest.mock('react-native/src/private/animated/NativeAnimatedHelper', () => ({
@@ -40,4 +38,3 @@ jest.mock('react-native/src/private/animated/NativeAnimatedHelper', () => ({
   },
   shouldUseNativeDriver: jest.fn(),
 }));
-

__tests__/components/Callout.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
-import type { ReactTestInstance } from 'react-test-renderer';
 import { Text, View } from 'react-native';
 
 import Callout from '../../src/components/Callout';
@@ -31,29 +30,35 @@ describe('Callout', () => {
         tipStyle: { height: 4 },
         textStyle: { height: 5 },
       };
-      const result = render(
-        <Callout {...testProps} />,
-      );
-      const { UNSAFE_getByType, UNSAFE_getAllByType } = result
+      const result = render(<Callout {...testProps} />);
+      const { UNSAFE_getByType, UNSAFE_getAllByType } = result;
       const callout = UNSAFE_getByType('RNMBXCallout');
       const views = UNSAFE_getAllByType(View);
       const text = UNSAFE_getByType(Text);
-      
-      function getStyleHeightForViewWithProps(props: { [propName: string]: any }): ReactTestInstance {
+
+      function getStyleHeightForViewWithProps(props) {
         if (Array.isArray(props.style)) {
           return props.style[1].height;
         }
         // Animated views returned from Callouts have the style being an object, whilst other views have an array of style objects instead
         return props.style.height;
       }
 
-      const calloutWrapperTestStyle = getStyleHeightForViewWithProps(callout.props);
-      const animatedViewTestStyle = getStyleHeightForViewWithProps(views[0].props);
-      const wrapperViewTestStyle = getStyleHeightForViewWithProps(views[1].props);
+      const calloutWrapperTestStyle = getStyleHeightForViewWithProps(
+        callout.props,
+      );
+      const animatedViewTestStyle = getStyleHeightForViewWithProps(
+        views[0].props,
+      );
+      const wrapperViewTestStyle = getStyleHeightForViewWithProps(
+        views[1].props,
+      );
       const tipViewTestStyle = getStyleHeightForViewWithProps(views[2].props);
       const textTestStyle = getStyleHeightForViewWithProps(text.props);
 
-      expect(calloutWrapperTestStyle).toStrictEqual(testProps.containerStyle.height);
+      expect(calloutWrapperTestStyle).toStrictEqual(
+        testProps.containerStyle.height,
+      );
       expect(animatedViewTestStyle).toStrictEqual(testProps.style.height);
       expect(wrapperViewTestStyle).toStrictEqual(testProps.contentStyle.height);
       expect(tipViewTestStyle).toStrictEqual(testProps.tipStyle.height);

__tests__/components/Camera.test.js

@@ -10,14 +10,7 @@ const bounds1 = {
   sw: [-74.143727, 40.772177],
 };
 
-const paddingZero = {
-  paddingTop: 0,
-  paddingRight: 0,
-  paddingBottom: 0,
-  paddingLeft: 0,
-};
-
-const toFeature = (position) => {
+const toFeature = position => {
   return {
     type: 'Feature',
     geometry: {
@@ -28,7 +21,7 @@ const toFeature = (position) => {
   };
 };
 
-const toFeatureCollection = (bounds) => {
+const toFeatureCollection = bounds => {
   return {
     type: 'FeatureCollection',
     features: [toFeature(bounds.ne), toFeature(bounds.sw)],

__tests__/components/UserLocation.test.js

@@ -39,7 +39,9 @@ describe('UserLocation', () => {
     });
 
     test('renders with CircleLayers by default', async () => {
-      const { UNSAFE_getAllByType, UNSAFE_queryByType } = render(<UserLocation />);
+      const { UNSAFE_getAllByType, UNSAFE_queryByType } = render(
+        <UserLocation />,
+      );
       await waitFor(() => {
         expect(() => UNSAFE_queryByType(UserLocation)).not.toThrow();
       });
@@ -79,9 +81,9 @@ describe('UserLocation', () => {
 
       const { UNSAFE_queryByType, UNSAFE_queryAllByType } = render(
         <UserLocation>
-          <CircleLayer key='testUserLocationCircle' {...circleLayerProps} />
-        </UserLocation>
-      )
+          <CircleLayer key="testUserLocationCircle" {...circleLayerProps} />
+        </UserLocation>,
+      );
       await waitFor(() => {
         expect(() => UNSAFE_queryByType(UserLocation)).not.toThrow();
       });
@@ -99,7 +101,9 @@ describe('UserLocation', () => {
     test('calls onUpdate callback when new location is received', async () => {
       const onUpdateCallback = jest.fn();
 
-      const { UNSAFE_getByType } = render(<UserLocation onUpdate={onUpdateCallback} />);
+      const { UNSAFE_getByType } = render(
+        <UserLocation onUpdate={onUpdateCallback} />,
+      );
 
       await waitFor(() => {
         expect(() => UNSAFE_getByType(UserLocation)).not.toThrow();
@@ -118,7 +122,7 @@ describe('UserLocation', () => {
           },
           timestamp: 1573730357879,
         });
-      })
+      });
 
       expect(onUpdateCallback).toHaveBeenCalled();
     });
@@ -152,7 +156,7 @@ describe('UserLocation', () => {
       const ul = UNSAFE_queryByType(UserLocation);
 
       const lastKnownLocation = [4.1036916, 51.5462244];
-      locationManager._lastKnownLocation = lastKnownLocation
+      locationManager._lastKnownLocation = lastKnownLocation;
 
       expect(locationManager.start).toHaveBeenCalledTimes(0);
       expect(locationManager._isListening).toStrictEqual(false);
@@ -219,13 +223,13 @@ describe('UserLocation', () => {
       test('called with "running" true', async () => {
         const lastKnownLocation = [4.1036916, 51.5462244];
         const heading = 251.5358428955078;
-        locationManager._lastKnownLocation = lastKnownLocation
+        locationManager._lastKnownLocation = lastKnownLocation;
 
         expect(ul.locationManagerRunning).toStrictEqual(false);
 
         await act(async () => {
           await ul.setLocationManager({ running: true });
-        })
+        });
 
         expect(ul.locationManagerRunning).toStrictEqual(true);
         expect(locationManager.start).toHaveBeenCalledTimes(1);
@@ -243,14 +247,14 @@ describe('UserLocation', () => {
         expect(ul.locationManagerRunning).toStrictEqual(false);
         await act(async () => {
           await ul.setLocationManager({ running: true });
-        })
+        });
 
         expect(ul.locationManagerRunning).toStrictEqual(true);
 
         // stop
         await act(async () => {
           await ul.setLocationManager({ running: false });
-        })
+        });
 
         expect(ul.locationManagerRunning).toStrictEqual(false);
         // only once from start

__tests__/interface.test.js

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

__tests__/modules/location/locationManager.test.js

@@ -261,13 +261,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/snapshot/SnapshotOptions.test.js

@@ -62,7 +62,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 oldNodeEnv = 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()));
   };
 
   // animated will not call nativeProps in test mode
@@ -53,7 +53,7 @@ describe('AnimatedShapeSource', () => {
       const testRenderer = TestRenderer.create(
         <AnimatedShapeSource
           shape={new AnimatedShape({ type: 'LineString', coordinates })}
-          ref={(ref) => (shapeSourceRef = ref)}
+          ref={ref => (shapeSourceRef = ref)}
         />,
       );
     });
@@ -104,10 +104,10 @@ 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();
     _nativeRef(shapeSourceRef).setNativeProps = setNativeProps;
 
@@ -158,10 +158,10 @@ 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();
     _nativeRef(shapeSourceRef).setNativeProps = setNativeProps;
 

example/__tests__/dumpExamplesJson.ts

@@ -1,5 +1,5 @@
 /**
- * Dumps examples.json to docs/examples.json from metadata in the examples in the example direcrory
+ * Dumps examples.json to docs/examples.json from metadata in the examples in the example directory
  */
 import path from 'path';
 import fs from 'fs';

example/e2e/docScreenshots.e2e.js

@@ -140,35 +140,43 @@ if (['true', 1, '1'].includes(process.env.SKIP_TESTS_NO_METAL)) {
     /** @type Screenshots */
     const screenshots = {};
 
-    examples.forEach(({ groupName, metadata: groupMetadata, examples }) => {
-      describe(`${groupName}`, () => {
-        examples.forEach(({ metadata, fullPath, name }) => {
-          if (metadata) {
-            it(`${name}`, async () => {
-              await setSampleLocation();
-
-              await expect(element(by.text(groupMetadata.title))).toBeVisible();
-              await element(by.text(groupMetadata.title)).tap();
-
-              await waitFor(element(by.text(metadata.title)))
-                .toBeVisible()
-                .whileElement(by.id('example-list'))
-                .scroll(50, 'down');
-              await element(by.text(metadata.title)).tap();
-
-              let shots = new ExampleScreenshots(
-                { testName: name, groupName },
-                screenshots,
-              );
-
-              await wait(1000);
-
-              await shots.screenshot();
-            });
-          }
+    examples.forEach(
+      ({
+        groupName,
+        metadata: groupMetadata,
+        examples: exampleGroupExamples,
+      }) => {
+        describe(`${groupName}`, () => {
+          exampleGroupExamples.forEach(({ metadata, fullPath, name }) => {
+            if (metadata) {
+              it(`${name}`, async () => {
+                await setSampleLocation();
+
+                await expect(
+                  element(by.text(groupMetadata.title)),
+                ).toBeVisible();
+                await element(by.text(groupMetadata.title)).tap();
+
+                await waitFor(element(by.text(metadata.title)))
+                  .toBeVisible()
+                  .whileElement(by.id('example-list'))
+                  .scroll(50, 'down');
+                await element(by.text(metadata.title)).tap();
+
+                let shots = new ExampleScreenshots(
+                  { testName: name, groupName },
+                  screenshots,
+                );
+
+                await wait(1000);
+
+                await shots.screenshot();
+              });
+            }
+          });
         });
-      });
-    });
+      },
+    );
 
     afterAll(async () => {
       console.log('Writing screenshots.json', screenshotsJSONPath);