react-native-maps
Marker are clipped on android
Summary
hello,
I make custom markers on ios it's perfect but on android i have problem
markers are clipped
Reproducible sample code
import { useEffect, useState, useRef, useCallback } from "react";
import MapView, { Marker } from "react-native-maps";
import * as Location from "expo-location";
import {
YStack,
Avatar,
MarkerLocation2,
CustomCard as Card,
XStack,
Text,
CustomButton,
MarkerLocation,
View,
} from "@my/ui";
import { useCoach } from "app/utils/react-query/useCoach";
import { useRouter } from "solito/navigation";
import { User } from "app/schemas/user";
import { ChevronRight, LocateFixed, Send } from "@tamagui/lucide-icons";
import { Platform } from "react-native";
const parisRegion = {
latitude: 48.8566,
longitude: 2.3522,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
};
export const CoachLocationScreen = () => {
const [selectedCoach, setSelectedCoach] = useState<User | null>(null);
const [userLocation, setUserLocation] = useState<{
latitude: number;
longitude: number;
latitudeDelta: number;
longitudeDelta: number;
} | null>(null);
const mapRef = useRef<MapView>(null);
const router = useRouter();
const { coaches } = useCoach();
const updateUserLocation = useCallback(
(location: Location.LocationObject) => {
const newUserLocation = {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
};
setUserLocation(newUserLocation);
},
[]
);
useEffect(() => {
(async () => {
let { status } = await Location.requestForegroundPermissionsAsync();
if (status === "granted") {
try {
let location = await Location.getCurrentPositionAsync({});
const newUserLocation = {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
};
updateUserLocation(location);
mapRef.current?.animateToRegion(newUserLocation, 1000);
// Watch position
const watchId = await Location.watchPositionAsync(
{
accuracy: Location.Accuracy.High,
timeInterval: 5000,
distanceInterval: 10,
},
(location) => {
updateUserLocation(location);
}
);
return () => {
watchId.remove();
};
} catch (error) {
console.error(
"Erreur lors de l'obtention de la localisation:",
error
);
mapRef.current?.animateToRegion(parisRegion, 1000);
}
} else {
console.log("Permission de localisation refusée");
mapRef.current?.animateToRegion(parisRegion, 1000);
}
})();
}, [updateUserLocation]);
const navigateToCoachProfile = (coachId: string) => {
router.push(`/profile/${coachId}`);
};
const handleMapPress = () => {
setSelectedCoach(null);
};
const handleCoachSelect = (coach: User) => {
setSelectedCoach(coach);
};
const mapPadding = Platform.select({
ios: { bottom: 70, top: 0, left: 20, right: 0 },
android: { bottom: 100, top: 20, left: 20, right: 20 },
default: { bottom: 70, top: 0, left: 20, right: 0 },
});
return (
<YStack f={1}>
<MapView
ref={mapRef}
mapType="standard"
pitchEnabled={true}
rotateEnabled={true}
zoomControlEnabled={false}
showsCompass={false}
style={{ flex: 1 }}
mapPadding={mapPadding}
initialRegion={parisRegion}
onPress={handleMapPress}
>
{userLocation && (
<Marker coordinate={userLocation}>
<MarkerLocation />
</Marker>
)}
{coachesWithLocation.map((coach, index) => {
return (
<Marker
key={index}
coordinate={coach.location}
onPress={(e) => {
e.stopPropagation();
handleCoachSelect(coach);
}}
>
<YStack
ai="center"
jc="center"
zi={3}
onPress={(e) => {
e.stopPropagation();
handleCoachSelect(coach);
}}
>
<YStack
bc={selectedCoach?.id === coach.id ? "#E16D2A" : "white"}
p={4}
br="$4"
pos="absolute"
b="$5"
>
<Avatar size="$5" br="$3">
<Avatar.Image src={coach.avatarUrl} />
</Avatar>
</YStack>
<MarkerLocation2 size={40} />
</YStack>
</Marker>
);
})}
</MapView>
</YStack>
);
};
Steps to reproduce
just go on maps
Expected result
I would like the markers not to be cut
Actual result
markers are clipped
React Native Maps Version
1.15.2
What platforms are you seeing the problem on?
Android
React Native Version
0.74.2
What version of Expo are you using?
SDK 48
Device(s)
google pixel 6 pro
Additional information
No response
I believe I have the same issue. I use an svg icon and when set to a smaller size such as 48x48, it works fine but something like 96x96 it is clipped until I tap on it.
@axelverglas
For me, using the legacy renderer with googleRenderer="LEGACY" fixed multiple different bugs, including this one. A reload of the app did not work though, I had to completely close the app and start it back for the renderer change to take effect.
Maybe also checkout #5103? I had a bug where I was trying to use a custom element and it was getting clipped. That PR solved it
Maybe also checkout #5103? I had a bug where I was trying to use a custom element and it was getting clipped. That PR solved it
I updated react native maps but my markers are still cut after maybe I'm doing something wrong
Maybe also checkout #5103? I had a bug where I was trying to use a custom element and it was getting clipped. That PR solved it
I updated react native maps but my markers are still cut after maybe I'm doing something wrong
Did you try using the legacy google renderer? Make sure to fully restart your application and clear the cache to be safe.
Maybe also checkout #5103? I had a bug where I was trying to use a custom element and it was getting clipped. That PR solved it
I updated react native maps but my markers are still cut after maybe I'm doing something wrong
The pull request hasn’t been merged yet, so you will need to create a patch manually.
Peut-être aussi vérifier le n° 5103 ? J'ai eu un bug où j'essayais d'utiliser un élément personnalisé et il était coupé. Ce PR a résolu le problème
J'ai mis à jour les cartes React Native mais mes marqueurs sont toujours coupés après peut-être que je fais quelque chose de mal
Avez-vous essayé d'utiliser l'ancien moteur de rendu Google ? Assurez-vous de redémarrer complètement votre application et de vider le cache pour plus de sécurité.
yes i try it but he didn't work
Peut-être aussi vérifier le n° 5103 ? J'ai eu un bug où j'essayais d'utiliser un élément personnalisé et il était coupé. Ce PR a résolu le problème
J'ai mis à jour les cartes React Native mais mes marqueurs sont toujours coupés après peut-être que je fais quelque chose de mal
La demande d'extraction n'a pas encore été fusionnée, vous devrez donc créer un correctif manuellement.
yes i did it but it's don't work but maybe it's my fault
@salah-ghanim Any intention on looking into this? Upgrading to the latest expo sdk 52 which uses the new react-native architecture also triggers this, though this time even if I use the legacy google maps renderer.
I have the same issue, custom marker and its callout are getting clipped in the new architecture
same problem I have "react-native": "0.76.2" and "react-native-maps": "^1.20.0", only happened in android , iOS without problem
Same issue, unable to increase custom marker size beyond 38 units in react-native-maps—need a solution to remove this size constraint.
Hey Folks,
In your android/gradle.properties, chnage newArchEnabled=true to newArchEnabled=false. It will fix this for now. I tested on 0.76.3. Thank me later ! 😀
Hey Folks,
In your
android/gradle.properties, chnagenewArchEnabled=truetonewArchEnabled=false. It will fix this for now. I tested on0.76.3. Thank me later ! 😀
The issue is that many of us don't want to disable the new architecture for all of its benefits just for google maps 🙂
Hey Folks,
In your
android/gradle.properties, chnagenewArchEnabled=truetonewArchEnabled=false. It will fix this for now. I tested on0.76.3. Thank me later ! 😀
Disabling the new architecture is not a valid solution. The library should work with bouth the old and new arch
Hey Folks, In your
android/gradle.properties, chnagenewArchEnabled=truetonewArchEnabled=false. It will fix this for now. I tested on0.76.3. Thank me later ! 😀Disabling the new architecture is not a valid solution. The library should work with bouth the old and new arch
Yes, I also agree, but it’s just for the meantime
Reacts Native Maps isn’t compatible with new architecture right now. See #5206
Hey Folks, In your
android/gradle.properties, chnagenewArchEnabled=truetonewArchEnabled=false. It will fix this for now. I tested on0.76.3. Thank me later ! 😀Disabling the new architecture is not a valid solution. The library should work with bouth the old and new arch
Yes, I also agree, but it’s just for the meantime
Exactly, It depends on your needs, if the map is the big thing for your app, you have to trade it with the benefits of the new architecture for now. Just until they fix it.
Hey Folks,
In your
android/gradle.properties, chnagenewArchEnabled=truetonewArchEnabled=false. It will fix this for now. I tested on0.76.3. Thank me later ! 😀
That change initially crashed my app with errors like this:
....(RootComponent), js engine: hermes ERROR Warning: Error: Exception in HostFunction: Malformed calls from JS: field sizes are different
Note the reference to "hermes" in the error. Just below your setting, I noticed there was the setting hermesEnabled=true. So I tried changing that to hermesEnabled=false and got lucky: it fixed my errors, and my map markers are no longer truncated!
I'm not sure what the repercussions of turning off hermes are though. It's for debugging, I think.
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.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
I noticed the issue appears when using markers of different sizes. Hope that helps.
Any updates on this? This is blocking us from upgrading to the newArchitecture map is crucial part of our app
Maybe also checkout #5103? I had a bug where I was trying to use a custom element and it was getting clipped. That PR solved it
This is working, can we get this merged we have create a patch for this
Are there any other alternative solutions? If not, can we merge this one?
This fix worked for me, but I couldn't get patch package to work correctly so I just copy/pasted to validate the fix
