rnmapbox / maps

A Mapbox react native module for creating custom maps
MIT License
2.27k stars 849 forks source link

Compass not rendering on android #1759

Closed Artotim closed 2 years ago

Artotim commented 2 years ago

Describe the bug
The compass that is supposed to appear during rotation of the map it's not rendering (android).

To Reproduce
Followed the instructions from install.md

With versions:

    rnmbglMapboxLibs = {
        implementation 'com.mapbox.mapboxsdk:mapbox-android-sdk:9.7.1'
        implementation 'com.mapbox.mapboxsdk:mapbox-sdk-services:5.8.0'
        implementation 'com.mapbox.mapboxsdk:mapbox-sdk-turf:5.8.0'
        implementation 'com.mapbox.mapboxsdk:mapbox-android-gestures:0.7.0'
    }

    rnmbglMapboxPlugins = {
        implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-annotation-v9:0.8.0'
        implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-localization-v9:0.14.0'
        implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-markerview-v9:0.4.0'
    }

and a clean install.

Please include a single standalone React Native component.

export default class MapBoxScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render() {
        return (
            <MapboxGL.MapView
                style={{flex:.9}}
                compassEnabled={true}
                compassViewPosition={1}
            >
            </MapboxGL.MapView>
        );
    }
}

Expected behavior
Expected the compass to show on rotation on the top right corner.

Actual behavior
Compass is not rendering

Screenshots
image

Versions (please complete the following information):

Artotim commented 2 years ago

Closing issue because it got fixed by the last update (8.6.0)

RobertSasak commented 2 years ago

I am facing the same issue of missing compass. However simple update in package.json did not help. I do have the same version for implementation as stated above.

-"@react-native-mapbox-gl/maps": "8.5.0",
+"@react-native-mapbox-gl/maps": "8.6.0-beta.0",

@Artotim Have you done any other changes?

So far only solution was to remove whole section of rnmbglMapboxLibs from build.gradle. Which downgrades mapbox-android-sdk to 9.1.0.

rnmbglMapboxLibs = {
        implementation 'com.mapbox.mapboxsdk:mapbox-android-sdk:9.7.1'
        implementation 'com.mapbox.mapboxsdk:mapbox-sdk-services:5.8.0'
        implementation 'com.mapbox.mapboxsdk:mapbox-sdk-turf:5.8.0'
        implementation 'com.mapbox.mapboxsdk:mapbox-android-gestures:0.7.0'
    }

    rnmbglMapboxPlugins = {
        implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-annotation-v9:0.8.0'
        implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-localization-v9:0.14.0'
        implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-markerview-v9:0.4.0'
    }
RobertSasak commented 2 years ago

I still don't know why it does not work, but I found following workaround. It simply set compass image again. Remember to also set compassViewPosition on Map. Please let me know if there is a better solution.

diff --git a/node_modules/@rnmapbox/maps/android/rctmgl/src/main/java-mapboxgl/common/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java b/node_modules/@rnmapbox/maps/android/rctmgl/src/main/java-mapboxgl/common/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java
index 6019a22..1ea3445 100644
--- a/node_modules/@rnmapbox/maps/android/rctmgl/src/main/java-mapboxgl/common/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java
+++ b/node_modules/@rnmapbox/maps/android/rctmgl/src/main/java-mapboxgl/common/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java
@@ -1165,6 +1165,7 @@ public class RCTMGLMapView extends MapView implements OnMapReadyCallback, Mapbox
         }

         if (mCompassViewPosition != -1 && uiSettings.isCompassEnabled()) {
+            uiSettings.setCompassImageResource(R.drawable.mapbox_compass_icon);
             switch (mCompassViewPosition) {
                 case 0:
                     uiSettings.setCompassGravity(Gravity.TOP | Gravity.START);