[Bug][MapboxV10] - Expo SDK45: Compass position and fade not working

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

Android

@rnmapbox/maps version

^10.0.0-beta.57

Standalone component to reproduce

import React from 'react';
import {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
} from '@rnmapbox/maps';

const aLine = {
  type: 'LineString',
  coordinates: [
    [-74.00597, 40.71427],
    [-74.00697, 40.71527],
  ],
};

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{flex: 1}} styleJSON={styleJSON}
                animated={true}
                zoomEnabled={true}
                rotateEnabled={true}
                scrollEnabled={true}
                pitchEnabled={true}
                compassEnabled={true}
                compassFadeWhenNorth={false}
                compassPosition={{ top: 80, right: 80 }}
                logoEnabled>
        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
        <ShapeSource id="idStreetLayer" shape={aLine}>
          <LineLayer id="idStreetLayer" />
        </ShapeSource>
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

Hi,

When trying to change the position of the compass, it gets stuck at the top right. Same for the compassFadeWhenNorth props which is always true.

Thx, Cyril

Expected behavior

import React from 'react';
import {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
} from '@rnmapbox/maps';

const aLine = {
  type: 'LineString',
  coordinates: [
    [-74.00597, 40.71427],
    [-74.00697, 40.71527],
  ],
};

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{flex: 1}} styleJSON={styleJSON}
                animated={true}
                zoomEnabled={true}
                rotateEnabled={true}
                scrollEnabled={true}
                pitchEnabled={true}
                compassEnabled={true}
                compassFadeWhenNorth={false}
                compassPosition={{ top: 80, right: 80 }}
                logoEnabled>
        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
        <ShapeSource id="idStreetLayer" shape={aLine}>
          <LineLayer id="idStreetLayer" />
        </ShapeSource>
      </MapView>
    );
  }
}

Notes / preliminary analysis

No response

Additional links and references

No response

[emendo-web]

Hi,

I tested with 10.0.0-beta.59 and I still the same problem. The props compassPosition don’t change the position.

Only compassViewPosition and compassViewMargins props working

Thx, Cyril

[emendo-web]

Solution finded.

With expo you need to set plugin in app.config.js (Not tested with typescript). in plugins array.

If you set the plugins in your app.json you don’t use V10

Only compass rotation is not refresh now