react-native-keyboard-aware-scroll-view: library will crash on react native 0.65.0

since this 099f67cf8a has been added to react native 0.65.0, the library will crash when trying to call scrollResponderScrollTo or scrollResponderScrollToEnd, I’ve solved it by changing these functions to scrollTo and scrollToEnd, please solve this ASAP because many users will be affected by that change in the upcoming version of react native.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 13
  • Comments: 22 (1 by maintainers)

Commits related to this issue

Most upvoted comments

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.

when will the fix be released?

try this one "react-native-keyboard-aware-scroll-view": "github:APSL/react-native-keyboard-aware-scroll-view#pull/501/head",

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

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]
    }
}

@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

@srmagura nativebase v2 only; v3 dropped that dependecy

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