Android: first instance of the map overlaps everything when have another map in a different scene.

[kakbeya]

Hi guys,

I know you have lots of issues already to work on, but here is another one.

I'm using RN 0.31 with latest maps and was finally able to get my map to show up on Android with a Browser Key.

I also use react-native-router-flux and I have two scenes with maps. When I switch to the second scene, the map from the first one is frozen on top of it. I can tap/drag the map behind it and everything, but can't see what I am tapping because of this lag. If I remove the map from the second screen - everything works fine.

Any ideas or workarounds?

Thanks,
Alex.

[jeveloper]

I filed a ticket for this , both here and in RNRF git, folks are taking it easy , i rolled back to rn 28
tried many ways
if you do find a work around (basically demounting mapview so its completely gone when navigation state changes , please share.

thanks

[kakbeya]

@jeveloper thanks,

I just was able to do it with changing my second scene type to:

type="replace"

Not the best solution as it removes the smooth transition, but works!

[jeveloper]

Yeah i did observe that , but obviously when you want to stack navigation and want to have to a back arrow , it won't work.
Yes it also completely unmounts the view and mapview is actually a heavy component ( takes a bit of time to render on older devices)

[morrigan]

I have the similar issue with second screen and frozen, unresponsive, map. Using NavigationExperimental and RN 0.28

[jeveloper]

@morrigan i believe 29 or 30 has a fix for it.
By unresponsive do you mean that its basically appearing on top of a previous view?

[danscan]

I'm having this same issue on a project that uses react-native-router-flux (the issue is only encountered on Android; on iOS everything is fine).

Adding type="replace" to the affected scenes works as a workaround.

[jeveloper]

@danscan can you confirm which version of rnrf you're using , latest is 34 and which RN

thanks

[danscan]

@jeveloper Sorry for the delay. I'm using react-native-router-flux@3.30.9 and react-native@0.29.2

[jeveloper]

No problem @danscan , let me know if latest RNRF will work

[danscan]

@jeveloper Updating to react-native-router-flux@3.34.0 doesn't affect this issue.

[olegpesok]

I've narrowed down odd map overlay behavior to this PR: #363. Before this PR maps work fine, after I'm getting odd overlay behavior. This is running react-native 0.28 and RNRF 3.34.0. I'm going to try to pull out this commit and patch on top of maps 0.7.1 and see if I can get things working ok in 0.29.2.

[jeveloper]

Thanks @olegpesok , Spasibo
But i'm looking at 363 and its mainly a way to upgrade due to changes RN 29 made for android by passing appcontext as oppose to activity, etc.
Dan mentioned that a map is rendered in front of another (Z axis )

[olegpesok]

@jeveloper I won't even pretend to understand enough Android dev to say why these things are related, but I DID manage to fix the problem here: olegpesok@030ea04

This is running RNRF 3.34.0, RN 0.29.2, and react-native-maps 0.7.1 (with my patch).

This isn't production quality at all. I can imagine all sorts of ways this would break in a real app, but for my test case it did resolve the issue. Maybe someone more knowledgeable can figure out a more permanent fix.

In your MainActivity.java add the following:

...
import com.airbnb.android.react.maps.ActivityManager;
...
    public void onStart() {
        super.onStart();
        ActivityManager.getInstance().setActivity(this);
...

Make sure to use local build of react-native-maps in android/app/build.gradle

...
//compile "com.airbnb.android:react-native-maps:0.7.1"
compile project(':react-native-maps')
...

[pellepersson]

@olegpesok - I got this to work on RN 0.31 with one minor change. I kept the reactContext.getBaseContext() as an argument for new AirMapManager() in MapsPackage.java. Great job!

I would love to know more about what you believe needs to be done to use this in production..? Or is there perhaps someone else around that knows more about Android development that could tell what risks or issues this solution could lead to..?

[olegpesok]

@pellepersson Well, I'm basically creating a singleton that's holding a reference to the main activity as long as the app is running. Ideally you need to remove that reference whenever the main activity needs to be 'unmounted' or you risk memory leaks. I think for most simple RN apps thats not an issue since the main activity is probably the only activity and will exist as long as the app is running.

[jeveloper]

Hey Oleg and @pellepersson , awesome, thats a small change :)
Can you make a pull request on that @lelandrichardson and few others who approve hopefully will notice

[whs]

Seems that react-native is getting getCurrentActivity support in v32: facebook/react-native@7606564

[jeveloper]

Check this out, someone made a pull request

5187d4f

[veedeo]

Hey guys, any update on this issue? Is there a workaround?

[jeveloper]

@veedeo I hope they'll take in pull requests that are pending, not much support for this project for some reason :(

[pellepersson]

Today we tried to run the pull request that @jeveloper is linking to ([https://github.com//pull/449/commits/5187d4f33aea0009363f72ae4aaacc9b0d7829c7]) and the map view feels a bit more light weight now compared to the other solution we are discussing above.

[jeveloper]

Hey @pellepersson , what do you mean by feels a bit more light weight? , less memory use?
and switching between multiple mapviews is good? fast?

thanks

[pellepersson]

@jeveloper - yes I was thinking about the memory usage. multiple mapviews works for both solutions.

[veedeo]

@pellepersson greate news, can you check if this solves swiping issues with a MapView beeing placed into scrollable container. In my case its a RNRF component with direction="vertical", but maybe placing it into a scrollview will show same problems

[jeveloper]

@pellepersson thank you for confirming that.

I wonder when folks on this project will start accepting pull requests, they seem to ignore it

[pellepersson]

@veedeo - sorry, but I don't have time for that. It is not that hard to do it yourself though... just refer to the pull request in your app's "package.json":

"react-native-maps": "https://github.com/lelandrichardson/react-native-maps#5187d4f33aea0009363f72ae4aaacc9b0d7829c7"

and do what @olegpesok describes above to make sure it is the local build that is being compiled in "app/build.gradle":

... //compile "com.airbnb.android:react-native-maps:0.7.1" compile project(':react-native-maps') ...

[spikebrehm]

We think this may be fixed by this PR that was just merged: #449. Perhaps you can verify?

[jeveloper]

@olegpesok @pellepersson Hey guys, it feels like im the guy that connects issues , pulls and provides context. Hope this issue will resolve multiple mapviews between navigations.
Can you confirm if it did within your project.

Thanks

[veedeo]

@jeveloper I do have multi maps in my proj to, how can I test this merge?

[jeveloper]

@veedeo I want to clarify that this issue is officially fixed in branch 0.11 ,0.12 and 0.10.x

Folks, i recommend adding enablling loader for android, there are crash reports if android itself + google map services did not load component in memory itself , then your app logic will attempt to modify something that's still null or not fully loaded.
cheers

[maxx-coffee]

This still seems to be an issue using
"react-native-maps": "0.13.0" and NavigationExperimental
This seems to happen using traditional scenes and modals.

The map on the left is in the scene "before". Could you think of any workarounds or something I could look in to?

[alexprice1]

bump

[veedeo]

does this branch "fdnhkj/react-native-maps" solve your issue?

[robotgo]

@joshualcoffee i had the same issue
{"react-native": "0.41.2","react-native-maps": "0.13.0","react-native-router-flux": "3.37.0"}
I followed gharwood's recommendations and render map element only when scene with it is active:

{ currentRoute === 'grounds'
              ? <Map objects={filteredGrounds} fetching={fetching} />
              : null
            }

<Map /> is a wrapper around MapView.
To get current route with react-native-router-flux I connect Router to redux as explained here
This approach allows to save memory removing unactive maps from navigation stack.

[maxx-coffee]

That will not work in all use cases. The best example I have is showing children of the same object type. Lets say I have a "person" model that can be the child or parent of another person. If i want to render a modal (or something along those lines) with the same component on top of the screen the issue will still happen.

The only work around I could see is to have an internal state on each component that checks to see if the parent is visible. However it gets ugly because you have to pass aroudn actions and events to handle the internal state.

[iiitmahesh]

@joshualcoffee I have a same problem. How to slove this??

[kapilgp]

Facing same issue me too...

on switching screens previous screen map is still there on top of new screen map.
using following modules

"react": "15.4.2", "react-native": "0.42.3", "react-native-maps": "^0.13.1", "react-native-splash-screen": "^2.0.0", "react-navigation": "^1.0.0-beta.7"

Can anyone provide me solution of it. I think it is best if there is any option for destroy previous map at the time of switching screen.

[maxx-coffee]

If you are using redux you can solve this by creating a map container that has a state to render the map or not.

The idea is to have a flag with the screen name and unique identifier. So for us we used something like customerShowScreeen#1123 1123 is the id of the customer. I then check to make sure the screen is active and the key matches the key we pass in to the props. If everything is true I will render the component if it's false I will return null not rendering this component.

This allowed us to use modals and other type of screen renderers without it interfering with the underlying code.

[ryankask]

This issue was fixed but there was a regression in version 0.13.1 (see #1161 for details)

Please try downgrading to 0.13.0 to see if that fixes the issue.

[kapilgp]

Thanks @ryankask 👍

It's working with 0.13.0. Hope it will resolve in next release :)

[privateOmega]

Hey guys,
I am encountering the issue on the following setup. Has this bug been officially resolved or Is there any good workarounds.
React:15.4.2,RN:0.42.0,RNMaps:0.13.0,RNRouteFlux:3.38.0
Any help is much appreciated.

[delvedor]

Same issue here:

react-native: v0.42.0
react-native-maps: v0.14.0

[ianaz]

same issue
react-native: 0.42.0
react-native-maps: 0.15.0

[christopherdro]

@delvedor @ianaz Care to try #1311 and see if that works for you?

[ianaz]

@christopherdro oh cool! I'll try it as soon as i get back to the project and let you know :) Thanks!

[delvedor]

@christopherdro I tried your solution and seems to fix the issue :)

[amitpdev]

The problem still occurs on Android 6.0.0 (API 23).
I am able to easily reproduce it on a sample app having just two screens, each with it's own MapView.
I'm using 'react-navigation' to navigate between them.
First screen's map is fine, second screen's map is all messed up, as complained by this thread.

Can someone please test with Android 6 and report?

react-native: 0.45.1
react: 16.0.0-alpha.12
react-native-maps: 0.15.2

Device: Genymotion Google Nexus 5X - 6.0.0 API 23

[ShivamKJJW]

@scotbond You need to modify your package.json file to specify the latest commit as below:
"react-native-maps": "git://github.com/olegpesok/react-native-maps.git#0c925244cf138905ca0a6d67894f0761c73eb28e"
Also make sure your to change the app.gradle as specified by @pellepersson in his comment.

I did the same and it resolved from me.

[samthui]

I have same problem & following @joshualcoffee's suggestion did fix it.
Let say I have 2 scenes: A & B, both contain Map. Pushing B from A will display A's map on top of B's.
I solved it by hiding A's map before pushing B, and re-showing it after popping back to A.
That makes map blink, but at least solves the issue.

[fumiki]

This still occurs for me.

"react-native": "^0.55.3"
"react-native-maps": "^0.21.0"

I tried on multiple versions.
It seems to occur under 6.0.0.

5.1.0 - Genymotion => NG
6.0.0 - Genymotion => NG
6.0.1 - Actual Device => OK
7.0.0 - Genymotion => OK
8.0.0 - Genymotion => OK

[fcabrera23]

Still having the same issue, any solution?

[juanmaotegui]

@fcabrera23 me too!! We need a solution!!!

[fcabrera23]

@fumiki did you solve the problem? I have already tried all suggestions above, but none worked.

[fumiki]

@fcabrera23
My workaround is below.
When the screen did disappear, hide MapView component by StyleSheet.
(And show MapView when the screen will appear)

<MapView
  style={this.state.isFocused ? styles.visible : styles.hidden}
>

const styles = StyleSheet.create({
  visible: {
    ...StyleSheet.absoluteFillObject
  },
  hidden: {
    height: 1,
    top: -1000
  }
});

this.state.isFocused is boolean for the screen is focused or not.
In my case, I use react-navigation that can handle it.
https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

this.props.navigation.addListener("didBlur", () =>
  this.setState({ isFocused: false })
);
this.props.navigation.addListener("willFocus", () =>
  this.setState({ isFocused: true })
);