[Bug]: Typescript conversions fails to compile (ShapeSource, PointAnnotation)

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

iOS, Android

@rnmapbox/maps version

#main

Standalone component to reproduce

import React from 'react';
import {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
 PointAnnotation,
 ShapeSource
} from '@rnmapbox/maps';

const aLine = {
  type: 'LineString',
  coordinates: [
    [-74.00597, 40.71427],
    [-74.00697, 40.71527],
  ],
};

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{flex: 1}}>
        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
        <ShapeSource id="idStreetLayer" shape={aLine}>
          <LineLayer id="idStreetLayer" />
        </ShapeSource>
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

It doesn’t compile because the files aren’t Typescript.

Expected behavior

It compiles

Notes / preliminary analysis

Provided Typescript files are not compiling

Additional links and references

None

[allthetime]

@BubbleTrouble14 @mfazekas @mvniekerk

Updated to latest (4.8.4), same problem.

Removing type annotations from PointAnnotation and ShapeSource like this fixed it for me:

to

My app now runs.

This is obviously a temporary fix though, would like to figure out what’s wrong. I’m on a slightly old RN version:

0.68.2

[jrobber]

@KiwiKilian I’m not who you referenced, but here is a log after updating from v8 to v10 of my app:

❯ pnpm tsc --version
Version 4.8.4
❯ pnpm tsc
node_modules/@rnmapbox/maps/javascript/components/AbstractLayer.tsx:51:3 - error TS7030: Not all code paths return a value.

