I always get this error ERROR Warning: TypeError: Cannot read property 'bubblingEventTypes' of null when I add provider: {PROVIDER_GOOGLE} on my MapView

Here is my code, I use gluestack-ui as UI library that is why I'm using Box as View:

<Box className='flex-1 h-full bg-gray-500'>
  <MapView
    style={StyleSheet.absoluteFillObject}
    provider={PROVIDER_GOOGLE}
  />
</Box>

I also tried:

<View style={StyleSheet.absoluteFillObject}>
  <MapView
    style={StyleSheet.absoluteFillObject}
    provider={PROVIDER_GOOGLE}
  />
</View>

Here are the reference link that I followed: expo mapview and installation guide.

The image below is the error:

THANK YOU FOR YOUR HELP!!!

I always get this error ERROR Warning: TypeError: Cannot read property 'bubblingEventTypes' of null when I add provider: {PROVIDER_GOOGLE} on my MapView

Here is my code, I use gluestack-ui as UI library that is why I'm using Box as View:

<Box className='flex-1 h-full bg-gray-500'>
  <MapView
    style={StyleSheet.absoluteFillObject}
    provider={PROVIDER_GOOGLE}
  />
</Box>

I also tried:

<View style={StyleSheet.absoluteFillObject}>
  <MapView
    style={StyleSheet.absoluteFillObject}
    provider={PROVIDER_GOOGLE}
  />
</View>

Here are the reference link that I followed: expo mapview and installation guide.

The image below is the error:

THANK YOU FOR YOUR HELP!!!

• react-native
• google-maps
• expo
• react-native-maps
• gluestack

Share Improve this question Follow asked Nov 21, 2024 at 1:48 ctltctlt 14611 silver badge99 bronze badges 1

• This error appears only on iOS, I fot to mention on my question. Thanks! – ctlt Commented Nov 22, 2024 at 9:23

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 3

Yes, you are using the expo go that is why you are facing the issue, You need to define the app.json. and make the development build not the expo go using the expo-dev-client

"ios": {
  "config": {
    "googleMapsApiKey": "API-key"
}

and for the Android

"android": {
  "config": {
    "googleMaps": {
        "apiKey": "API-key "
    }
  }
}

This is a bug in Expo Go! Because according to Expo documentation: https://docs.expo.dev/versions/latest/sdk/map-view/, MapView component is packaged with Expo Go. They have actualy highlighted that paragraph! I am about to report this as a bug.

Update: Bug is filed against Expo for SDK 52: https://github/expo/expo/issues/33225

Even if you use dev build, you may encounter the other bug I filed here: https://github/expo/expo/issues/33212. Unfortunately I think MapView has not been tested properly in Expo SDK 52. Expo SDK version 51 works perfectly fine for me though, and that is what I use for refactoring my production code.

I was facing the same issue when i updated my expo from 50 to 52 and on my side the bug got resolved when I changed the provider from "PROVIDER_GOOGLE" to "PROVIDER_DEFAULT".

<MapView provider={PROVIDER_DEFAULT}></MapView>

version

1. "expo": "^52.0.18",
2. "react-native": "0.76.5",
3. "react-native-maps": "1.18.0",

---

Firstly installing these three packages worked for me

npm i react-native-reanimated react-native-screens react-native-safe-area-context

Read my update and just try installing only this to get rid of bubblingEventTypes error:

npm i  react-native-safe-area-context

---

And don't fet to enter API KEY meta-data in application tag in your android\app\src\main\AndroidManifest.xml as below.

<application
  ...
>
  <meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_KEY_HERE" />

If you dont have API KEY you will get gray screen with a Google logo at the bottom left. This means that your mapview is working.

---

Updated: Later on I removed react-native-reanimated and react-native-screens because after the build they started taking up a lot of space, their intermediates folder and .cxx folder were taking up more than +2.5GB.

After deleting react-native-reanimated and react-native-screens my project size reduced 3.3GB to 830MB.

Most probably they are no longer compatible with new gradle verisons mine is gradle-8.11.1-bin ( as of 2024-11 ).

Now among the three I only have react-native-safe-area-context and no 'bubblingEventTypes of null error'.

Good luck.