fix: migrate to Expo SDK 54 stack (reanimated 4 + new arch + MapLibre v11) - #1495
Merged
Conversation
…h + MapLibre v11) PR #1492 removed react-native-reanimated to try to stop a TestFlight launch crash (TurboModule registration failure). That was the wrong fix — the real incompatibility was reanimated 3 running under SDK 54 with the legacy architecture and MapLibre v10. This change restores reanimated (v4), turns on New Architecture, and upgrades MapLibre to the v11 beta so the whole native stack matches what SDK 54 expects. Deps (app/package.json): - react-native-reanimated ~4.1.1 (new) - react-native-worklets ~0.5.1 (new; reanimated 4 peer dep) - @maplibre/maplibre-react-native ^11.0.0-beta.30 (from 10.2.0) Build config: - babel.config.js: add "react-native-worklets/plugin" (reanimated 4 requires the worklets plugin; the old "react-native-reanimated/plugin" alias still resolves, but the canonical path lives in worklets now). - app.json: flip newArchEnabled → true for both iOS and Android in the expo-build-properties plugin; bump version to 1.0.5. Source files restored to their pre-#1492 reanimated patterns: - LoadingSkeleton + ChapterSkeleton: useSharedValue / useAnimatedStyle / withRepeat / withTiming pulse again (RN Animated.loop was the #1492 fallback). - ContentImageGallery: ZoomViewer pinch/pan/double-tap use reanimated shared values + useAnimatedStyle transform. The paired-ref shadow state from #1492 is gone. - useTreeCamera: gesture worklet callbacks go through runOnJS(...) again, removing the .runOnJS(true) gesture-builder workaround. Test mocks: - jest.setup.js: re-adds react-native-reanimated/mock; rewrites the @maplibre/maplibre-react-native mock to the v11 export surface (Map, GeoJSONSource, Layer, LogManager, NetworkManager, etc — no default export). - ContentImageGallery.test.tsx, useTreeCamera.test.ts, and GenealogyTreeScreen.test.tsx each restore their local reanimated mocks (jest.requireActual('react-native-reanimated/mock') + a runOnJS passthrough so gesture callbacks execute synchronously under jest). MapLibre v11 audit — mechanical API rewrite across the map module: - Component renames: MapView → Map, ShapeSource → GeoJSONSource. All the typed layer components (CircleLayer / SymbolLayer / FillLayer / LineLayer) collapse into a single <Layer type="circle|symbol|fill|line"/>. - Map prop renames: scrollEnabled → dragPan, zoomEnabled → touchZoom, pitchEnabled → touchPitch, rotateEnabled → touchRotate, attributionEnabled → attribution, logoEnabled → logo. Chip also opts out of double-tap zoom explicitly. - Camera: defaultSettings → initialViewState, and the { centerCoordinate, zoomLevel } shape is now { center, zoom }. fitBounds(ne, sw, padding[], duration) → fitBounds([west, south, east, north], { padding, duration }). setCamera({ ..., animationMode: 'flyTo', animationDuration }) → flyTo( { center, zoom, duration }). - useMapZoom: onRegionDidChange now receives a ViewStateChangeEvent (event.nativeEvent.zoom) instead of a GeoJSON feature (feature.properties.zoomLevel). The hook reads from either shape so we don't break any callers still using the v10 synthetic during migration; the v11 test covers the new path and a backwards-compat test pins the v10 branch. - isMapNativeAvailable: default export is removed in v11, so the probe drops .default access. setConnected moved under NetworkManager — we probe through NetworkManager.setConnected when available. - OfflineManager keeps its PascalCase name in v11 (only the default export and a handful of the original top-level helpers moved); the hook + test were already aligned. Validation: - npm test → 3341 passing across 453 suites. - npx expo export --platform ios → bundles 3932 modules into an 8.47 MB hermes bytecode bundle. Build green, matching the SDK 54 expectation of reanimated 4 + worklets + new arch.
CI lint+test jobs on PR #1495 failed at `npx tsc --noEmit`. The v11 API types are stricter than v10 in a few places the first pass missed. GeoJSONSource prop rename: - v10's `<ShapeSource shape={fc} />` → v11 uses `<GeoJSONSource data={fc} />`. Fixed in AncientBorderLayer, PersonArcLayer, PlaceMarkerList, StoryOverlays. PlaceMarkerList hitbox: - v10 accepted `{ width, height }`. v11 types hitbox as a `ViewPadding` (`{top, right, bottom, left}`). Switched to per-side 11px padding so the effective tap box stays 22x22. MapChipNative camera: - `InitialViewState` in v11 is a discriminated union — either `{center, zoom}` or `{bounds, padding}`, never both. The local structural alias had both optional, which fails the union check. Aliased directly to the library's `InitialViewState` type and typed the bounds tuple literally so the union narrows to the bounds variant. useMapTileCache: - v11 `OfflinePackCreateOptions` renamed `styleURL` → `mapStyle` and expects flat `LngLatBounds = [west, south, east, north]` (no more `{ne, sw}` nested tuple). - Packs no longer accept a user-provided `name` — each pack gets a UUID assigned by the native side. Looked up by `getPack(id)` only, not by name. To preserve our idempotency pattern, tag via `metadata: { name: PACK_NAME }` and scan `getPacks()` for a match. - Test suite mirrors the change: mocks `getPacks` (not `getPack`), asserts the flat bounds + new `mapStyle` field + `metadata.name` tagging. Adds a coverage case for unrelated packs. Verified: tsc clean, 3342 tests pass, `npx expo export --platform ios` still bundles successfully.
Test Results✅ All tests passed
Coverage
⏱️ Duration: 81.7s |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
TestFlight 1.0.3/1.0.4 crashed on launch with a TurboModule registration failure. PR #1492 ("remove react-native-reanimated") was a misguided attempt to fix it by ripping reanimated out entirely. The real incompatibility was the combination of:
react-native-reanimated@3.19.5under Expo SDK 54 (expects reanimated 4)@maplibre/maplibre-react-native@10.2.0(v10 doesn't fabric-register under New Arch → classic TurboModule crash)This PR adopts the supported SDK 54 stack end-to-end and bumps to
1.0.5.What
Deps (
app/package.json):react-native-reanimated→~4.1.1(new)react-native-worklets→~0.5.1(new; reanimated 4 peer dep)@maplibre/maplibre-react-native→^11.0.0-beta.30(from10.2.0)Build config:
babel.config.js: add"react-native-worklets/plugin"(canonical location for the worklet transform in reanimated 4; the oldreact-native-reanimated/pluginalias still resolves but the worklets plugin is the official path).app.json:expo-build-properties.ios.newArchEnabledand.android.newArchEnabled→true. Version bumped to1.0.5.Source files restored to pre-#1492 reanimated patterns:
LoadingSkeleton,ChapterSkeleton:useSharedValue/useAnimatedStyle/withRepeat/withTimingpulse (replacing theAnimated.loopfallback).ContentImageGallery:ZoomViewerpinch/pan/double-tap go back to reanimated shared values +useAnimatedStyle— the paired-ref shadow state is gone.useTreeCamera: gesture callbacks go throughrunOnJS(...)again instead of.runOnJS(true)on the gesture builder.Test mocks restored + extended:
jest.setup.js: re-addsreact-native-reanimated/mock, and rewrites the@maplibre/maplibre-react-nativemock to the v11 export surface (Map,GeoJSONSource,Layer,LogManager,NetworkManager,OfflineManager— no default export).ContentImageGallery.test.tsx,useTreeCamera.test.ts,GenealogyTreeScreen.test.tsx: local reanimated mocks restored.MapLibre v11 audit — mechanical rewrite of the map module:
MapViewMapShapeSourceGeoJSONSourceCircleLayer,SymbolLayer,FillLayer,LineLayer<Layer type="..."/>scrollEnableddragPanzoomEnabledtouchZoom(+doubleTapZoom,doubleTapHoldZoom)pitchEnabledtouchPitchrotateEnabledtouchRotateattributionEnabledattributionlogoEnabledlogoCamera defaultSettings={...}Camera initialViewState={...}{ centerCoordinate, zoomLevel }{ center, zoom }fitBounds(ne, sw, padding[], duration)fitBounds([w,s,e,n], { padding, duration })setCamera({ animationMode: 'flyTo', ... })flyTo({ center, zoom, duration })setConnectedNetworkManager.setConnecteduseMapZoom:onRegionDidChangenow receives aViewStateChangeEvent(event.nativeEvent.zoom) instead of a GeoJSON feature (feature.properties.zoomLevel). Hook reads either shape so we don't break any callers still using the v10 synthetic during migration; v11 test covers the new path, a backwards-compat test pins the v10 branch.isMapNativeAvailable: probe drops.default(removed in v11) and goes throughNetworkManager.setConnectedwhen available.OfflineManagerkeeps its PascalCase name in v11 —useMapTileCache+ its test were already aligned.Validation
npm test→ 3341 passing across 453 suites ✅npx expo export --platform ios→ bundles 3932 modules into an 8.47 MB Hermes bytecode bundle ✅<Light>component is not used in the codebase (no changes needed there);setAccessToken/getAccessTokennever called.Test plan
eas build --profile preview --platform iosand confirm the binary launches (no TurboModule crash).https://claude.ai/code/session_01CvhqCQ1bXtVXMpF85UENW5