react-native-maps: Custom markers slow performance with reproduceble demo

Hello guys, the slowness issue isn’t anymore an issue for me hihi !!!

Well it is an easy job, just don’t use the props onRegionChange

// onRegionChange={currentRegion => {
//   this.onRegionChange(currentRegion);
// }}

This is what causes the android google map slowness issue

Instead you can just simply use the props onRegionChangeComplete

onRegionChangeComplete={currentRegion => {
  this.onRegionChangeComplete(currentRegion);
}}

Cheers. !!

Solution: Native development

This did help us a little though:

tracksViewChanges={false}

Any updates on this issue? I am experiencing the same: cpu spikes with just a handful of custom markers and callouts(text only).

100% cpu in iOS using the google provider map. Switching to apple maps fixes the performance issue, but is not preferred.

Tried both tracksViewChanges=false and using onRegionChangeComplete, both did not help with google maps on iOS.

Any news on this?

with the new architecture of react-native we can get much better performance and get closer to native performance by avoiding serializing map data (markers).

hopefully with RN supporting typescript for Turbo Modules we can start working on that

#4156

Still experiencing extreme performance degradation on Android when using custom markers when not setting trackViewChanges to false. Any update on a potential fix or workaround?

guys, any news here?

My steps:

1. Launch app with PROVIDER_GOOGLE on iOS without any markers etc, just the map. CPU about 100%
2. Add 1-5 custom marker(s). CPU about 65%
3. Remove all custom markers - everything is fine. CPU about 2%

Also:

1. I tried to use image prop instead of custom marker - the same result - at start CPU about 100%, after all custom markers were removed - CPU about 65%
2. I tried to use icon prop - everything is fine, if I do not moving the map - CPU about 2%

But I cannot use icon prop because I really need to set different width/height depends on business logic.

I have: react-native: 0.61.2 react-native-maps: 0.27.1

bump

Bump! Please fix

Hello, has anyone found a solution regarding the custom marker making the app really slow (android only) Indeed when I test with the google map marker it’s really fast !

i have issue styling my map i want to implement border raduis on my map ,if i add border radius it does work

On Sun, Nov 11, 2018, 13:36 Daniel Dimitrov notifications@github.com wrote:

@cklinx https://github.com/cklinx - this bug report has nothing to do with tracksViewChanges. If you look at the example code you’ll see that tracksViewChanges is already set to false: https://github.com/compojoom/react-native-maps/blob/d60402e2c62f26f3be91023381bdb0cafc9c8318/example/examples/CustomMarkers.js#L73

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/react-community/react-native-maps/issues/2575#issuecomment-437666657, or mute the thread https://github.com/notifications/unsubscribe-auth/Ab63W_qMG-C_OykLTlIK4oLKEecaDo01ks5uuBnDgaJpZM4YVD5E .

bump

I am facing the same issue. What is going on after the markers have been rendered. If I replace the custom markers with the default ones it works really well. However when I replace the markers with ImageBackgroud and Text inside it, with little to no styling it just starts going slowly.

@cklinx - this bug report has nothing to do with tracksViewChanges. If you look at the example code you’ll see that tracksViewChanges is already set to false: https://github.com/compojoom/react-native-maps/blob/d60402e2c62f26f3be91023381bdb0cafc9c8318/example/examples/CustomMarkers.js#L73

updated