Attempted to use private field on non-instance

[konstantinrachev]

Description

I am getting the following error:

` ERROR TypeError: attempted to use private field on non-instance

This error is located at:
in GestureDetector (created by BottomSheetDraggableViewComponent)
in BottomSheetDraggableViewComponent (created by BottomSheet)
in RCTView (created by View)
in View (created by AnimatedComponent(View))
in AnimatedComponent(View)
in Unknown (created by BottomSheet)
in RCTView (created by View)
in View (created by AnimatedComponent(View))
in AnimatedComponent(View)
in Unknown (created by BottomSheet)
in RCTView (created by View)
in View (created by BottomSheetContainerComponent)
in BottomSheetContainerComponent (created by BottomSheet)
in BottomSheetGestureHandlersProvider (created by BottomSheet)
in BottomSheet (created by BottomSheet)
in RCTView (created by View)
in View (created by SingleRecipe)
in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
in BottomSheetModalProviderWrapper (created by SingleRecipe)
in SingleRecipe (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in RNSScreen (created by Animated(Anonymous))
in Animated(Anonymous)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze
in InnerScreen (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by ScreenStack)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RCTView (created by View)
in View (created by SafeAreaProviderCompat)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by App)
in RCTView (created by View)
in View (created by GestureHandlerRootView)
in GestureHandlerRootView (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 Manager(RootComponent), js engine: hermes`

The issue is presented when using @gorhom/bottom-sheet suddenly and without any updates done. As I tried with the latest version that is 100% compatible with both Reanimated v3, nothing positive happened.

Steps to reproduce

1. Install @gorhom/bottom-sheet
2. Use BottomSheetModal.

Snack or a link to a repository

https://snack.expo.dev/KtLghhenAFD1Wy99EmJ16

Reanimated version

3.15.0

React Native version

0.74.2

Platforms

Android, iOS, macOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[MatiPl01]

Hey!

Could you please provide a repro?

I tested on a clean project (old and new architecture) and everything seems to work fine.
My versions of dependencies:

"dependencies": {
    "@gorhom/bottom-sheet": "^4.6.4",
    "react": "18.2.0",
    "react-native": "0.74.2",
    "react-native-gesture-handler": "^2.18.1",
    "react-native-reanimated": "^3.15.0"
  }

Example recording

Screen.Recording.2024-08-26.at.15.27.20.mp4

Code I used for testing

import {
  BottomSheetModal,
  BottomSheetModalProvider,
  BottomSheetView,
} from '@gorhom/bottom-sheet';
import {useEffect, useRef, useState} from 'react';
import {Button, SafeAreaView, Text, View} from 'react-native';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  const modalRef = useRef<BottomSheetModal>(null);

  useEffect(() => {
    if (modalRef.current) {
      if (isOpen) {
        modalRef.current.present();
      } else {
        modalRef.current.dismiss();
      }
    }
  }, [isOpen]);

  return (
    <GestureHandlerRootView>
      <BottomSheetModalProvider>
        <SafeAreaView>
          <Button
            onPress={() => setIsOpen(!isOpen)}
            title={isOpen ? 'Close' : 'Open'}
          />
        </SafeAreaView>

        <BottomSheetModal
          ref={modalRef}
          enableDynamicSizing
          onDismiss={setIsOpen.bind(false)}>
          <BottomSheetView>
            <View style={{height: 500, backgroundColor: 'red'}}>
              <Text>Content</Text>
            </View>
          </BottomSheetView>
        </BottomSheetModal>
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
}