Refactor to use mapbox and remove react-native-maps by kevinherdez · Pull Request #1080 · NWACus/avy

kevinherdez · 2026-02-03T00:13:16Z

This PR brings in mapbox, refactors the views that heavily used the old <MapView/>, and removes react-native-maps

Where to start

ZoneMap.tsx and AvalancheForecastZonePolygon.tsx
- These two files contain the bulk of the changes that relate to Mapbox. The rest of the files that were changed are mainly a result of these two

Differences between `@rnmapbox` and `react-native-maps`

Mapbox has the idea of a Camera component that controls what the user is looking at. The Camera is used to programmatically change what the user is seeing on the map. In react-native-maps this is done directly on the MapView
Mapbox uses layers to create the polygons that are shown on the map. They can directly receive GeoJSON data so a lot of the preprocessing that we were doing is not longer needed
The z-index of the layers is determined by the order in which they are rendered in. The last layer has the highest z-index
- This is why there's a conditional render for the SelectedAvalancheForecastZonePolygon component so that it's always the last one rendered
Mapbox does not have the concept of Region that is used heavily with react-native-maps. Region is refactored to be AvalancheCenterRegion. This allows a lot of the old calculations to remain the same and includes CameraBounds so that the view can be correctly positioned
Mapbox also heavily uses the GeoJSON concept of Position which is just a number[] where the first index is the longitude and the second is the latitude
A lot of the onPresses that were passed to the MapView to handle different events are no longer required

What's next

Switch to the New Architecture
- Switch to New Architecture #1073

components/observations/ObservationDetailView.tsx

components/weather_data/WeatherStationMap.tsx

components/helpers/geographicCoordinates.ts

components/map/AvalancheForecastZonePolygon.tsx

components/content/ZoneMap.tsx

yuliadub · 2026-02-03T05:16:26Z

Mapbox uses layers to create the polygons that are shown on the map. They can directly receive GeoJSON data so a lot of the preprocessing that we were doing is not longer needed

A lot of the onPresses that were passed to the MapView to handle different events are no longer required

nice! ❤️

looked through everything, left a few questions - will take another look tomorrow morning/early afternoon on more fresh brain. Thanks for working on this, nothing jumped out at me as not making sense thus far! Excited!

components/helpers/geographicCoordinates.test.ts

components/helpers/geographicCoordinates.ts

components/observations/ObservationDetailView.tsx

stevekuznetsov · 2026-02-05T04:33:00Z

components/observations/ObservationDetailView.tsx

  useFocusEffect(recordAnalytics);

+  const nePosition: Position = [(observation.location_point.lng ?? 0) + 0.075 / 2, (observation.location_point.lat ?? 0) + 0.075 / 2];
+  const swPosition: Position = [(observation.location_point.lng ?? 0) - 0.075 / 2, (observation.location_point.lat ?? 0) - 0.075 / 2];


Did we previously accept null/undefined, or why ?? 0 now but not before? Naively seems like not showing a map is better than showing whatever lat/long 0/0 is, but the obs should always have the data - maybe schema for NWAC obs compatibility (which we no longer use) is why this is possibly null? Maybe good follow-up.

Showing the ZoneMap in this view is dependent on whether observation.location_point has a value or not. In the old code, the initial region object is created and directly passed into the ZoneMap after the null check. I moved this up here because there's a little more that goes into creating the CameraBounds

I have no problem moving this down into the ZoneMap directly so that we don't have to null check anymore

components/weather_data/WeatherStationMap.tsx

Refactor WeatherStationMap to use mapbox Remove react-native-maps Added AvyPosition type to better work with GeoJSONs Position and addressed other feedback Addressed PR Feedback