[BUG]: When using locationOverlay in ios, the position of the marker changes according to the zoom value

[ko-devHong]

Is there an existing issue for this?

• I have searched the existing issues

Version of @mj-studio/react-native-naver-map

2.9.4

Version of react-native

0.79.6

What os are you seeing the problem on?

iOS

What device types are you seeing the problem on?

Simulator, Physcial Device

What architecture types of react native are you seeing the problem on?

New Architecture(Fabric)

Version of device(android API, iOS OS version, etc...)

ios 17.x , 16.x

Expo App

• I am using Expo

What happened?

A bug happened!

When using locationOverlay in ios, the position of the marker changes according to the zoom value

video link:

https://drive.google.com/file/d/13BFX30vUZPgo802dLQVD70eRdCqKLc78/view?usp=sharing

Relevant a package.json.

"dependencies": {
    "@amplitude/analytics-react-native": "^1.4.14",
    "@amplitude/experiment-react-native-client": "^1.5.2",
    "@braze/expo-plugin": "^3.1.0",
    "@braze/react-native-sdk": "^15.0.1",
    "@dev-plugins/react-query": "^0.3.1",
    "@expo/vector-icons": "^14.1.0",
    "@gorhom/bottom-sheet": "5.2.6",
    "@hot-updater/react-native": "0.19.9",
    "@microsoft/react-native-clarity": "^4.3.1",
    "@react-native-async-storage/async-storage": "2.1.2",
    "@react-native-kakao/core": "^2.4.0",
    "@react-native-kakao/share": "^2.4.0",
    "@react-native-kakao/social": "^2.4.0",
    "@react-native-kakao/user": "^2.4.0",
    "@react-native-masked-view/masked-view": "0.3.2",
    "@react-navigation/native": "^7.1.6",
    "@sentry/react-native": "^6.14.0",
    "@shopify/flash-list": "1.7.6",
    "@shopify/react-native-skia": "2.0.7",
    "@tanstack/react-query": "5.74.0",
    "airbridge-expo-sdk": "^4.6.0",
    "airbridge-react-native-sdk": "^4.6.0",
    "base-64": "^1.0.0",
    "expo": "~53.0.23",
    "expo-apple-authentication": "^7.2.4",
    "expo-asset": "~11.1.7",
    "expo-build-properties": "~0.14.8",
    "expo-clipboard": "~7.1.5",
    "expo-crypto": "~14.1.4",
    "expo-dev-client": "~5.2.4",
    "expo-device": "~7.1.4",
    "expo-font": "~13.3.2",
    "expo-haptics": "~14.1.4",
    "expo-image-picker": "^16.1.4",
    "expo-intent-launcher": "~12.1.5",
    "expo-linear-gradient": "~14.1.5",
    "expo-linking": "~7.1.7",
    "expo-local-authentication": "~16.0.5",
    "expo-location": "~18.1.6",
    "expo-network": "~7.1.5",
    "expo-notifications": "~0.31.4",
    "expo-router": "~5.1.7",
    "expo-secure-store": "~14.2.4",
    "expo-splash-screen": "~0.30.10",
    "expo-status-bar": "~2.2.3",
    "expo-store-review": "~8.1.5",
    "expo-system-ui": "~5.0.11",
    "expo-task-manager": "~13.1.6",
    "expo-tracking-transparency": "~5.2.4",
    "expo-web-browser": "~14.2.0",
    "jotai": "^2.12.4",
    "lottie-react-native": "7.2.2",
    "nativewind": "^4.1.23",
    "react": "19.0.0",
    "react-hook-form": "^7.46.1",
    "react-native": "0.79.6",
    "react-native-barcode-creator": "^0.1.8",
    "react-native-blob-util": "^0.22.2",
    "react-native-calendars": "^1.1312.1",
    "react-native-channel-plugin": "^0.11.5",
    "react-native-draggable": "^3.3.0",
    "react-native-exit-app": "^2.0.0",
    "react-native-gesture-handler": "~2.26.0",
    "react-native-intersection-observer": "^0.2.1",
    "react-native-keyboard-controller": "^1.1.0",
    "react-native-mmkv": "^3.2.0",
    "react-native-network-logger": "^2.0.1",
    "react-native-pager-view": "^6.7.1",
    "react-native-pdf": "^7.0.2",
    "react-native-permissions": "^5.4.1",
    "react-native-reanimated": "~3.18.0",
    "react-native-reanimated-carousel": "^4.0.2",
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "~4.11.1",
    "react-native-share": "^12.0.11",
    "react-native-tab-view": "^4.1.0",
    "react-native-turbo-image": "^1.23.0",
    "react-native-webview": "^13.13.5",
    "rxjs": "^7.8.0",
    "simple-statistics": "^7.8.8",
    "tailwindcss": "^3.4.17"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@hot-updater/aws": "0.19.9",
    "@hot-updater/expo": "0.19.9",
    "@hot-updater/sentry-plugin": "^0.20.11",
    "@types/base-64": "^1.0.2",
    "@types/react": "~19.0.10",
    "babel-plugin-react-compiler": "19.1.0-rc.2",
    "chokidar-cli": "^3.0.0",
    "dotenv": "16.4.7",
    "eslint": "^9.0.0",
    "eslint-config-expo": "~9.2.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.4.0",
    "eslint-plugin-react-compiler": "19.1.0-rc.2",
    "eslint-plugin-unused-imports": "^4.1.4",
    "expo-module-scripts": "^4.1.7",
    "hot-updater": "^0.19.9",
    "jest": "^29.2.1",
    "jest-expo": "~53.0.10",
    "npm-run-all": "^4.1.5",
    "prettier": "^3.5.3",
    "react-test-renderer": "19.0.0",
    "typescript": "~5.8.3"
  },

