library will crash on react native 0.65.0

[hisothreed]

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.

[alvaromb]

Mind to send a PR?

[thomasdittmar]

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

[h0nor]

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.

@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 }) }

[hisothreed]

@h0nor check this hisothreed@e66c4a6

[h0nor]

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

[h0nor]

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

[thomasdittmar]

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

[mhammerc]

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.

[jacargentina]

@alvaromb can you look at this please?

[julianklumpers]

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.

[srmagura]

If you use NativeBase v2, you also need to patch this in @codler/react-native-keyboard-aware-scroll-view.

[jacargentina]

@srmagura nativebase v2 only; v3 dropped that dependecy