51   getStyleTypeFormatter(styleType: string) {
     ~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/components/Atmosphere.tsx:25:7 - error TS2322: Type 'ComponentType<any>' is not assignable to type 'HostComponent<{ reactStyle?: { [key: string]: StyleValue; }; style?: undefined; }>'.
  Type 'ComponentClass<any, any>' is not assignable to type 'HostComponent<{ reactStyle?: { [key: string]: StyleValue; }; style?: undefined; }>'.
    Type 'Component<any, any, any>' is not assignable to type 'Component<{ reactStyle?: { [key: string]: StyleValue; }; style?: undefined; }, {}, any> & Readonly<NativeMethods>'.
      Type 'Component<any, any, any>' is not assignable to type 'Readonly<NativeMethods>'.

25 const RCTMGLAtmosphere: HostComponent<{
         ~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/components/Camera.tsx:237:9 - error TS6133: 'triggerKey' is declared but its value is never read.

237         triggerKey,
            ~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/components/MarkerView.tsx:149:7 - error TS2322: Type 'ComponentType<any>' is not assignable to type 'HostComponent<NativeProps>'.
  Type 'ComponentClass<any, any>' is not assignable to type 'HostComponent<NativeProps>'.
    Type 'Component<any, any, any>' is not assignable to type 'Component<NativeProps, {}, any> & Readonly<NativeMethods>'.
      Type 'Component<any, any, any>' is not assignable to type 'Readonly<NativeMethods>'.

149 const RCTMGLMarkerView: HostComponent<NativeProps> =
          ~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/components/PointAnnotation.tsx:229:7 - error TS2322: Type 'ComponentType<any>' is not assignable to type 'NativePointAnnotation'.
  Type 'ComponentClass<any, any>' is not assignable to type 'HostComponent<NativePointAnnotationProps>'.
    Type 'Component<any, any, any>' is not assignable to type 'Component<NativePointAnnotationProps, {}, any> & Readonly<NativeMethods>'.
      Type 'Component<any, any, any>' is missing the following properties from type 'Readonly<NativeMethods>': measure, measureInWindow, measureLayout, setNativeProps, and 2 more.

229 const RCTMGLPointAnnotation: NativePointAnnotation =
          ~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/components/ShapeSource.tsx:333:7 - error TS7030: Not all code paths return a value.

333       return;
          ~~~~~~~

node_modules/@rnmapbox/maps/javascript/components/ShapeSource.tsx:411:7 - error TS2322: Type 'ComponentType<any>' is not assignable to type 'NativeShapeSource'.
  Type 'ComponentClass<any, any>' is not assignable to type 'HostComponent<NativeProps>'.
    Type 'Component<any, any, any>' is not assignable to type 'Component<NativeProps, {}, any> & Readonly<NativeMethods>'.
      Type 'Component<any, any, any>' is not assignable to type 'Readonly<NativeMethods>'.

411 const RCTMGLShapeSource: NativeShapeSource =
          ~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/requestAndroidLocationPermissions.ts:1:1 - error TS6133: 'number' is declared but its value is never read.

1 import { number } from 'prop-types';
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:140:6 - error TS6196: 'FillTranslateAnchorEnum' is declared but never used.

140 enum FillTranslateAnchorEnum {
         ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:146:6 - error TS6196: 'FillTranslateAnchorEnumValues' is declared but never used.

146 type FillTranslateAnchorEnumValues = 'map' | 'viewport';
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:165:6 - error TS6196: 'LineTranslateAnchorEnum' is declared but never used.

165 enum LineTranslateAnchorEnum {
         ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:171:6 - error TS6196: 'LineTranslateAnchorEnumValues' is declared but never used.

171 type LineTranslateAnchorEnumValues = 'map' | 'viewport';
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:354:6 - error TS6196: 'IconTranslateAnchorEnum' is declared but never used.

354 enum IconTranslateAnchorEnum {
         ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:360:6 - error TS6196: 'IconTranslateAnchorEnumValues' is declared but never used.

360 type IconTranslateAnchorEnumValues = 'map' | 'viewport';
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:361:6 - error TS6196: 'TextTranslateAnchorEnum' is declared but never used.

361 enum TextTranslateAnchorEnum {
         ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:367:6 - error TS6196: 'TextTranslateAnchorEnumValues' is declared but never used.

367 type TextTranslateAnchorEnumValues = 'map' | 'viewport';
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:368:6 - error TS6196: 'CircleTranslateAnchorEnum' is declared but never used.

368 enum CircleTranslateAnchorEnum {
         ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:374:6 - error TS6196: 'CircleTranslateAnchorEnumValues' is declared but never used.

374 type CircleTranslateAnchorEnumValues = 'map' | 'viewport';
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:389:6 - error TS6196: 'FillExtrusionTranslateAnchorEnum' is declared but never used.

389 enum FillExtrusionTranslateAnchorEnum {
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:395:6 - error TS6196: 'FillExtrusionTranslateAnchorEnumValues' is declared but never used.

395 type FillExtrusionTranslateAnchorEnumValues = 'map' | 'viewport';
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/StyleValue.ts:3:3 - error TS6133: 'ImageResolvedAssetSource' is declared but its value is never read.

3   ImageResolvedAssetSource,
    ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/StyleValue.ts:5:3 - error TS6133: 'ProcessedColorValue' is declared but its value is never read.

5   ProcessedColorValue,
    ~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/StyleValue.ts:24:5 - error TS7030: Not all code paths return a value.

24     return;
       ~~~~~~~


Found 23 errors in 9 files.

Errors  Files
     1  node_modules/@rnmapbox/maps/javascript/components/AbstractLayer.tsx:51
     1  node_modules/@rnmapbox/maps/javascript/components/Atmosphere.tsx:25
     1  node_modules/@rnmapbox/maps/javascript/components/Camera.tsx:237
     1  node_modules/@rnmapbox/maps/javascript/components/MarkerView.tsx:149
     1  node_modules/@rnmapbox/maps/javascript/components/PointAnnotation.tsx:229
     2  node_modules/@rnmapbox/maps/javascript/components/ShapeSource.tsx:333
     1  node_modules/@rnmapbox/maps/javascript/requestAndroidLocationPermissions.ts:1
    12  node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:140
     3  node_modules/@rnmapbox/maps/javascript/utils/StyleValue.ts:3