Refactor React code to use functional components and hooks?

[RobJacobson]

Greetings! I'm using @rnmapbox for several in-development projects. Thanks for maintaining this!

I submitted a few bug-fixes that were accepted. (HTH.) I would love to get more involved. Are there any high-priority issues to address? I'm mostly a React/Expo developer, not really familiar with Swift or Kotlin, but I can fake it with the assistance of ChatGPT.

I'd like to raise "a modest proposal," so to speak. Specifically, have you considered refactoring the codebase to use modern React functional components and hooks, instead of class-based components? Whenever I attempt to read the old coding style, it just melts my mind. I have to remember the ancient coding conventions and how they map to modern concepts.

There are currently 24 modules that use the class-based approach, as summarized below. The lowest-hanging fruit would be the twelve layers classes, since they have considerable overlap.

If there's any appetite for this, I could take a crack at this. This would be directed at using modern React conventions for readability and future maintenance, without any breaking changes. I would add unit tests with ChatGPT to protect against regressions, and then use ChatGPT to automate this to the maximum extent possible.

Please let me know if this would be valuable. If so, I could start with the twelve layer classes and submit them for feedback. Also, please let me know if you have a specific style-guide that I should follow for comments, code organization, etc.

Cheers,
Rob

Files in scope

There are currently 24 modules that use the class-based approach:

File	Conversion focus	Test coverage
src/components/Annotation.tsx	Replace animated shape state and prop updates with hooks; preserve child and press behavior.	Add focused tests for animation and prop updates.
src/components/BackgroundLayer.tsx	Replace AbstractLayer inheritance and retain native prop conversion.	Update __tests__/components/BackgroundLayer.test.js.
src/components/Callout.tsx	Convert a mostly presentational class to a function component.	Update __tests__/components/Callout.test.tsx.
src/components/CircleLayer.tsx	Replace AbstractLayer inheritance and retain native prop conversion.	Update __tests__/components/CircleLayer.test.js.
src/components/FillExtrusionLayer.tsx	Replace AbstractLayer inheritance and retain style and source props.	Add focused tests.
src/components/FillLayer.tsx	Replace AbstractLayer inheritance and retain style and source props.	Add focused tests.
src/components/HeatmapLayer.tsx	Replace AbstractLayer inheritance and retain native prop conversion.	Update __tests__/components/HeatmapLayer.test.js.
src/components/HillshadeLayer.tsx	Replace AbstractLayer inheritance and retain style and source props.	Add focused tests.
src/components/ImageSource.tsx	Replace AbstractSource inheritance; preserve child cloning and native refs.	Add focused tests.
src/components/Images.tsx	Convert image prop handling and native callbacks while preserving rendering.	Add focused tests.
src/components/LineLayer.tsx	Replace AbstractLayer inheritance and retain style and source props.	Add focused tests.
src/components/MapView.tsx	Rework state, lifecycle updates, native method queue, event handlers, and public ref methods.	Update __tests__/components/MapView.test.js; add ref and lifecycle cases.
src/components/ModelLayer.tsx	Replace AbstractLayer inheritance and retain style and source props.	Add focused tests.
src/components/PointAnnotation.tsx	Preserve native bridge methods, event callbacks, refs, and child handling.	Add focused tests for ref methods and events.
src/components/RasterArraySource.tsx	Replace AbstractSource inheritance and retain URL, tile, and child props.	Add focused tests.
src/components/RasterDemSource.tsx	Replace AbstractSource inheritance and preserve constructor-derived URL props.	Add focused tests.
src/components/RasterLayer.tsx	Replace AbstractLayer inheritance and retain style and source props.	Add focused tests.
src/components/RasterParticleLayer.tsx	Replace AbstractLayer inheritance and retain style and source props.	Add focused tests.
src/components/RasterSource.tsx	Replace AbstractSource inheritance and preserve URL-derived props and children.	Add focused tests.
src/components/ShapeSource.tsx	Preserve native query methods, setNativeProps, event handling, and child behavior.	Add focused tests for imperative methods and events.
src/components/SkyLayer.tsx	Replace AbstractLayer inheritance and retain style and source props.	Add focused tests.
src/components/SymbolLayer.tsx	Replace AbstractLayer inheritance and retain style, source, and children behavior.	Update __tests__/components/SymbolLayer.test.js.
src/components/UserLocation.tsx	Replace location subscription lifecycle and state updates; preserve safe asynchronous cleanup.	Update __tests__/components/UserLocation.test.js; add subscription cleanup cases.
src/components/VectorSource.tsx	Replace AbstractSource inheritance; preserve native ref and press event handling.	Add focused tests.
src/components/AbstractLayer.tsx	Replace shared class behavior with reusable functional prop and ref logic for layer wrappers.	Cover shared style conversion and native-ref behavior.
src/components/AbstractSource.tsx	Replace shared class behavior for native refs and setNativeProps.	Cover shared ref and native-prop behavior.
src/components/NativeBridgeComponent.tsx	Rework queued native calls for MapView, ShapeSource, and PointAnnotation.	Cover calls before mount, after mount, and when the view detaches.

[mfazekas]

Thanks Rob, and thanks for the fixes so far!

Open to it, but carefully: our Camera rewrite to hooks caused a long tail of regressions, so readability alone isn't worth breaking anything. Rules:

1. Zero public API change, including TypeScript types. For example useRef<MapView>(), ref methods, and statics like ShapeSource.NATIVE_ASSETS_KEY must keep working.
2. Start with a single pilot PR: AbstractLayer plus one layer, e.g. CircleLayer. Add tests that pin the current behaviour first, and keep them green after the conversion.
3. Leave MapView, ShapeSource, PointAnnotation, NativeBridgeComponent, UserLocation and Images alone for now. They have refs, imperative methods and lifecycle subtleties.

If the pilot goes smoothly we can do the rest of the layers. Small PRs please. Style-wise, see AGENTS.md in the repo.