[Bug]: TypeScript Error with "noUncheckedIndexedAccess" in tsconfig.json
Nobody has claimed this yet.
- Dominant language
- Kotlin
- Stars
- 2.9k
- Forks
- 947
- Avg merge
- 6d 37m
- Merged PRs (30d)
- 1
Description
Mapbox Implementation
Mapbox
Mapbox Version
default
React Native Version
0.75.2
Platform
iOS, Android
@rnmapbox/maps version
10.1.29
Standalone component to reproduce
import { Camera, Map } from '@rnmapbox/maps'
import React, { useRef } from 'react'
function MapComponent() {
const cameraRef = useRef<Camera>(null)
return (
<Map cameraRef={cameraRef}>
{/*...*/}
</Map>
)
}
Observed behavior and steps to reproduce
- Init new react-native project
npx @react-native-community/cli@latest init - Install
@rnmapbox/maps - Add
"noUncheckedIndexedAccess": truetotsconfig.json - Add Map component with
cameraRefprop. Example - Run
npx tsc --noEmit
Found 8 errors in 1 file.
Errors Files
8 node_modules/@rnmapbox/maps/src/components/Camera.tsx:450
Expected behavior
Changes to project local typescript configuration should not impact files imported from node_modules
Notes / preliminary analysis
Possible Solution
Update paddingConfig type declaration:
Change the type from number | number[] to number | [number, number] | [number, number, number, number]. This ensures a stricter type safety as only these specific array lengths are meaningful and expected in the context of the Camera component.
Enable noUncheckedIndexedAccess for the project:
By enabling this flag for the entire project, similar issues can be prevented in future development cycles, enforcing stricter type checks and improving overall code robustness.
Additional links and references
There is a previously closed issue regarding this problem marked as completed: https://github.com/rnmapbox/maps/issues/2528
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/components/Camera.tsx around line 450, where tsc reports the errors when noUncheckedIndexedAccess is enabled in tsconfig.json. Reproduce with the linked Map.tsx example and npx tsc --noEmit; done means the TypeScript check no longer reports these errors while preserving the intended paddingConfig types.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100