(NOBRIDGE) ERROR Warning: TypeError: Cannot read property 'bubblingEventTypes' of null | Getting in new architecture

[Prajwaltechversant]

(NOBRIDGE) ERROR Warning: TypeError: Cannot read property 'bubblingEventTypes' of null

This error is located at:
in AutoLayoutView (created by AutoLayoutView)
in AutoLayoutView (created by ScrollComponent)
in RCTView (created by View)
in View (created by ScrollComponent)
in RCTView (created by View)
in View (created by ScrollView)
in RCTScrollView (created by ScrollView)
in ScrollView (created by ScrollView)
in ScrollView (created by ScrollComponent)
in ScrollComponent (created by ProgressiveListView)
in ProgressiveListView (created by StickyContainer)
in RCTView (created by View)
in View (created by StickyContainer)
in StickyContainer (created by FlashList)
in FlashList (created by App)
in RCTView (created by View)
in View (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in AwesomeProject(RootComponent)

[Prajwaltechversant]

{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@shopify/flash-list": "^1.7.1",
"react": "18.3.1",
"react-native": "0.75.2",
"react-native-walkthrough-tooltip": "^1.6.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/babel-preset": "0.75.2",
"@react-native/eslint-config": "0.75.2",
"@react-native/metro-config": "0.75.2",
"@react-native/typescript-config": "0.75.2",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "18.3.1",
"typescript": "5.0.4"
},
"engines": {
"node": ">=18"
},
"packageManager": "yarn@3.6.4"
}

newArchEnabled=true
hermesEnabled=true

[Prajwaltechversant]

steps to reproduce

1. create a new project with react native
2. Set newArchEnabled=true in android/gradle.properties
3. install flashlist
4. import and create list with flashlist
5. run the project, will get the error

[jeroen-van-dijk]

Make sure you did run pod install from the iOS folder:

https://github.com/react-native-linear-gradient/react-native-linear-gradient?tab=readme-ov-file#troubleshooting

[Prajwaltechversant]

i was running for android only from windows

[vecchiomatias]

Did you find any solution?.. I'm getting the same error but for iOS.

[Prajwaltechversant]

No , i think issue is only if you enable the newArchitecture of react native

[WooMinGy]

@Prajwaltechversant

I'm using
"react-native": "0.75.2",
"@shopify/flash-list": "1.7.1",
"react-native-reanimated": "3.15.1",
among others. As I understand, FlashList has a dependency on Reanimated.

Even if you’re not using Reanimated directly, it might be worth installing it. If you do install Reanimated, don't forget to add 'react-native-reanimated/plugin' to the plugins section of your babel.config.js file!

In my case, I was able to resolve the issue by following these steps:

1. rm -rf node_modules
2. rm pnpm-lock.yaml (I ran this from the root in a monorepo setup. If you're not using a monorepo and using Yarn, remove the yarn.lock file instead)
3. pnpm install (or yarn)
4. pnpm start --reset-cache (to restart Metro)
5. pnpm android (to run the Android app)

[durango]

This issue persist even when newArchitecture is disabled. This solution may work for you:

1. npm i react-native-reanimated react-native-screens react-native-safe-area-context
2. Add {..., plugins: ['react-native-reanimated/plugin']} to the babel.config.js file
3. npx pod-install (or cd ios && pod install)
4. npm run ios

There is most likely a version mismatch somewhere within the dependencies. Here are my versions:

    "react-native-reanimated": "^3.15.3",
    "react-native-safe-area-context": "^4.11.0",
    "react-native-screens": "^3.34.0",

If the above does not work for you, try installing react-native-gesture-handler then repeat steps 3 and 4.

[PedimallaRaju]

I am also facing the issue, Can anyone give me the solution to this

[maukoese]

I've been struggling with this issue for the past one hour, I've realized removing the provider={PROVIDER_GOOGLE} prop the map works just fine, which is unfortunated cause the maps on iOS are not all that.

Hope this helps someone else.

[richkuo]

adding the prop estimatedItemSize with a valid value fixed it for me

[oosunkeye]

I've been struggling with this issue for the past one hour, I've realized removing the provider={PROVIDER_GOOGLE} prop the map works just fine, which is unfortunated cause the maps on iOS are not all that.

Hope this helps someone else.

Thanks, it fixes the problem

[mentesc]

I've been struggling with this issue for the past one hour, I've realized removing the provider={PROVIDER_GOOGLE} prop the map works just fine, which is unfortunated cause the maps on iOS are not all that.

Hope this helps someone else.

Hey @maukoese, did you find a way to switch provider to google

[roxanatera]

Me pasaba lo mismo.
pero en Andoid/gradle.properties
newArchEnabled=false(android) Se soluciono el problema.

[steveninety]

Hopefully this will get looked at. The only workaround is disabling the new architecture...

Context:
I went Expo V51 + RN 0.75 + old architecture, when this wasn't bugged yet, to V52 + RN 0.76.2 + new architecture, and the bug came. A new, fresh (cache-cleaned) development build on my emulator with newArch back to false, did NOT fix it for me. Then, a fresh (EAS) build on my Android device DID successfully fix it.

Conclusion:
So it isn't the RN/Expo upgrade by itself, but it definitely is the newArch (possibly in combination with those dependency upgrades, but I can't know for sure).

[mativecchio]

Solved with this surajitsarkar19/react-native-radial-gradient#49 (comment).

I hope it helps.

[issam-seghir]

I'm having the same problem

[abhishekvermax]

For me it was giving same error and I followed below step : (Assuming API is properly setup)

npx expo prebuild
npx react-native run-android 

After running these 2 commands i deleted Android and Ios folders and ran

npm start

then selected "development build"

after that selected android and map showed up fine.

[GideonOdiokine]

Could someone possibly help me with a solution?

[minhnc]

I also got same issue, tried all above suggestions but no luck

[NJneeraj]

Try Uninstalling the app..and then rebuild the project.Worked for me.

[IonutDaniel99]

Rollback to old React-Native (under 0.75.4) as the new 0.76 use a new architecture which most of libraries are not yet updated and it throws this problem.

[alitsvin]

Decided to switch back to FlatList until this issue will be resolved

[Monir-Shembesh]

Any Updates on this?

[OmarSaidIbrahim]

+1

[IonutDaniel99]

I figured out after several trial and error that this was also a problem from patches of different libraries.
In my case i had an error on React-Charts so i did a patch. That patch created the bubblingEventTypes because the return type was incorrect .

Might be worth looking if you have applied patches over node_modules libraries.

[Bauss9]

It is a lie that shopify is not working with RN's new architecture. Just do a pod install after installing the FlashList library. This fixed it for me.

Source that FlashList works with RN's new architecture:

https://x.com/naqvitalha/status/1808911329215873093

[Monir-Shembesh]

if you are using expo do not use NPX expo install. Just install the latest version and it should work fine.

[mohanataraj]

Looks like the issue persists for me. Both on andriod and ios device build. weird

[EKoetsjarjan]

I had this issue and it was resolved by:

• I removed my yarn workspaces nohoist property
• removed node-modules folders
• running yarn again
• restart metro
• pressing r for reload

not sure if it wil help for you