Closed hisothreed closed 2 years ago
Mind to send a PR?
I can confirm that this library breaks with this setup:
"react": "17.0.2",
"react-native": "0.65.0-rc.3",
"react-native-keyboard-aware-scroll-view": "^0.9.4",
Screenshot of error:
Unfortunately I can't rectify it because I'm not calling any the functions mentioned in the previous post.
Just by using it like that will trow an error:
return (
<KeyboardAwareScrollView>
... other components
</KeyboardAwareScrollView>
)
The only way to overcome this problem is to add an additional check on the function scrollResponderScrollTo
like that
node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js (line 276)
scrollToPosition = (x: number, y: number, animated: boolean = true) => {
const responder = this.getScrollResponder()
responder && responder.scrollResponderScrollTo && responder.scrollResponderScrollTo({ x, y, animated })
}
Here the beautified output of the responder
object
{
"_additionalScrollOffset": 0,
"_animated": null,
"_becameResponderWhileAnimating": false,
"_handleContentOnLayout": [Function anonymous],
"_handleLayout": [Function anonymous],
"_handleMomentumScrollBegin": [Function anonymous],
"_handleMomentumScrollEnd": [Function anonymous],
"_handleResponderGrant": [Function anonymous],
"_handleResponderReject": [Function anonymous],
"_handleResponderRelease": [Function anonymous],
"_handleResponderTerminationRequest": [Function anonymous],
"_handleScroll": [Function anonymous],
"_handleScrollBeginDrag": [Function anonymous],
"_handleScrollEndDrag": [Function anonymous],
"_handleScrollShouldSetResponder": [Function anonymous],
"_handleStartShouldSetResponder": [Function anonymous],
"_handleStartShouldSetResponderCapture": [Function anonymous],
"_handleTouchCancel": [Function anonymous],
"_handleTouchEnd": [Function anonymous],
"_handleTouchMove": [Function anonymous],
"_handleTouchStart": [Function anonymous],
"_headerLayoutYs": Map {},
"_innerViewRef": {
"_children": [
[ReactNativeFiberHostComponent],
[ReactNativeFiberHostComponent],
[ReactNativeFiberHostComponent],
[ReactNativeFiberHostComponent]
],
"_internalFiberInstanceHandleDEV": {
"_debugHookTypes": null,
"_debugID": 25927,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": [Object],
"actualDuration": 1.9378738403320312,
"actualStartTime": 1338510286.584403,
"alternate": [FiberNode],
"child": [FiberNode],
"childLanes": 0,
"dependencies": null,
"elementType": "RCTScrollContentView",
"firstEffect": [FiberNode],
"flags": 0,
"index": 0,
"key": null,
"lanes": 0,
"lastEffect": [FiberNode],
"memoizedProps": [Object],
"memoizedState": null,
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": [Function forwardRef],
"return": [FiberNode],
"selfBaseDuration": 0.003122091293334961,
"sibling": null,
"stateNode": [Circular],
"tag": 5,
"treeBaseDuration": 9.678041934967041,
"type": "RCTScrollContentView",
"updateQueue": null
},
"_nativeTag": 2303,
"viewConfig": {
"Commands": [Object],
"Constants": [Object],
"Manager": "ScrollContentViewManager",
"NativeProps": [Object],
"baseModuleName": "RCTView",
"bubblingEventTypes": [Object],
"directEventTypes": [Object],
"uiViewClassName": "RCTScrollContentView",
"validAttributes": [Object]
}
},
"_inputMeasureAndScrollToKeyboard": [Function anonymous],
"_isAnimating": [Function anonymous],
"_isTouching": false,
"_keyboardIsDismissible": [Function anonymous],
"_keyboardWillOpenTo": null,
"_lastMomentumScrollBeginTime": 0,
"_lastMomentumScrollEndTime": 0,
"_observedScrollSinceBecomingResponder": false,
"_preventNegativeScrollOffset": null,
"_reactInternalInstance": {},
"_reactInternals": {
"_debugHookTypes": null,
"_debugID": 25923,
"_debugNeedsRemount": false,
"_debugOwner": {
"_debugHookTypes": null,
"_debugID": 25921,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": [Object],
"actualDuration": 1.9426326751708984,
"actualStartTime": 1338510286.57602,
"alternate": [FiberNode],
"child": [Circular],
"childLanes": 0,
"dependencies": null,
"elementType": [Object],
"firstEffect": [FiberNode],
"flags": 0,
"index": 0,
"key": null,
"lanes": 0,
"lastEffect": [FiberNode],
"memoizedProps": [Object],
"memoizedState": null,
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": [Function anonymous],
"return": [FiberNode],
"selfBaseDuration": 0.02221393585205078,
"sibling": null,
"stateNode": null,
"tag": 11,
"treeBaseDuration": 9.785065650939941,
"type": [Object],
"updateQueue": null
},
"_debugSource": {
"columnNumber": 10,
"fileName": "/Users/thomasdittmar/projects/reactnative/linktr.ee/node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js",
"lineNumber": 1810
},
"actualDuration": 1.9415836334228516,
"actualStartTime": 1338510286.578562,
"alternate": {
"_debugHookTypes": null,
"_debugID": 25923,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": [Object],
"actualDuration": 0.1089174747467041,
"actualStartTime": 1338510310.6471992,
"alternate": [Circular],
"child": [FiberNode],
"childLanes": 0,
"dependencies": null,
"elementType": [Function ScrollView],
"firstEffect": [FiberNode],
"flags": 5,
"index": 0,
"key": null,
"lanes": 0,
"lastEffect": [FiberNode],
"memoizedProps": [Object],
"memoizedState": [Object],
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": null,
"return": [FiberNode],
"selfBaseDuration": 0.09538698196411133,
"sibling": null,
"stateNode": [Circular],
"tag": 1,
"treeBaseDuration": 9.778065919876099,
"type": [Function ScrollView],
"updateQueue": [Object]
},
"child": {
"_debugHookTypes": null,
"_debugID": 25925,
"_debugNeedsRemount": false,
"_debugOwner": [Circular],
"_debugSource": [Object],
"actualDuration": 1.9390268325805664,
"actualStartTime": 1338510286.581557,
"alternate": [FiberNode],
"child": [FiberNode],
"childLanes": 0,
"dependencies": null,
"elementType": "RCTScrollView",
"firstEffect": [FiberNode],
"flags": 0,
"index": 0,
"key": null,
"lanes": 0,
"lastEffect": [FiberNode],
"memoizedProps": [Object],
"memoizedState": null,
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": [Function forwardRef],
"return": [Circular],
"selfBaseDuration": 0.005074977874755859,
"sibling": null,
"stateNode": [ReactNativeFiberHostComponent],
"tag": 5,
"treeBaseDuration": 9.683116912841797,
"type": "RCTScrollView",
"updateQueue": null
},
"childLanes": 0,
"dependencies": null,
"elementType": [Function ScrollView],
"firstEffect": {
"_debugHookTypes": null,
"_debugID": 26133,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": [Object],
"actualDuration": 0.007913827896118164,
"actualStartTime": 1338510287.700421,
"alternate": [FiberNode],
"child": [FiberNode],
"childLanes": 0,
"dependencies": null,
"elementType": "RCTText",
"firstEffect": null,
"flags": 4,
"index": 0,
"key": null,
"lanes": 0,
"lastEffect": null,
"memoizedProps": [Object],
"memoizedState": null,
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": null,
"return": [FiberNode],
"selfBaseDuration": 0.004695892333984375,
"sibling": null,
"stateNode": [ReactNativeFiberHostComponent],
"tag": 5,
"treeBaseDuration": 0.007276296615600586,
"type": "RCTText",
"updateQueue": null
},
"flags": 0,
"index": 0,
"key": null,
"lanes": 0,
"lastEffect": {
"_debugHookTypes": null,
"_debugID": 26183,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": [Object],
"actualDuration": 0.0860445499420166,
"actualStartTime": 1338510288.5596392,
"alternate": [FiberNode],
"child": [FiberNode],
"childLanes": 0,
"dependencies": null,
"elementType": "RCTView",
"firstEffect": [FiberNode],
"flags": 4,
"index": 0,
"key": null,
"lanes": 0,
"lastEffect": [FiberNode],
"memoizedProps": [Object],
"memoizedState": null,
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": null,
"return": [FiberNode],
"selfBaseDuration": 0.007055044174194336,
"sibling": null,
"stateNode": [ReactNativeFiberHostComponent],
"tag": 5,
"treeBaseDuration": 0.07729911804199219,
"type": "RCTView",
"updateQueue": null
},
"memoizedProps": {
"automaticallyAdjustContentInsets": false,
"behavior": "padding",
"children": [Array],
"contentContainerStyle": [Object],
"contentInset": [Object],
"enableAutomaticScroll": true,
"enableOnAndroid": false,
"enableResetScrollToCoords": true,
"extraHeight": 75,
"extraScrollHeight": 0,
"getScrollResponder": [Function anonymous],
"handleOnScroll": [Function anonymous],
"keyboardDismissMode": "interactive",
"keyboardOpeningTime": 250,
"keyboardSpace": 0,
"onScroll": [Function anonymous],
"resetKeyboardSpace": [Function anonymous],
"scrollEventThrottle": 1,
"scrollForExtraHeightOnAndroid": [Function anonymous],
"scrollIntoView": [Function _callee],
"scrollToEnd": [Function anonymous],
"scrollToFocusedInput": [Function anonymous],
"scrollToPosition": [Function anonymous],
"scrollViewRef": [Function anonymous],
"showsVerticalScrollIndicator": true,
"style": [Array],
"update": [Function anonymous],
"viewIsInsideTabBar": false
},
"memoizedState": {
"layoutHeight": null
},
"mode": 8,
"nextEffect": null,
"pendingProps": {
"automaticallyAdjustContentInsets": false,
"behavior": "padding",
"children": [Array],
"contentContainerStyle": [Object],
"contentInset": [Object],
"enableAutomaticScroll": true,
"enableOnAndroid": false,
"enableResetScrollToCoords": true,
"extraHeight": 75,
"extraScrollHeight": 0,
"getScrollResponder": [Function anonymous],
"handleOnScroll": [Function anonymous],
"keyboardDismissMode": "interactive",
"keyboardOpeningTime": 250,
"keyboardSpace": 0,
"onScroll": [Function anonymous],
"resetKeyboardSpace": [Function anonymous],
"scrollEventThrottle": 1,
"scrollForExtraHeightOnAndroid": [Function anonymous],
"scrollIntoView": [Function _callee],
"scrollToEnd": [Function anonymous],
"scrollToFocusedInput": [Function anonymous],
"scrollToPosition": [Function anonymous],
"scrollViewRef": [Function anonymous],
"showsVerticalScrollIndicator": true,
"style": [Array],
"update": [Function anonymous],
"viewIsInsideTabBar": false
},
"ref": null,
"return": {
"_debugHookTypes": null,
"_debugID": 25921,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": [Object],
"actualDuration": 1.9426326751708984,
"actualStartTime": 1338510286.57602,
"alternate": [FiberNode],
"child": [Circular],
"childLanes": 0,
"dependencies": null,
"elementType": [Object],
"firstEffect": [FiberNode],
"flags": 0,
"index": 0,
"key": null,
"lanes": 0,
"lastEffect": [FiberNode],
"memoizedProps": [Object],
"memoizedState": null,
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": [Function anonymous],
"return": [FiberNode],
"selfBaseDuration": 0.02221393585205078,
"sibling": null,
"stateNode": null,
"tag": 11,
"treeBaseDuration": 9.785065650939941,
"type": [Object],
"updateQueue": null
},
"selfBaseDuration": 0.07973480224609375,
"sibling": null,
"stateNode": [Circular],
"tag": 1,
"treeBaseDuration": 9.76285171508789,
"type": [Function ScrollView],
"updateQueue": {
"baseState": [Object],
"effects": null,
"firstBaseUpdate": null,
"lastBaseUpdate": null,
"shared": [Object]
}
},
"_scrollAnimatedValue": 0,
"_scrollAnimatedValueAttachment": null,
"_scrollViewRef": {
"_children": [
[ReactNativeFiberHostComponent]
],
"_internalFiberInstanceHandleDEV": {
"_debugHookTypes": null,
"_debugID": 25925,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": [Object],
"actualDuration": 1.9390268325805664,
"actualStartTime": 1338510286.581557,
"alternate": [FiberNode],
"child": [FiberNode],
"childLanes": 0,
"dependencies": null,
"elementType": "RCTScrollView",
"firstEffect": [FiberNode],
"flags": 0,
"index": 0,
"key": null,
"lanes": 0,
"lastEffect": [FiberNode],
"memoizedProps": [Object],
"memoizedState": null,
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": [Function forwardRef],
"return": [FiberNode],
"selfBaseDuration": 0.005074977874755859,
"sibling": null,
"stateNode": [Circular],
"tag": 5,
"treeBaseDuration": 9.683116912841797,
"type": "RCTScrollView",
"updateQueue": null
},
"_nativeTag": 2305,
"flashScrollIndicators": [Function anonymous],
"getInnerViewNode": [Function anonymous],
"getInnerViewRef": [Function anonymous],
"getNativeScrollRef": [Function anonymous],
"getScrollResponder": [Function anonymous],
"getScrollableNode": [Function anonymous],
"scrollResponderScrollNativeHandleToKeyboard": [Function anonymous],
"scrollResponderZoomTo": [Function anonymous],
"scrollTo": [Function anonymous],
"scrollToEnd": [Function anonymous],
"viewConfig": {
"Commands": [Object],
"Constants": [Object],
"Manager": "ScrollViewManager",
"NativeProps": [Object],
"baseModuleName": "RCTView",
"bubblingEventTypes": [Object],
"directEventTypes": [Object],
"uiViewClassName": "RCTScrollView",
"validAttributes": [Object]
}
},
"_setInnerViewRef": [Function forwardRef],
"_setNativeRef": [Function forwardRef],
"_stickyHeaderRefs": Map {},
"_subscriptionKeyboardDidHide": {
"remove": [Function remove]
},
"_subscriptionKeyboardDidShow": {
"remove": [Function remove]
},
"_subscriptionKeyboardWillHide": {
"remove": [Function remove]
},
"_subscriptionKeyboardWillShow": {
"remove": [Function remove]
},
"context": {},
"flashScrollIndicators": [Function anonymous],
"getInnerViewNode": [Function anonymous],
"getInnerViewRef": [Function anonymous],
"getNativeScrollRef": [Function anonymous],
"getScrollResponder": [Function anonymous],
"getScrollableNode": [Function anonymous],
"props": {
"automaticallyAdjustContentInsets": false,
"behavior": "padding",
"children": [ < Box… / > , < FormFields… / > , < ConfigPanelButtons… / > ],
"contentContainerStyle": {
"alignItems": undefined,
"justifyContent": undefined,
"margin": 32,
"padding": 0
},
"contentInset": {
"bottom": 0
},
"enableAutomaticScroll": true,
"enableOnAndroid": false,
"enableResetScrollToCoords": true,
"extraHeight": 75,
"extraScrollHeight": 0,
"getScrollResponder": [Function anonymous],
"handleOnScroll": [Function anonymous],
"keyboardDismissMode": "interactive",
"keyboardOpeningTime": 250,
"keyboardSpace": 0,
"onScroll": [Function anonymous],
"resetKeyboardSpace": [Function anonymous],
"scrollEventThrottle": 1,
"scrollForExtraHeightOnAndroid": [Function anonymous],
"scrollIntoView": [Function _callee],
"scrollToEnd": [Function anonymous],
"scrollToFocusedInput": [Function anonymous],
"scrollToPosition": [Function anonymous],
"scrollViewRef": [Function anonymous],
"showsVerticalScrollIndicator": true,
"style": [
[Object]
],
"update": [Function anonymous],
"viewIsInsideTabBar": false
},
"refs": {},
"scrollResponderKeyboardDidHide": [Function anonymous],
"scrollResponderKeyboardDidShow": [Function anonymous],
"scrollResponderKeyboardWillHide": [Function anonymous],
"scrollResponderKeyboardWillShow": [Function anonymous],
"scrollResponderScrollNativeHandleToKeyboard": [Function anonymous],
"scrollResponderZoomTo": [Function anonymous],
"scrollTo": [Function anonymous],
"scrollToEnd": [Function anonymous],
"state": {
"layoutHeight": null
},
"updater": {
"enqueueForceUpdate": [Function enqueueForceUpdate],
"enqueueReplaceState": [Function enqueueReplaceState],
"enqueueSetState": [Function enqueueSetState],
"isMounted": [Function isMounted]
}
}
since this 099f67cf8a has been added to react native 0.65.0, the library will crash when trying to call
scrollResponderScrollTo
orscrollResponderScrollToEnd
, I've solved it by changing these functions toscrollTo
andscrollToEnd
, please solve this ASAP because many users will be affected by that change in the upcoming version of react native.
@husseinAbdulnabi where did you make these changes exactly? KeyboardAwareHOC.js?
Like below?
scrollToPosition = (x: number, y: number, animated: boolean = true) => { const responder = this.getScrollResponder() responder && responder.scrollTo({ x, y, animated }) }
scrollToEnd = (animated?: boolean = true) => { const responder = this.getScrollResponder() responder && responder.scrollToEnd({ animated }) }
Yeah, these changes seem to work. To solve the problem in my previous attempt, I changed scrollReponderScrollTo
method with scrollToPositon
method, and that change produced the same "is not a function" error (scrollToPosition is not a function). But changing scrollReponderScrollTo
to scrollTo
did not create any exceptions. Do you know why? @husseinAbdulnabi
@thomasdittmar do you think the package will keep working as expected with your change below?
scrollToPosition = (x: number, y: number, animated: boolean = true) => { const responder = this.getScrollResponder() responder && responder.scrollResponderScrollTo && responder.scrollResponderScrollTo({ x, y, animated }) }
I feel like you might avoid the exception but the component may not work as expected. Maybe changing the method names will keep the component working as expected? like @husseinAbdulnabi proposed...
@h0nor Yes it will.
I have temporarily copied all the files into my project folder, with this change and including the index.js
from where I now import the lib, and it works.
Keeping in mind I don't invoke any of the scrollTo*
functions as I don't need them.
Would love to contribute but I'm super busy with other projects unfortunately.
If anyone need it while waiting for an official release, here is the patch from husseinAbdulnabi@e66c4a6 that can be used with patch-package
(https://www.npmjs.com/package/patch-package).
filename react-native-keyboard-aware-scroll-view+0.9.4.patch
From e66c4a62fde8295ab511d086d0d59ef3247a5225 Mon Sep 17 00:00:00 2001
From: hussein abdulnabi <husseinabdulnabi@husseins-MacBook-Pro-2.local>
Date: Sun, 27 Jun 2021 19:20:15 +0300
Subject: [PATCH] fixes scroll responder on rn 0.65.0
---
lib/KeyboardAwareHOC.js | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js b/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js
index 3d94b82..bb273ee 100644
--- a/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js
+++ b/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js
@@ -273,12 +273,12 @@ function KeyboardAwareHOC(
scrollToPosition = (x: number, y: number, animated: boolean = true) => {
const responder = this.getScrollResponder()
- responder && responder.scrollResponderScrollTo({ x, y, animated })
+ responder && responder.scrollTo({ x, y, animated })
}
scrollToEnd = (animated?: boolean = true) => {
const responder = this.getScrollResponder()
- responder && responder.scrollResponderScrollToEnd({ animated })
+ responder && responder.scrollToEnd({ animated })
}
scrollForExtraHeightOnAndroid = (extraHeight: number) => {
This fix seem to work on my app.
@alvaromb can you look at this please?
I can confirm we have the same issue when we upgrade to react-native
version 0.65.1
It happens when the keyboard is dismissed.
If you use NativeBase v2, you also need to patch this in @codler/react-native-keyboard-aware-scroll-view
.
@srmagura nativebase v2 only; v3 dropped that dependecy
Just came across this as well, do you guys know when the fix will b available on npm?
If anyone need it while waiting for an official release, here is the patch from husseinAbdulnabi/react-native-keyboard-aware-scroll-view@e66c4a6 that can be used with
patch-package
(https://www.npmjs.com/package/patch-package).filename
react-native-keyboard-aware-scroll-view+0.9.4.patch
From e66c4a62fde8295ab511d086d0d59ef3247a5225 Mon Sep 17 00:00:00 2001 From: hussein abdulnabi <husseinabdulnabi@husseins-MacBook-Pro-2.local> Date: Sun, 27 Jun 2021 19:20:15 +0300 Subject: [PATCH] fixes scroll responder on rn 0.65.0 --- lib/KeyboardAwareHOC.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js b/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js index 3d94b82..bb273ee 100644 --- a/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js +++ b/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js @@ -273,12 +273,12 @@ function KeyboardAwareHOC( scrollToPosition = (x: number, y: number, animated: boolean = true) => { const responder = this.getScrollResponder() - responder && responder.scrollResponderScrollTo({ x, y, animated }) + responder && responder.scrollTo({ x, y, animated }) } scrollToEnd = (animated?: boolean = true) => { const responder = this.getScrollResponder() - responder && responder.scrollResponderScrollToEnd({ animated }) + responder && responder.scrollToEnd({ animated }) } scrollForExtraHeightOnAndroid = (extraHeight: number) => {
This fix seem to work on my app.
+1 Working fine
I have forked the repo to fix this issue.
npm i @codler/react-native-keyboard-aware-scroll-view
try this one "react-native-keyboard-aware-scroll-view": "github:APSL/react-native-keyboard-aware-scroll-view#pull/501/head",
when will the fix be released?
@karladler the question here should be will it ever be released !
RN 0.66 is out supporting iOS 15
and we still waiting on a fix ;)
I'm using this library and updated my React Native to 0.66.1 and the error still persists! Any suggestions for a solution?
@lfoliveir4
change this in your package.json
"react-native-keyboard-aware-scroll-view": "github:APSL/react-native-keyboard-aware-scroll-view#pull/501/head",
npm install in project directory and run project
for yarn
yarn add APSL/react-native-keyboard-aware-scroll-view#501/head
since this 099f67cf8a has been added to react native 0.65.0, the library will crash when trying to call
scrollResponderScrollTo
orscrollResponderScrollToEnd
, I've solved it by changing these functions toscrollTo
andscrollToEnd
, please solve this ASAP because many users will be affected by that change in the upcoming version of react native.