rnmapbox / rnmapbox/maps

[Bug]: showPointOfInterestLabels and other v11 style config values are rejected by types

Open
#3,893 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug 🪲 good first issue typescript
Dominant language
Kotlin
Stars
2.9k
Forks
947
Avg merge
6d 37m
Merged PRs (30d)
1

Description

Mapbox Implementation

Mapbox GL

Mapbox Version

11.8.0

React Native Version

0.79.3

Platform

iOS

@rnmapbox/maps version

10.1.39

Standalone component to reproduce
import React from 'react';
import {
  MapView,
  StyleImport
} from '@rnmapbox/maps';

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{flex: 1}} styleURL={'mapbox://styles/mapbox/standard'}>
      <StyleImport
        id="basemap"
        existing
        config={{
          lightPreset: "day",
          // ^^ this one is fine
          showPointOfInterestLabels: false,
          // ^^ this one gets rejected by TS, even though providing the value yields the expected results
        }}
      />
      </MapView>
    );
  }
}
Observed behavior and steps to reproduce

When trying to provide boolean values (such as showPointOfInterestLabels) to the StyleImport's config object, TypeScript rejects them, as the expected type is [key: string]: string;. However, certain config objects are booleans, and providing them as strings (like "false") doesn't work.

Note that despite TS telling otherwise, applying the config property does have an effect:

Image Image
Expected behavior

The StyleImport object should also accept booleans as values (or probably all the possible key/value types should be typed), as per Mapbox's documentation.
iOS: https://docs.mapbox.com/ios/maps/guides/migrate-to-v11/
Android: https://docs.mapbox.com/android/maps/guides/migrate-to-v11/#explore-new-features

Notes / preliminary analysis

I'm happy to open a PR with changing the types, but I'm not sure if just replacing [key: string]: string; with showPlaceLabels: boolean; lightPreset: string; etc... is going to work, as probably non-Standard styles need the current types backward compatibility?

Additional links and references

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the StyleImport config type used by @rnmapbox/maps and compare its accepted values with the Mapbox v11 configuration documented in the issue. Use the provided TypeScript reproduction to verify boolean values such as showPointOfInterestLabels are accepted while existing string-based configurations remain compatible.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.