Relevant log output

Reproducible Sample Repository

no

Code of Conduct

• I agree to follow this project's Code of Conduct

[mym0404]

hello, Could you record this issue?

[terrykwon]

Experienced the same issue.

Seems like adding an anchor fixes this:

<NaverMapView
  ...
  locationOverlay={{
    anchor: { x: 0.5, y: 0.5 }
  }}
>

[Arthur-Noh]

After setting the anchor to fix the iOS issue, a problem occurred on Android.

It seems that if you also want to use anchor on Android, you need to include isVisible: true as well.

<NaverMapView
    ...
    locationOverlay={{
        isVisible: true,
        anchor: { x: 0.5, y: 0.5 },
    }}
/>

[SuhrobAbdumalikov]

i use custom icons for marker, i encountered the same issue as u all mention above..

mycode:

        <View style={$container}>
          {isLoading && <Loader variants="overlay" />}
          <NaverMapView
            ref={mapRef}
            style={{ flex: 1 }}
            mapType="Basic"
            animationEasing="EaseIn"
            isShowCompass={false}
            isShowLocationButton={false}
            locationOverlay={{
              anchor: { x: 0.5, y: 0.5 },
            }}
            layerGroups={{
              BUILDING: true,
              TRAFFIC: false,
              BICYCLE: true,
              CADASTRAL: false,
              MOUNTAIN: false,
              TRANSIT: false,
            }}>
            {places?.map(place => (
              <NaverMapMarkerOverlay
                key={place._id}
                latitude={place.location.coordinates[1]}
                longitude={place.location.coordinates[0]}
                {...(isAndroid() && { width: 180, height: 130 })}
                onTap={() =>
                  handleMarkerTab({
                    id: place._id,
                    lat: place.location.coordinates[1],
                    lng: place.location.coordinates[0],
                  })
                }>
                <View collapsable={false} style={$mapMarkerContainer}>
                  {place.type === 'CAFE' ? (
                    <MarkerCafe />
                  ) : place.type === 'MOSQUE' ? (
                    <MarkerMosque />
                  ) : (
                    <MarkerStore />
                  )}
                  <View style={$mapTextContainer}>
                    <Text
                      style={$mapText}
                      size="xs"
                      weight="regular"
                      numberOfLines={1}>
                      {place.type === 'CAFE'
                        ? place.cafe_name
                        : place.type === 'STORE'
                        ? place.store_name
                        : place.title}
                    </Text>
                  </View>
                </View>
              </NaverMapMarkerOverlay>
            ))}

            {/* User current location marker */}
            {userLocation && (
              <NaverMapMarkerOverlay
                key="userCurrentLocation"
                latitude={userLocation.latitude}
                longitude={userLocation.longitude}
                anchor={{ x: 0.5, y: 1 }}
                {...(isAndroid() && { width: 150, height: 80 })}>
                <View
                  collapsable={false}
                  style={[$mapMarkerContainer, { gap: 4 }]}>
                  <MapLocationMarker />
                  <View style={$mapTextContainer}>
                    <Text
                      style={$mapText}
                      size="xs"
                      weight="regular"
                      numberOfLines={1}>
                      {translate('map.currentLocation')}
                    </Text>
                  </View>
                </View>
              </NaverMapMarkerOverlay>
            )}
          </NaverMapView>

          {/* top search and filter container */}
          <View style={[$topContainer, { top: top + 8 }]}>
            <Input
              placeholder={translate('common.searchPlaceholder')}
              keyboardType="ascii-capable"
              inputContainerStyle={{ height: 42, borderRadius: 8 }}
              onPress={handleNavigateToSearch}
              leftIcon={
                <SearchIcon width={18} height={18} stroke={Colors.textGray} />
              }
            />
            <View style={$tabsContainer}>
              {MapFilterOption.map(tab => (
                <TabItem
                  key={tab.value}
                  label={tab.label}
                  isActive={tab.value === selectedTab}
                  onPress={() => handleSelectTab(tab.value)}
                />
              ))}
            </View>
          </View>

          {/* Current Location Icon */}
          <IconButton
            isRadius
            style={$currentLocationButton}
            onPress={handleTabCurrentLocation}>
            <CurrentLocationIcon width={26} height={26} />
          </IconButton>

          {/* Bottom Sheet */}
          <BottomSheetContent
            bottomSheetRef={bottomSheetRef}
            filteredData={places || []}
            onPlaceSelect={handlePlaceSelect}
            selectedPlaceId={selectedPlaceId}
          />
        </View>

how can i fix that, can u give me solution..??