[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.