Map is not rendered properly on new arhictecture of React Native

YMirzaa commented 2 months ago

Summary

When new architecture enabled with [ "expo-build-properties", { "ios": { "newArchEnabled": true }, "android": { "newArchEnabled": true } } ] on app.json,
onMapReady={() => { console.log('Map ready'); }} function doesn't fire, or any of the markers inside <MapView/> don't render. This issue happens when reloading app with ctrl+r, not on the first render. For example, after starting the app with expo command npx expo run:android --device, the map rendered normally and callbacks are fired. But when reloading app markers are not rendered or callbacks fired.

Reproducible sample code

import { StyleSheet, View } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

export default function MapScreen() {
    return (
        <View style={styles.container}>
            <MapView
                style={styles.map}
                initialRegion={{
                    latitude: 37.78825,
                    longitude: -122.4324,
                    latitudeDelta: 0.0922,
                    longitudeDelta: 0.0421,
                }}
                provider='google'
                onMapReady={() => {
                    console.log('Map ready');
                }}
            >
                <Marker
                    coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
                    title='Marker'
                    description='This is a marker'
                />
            </MapView>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    map: {
        ...StyleSheet.absoluteFillObject,
    },
});

Steps to reproduce

[ ] Check if the marker rendered normally and callback is fired after the map is rendered
[ ] Add plugin to app.json [ "expo-build-properties", { "ios": { "newArchEnabled": true }, "android": { "newArchEnabled": true } } ]]
[ ] Prebuild the native files.
[ ] Run app.
[ ] Fire onMapReady function or check markers

Expected result

After reloading the app with new architecture, sometimes map normally renders but most of the time it doesn't render any markers or fire callback onMapReady

Actual result

Screenshot from 2024-09-07 02-12-45

React Native Maps Version

1.14.0

What platforms are you seeing the problem on?

Android

React Native Version

72.2

What version of Expo are you using?

SDK 51

Device(s)

Samsung Galaxy M51

DavidAmyot commented 2 months ago

+1 I have the same issue with the latest version of expo and the new architecture.

Is there a workaround without disabling the new architecture?

Thanks :)

YMirzaa commented 2 months ago

+1 I have the same issue with the latest version of expo and the new architecture.

Is there a workaround without disabling the new architecture?

Thanks :)

I had to disable new arch. But if there are I would love to know

DavidAmyot commented 3 weeks ago

@salah-ghanim Any news on this? The new react native architecture is about to become the default and the new Expo sdk 52 is in beta for like 1 more week or so, this will become an issue for many.

Dosbodoke commented 2 weeks ago

Today I updated to Expo 52 and enabled new arch. Markers, satellite mode and user location marker stopped working.

DavidAmyot commented 1 week ago

@salah-ghanim Anything? Sorry for the pinging, it's just that this impacts many people, especially with the new architecture. React-native-maps is preventing us from using the new react native architecture.