Fix getPointInView function return wrong point position on Android

[cuongncwork]

Description

Fixes: getPointInView function return wrong point position on Android.

Checklist

• I've read CONTRIBUTING.md
• I updated the doc/other generated code with running yarn generate in the root folder
• I have tested the new feature on /example app.
  • In V11 mode/ios
  • In New Architecture mode/ios
  • In V11 mode/android
  • In New Architecture mode/android
• I added/updated a sample - if a new feature was implemented (/example)

[cuongncwork]

Patch: @rnmapbox+maps+10.1.45.patch

diff --git a/node_modules/@rnmapbox/maps/android/src/main/java/com/rnmapbox/rnmbx/components/mapview/RNMBXMapView.kt b/node_modules/@rnmapbox/maps/android/src/main/java/com/rnmapbox/rnmbx/components/mapview/RNMBXMapView.kt
index c340bd8..308b27e 100644
--- a/node_modules/@rnmapbox/maps/android/src/main/java/com/rnmapbox/rnmbx/components/mapview/RNMBXMapView.kt
+++ b/node_modules/@rnmapbox/maps/android/src/main/java/com/rnmapbox/rnmbx/components/mapview/RNMBXMapView.kt
@@ -901,11 +901,13 @@ open class RNMBXMapView(private val mContext: Context, var mManager: RNMBXMapVie

     fun getPointInView(coordinate: Point, response: CommandResponse) {
         val point = mMap!!.pixelForCoordinate(coordinate)
+        val density = getDisplayDensity()
+        val pointInView = PointF((point.x / density).toFloat(), (point.y / density).toFloat())

         response.success {
             val array: WritableArray = WritableNativeArray()
-            array.pushDouble(point.x)
-            array.pushDouble(point.y)
+            array.pushDouble(pointInView.x.toDouble())
+            array.pushDouble(pointInView.y.toDouble())
             it.putArray("pointInView", array)
         }
     }

@rnmapbox+maps+10.1.45.patch

[mfazekas]

@cuongncwork thanks much for the PR, looks great! Can you please add a minimal component to reproduce the issue you're fixing?

[cuongncwork]

I’ve added a minimal repro component. It shows that on Android the getPointInView function was returning the wrong position. After applying this PR, the point now matches the correct screen position of the marker.

import React, { useRef, useEffect, useState } from "react"
import { View, Text, StyleSheet } from "react-native"
import MapboxGL from "@rnmapbox/maps"
import Config from "react-native-config"

MapboxGL.setAccessToken(Config.MAP_BOX_TOKEN)

export const DrivingTargetScreen = () => {
  const mapRef = useRef(null)
  const [point, setPoint] = useState(null)

  useEffect(() => {
    async function test() {
      if (mapRef.current) {
        const result = await mapRef.current.getPointInView([105.85, 21.025])
        setPoint(result)
      }
    }
    setTimeout(test, 2000)
  }, [])

  return (
    <View style={styles.flex}>
      <MapboxGL.MapView ref={mapRef} style={styles.flex} styleURL={MapboxGL.StyleURL.Street}>
        <MapboxGL.Camera
          bounds={{
            ne: [105.8, 21.0],
            sw: [105.9, 21.05],
          }}
          heading={45}
          animationMode="flyTo"
          animationDuration={2000}
        />
        <MapboxGL.PointAnnotation id="center" coordinate={[105.85, 21.025]} />
      </MapboxGL.MapView>
      {point && (
        <>
          <View
            style={{
              backgroundColor: "red",
              position: "absolute",
              borderRadius: 15,
              borderWidth: 2,
              borderColor: "#FFFFFF",
              borderStyle: "solid",
              width: 30,
              height: 30,
              top: point[1] - 15,
              left: point[0] - 15,
            }}
          />
          <Text
            style={{
              backgroundColor: "white",
              position: "absolute",
              padding: 20,
              bottom: 20,
              left: 20,
              right: 20,
            }}
          >
            PointInView: {JSON.stringify(point)}
          </Text>
        </>
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
})

Result:
Before

After apply fixed code

[mfazekas]

@cuongncwork thanks much, great work!