Comments (9)
@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.
Related Issues (20)
- [v4] | [v2] Android Scrollable component issue | RN 0.73.6 | bottom sheet 4.6.1 HOT 1
- [web] close modal when click outside HOT 3
- [v4] | [v2] enablePanDownToClose doesn't update dynamically
- [v4] drawer border radius
- [v4] | Keyboard pushing bottom sheet content to screen top, with empty space in between HOT 6
- [v4] When enableContentPanningGesture is false on BottomSheetModal, cant scroll on IOS. Android is working fine HOT 2
- [v4] When enableContentPanningGesture is false on BottomSheetModal, cant scroll on IOS. Android is working fine HOT 1
- [v4] | [v2] Does BottomSheetView work with nativewind? HOT 1
- Snap point HOT 1
- React native Text input, event.preventDefault() is not working as expected. HOT 1
- [v4] Delay on BottomSheetModal dimiss HOT 1
- Radial Gradient Shadow Support HOT 1
- Is there any way of adding a radial gradient as shadow of the sheet?
- [v4] Backdrop component with opacity appears at the bottom when bottomInset is set to BottomSheetModal
- [v4] | BottomSheetTextInput does not avoid Keyboard on Android HOT 2
- How to handle Android Hardware Back Button HOT 1
- [v4] Não abre o bottom-sheet em alguns aparelhos xiaomi HOT 1
- Related to Keyboard for korean language HOT 1
- [v4] | [v2] Janky bottom sheet dynamic size if using `BottomSheetTextInput` HOT 1
- [v4] app crash in release mode ( IOS & ANDROID ) HOT 3
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.