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

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 👍

Start with the standalone React Native reproduction in the issue and verify the MapView compass behavior on the first render, then compare it with the behavior after navigating to OTHER_SCREEN and back. Review pull requests #2427 and #2352 for related context. Done means the compass rotates on the initial MapView render without requiring navigation away and back.