Callout glitch on some Android devices

[raulgordejev]

Summary

Marker where the coordinates can change during runtime with Callout in them tend to have some kind of a glitch where Callout jumps between what seems to be calloutAnchor y-value of 1 and the value I have set (1.38) manually on each render.

Reproducible sample code

import { View, StyleSheet } from 'react-native';
import React, { useState } from 'react';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

const MapScreen = () => {
	const [, setUserLocation] = useState({});
	const initialRegion = {
		latitude: 37.7895516,
		longitude: -122.3898368,
		latitudeDelta: 0.003,
		longitudeDelta: 0.003,
	};

	return (
		<View style={{ ...StyleSheet.absoluteFillObject }}>
			<MapView
				provider={PROVIDER_GOOGLE}
				initialRegion={initialRegion}
				showsUserLocation={true}
				onUserLocationChange={(event) =>
					setUserLocation({
						latitude: event.nativeEvent.coordinate.latitude,
						longitude: event.nativeEvent.coordinate.longitude,
					})
				}
				style={{
					...StyleSheet.absoluteFillObject,
				}}
			>
				<CalloutMarker
					coordinate={{
						latitude: 37.7895516,
						longitude: -122.3898368,
					}}
				/>
			</MapView>
		</View>
	);
};



const CalloutMarker = ({ coordinate }) => {
	let markerRef = useRef<MapMarker>(null);
	markerRef?.current?.showCallout();

	return (
		<Marker
			ref={markerRef}
			coordinate={coordinate}
			anchor={{ x: 0.5, y: 1 }}
			calloutAnchor={{ x: 0.5, y: 1.38 }}
			tracksViewChanges={false}
			tracksInfoWindowChanges
			stopPropagation
		>
			<Callout alphaHitTest tooltip>
				<View
					style={{
						flexDirection: 'row',
						justifyContent: 'space-between',
						alignItems: 'center',
					}}
				>
					<Text
						style={{
							fontSize: 9,
							fontWeight: 'bold',
							color: '#15171C',
						}}
					>
						Some text
					</Text>
				</View>
			</Callout>
		</Marker>
	);
};

Steps to reproduce

Attached code sample should be 100% reproducable with certain Android devices (for sure Pixel 3 XL, Android 12, not clear which else). When running on real device, make sure you give location permissions to the app.

As the rerendering in the example happens because of the user location change, then while trying to reproduce - make sure that it's changing.

Expected result

Callout would stay in place with the defined anchor value.

Actual result

Callout is glitching on y-axis.

React Native Maps Version

Tested with: 1.6.0, 1.8.4

What platforms are you seeing the problem on?

Android

React Native Version

Tested with: 0.70.5, 0.71.15

What version of Expo are you using?

Not using Expo

Device(s)

Pixel 3 XL, Android 12

Additional information

https://github.com/react-native-maps/react-native-maps/assets/12236906/3b67a068-477b-453b-b14f-7827151073bc

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If the issue remains relevant, simply comment Still relevant and the issue will remain open. Thank you for your contributions.

[raulgordejev]

Still relevant

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If the issue remains relevant, simply comment Still relevant and the issue will remain open. Thank you for your contributions.

[raulgordejev]

Still relevant

[PauloGrachetelli]

same 1.8.0

[mateki0]

I've tried to reproduce it, but I couldn't. Can you post here video with the bug and reproducible steps? Or verify if my tries were correct? Console.log is in onUserLocationChange. @PauloGrachetelli @raulgordejev

https://github.com/react-native-maps/react-native-maps/assets/37906388/503861c0-08b5-448f-8eb7-a217b6aa2a0c

[raulgordejev]

@mateki0 I've now updated the description and added a screen recording from a Pixel 3 XL, Android 12 with [email protected] and [email protected]. Using the same code example provided in the description. Used mock gps to update the user location every 1000ms.

Might be that it's only reproducible on real devices?

[PauloGrachetelli]

for me this issue is not actial. i just remove this rows and maps works as expected.

implementation 'com.google.maps.android:android-maps-utils:+'
implementation 'com.google.android.gms:play-services-base:+'
implementation 'com.google.android.gms:play-services-location:+'
implementation 'com.google.android.gms:play-services-maps:+'

[raulgordejev]

@PauloGrachetelli just to confirm - did you remove these directly from the react-native-maps package with patch-package? Because I don't have these defined anywhere in my app.

[PauloGrachetelli]

no no, I removed it from my project. The react-native-maps documentation says that these libraries are no longer needed

"Google Play Services conflicting issues with other modules" https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md

[outaTiME]

Hello there, I have the same bug when I open a callout on a marker and the anchor settings are in calloutAnchor={{ x: 0.5, y: 0 }}, as seen in the video it makes a movement from the center of the marker to the top.

https://github.com/react-native-maps/react-native-maps/assets/140472/0c0b0153-bd47-4bcd-a397-61b567b9a4fc

Note: if I leave the configuration with calloutAnchor={{ x: 0.5, y: 0.5 }} it works flawlessly without glitches.

[HyopeR]

I'm having the same problem. This problem does not appear in versions 1.8.4 and below. This situation is available on the Android side in 1.9.0 and 1.9.0+ versions. Unfortunately, I couldn't find a temporary solution for myself.

These dependencies were switched with version 1.9.0. It is said that a transition to a new generator has been made with these dependencies. The problem is probably related to these.

implementation "com.google.android.gms:play-services-base:${safeExtGet('playServicesVersion', '18.2.0')}"
implementation "com.google.android.gms:play-services-maps:${safeExtGet('playServicesVersion', '18.2.0')}"
implementation 'com.google.maps.android:android-maps-utils:3.8.2'

Note: Using old version of android-maps-utils does not work. Probably the problem is com.google.android.gms:play-services-maps: 18.2.0.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If the issue remains relevant, simply comment Still relevant and the issue will remain open. Thank you for your contributions.

[MikaelLeBlanc]

Still relevant