[Bug]: Android - Compass not rotating on initial load

[Bastich-dev]

Mapbox Implementation

Mapbox

Mapbox Version

10.7.0

Platform

Android

@rnmapbox/maps version

10.0.0-beta.64 & 10.0.0-beta.62

Standalone component to reproduce

import { MAPBOX_ACCESS_TOKEN } from '@constants';

import MapboxGL, { MapView } from '@rnmapbox/maps';

import { Button, Text, View } from 'react-native';

import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import React , { useState } from 'react';

MapboxGL.setAccessToken(MAPBOX_ACCESS_TOKEN);

export default function App() {
    const Stack = createStackNavigator();

    return (
        <NavigationContainer>
            <Stack.Navigator id="App">
                <Stack.Screen name={'MAP_SCREEN'} component={PageMap} />
                <Stack.Screen name={'OTHER_SCREEN'} component={PageOther} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

function PageMap() {
    const { navigate } = useNavigation();
    const [compassWorking, setCompassWorking] = useState(false);

    return (
        <View style={fullPageStyle}>
            <Button
                title="go to OTHER screen"
                onPress={() => {
                    setCompassWorking(true);
                    navigate('OTHER_SCREEN');
                }}
            />
            <Text>
                {compassWorking
                    ? 'Now the compass rotating well'
                    : 'The compass not rotating until you go to another screen and go back to this screen'}
            </Text>
            <MapView
                style={{ flex: 1 }}
                compassEnabled={true}
                rotateEnabled={true}
                scrollEnabled={true}
                pitchEnabled={true}
            />
        </View>
    );
}

function PageOther() {
    const { navigate } = useNavigation();
    return (
        <View style={fullPageStyle}>
            <Button title="go back to MAP screen" onPress={() => navigate('MAP_SCREEN')} />
            <Text>Now go back to Map Screen and the compass will rotating well</Text>
        </View>
    );
}

const fullPageStyle = {
    width: '100%',
    height: '100%',
    backgroundColor: '#FF000022',
};

Observed behavior and steps to reproduce

The compass on initial load of MapView not rotating until you go to another screen, and go back to the screen with the map.

After go to antoher screen and go back to the screen map, the compass work perfectly.

Expected behavior

Compass rotate on the first render of MapView

Notes / preliminary analysis

Android version : 12 SP1A.210812.016
Development environment
Using Expo 47.0.0

Packages version tested :

@react-navigation/native : 6.1.2 & 6.0.10
@react-navigation/stack : 6.3.11 & 6.2.1
@rnmapbox/maps : 10.0.0-beta.64 & 10.0.0-beta.62
expo : 47.0.0

---

Maybe kinda related to these pull requests :
#2427
#2352

Additional links and references

You'll need these two libs in addition for make the exemple work :

• @react-navigation/native
• @react-navigation/stack

I think you can copy/paste the exemple ( except the MAPBOX_ACCESS_TOKEN ) and see what is going wrong.

Do you think you could make it rotate work for the next beta version ?
Or maybe you got a little hack in React-native to resolve this ?

BIG Thanks for providing this lib 👍

[jfaq89]

I am experiencing the same problem. Any news here?

[jfaq89]

In my case I am using 10.0.0-beta.69

[mfazekas]

I was testing with current main and it seems to work on first load. So should be fixed in beta70

[mfazekas]

This was the component I've used to reproduce in our test app:

import MapboxGL, { MapView } from '@rnmapbox/maps';
import { Button, Text, View } from 'react-native';
import React, { useState } from 'react';

function PageMap({navigation}) {
  const [compassWorking, setCompassWorking] = useState(false);

  return (
    <View style={{ flex: 1 }}>
      <Button
        title="go to OTHER screen"
        onPress={() => {
          setCompassWorking(true);
          navigation.navigate('ScreenWithoutMap');
        }}
      />
      <Text>
        {compassWorking
          ? 'Now the compass rotating well'
          : 'The compass not rotating until you go to another screen and go back to this screen'}
      </Text>
      <MapView
        style={{ flex: 1 }}
        compassEnabled={true}
        rotateEnabled={true}
        scrollEnabled={true}
        pitchEnabled={true}
      />
    </View>
  );
}

const fullPageStyle = {
  width: '100%',
  height: '100%',
  backgroundColor: '#FF000022',
};

export default PageMap;

[mfazekas]

Actually still see the issue

---

Some notes to myself, when it's working it's working via this:

onCameraMove:188, CompassViewPlugin
lambda 'forEach' in 'onCameraMove':153, MapPluginRegistry
onCameraMove:152, MapPluginRegistry
_init_$lambda-0:83, MapController
...
onCameraChanged:-1, MapController$$ExternalSyntheticLambda1
..
setCamera:-1, CameraManager

[wen-kai]

As of the past month on Android we've had to explicitly call locationManager.start() for user location/heading to update; otherwise, UserLocation would just stay stuck on initial load. May be related here?