Markers/Polyline disappear after navigating back to MapView screen

[Ikthegreat]

Summary

When navigating away from a screen containing a MapView (using React Navigation stack push) and then returning with pop, the Marker and Polyline overlays disappear. The map itself still renders, but the overlays are gone.

Reproducible sample code

import { useNavigation } from '@react-navigation/native';
import { Button, View } from 'react-native';
import MapView, { Marker, Polyline, PROVIDER_GOOGLE } from 'react-native-maps';

const MapScreen = () => {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1 }}>
      <MapView
        provider={PROVIDER_GOOGLE}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.005,
          longitudeDelta: 0.005,
        }}
        style={{ flex: 1 }}
      >
        <Marker
          image={require('../../assets/marker.png')}
          coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
        />

        <Polyline
          coordinates={[
            { latitude: 37.788, longitude: -122.432 },
            { latitude: 37.786, longitude: -122.431 },
            { latitude: 37.787, longitude: -122.433 },
            { latitude: 37.785, longitude: -122.434 },
          ]}
          strokeWidth={5}
        />
      </MapView>

      <Button title="Go to Next" onPress={() => navigation.navigate('Next')} />
    </View>
  );
};

export default MapScreen;

Steps to reproduce

1. Create a screen (MapViewScreen) with a MapView containing at least one Marker and a Polyline.
2. From that screen, push another screen onto the navigation stack.
3. Navigate back to the MapViewScreen using pop (or back navigation).
4. Observe that the MapView is still present, but the overlays (Marker/Polyline) are missing.

Expected result

When navigating back to the MapViewScreen, all previously rendered state should still be visible and unchanged.

Actual result

React Native Maps Version

1.26.9

What platforms are you seeing the problem on?

Android

React Native Version

0.81.4

What version of Expo are you using?

Not using Expo

Device(s)

Samsung Galaxy Flip 3 (Android 15)

Additional information

No response

[mikemonaco]

@salah-ghanim is there a chance that a bad pattern is being used on android to manage the view? why do we have to keep patching this SDK to explicitly add back features that are on the map. If the screen is not unmounting why would we have to keep restoring the state of the map?

[salah-ghanim]

@mikemonaco the view is being unmounted via react-native / removed from the UI so of course it will lose it's components state.

for everyone to understand this behaviour on android:

react-native-maps is not like 99% of react-native components in that it depends on creating views that are attached to nothing and map those views to the actual android maps "features" ... this is done because google-maps doesn't use View classes (and it's inheretance) unlike iOS Apple Maps where MKMarkerView is a UIView and so it can be attached to the map as a Subview, but react-native arch assume everything is mapped to a native view and so inherits a UIView on iOS and View on android.

my question here, is this a new bug, was this actually working with old arch, because I don't see code around persisting state, or are those improvements ?

[LukasB-DEV]

@mikemonaco the view is being unmounted via react-native / removed from the UI so of course it will lose it's components state.

for everyone to understand this behaviour on android:

react-native-maps is not like 99% of react-native components in that it depends on creating views that are attached to nothing and map those views to the actual android maps "features" ... this is done because google-maps doesn't use View classes (and it's inheretance) unlike iOS Apple Maps where MKMarkerView is a UIView and so it can be attached to the map as a Subview, but react-native arch assume everything is mapped to a native view and so inherits a UIView on iOS and View on android.

my question here, is this a new bug, was this actually working with old arch, because I don't see code around persisting state, or are those improvements ?

yes and it is also working with the fixes from #5666

[Ikthegreat]

@mikemonaco the view is being unmounted via react-native / removed from the UI so of course it will lose it's components state.

for everyone to understand this behaviour on android:

react-native-maps is not like 99% of react-native components in that it depends on creating views that are attached to nothing and map those views to the actual android maps "features" ... this is done because google-maps doesn't use View classes (and it's inheretance) unlike iOS Apple Maps where MKMarkerView is a UIView and so it can be attached to the map as a Subview, but react-native arch assume everything is mapped to a native view and so inherits a UIView on iOS and View on android.

@salah-ghanim In the case I described in this issue, the MapView and its screen are not being unmounted.

What I mean is: if I add another screen on top of the MapView screen and then remove it again (so the screen focus changes in React Navigation), are you saying that the MapView still gets unmounted and its state is also reset?

my question here, is this a new bug, was this actually working with old arch, because I don't see code around persisting state, or are those improvements ?

It’s hard to say for sure whether this issue is a new bug in 1.26.9. However, before enabling the new architecture, I had been using 1.18.1 for quite a long time without any problems. In that version, even when the screen focus changed, the MapView, Markers, and related state were neither reset nor changed. Starting from a certain version, though, every time the screen changes, the MapView appears to reload — it flickers, and both onMapReady and onMapLoaded are triggered again.

[salah-ghanim]

@Ikthegreat see this comment and use the patch
#5743 (comment)

it's clear that the view is being detached / attached and I don't see anyway to control it now, I think we need to escalate to the react-native team themselves.

[Ikthegreat]

@salah-ghanim In the same environment (react-native 0.81.4, new architecture), when I downgraded the react-native-maps library to version 1.18.1, I did not observe any flickering or repeated calls to onMapLoaded / onMapReady. If this were solely due to React Native’s view management behavior, I would expect the same detach/attach pattern to also occur in 1.18.1, but that doesn’t seem to be the case. Could it be that some changes introduced in newer versions of react-native-maps are making this behavior more noticeable?

[LukasB-DEV]

@salah-ghanim i created a patch file for 1.26.6 with the changes from pingpong (#5666). WIth it the map state persists over screen changes. (It has also the workaround for the Markers)

react-native-maps+1.26.6.patch

[salah-ghanim]

@LukasB-DEV would be amazing if you create a pull request with the changes from the patch applied to the latest version, specifically I see that lots of the changes were already merged in master over the last couple of days.

@Ikthegreat 1.18.1 didn't support new arch so interoplayer was used, I don't know the internals of it or how did react-native team implement it to avoid a view reload, but it's a good point to discuss with them as well.

again when it's simply a MapView with no child components and a clear example of the flicker like #5743 I don't see what can we can do here.

[LukasB-DEV]

@LukasB-DEV would be amazing if you create a pull request with the changes from the patch applied to the latest version, specifically I see that lots of the changes were already merged in master over the last couple of days.

@Ikthegreat 1.18.1 didn't support new arch so interoplayer was used, I don't know the internals of it or how did react-native team implement it to avoid a view reload, but it's a good point to discuss with them as well.

again when it's simply a MapView with no child components and a clear example of the flicker like #5743 I don't see what can we can do here.

Will try to create it today

[armanapresyann]

Markers/Polylines disappear after navigating back to MapView (v1.26.0)

When using react-native-maps v1.26.0 with React Navigation Stack:

Navigate to another screen and then back to the screen with MapView.

All Markers and Polylines disappear.

It seems the MapView unmounts on navigation, clearing local state. In previous versions, this did not happen.

Expected behavior: Markers and Polylines should remain visible when returning to the screen.

only Android

[pedrolopes10]

@salah-ghanim I can also confirm this issue. The map loads correctly without any duplicate or default red markers. However, opening the React Navigation drawer triggers a re-render of the map, causing duplicate markers to appear everywhere. On a positive note, the custom marker images from URLs only become visible after this re-render occurs

[armanapresyann]

Yes, my problem is that when I go to another screen and then come back, all the markers are deleted.
android v1.26.0