[BUG] Cannot read property 'bubblingEventTypes' of null

[janandaraj]

Unable to use the ProgressiveImage

 ERROR  Warning: TypeError: Cannot read property 'bubblingEventTypes' of null

This error is located at:
    in FastImageView (created by FastImageBase)
    in RCTView (created by View)
    in View (created by FastImageBase)
    in FastImageBase (created by FastImage)
    in FastImage (created by Animated(FastImage))
    in Animated(FastImage) (created by ProgressiveImage)
    in RCTView (created by View)
    in View (created by ProgressiveImage)
    in ProgressiveImage (created by CellRenderer)
    in RCTView (created by View)
    in View (created by CellRenderer)
    in VirtualizedListCellContextProvider (created by CellRenderer)
    in CellRenderer (created by VirtualizedList)
    in RCTScrollContentView (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by VirtualizedList)
    in VirtualizedListContextProvider (created by VirtualizedList)
    in VirtualizedList (created by FlatList)
    in FlatList (created by App)
    in RCTView (created by View)
    in View (created by App)
    in RCTScrollContentView (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by App)
    in RCTSafeAreaView (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 BlastImage(RootComponent), js engine: hermes

System Information

System:
OS: macOS 14.5
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 356.41 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.13.1
path: /usr/local/bin/node
Yarn:
version: 3.6.4
path: /usr/local/bin/yarn
npm:
version: 10.5.2
path: /usr/local/bin/npm
Watchman:
version: 2024.06.24.00
path: /usr/local/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.5
- iOS 17.5
- macOS 14.5
- tvOS 17.5
- visionOS 1.2
- watchOS 10.5
Android SDK: Not Found
IDEs:
Android Studio: 2023.3 AI-233.14808.21.2331.11842104
Xcode:
version: 15.4/15F31d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.11
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.75.2
wanted: 0.75.2
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Package Version

"@freakycoder/react-native-progressive-fast-image": "^1.0.0",

Reproducible Code

import ProgressiveImage from '@freakycoder/react-native-progressive-fast-image';
import React from 'react';
import {
  FlatList,
  SafeAreaView,
  ScrollView,
  StatusBar,
  useColorScheme,
  View,
  Dimensions,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };
  const list = Array.from({length: 100}, (_, index) => index + 1);

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        nestedScrollEnabled={true}
        style={backgroundStyle}>
        <View style={{flexDirection: 'row'}}>
          <FlatList
            data={list}
            renderItem={({item}) => {
              return (
                <ProgressiveImage
                  source={{uri: `https://picsum.photos/2000/${1500 + item}`}}
                  style={{
                    width: Dimensions.get('window').width,
                    height: Dimensions.get('window').width / 1.5,
                  }}
                />
              );
            }}
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

export default 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.