Comments (11)
@gorhom we are also waiting for that
from react-native-bottom-sheet.
@gorhom can you please check this issue or any suggestion to solve that issue
from react-native-bottom-sheet.
@AndreiCalazans could you please check above issue
from react-native-bottom-sheet.
@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.
from react-native-bottom-sheet.
@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
from react-native-bottom-sheet.
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,
from react-native-bottom-sheet.
Can confirm downgrading to v4.4.4 solves this issue for me, at the cost of some newer features.
from react-native-bottom-sheet.
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.
from react-native-bottom-sheet.
posted the revert #1823
from react-native-bottom-sheet.
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.
from react-native-bottom-sheet.
This issue was closed because it has been stalled for 5 days with no activity.
from react-native-bottom-sheet.
Related Issues (20)
- [v4] | [v2] keyboard disappears after pressing input HOT 12
- [v4] [Android] Unable to click on touchable element when adding a Navigation Container inside Bottom Sheet Modal HOT 6
- [v4] | [v2] 'useBottomSheetInternal' cannot be used out of the BottomSheet! HOT 2
- [v4] | Nested scrollview with text input HOT 2
- [v4] Delay in mounting the bottom sheet on Android devices HOT 4
- [v4] | BottomSheetModalProvider conflicting with SafeAreaProvider HOT 3
- [v4] | [v2] Demo in documentation doesn't work: 'snapPoints' was provided with no points HOT 11
- [v4] | [v2] Expo 51 (new architecture) HOT 16
- Allow Bottom Sheet modal to be added over Expo navigation bottom bar HOT 3
- [v4] | Accessibility issue with android and nested labels HOT 1
- . HOT 1
- [v4] | [v2] Keyboard accessibility not working if adding bottom sheet inside a <Tab.Screen> (@react-navigation/material-top-tabs library) HOT 3
- [v4] [Reanimated] Tried to modify key `reduceMotion` of an object which has been already passed to a worklet HOT 35
- customize the TextInput Bar HOT 1
- customize the TextInput Bar HOT 1
- Customise the Textinput Bar HOT 4
- [v4] | [v3] Notifee & BottomSheetModal opened HOT 2
- [v4] bugs with prop enableDynamicSizing={true} HOT 6
- [v4] | [v2] Lacking Accessibility Support HOT 8
- [v4] Dismissing keyboard on Android leaves blank space HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-bottom-sheet.