enable stricter typescript rules (#2334)

* enable stricter typescript rules

* remove unnecessary ts compiler flags that are part of strict mode

* fix example lint errors

example/src/examples/Annotations/CustomCallout.tsx

@@ -1,8 +1,7 @@
-import React, { FC, useState } from 'react';
 import MapboxGL, { SymbolLayerStyle } from '@rnmapbox/maps';
-import type { GeoJSON } from 'geojson';
 import { Feature } from '@turf/helpers';
-import { View, Text, ViewStyle, StyleProp, TextStyle } from 'react-native';
+import React, { FC, useState } from 'react';
+import { StyleProp, Text, TextStyle, View, ViewStyle } from 'react-native';
 
 import exampleIcon from '../../assets/pin.png';
 import sheet from '../../styles/sheet';

example/src/examples/BugReportExampleTS.tsx

@@ -1,14 +1,13 @@
-import React, { useState } from 'react';
-import { Button, View } from 'react-native';
 import {
+  Camera,
+  CircleLayer,
   MapView,
   ShapeSource,
   SymbolLayer,
-  CircleLayer,
-  MarkerView,
-  Camera,
 } from '@rnmapbox/maps';
 import { FeatureCollection } from 'geojson';
+import React, { useState } from 'react';
+import { Button } from 'react-native';
 
 const styles = {
   mapView: { flex: 1 },

example/src/examples/Map/OfflineExample.tsx

@@ -1,7 +1,7 @@
+import geoViewport from '@mapbox/geo-viewport';
+import Mapbox, { Camera, MapView, offlineManager } from '@rnmapbox/maps';
 import React, { useState } from 'react';
 import { Button, Dimensions, TextInput } from 'react-native';
-import geoViewport from '@mapbox/geo-viewport';
-import Mapbox, { MapView, Camera, offlineManager } from '@rnmapbox/maps';
 
 import Page from '../common/Page';
 

example/src/examples/SymbolCircleLayer/Earthquakes.tsx

@@ -1,6 +1,4 @@
-import React, { useRef, useState } from 'react';
-import { FlatList } from 'react-native';
-import { Overlay, ListItem, FAB, Icon } from '@rneui/base';
+import { FAB, Icon, ListItem, Overlay } from '@rneui/base';
 import MapboxGL, {
   Camera,
   CircleLayer,
@@ -10,8 +8,10 @@ import MapboxGL, {
   SymbolLayer,
   SymbolLayerStyle,
 } from '@rnmapbox/maps';
-import moment from 'moment';
 import { FeatureCollection } from 'geojson';
+import moment from 'moment';
+import React, { useRef, useState } from 'react';
+import { FlatList } from 'react-native';
 
 import earthQuakesJSON from '../../assets/earthquakes.json';
 import sheet from '../../styles/sheet';

example/src/examples/V10/CameraAnimation.tsx

@@ -1,22 +1,22 @@
-import React, { memo, useCallback, useMemo, useState } from 'react';
-import { StyleSheet, Button, SafeAreaView, View } from 'react-native';
+import { Divider, Text } from '@rneui/base';
 import {
-  MapView,
   Camera,
-  ShapeSource,
-  CircleLayer,
   CameraAnimationMode,
-  Logger,
-  CameraPadding,
   CameraBounds,
+  CameraPadding,
+  CircleLayer,
+  Logger,
+  MapView,
+  ShapeSource,
 } from '@rnmapbox/maps';
 import bbox from '@turf/bbox';
-import { Text, Divider } from '@rneui/base';
 import { Feature, Point, Position } from 'geojson';
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { Button, SafeAreaView, StyleSheet, View } from 'react-native';
 
-import Page from '../common/Page';
 import colors from '../../styles/colors';
 import { BaseExampleProps } from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
 
 Logger.setLogLevel('verbose');
 
@@ -162,6 +162,8 @@ const CameraAnimation = memo((props: BaseExampleProps) => {
       const lon = coordinates[0].longitude.toFixed(4);
       const lat = coordinates[0].latitude.toFixed(4);
       return `lon ${lon} | lat ${lat}`;
+    } else {
+      throw new Error('invalid location passed');
     }
   }, [coordinates, centerOrBounds]);
 

example/src/examples/V10/MapHandlers.tsx

@@ -1,27 +1,19 @@
-import React, { useState } from 'react';
-import { SafeAreaView, View } from 'react-native';
+import { Divider, Text } from '@rneui/base';
 import {
-  MapView,
   Camera,
   CircleLayer,
-  ShapeSource,
   Logger,
   MapState,
+  MapView,
+  ShapeSource,
 } from '@rnmapbox/maps';
-import { Text, Divider } from '@rneui/base';
-import {
-  GeoJsonProperties,
-  Geometry,
-  GeometryCollection,
-  MultiPoint,
-  Point,
-  Position,
-} from 'geojson';
-import { Feature } from 'geojson';
+import { Feature, GeoJsonProperties, Geometry, Position } from 'geojson';
+import React, { useState } from 'react';
+import { SafeAreaView, View } from 'react-native';
 
-import Page from '../common/Page';
 import colors from '../../styles/colors';
 import { BaseExampleProps } from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
 
 Logger.setLogLevel('verbose');
 

example/src/examples/V10/Markers.tsx

@@ -1,11 +1,11 @@
+import { Button, Divider, Text } from '@rneui/base';
+import { Camera, Logger, MapView, MarkerView } from '@rnmapbox/maps';
+import { Position } from 'geojson';
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
-import { MapView, Camera, Logger, MarkerView } from '@rnmapbox/maps';
-import { Position } from 'geojson';
-import { Text, Button, Divider } from '@rneui/base';
 
-import Page from '../common/Page';
 import { BaseExampleProps } from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
 
 Logger.setLogLevel('verbose');
 

example/src/scenes/GroupAndItem.tsx

@@ -1,16 +1,16 @@
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { Icon } from '@rneui/base';
 import React, { useCallback } from 'react';
 import {
-  View,
-  Text,
   FlatList,
   StyleSheet,
+  Text,
   TouchableOpacity,
+  View,
 } from 'react-native';
-import { Icon } from '@rneui/base';
-import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 
-import Page from '../examples/common/Page';
 import MapHeader from '../examples/common/MapHeader';
+import Page from '../examples/common/Page';
 import sheet from '../styles/sheet';
 // ANIMATIONS
 import AnimatedLine from '../examples/Animations/AnimatedLine';
@@ -19,8 +19,8 @@ import DriveTheLine from '../examples/Animations/DriveTheLine';
 import CustomCallout from '../examples/Annotations/CustomCallout';
 import Heatmap from '../examples/Annotations/Heatmap';
 import MarkerView from '../examples/Annotations/MarkerView';
-import ShowPointAnnotation from '../examples/Annotations/ShowPointAnnotation';
 import PointAnnotationAnchors from '../examples/Annotations/PointAnnotationAnchors';
+import ShowPointAnnotation from '../examples/Annotations/ShowPointAnnotation';
 // CAMERA
 import CompassView from '../examples/Camera/CompassView';
 import Fit from '../examples/Camera/Fit';
@@ -49,6 +49,7 @@ import GradientLine from '../examples/LineLayer/GradientLine';
 import ChangeLayerColor from '../examples/Map/ChangeLayerColor';
 import CreateOfflineRegion from '../examples/Map/CreateOfflineRegion';
 import OfflineExample from '../examples/Map/OfflineExample';
+import Ornaments from '../examples/Map/Ornaments';
 import PointInMapView from '../examples/Map/PointInMapView';
 import ShowAndHideLayer from '../examples/Map/ShowAndHideLayer';
 import ShowClick from '../examples/Map/ShowClick';
@@ -58,7 +59,6 @@ import ShowRegionDidChange from '../examples/Map/ShowRegionDidChange';
 import SourceLayerVisibility from '../examples/Map/SourceLayerVisibility';
 import StyleJson from '../examples/Map/StyleJson';
 import TwoByTwo from '../examples/Map/TwoByTwo';
-import Ornaments from '../examples/Map/Ornaments';
 // SYMBOLCIRCLELAYER
 import CustomIcon from '../examples/SymbolCircleLayer/CustomIcon';
 import DataDrivenCircleColors from '../examples/SymbolCircleLayer/DataDrivenCircleColors';
@@ -75,12 +75,12 @@ import BugReportExample from '../examples/BugReportExample';
 import BugReportExampleTS from '../examples/BugReportExampleTS';
 import CacheManagement from '../examples/CacheManagement';
 // V10
-import TerrainSkyAtmosphere from '../examples/V10/TerrainSkyAtmosphere';
-import QueryTerrainElevation from '../examples/V10/QueryTerrainElevation';
 import CameraAnimation from '../examples/V10/CameraAnimation';
+import GlobeProjection from '../examples/V10/GlobeProjection';
 import MapHandlers from '../examples/V10/MapHandlers';
 import Markers from '../examples/V10/Markers';
-import GlobeProjection from '../examples/V10/GlobeProjection';
+import QueryTerrainElevation from '../examples/V10/QueryTerrainElevation';
+import TerrainSkyAtmosphere from '../examples/V10/TerrainSkyAtmosphere';
 
 const styles = StyleSheet.create({
   exampleList: {

example/src/scenes/ScreenWithoutMap.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Text, View, Button } from 'react-native';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import React from 'react';
+import { Button, Text, View } from 'react-native';
 
 type StackParamsList = {
   ScreenWithoutMap: Record<string, never>;

javascript/components/AbstractLayer.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { NativeMethods, processColor } from 'react-native';
 
 import { getFilter } from '../utils/filterUtils';
-import { transformStyle } from '../utils/StyleValue';
 import { AllLayerStyleProps, Expression } from '../utils/MapboxStyles';
+import { transformStyle } from '../utils/StyleValue';
 
 type PropsBase = {
   id: string;
@@ -52,6 +52,7 @@ class AbstractLayer<
     if (styleType === 'color') {
       return processColor;
     }
+    return undefined;
   }
 
   getStyle(style: AllLayerStyleProps) {

javascript/components/Camera.tsx

@@ -1,3 +1,4 @@
+import { Position } from '@turf/helpers';
 import React, {
   forwardRef,
   memo,
@@ -7,7 +8,6 @@ import React, {
   useRef,
 } from 'react';
 import { NativeModules, requireNativeComponent } from 'react-native';
-import { Position } from '@turf/helpers';
 
 import { MapboxGLEvent } from '../types';
 import { makeLatLngBounds, makePoint } from '../utils/geoUtils';
@@ -234,7 +234,6 @@ export const Camera = memo(
         followHeading,
         defaultSettings,
         allowUpdates = true,
-        triggerKey,
         onUserTrackingModeChange,
       } = props;
 

javascript/requestAndroidLocationPermissions.ts

@@ -1,5 +1,4 @@
-import { number } from 'prop-types';
-import { PermissionsAndroid, Permission } from 'react-native';
+import { Permission, PermissionsAndroid } from 'react-native';
 
 import { isAndroid } from './utils';
 

javascript/utils/StyleValue.ts

@@ -1,16 +1,11 @@
-import {
-  Image,
-  ImageResolvedAssetSource,
-  processColor,
-  ProcessedColorValue,
-} from 'react-native';
+import { Image, processColor } from 'react-native';
 
-import { getStyleType } from './styleMap';
 import BridgeValue, {
-  type StyleValueJSON,
   type RawValueType,
+  type StyleValueJSON,
 } from './BridgeValue';
 import { AllLayerStyleProps } from './MapboxStyles';
+import { getStyleType } from './styleMap';
 
 export type StyleValue = {
   styletype: string;

scripts/autogenerate.js

@@ -456,7 +456,7 @@ async function generate() {
     },*/
     {
       input: path.join(TMPL_PATH, 'MapboxStyles.ts.ejs'),
-      output: path.join(JS_OUTPUT_PATH, 'MapboxStyles.ts'),
+      output: path.join(JS_OUTPUT_PATH, 'MapboxStyles.d.ts'),
     },
     {
       input: path.join(TMPL_PATH, 'RCTMGLStyle.m.ejs'),

tsconfig.json

@@ -14,7 +14,9 @@
     "esModuleInterop": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "outDir": "lib/javascript"
+    "outDir": "lib/javascript",
+    "noUnusedLocals": true,
+    "noImplicitReturns": true,
   },
   "include": [
     "index.js",