react-native-maps
MapView is reloading on drawer open and close.
Summary
<MapView style={styles.mapStyle} showsUserLocation={true} userInterfaceStyle={'light'} pointerEvents="none" // default mapType={'standard'}/>
I am using the above syntax and npm version 1.26.18. I am getting this issue on an Android device; iOS is not yet tested.
Reproducible sample code
<MapView
style={styles.mapStyle}
showsUserLocation={true}
userInterfaceStyle={'light'}
pointerEvents="none" // default
mapType={'standard'}/>
Steps to reproduce
Open and close the drawer. "@react-navigation/drawer": "^6.5.6",
Expected result
MapView does not need to be reloaded every time.
Actual result
MapView reloaded every time.
React Native Maps Version
1.26.18
What platforms are you seeing the problem on?
Android
React Native Version
0.81.0
What version of Expo are you using?
Not using Expo
Device(s)
Android
Additional information
No response
Same/similar issue here I think. I move the map to a new area, then navigate to another screen, and when I return to the map it has "reset" the region to my current/initial location.
RN 0.77.3, new arch, RN maps 1.26.0 (with a bunch of patches to pull in fixes from 1.26.13 through 1.26.18)
It doesn't even need to be navigation to make this happen. Simply setting the map's parent view to 0 opacity and back seems to be enough to do it. I've put in a hacky workaround for now to save the last region when navigating away and restoring it when navigating back, but this wasn't necessary when I was on 1.20.1 + old arch
Similar issue, already in 1.24.13 (and probably before, not tried).
"@react-navigation/drawer": "^7.7.2",
"react-native": "0.82.1",
"react-native-maps": "1.26.13",
-- app launch
MainScreen.tsx:205 MainScreen onLayout false
MainScreen.tsx:178 MainScreen onMapReady
MainScreen.tsx:209 MainScreen onMapLoaded
MainScreen.tsx:231 MainScreen set markers
MainScreen.tsx:317 MainScreen render
MainScreen.tsx:297 MainScreen after markers
MainScreen.tsx:311 MainScreen onMarkersAdded
-- open drawer
MainScreen.tsx:178 MainScreen onMapReady <-- unexpected
MainScreen.tsx:209 MainScreen onMapLoaded <-- unexpected
-- close drawer, staying on same screen
MainScreen.tsx:178 MainScreen onMapReady <-- unexpected
MainScreen.tsx:209 MainScreen onMapLoaded <-- unexpected
-- open drawer
MainScreen.tsx:178 MainScreen onMapReady <-- unexpected
MainScreen.tsx:209 MainScreen onMapLoaded <-- unexpected
-- choose another screen
APlaceScreen.tsx:31 ShelterScreen const {navigation: {…}, route: {…}}
APlaceScreen.tsx:150 ShelterScreen render
APlaceScreen.tsx:63 ShelterScreen componentDidMount
APlaceScreen.tsx:102 ShelterScreen onLayout false
MainScreen.tsx:178 MainScreen onMapReady <-- why?
APlaceScreen.tsx:83 ShelterScreen onMapReady
APlaceScreen.tsx:113 ShelterScreen onMapLoaded
APlaceScreen.tsx:121 ShelterScreen set markers
APlaceScreen.tsx:150 ShelterScreen render
APlaceScreen.tsx:123 ShelterScreen after markers
APlaceScreen.tsx:143 ShelterScreen fit markers
Here is the explanation, with some variations compared to my previous comment:
-
Log.d()traces are added in the java code (denoted by a 'psam' tag) - an automated transient open/close is put back in service on the MainScreen (on the first map-ready event)
11:49:43.915 16834-16834 MainActivity D lifecycle onCreate
11:49:44.228 16834-16834 MainActivity D lifecycle onResume
11:49:54.013 16834-16910 ReactNativeJS I MainScreen componentDidMount
11:49:54.702 16834-16910 ReactNativeJS I MainScreen onLayout false
11:49:54.809 16834-16834 psam D onAttachedToWindow < does an addObserver(), hence:
11:49:54.810 16834-16834 psam D onCreate
11:49:56.081 16834-16834 psam D onStart
11:49:56.083 16834-16834 psam D onResume
11:49:56.268 16834-16834 psam D onMapReady < the one initiated in constructor
11:49:56.370 16834-16910 ReactNativeJS I MainScreen onLayout false
11:49:56.413 16834-16910 ReactNativeJS I MainScreen onMapReady
11:49:56.417 16834-16910 ReactNativeJS I MainScreen transientDrawerShown open < done only once
11:49:56.686 16834-16834 psam D onDetachedFromWindow < will populate savedMapState
11:49:56.712 16834-16834 psam D onAttachedToWindow < addObserver() again
11:49:56.712 16834-16834 psam D onCreate \ < loads a new empty map, so the code calls again
11:49:56.747 16834-16834 psam D onStart | onCreate() with the saved state, and getMapAsync()
11:49:56.748 16834-16834 psam D onResume /
11:49:56.810 16834-16834 psam D onMapReady < triggered by the additional getMapAsync
11:49:56.870 16834-16910 ReactNativeJS I MainScreen onMapReady
11:49:56.940 16834-16910 ReactNativeJS I MainScreen transientDrawerShown close < +0.5s after open
11:49:57.140 16834-16834 psam D onDetachedFromWindow < !! do it again my friend!
11:49:57.160 16834-16834 psam D onAttachedToWindow
11:49:57.160 16834-16834 psam D onCreate \
11:49:57.194 16834-16834 psam D onStart |
11:49:57.195 16834-16834 psam D onResume /
11:49:57.267 16834-16834 psam D onMapReady
11:49:57.327 16834-16910 ReactNativeJS I MainScreen onMapReady
11:49:58.563 16834-16834 psam D onMapLoaded < only the last one survives, the first two are probably annihilated
11:49:58.573 16834-16910 ReactNativeJS I MainScreen onMapLoaded
The problem is the use of onAttachedToWindow/onDetachedFromWindow introduced in version 1.24.3.
This flicker on open/close of the drawer is even worse when you navigate to another screen. Follow-up: I will explain that in #5750.