[Bug]: TypeScript Error with "noUncheckedIndexedAccess" in tsconfig.json
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
@sairus2k pls include repro steps, to reproduce in a new project, to ensure it's not something in your project settings. Staring with npx @react-native-community/cli@latest init, thanks
@mfazekas thanks for taking a look. I've updated reproduction steps and added a link to reproduction repo.