Custom React Native marker child views

[fobos531]

Hello,

I know this is explicitly mentioned as not supported at the moment - I was wondering is this completely out of scope or planned for the future?

[jkasprzyk17]

Thanks @fobos531 for raising this!

Short answer: custom RN marker child views ( aren’t supported right now on purpose, but they’re not off the table forever. Today we render markers as native bitmaps from serialized props. That’s what lets us do clustering and keep pan/zoom smooth when there are a lot of markers on screen.

Before we commit to building something here, we’d really like to understand what you’re actually trying to do. The “right” solution looks very different depending on whether you need a static custom pin, something that updates occasionally, or live/animated UI inside every marker.

If you have a minute, could you tell us a bit more?

What are you building?
What does the marker need to look like. Maybe avatar with a badge, price tag, status chip, something animated? Does it change after it appears on the map, and if so how often? And do users need to tap things inside the marker, or is tapping the whole pin enough?

How many markers are we talking about?
Ballpark: a handful, a few dozen, hundreds? Are you using clustering? And is this mainly iOS, Android, or both?

What are you on today?
Are you coming from react-native-maps with child views inside ? If so, what’s painful jank when panning, slow mounts, memory, specific devices? RN version and whether New Architecture is on would help too.

A small repro would be gold
Honestly, the main thing blocking us from doing real work on this is not having a concrete example to test against. Even a short screen recording plus the JSX you’d put inside the marker, or a tiny gist/repo, would let us recreate it in our example app and actually profile a few approaches (plain bitmap image, snapshot-from-view, vs live RN children) instead of guessing.

We probably won’t ship exact react-native-maps live-view parity as the default At higher marker counts our model is deliberately built to stay faster. But something like “render your custom UI once, snapshot it to a bitmap, use that on the map” could be a good middle ground for a lot of cases. We just don’t want to build the wrong thing without understanding yours first.

Drop whatever you can share and we’ll take it from there. Thanks again!

[Matzielab]

Don't know about OP but for us the use case would be that the pins would have a number or an icon. number must be visible without pressing the marker and icons can be custom or from a provided set.

[fobos531]

Thanks @fobos531 for raising this!

Short answer: custom RN marker child views ( aren’t supported right now on purpose, but they’re not off the table forever. Today we render markers as native bitmaps from serialized props. That’s what lets us do clustering and keep pan/zoom smooth when there are a lot of markers on screen.

Before we commit to building something here, we’d really like to understand what you’re actually trying to do. The “right” solution looks very different depending on whether you need a static custom pin, something that updates occasionally, or live/animated UI inside every marker.

If you have a minute, could you tell us a bit more?

What are you building? What does the marker need to look like. Maybe avatar with a badge, price tag, status chip, something animated? Does it change after it appears on the map, and if so how often? And do users need to tap things inside the marker, or is tapping the whole pin enough?

How many markers are we talking about? Ballpark: a handful, a few dozen, hundreds? Are you using clustering? And is this mainly iOS, Android, or both?

What are you on today? Are you coming from react-native-maps with child views inside ? If so, what’s painful jank when panning, slow mounts, memory, specific devices? RN version and whether New Architecture is on would help too.

A small repro would be gold Honestly, the main thing blocking us from doing real work on this is not having a concrete example to test against. Even a short screen recording plus the JSX you’d put inside the marker, or a tiny gist/repo, would let us recreate it in our example app and actually profile a few approaches (plain bitmap image, snapshot-from-view, vs live RN children) instead of guessing.

We probably won’t ship exact react-native-maps live-view parity as the default At higher marker counts our model is deliberately built to stay faster. But something like “render your custom UI once, snapshot it to a bitmap, use that on the map” could be a good middle ground for a lot of cases. We just don’t want to build the wrong thing without understanding yours first.

Drop whatever you can share and we’ll take it from there. Thanks again!

Hey @jkasprzyk17, thanks for the exhaustive write up, I'll try to answer some of the concerns

Before we commit to building something here, we’d really like to understand what you’re actually trying to do. The “right” solution looks very different depending on whether you need a static custom pin, something that updates occasionally, or live/animated UI inside every marker.

I would say its something that updates occasionally. For example, hotel booking app where there is a map view showing the search results of the hotel. Say you have a map as the main part of the screen, and then on the bottom third of the screen there is a horizontal carousel showing the same hotels. I can scroll the carousel left to right, and when I center the scrollview on a given hotel, this hotel's pin would be focused, and highlighted (the marker's background color would change from white to red). Besides a SFSymbol or something like that for the hotel's marker, I would like to use for example a combination of icon and text, which would be trivial with a React Native view.

About the numbering of markers, I wouldn't say too much, maybe up to 50 at a time? If i zoom out sufficiently then I would like to cluster. I would use this on both iOS and Android. I was initially on react-native-maps but migrated away after New Arch became default. I switched to expo-maps but with some tradeoffs, mainly around custom marker support. I would like to have clustering as well.

I'm on RN 0.86 and new arch.

Let me know if this is enough context and whether you have any recommendations based on what I've provided. Happy to answer any other questions you might have.

[jkasprzyk17]

@fobos531 That's enough context. Thank you for the detailed explanation 🫶

To summarize how I'd classify your case: occasionally updating UI, not live/animated content inside every marker. The pin layout (icon + text) is static; what changes is which hotel is focused (e.g. white → red background) as the carousel scrolls or when the user taps a pin. Search results refresh would be another occasional update, not per-frame animation.

That maps well to our bitmap marker model: render the pin once per state (normal + focused), then swap image.uri on focus. With ~50 markers and clustering on zoom-out, that's very manageable on both iOS and Android.

We put together a minimal working example for exactly this pattern:

PR: #42
Runnable demo: tap Hotel carousel in the example app (example/HotelCarouselExample.tsx)
Copy-paste snippet: example/examples/hotelCarouselSnippet.md
It covers: custom RN pin (icon + price), view-shot rasterization once per state, carousel ↔ map bidirectional sync, clusteringEnabled + clusterable: true, and focus = cheap uri swap (no re-capture on scroll).

Recommendations for your setup (RN 0.86, New Arch, iOS + Android):

Today: use custom marker images (PNG from assets, or rasterize a RN once via react-native-view-shot) + clusteringEnabled / clusterable: true. Focus changes = cheap uri swap.
Carousel ↔ map sync: on carousel onMomentumScrollEnd, update focused id and optionally animateCamera; on marker press, scroll the carousel to match.
Clustering: works out of the box with image-based markers when you zoom out.
Coming: first-class (library handles snapshot internally) same mental model, less boilerplate than view-shot. Tracked via #34; not blocking for your case.
For your described flow, the example above should be enough to ship. The main thing you'd handle in your app (not library-side) is search refresh: when the hotel list changes, re-capture pins for new ids and drop removed ones same pattern, just keyed off your search results.

Does the PR demo match what you had in mind, or is there a specific edge case we should prioritize before investing in native marker-child support?

[fdrault]

Hello, firstly, thank you for your works. Having a new map in react-native ecosystem is a really good happening.

While we don't use it for now, I am following closely your library development, because we might switch in the future, and I do like your work based around performance.

I tried your example PR and it cover almost everything but I may add two requirements to your bitmap model.

• We want to have custom cluster marker too
• Custom Marker can have different size

While rasterize is a good option for us too, it would help us if marker could be resized on re-render (when a new view shot is taken). We have different size between markers because of the price, but also a Save/not Save state.

Here, I show you a real-life example of our usage of react-native-maps:

real-life-requirement.mp4

[fobos531]

Hello @jkasprzyk17 , while I haven't been able to try out the example you provided, the video by @fdrault really nicely demonstrates my use case as well.