[v4] | BottomSheetFlatList not supported when newArchEnabled=true

[vijaychouhan-rails]

Bug

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.0
react-native	0.73.2
react-native-reanimated	3.6.1
react-native-gesture-handler	2.14.0

Steps To Reproduce

1. Enable newArchEnabled=true
2. Add BottomSheetFlatList
3. Then open That bottom sheet and will thrown an 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 its throwing from this code

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

Line 30 in 1128dc8

if (!nativeTag || typeof nativeTag !== 'number') {

Describe what you expected to happen:

1. The error should not get and should work smoothly

Reproducible sample code

<BottomSheet
      ref={whatsappWindowRef}
      snapPoints={snapPoints}
      index={-1}
      enablePanDownToClose={true}
      backdropComponent={renderBackdrop}
      footerComponent={renderFooter}>
      <BottomSheetFlatList
        style={mainStyle.mB80}
        data={filteredData}
        keyExtractor={keyExtractor}
        renderItem={renderItem}
        ListHeaderComponent={title}
        ListEmptyComponent={emptyListComponent}
        ListFooterComponent={<View style={mainStyle.mB80} />}
      />
    </BottomSheet>

[forever-sumit]

@gorhom can you please check this issue or any suggestion to solve that issue

[vijaychouhan-rails]

@gorhom we are also waiting for that

[vijaychouhan-rails]

@AndreiCalazans could you please check above issue

[AndreiCalazans]

@vijaychouhan-rails since you have a reproducible at hand can you debug it and see how the library can retrieve the nativeTag when the new architecture is enabled?

I suggest you add a console.log to the ref received as argument here.

You can modify the function directly inside node_modules at node_modules/@gorhom/react-native-bottom-sheet/src/utilities/getRefNativeTag.ts

We are looking for the nativeTag or a similar tag. If that tag no longer exists with the new architecture than we will need to revisit the entire logic that depends on it.

If you can paste what you see from the logs here we can help debug it. Thank you.

[vijaychouhan-rails]

@AndreiCalazans Thanks for your reply. Please check below code and logs

this is code

export function getRefNativeTag(ref: unknown) {
  const refType = typeof ref;
  console.log(refType,'===========================refType')
  let nativeTag: undefined | number;
  if (isFunction(ref)) {
    nativeTag = ref();
  } else if (hasNativeTag(ref)) {
    nativeTag = ref.current._nativeTag;
  }
console.log(nativeTag,'=================nativeTag')
  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}
      `
    );
  }

  return nativeTag;

Logs are

function ===========================refType
 LOG  -1 =================nativeTag
 LOG  function ===========================refType
 LOG  {} =================nativeTag
 LOG  function ===========================refType
 LOG  {} =================nativeTag
 ERROR  TypeError: Cannot determine default value of object

[RalissonMattias]

Yeah, I was looking at the recent changes and found a refactor. After reversing the changes, it works fine.

Version: ^5.0.0-alpha.9
Ref: The PR

diff --git a/node_modules/@gorhom/bottom-sheet/src/hooks/useScrollable.ts b/node_modules/@gorhom/bottom-sheet/src/hooks/useScrollable.ts
index 3963175..4a38f26 100644
--- a/node_modules/@gorhom/bottom-sheet/src/hooks/useScrollable.ts
+++ b/node_modules/@gorhom/bottom-sheet/src/hooks/useScrollable.ts
@@ -1,8 +1,8 @@
 import { useCallback, RefObject, useRef } from 'react';
 import { useSharedValue } from 'react-native-reanimated';
-import { getRefNativeTag } from '../utilities/getRefNativeTag';
 import { SCROLLABLE_STATE, SCROLLABLE_TYPE } from '../constants';
 import type { ScrollableRef, Scrollable } from '../types';
+import { findNodeHandle } from 'react-native';
 
 export const useScrollable = () => {
   // refs
@@ -38,7 +38,7 @@ export const useScrollable = () => {
     // find node handle id
     let id;
     try {
-      id = getRefNativeTag(ref);
+      id = findNodeHandle(ref.current);
     } catch {
       return;
     }
diff --git a/node_modules/@gorhom/bottom-sheet/src/hooks/useScrollableSetter.ts b/node_modules/@gorhom/bottom-sheet/src/hooks/useScrollableSetter.ts
index ea7d3c2..1cae2e2 100644
--- a/node_modules/@gorhom/bottom-sheet/src/hooks/useScrollableSetter.ts
+++ b/node_modules/@gorhom/bottom-sheet/src/hooks/useScrollableSetter.ts
@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect } from 'react';
 import Animated from 'react-native-reanimated';
 import { useBottomSheetInternal } from './useBottomSheetInternal';
-import { getRefNativeTag } from '../utilities/getRefNativeTag';
 import { SCROLLABLE_TYPE } from '../constants';
 import type { Scrollable } from '../types';
+import { findNodeHandle } from 'react-native';
 
 export const useScrollableSetter = (
   ref: React.RefObject<Scrollable>,
@@ -31,7 +31,7 @@ export const useScrollableSetter = (
     isContentHeightFixed.value = false;
 
     // set current scrollable ref
-    const id = getRefNativeTag(ref);
+    const id = findNodeHandle(ref.current);
     if (id) {
       setScrollableRef({
         id: id,

[tgrant59]

Can confirm downgrading to v4.4.4 solves this issue for me, at the cost of some newer features.

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

[AndreiCalazans]

posted the revert #1823

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