this.getNativeComponent undefined error and Cannot read property ‘bubblingEventTypes’ of null tell you how to fix in Fabric

Start by reproducing the iOS Google Maps case with React Native 0.76.0 and react-native-maps 1.23.8 using the MapView sample. Inspect src/MapMarker.tsx and the provider-related MapView usage, then verify the reported errors are resolved without editing node_modules directly.

Summary

I meet the problem about this.getNativeComponent undefined error and ‘bubblingEventTypes’ of null when i use RN/0.76.0 and react-native-maps v1.23.8, it take me long time to fix, i will share how to fix them here now!

Reproducible sample code

<MapView
                ref={mapRef}
                mapType={'standard'}
                zoomControlEnabled={true}
                style={{ ...StyleSheet.absoluteFillObject }}
                // provider={PROVIDER_GOOGLE}
                initialRegion={{
                  latitude,
                  longitude,
                  latitudeDelta: delta,
                  longitudeDelta: delta,
                }}
              >

Steps to reproduce

RN/0.76.0
react-native-maps v1.23.8

Expected result

First, you will meet the problem ‘bubblingEventTypes’ of null.
You only to deleted provider in
<MapView
ref={mapRef}
mapType={'standard'}
zoomControlEnabled={true}
style={{ ...StyleSheet.absoluteFillObject }}
// provider={PROVIDER_GOOGLE}
initialRegion={{
latitude,
longitude,
latitudeDelta: delta,
longitudeDelta: delta,
}}
>

Second, you will meet the problem this.getNativeComponent undefined error.
Go to the file node_modules/react-native-maps/src/MapMarker.tsx
// getNativeComponent!: () => NativeComponent; //deleted

That it all, you will work fine!

Actual result

if you have any other problem you can tell me.

React Native Maps Version

1.23.8

What platforms are you seeing the problem on?

iOS (Google Maps)

React Native Version

0.76.0

What version of Expo are you using?

Not using Expo

Device(s)

iphone 16

Additional information

No response