[v4] | [v2] Expo 51 (new architecture)

[ryskin]

Bug

I encountered an error when trying to use @gorhom/bottom-sheet with bridgeless mode in Expo 51.

Environment info

Library	Version
@gorhom/bottom-sheet	^4.6.3
react-native	0.74.1
react-native-reanimated	~3.10.1
react-native-gesture-handler	~2.16.1

Steps To Reproduce

1. Enable bridgeless mode in Expo 51.
2. Use BottomSheetScrollView in a component.
3. Run the app.

Describe what you expected to happen:

1. The BottomSheetScrollView should render without errors.

Reproducible sample code

import BottomSheet, { BottomSheetScrollView, BottomSheetHandle } from '@gorhom/bottom-sheet'

		<BottomSheet
			style={bottomSheetStyle}
			ref={sheetRef}
			snapPoints={snapPointsConfig}
			index={1}
			enableDynamicSizing
			enablePanDownToClose={enablePanDownToClose}
			backdropComponent={setBackdropComponent && CustomBackdrop}
			animateOnMount={true}
			enableOverDrag={false}
			handleIndicatorStyle={{ backgroundColor: color.border }}
			handleStyle={handleStyle}
			backgroundStyle={{ backgroundColor: color.color_background_white }}
			handleComponent={BottomSheetHandle}
			onClose={onClose}
		>
			<BottomSheetScrollView bounces={false}>
				<View>{children}</View>
			</BottomSheetScrollView>
		</BottomSheet>

 (NOBRIDGE) ERROR  Error: Unexpected nativeTag: function; nativeTag=[object Object]

			createBottomSheetScrollableComponent's ScrollableComponent needs to return
			a reference that contains a nativeTag to a Native HostComponent.

			ref=function fun(a0) { [bytecode] }


This error is located at:
    in BottomSheetScrollView (created by BottomSheetScrollView)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by PanGestureHandler)
    in PanGestureHandler (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 SlidingUpPanel (created by MapSlideups)
    in MapSlideups (created by MapPage)
    in RCTView (created by View)
    in View (created by MapPage)
    in MapPage (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by CardContainer)
    in RCTView (created by View)
    in View (created by CardContainer)
    in RCTView (created by View)
    in View (created by CardContainer)
    in RCTView (created by View)
    in View
    in CardSheet (created by Card)
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View) (created by PanGestureHandler)
    in PanGestureHandler (created by PanGestureHandler)
    in PanGestureHandler (created by Card)
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View) (created by Card)
    in RCTView (created by View)
    in View (created by Card)
    in Card (created by CardContainer)
    in CardContainer (created by CardStack)
    in RNSScreen (created by Animated(Anonymous))
    in Animated(Anonymous) (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by CardStack)
    in RNSScreenContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by CardStack)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by CardStack)
    in CardStack (created by HeaderShownContext)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaProviderCompat)
    in SafeAreaProviderCompat (created by StackView)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by StackView)
    in StackView (created by StackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by StackNavigator)
    in StackNavigator (created by Routing)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by Routing)
    in Routing (created by App)
    in App (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

[karam1ashqar]

i had a similar error but it was on web platform, was this on web too or ios or android

[zibs]

I'm on iOS and Android and I ran into this too when running bridgeless. I actually tried just commenting out the code where that error is thrown

react-native-bottom-sheet/src/utilities/getRefNativeTag.ts

Lines 30 to 40 in 4b2a739

	if (!nativeTag || typeof nativeTag !== 'number') {
	throw new Error(
	`Unexpected nativeTag: ${refType}; nativeTag=${nativeTag}
	createBottomSheetScrollableComponent's ScrollableComponent needs to return
	a reference that contains a nativeTag to a Native HostComponent.
	ref=${ref}
	`
	);
	}

and it seemed to work. Not sure if that's actually viable though.

[desonyuan]

+1

[markrickert]

I'm getting this same error when I enable the new architecture using Expo SDK v50. Turning off the new arch makes it work again.

[oddanderson]

i had a similar error but it was on web platform, was this on web too or ios or android

@karam1ashqar were you able to resolve for web? running into this too

[karam1ashqar]

i had a similar error but it was on web platform, was this on web too or ios or android

@karam1ashqar were you able to resolve for web? running into this too

no, you need to not use BottomSheetFlatList and BottomSheetScrollView on web

[Lewitje]

Getting this issue on Expo 51

[brentvatne]

can someone please share a minimal reproducible example that we can clone and run?

[zibs]

Here ya go: https://github.com/zibs/bottom-sheetflat-list-mcve -- I think you'll need to clone and npx expo run:ios

It has new arch/bridgeless enabled and throws the error in the logs/renders nothing in this case

[markrickert]

@zibs My investigation lead me down the same path as you (to patch-package out the throw). It appears that this bug was introduced in #1100 (released in v4.4.5)

Discord maintains their own fork of this repo and uses the new arch and has reverted #1100 in their fork.

Looking at other related issues i'm finding that for new architecture and web support, react-native-reanimated kept the findNodeHandle but not on web since it's not supported. Commenting out this throw also appears to make expo-web work as well. I'll keep using my patched version and report if i see any issues, but that Error was there for a reason, probably... maybe.

Screenshot from @zibs's repo:

[obasille]

@AndreiCalazans would you be ok to have a look at this issue? It seems that the getRefNativeTag() is not working with Expo 51 / React Native 74

[AndreiCalazans]

Hey @obasille I've proposed removing the getRefNativeTag in favor of findNodeHandle here #1823 but it has not been merged, I suggest patching until that lands if you desire to unblock yourself.

[khushal87]

Any progress on this issue? This is still relevant for iOS and android for me while using BottomSheetFlatList on new architecture. Few solutions suggest using FlatList from react-native-gesture-handler but I don't think its a proper fix to the problem.

[RajeshPandey057]

Duplicate of 1823, merged and release with v4.6.4. I believe this issue can be closed.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.