Lightrun
question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

flatlistRef.scrollToOffset is not a function

See original GitHub issue

Issue Description

Describe the bug When I drag an item to edge of the screen to activate scrolling to drag beyond the visible bounds, I get the following error:

TypeError: flatlistRef.scrollToOffset is not a function

The error originates along the lines:

     _this.scrollToAsync = function (offset) {
        return new Promise(function (resolve) {
          _this.resolveAutoscroll = resolve;

This used to work a few weeks ago. I’ve updated my package.json to latest versions of all packages and this error started appearing. But I don’t know updating/changing what really broke this as I realized it today.

To Reproduce Have a draggable flat list with items exceeding screen height. Try to drag an item to activate scroll threshold. It should normally start dragging the list up/down to drag the currently item anywhere on screen. Instead, it gives the warning above and doesn’t scroll the list.

Platform & Dependencies Please list any applicable dependencies in addition to those below (react-navigation etc).

  • Platform: iOS 14.5
  • React Native or Expo version: React Native 0.64
  • Reanimated version: 1.13.2
  • React Native Gesture Handler version: 1.10.3

Additional context This wasn’t the issue before and it used to scroll correctly before. It happened within a few weeks where I’ve updated many dependencies (and I don’t know at which exact point this got broken as we weren’t testing this part of the app).

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
krizpooncommented, May 5, 2021

According to this SO answer, we could use flatlistRef.getNode() to get the underlying component. So as a quick fix (before the official fix), we could update

node_modules/react-native-draggable-flatlist/lib/index.js

if (flatlistRef)
  flatlistRef.scrollToOffset({ offset: offset });

to this:

if (flatlistRef) {
    if (flatlistRef.scrollToOffset) {
        flatlistRef.scrollToOffset({ offset: offset });
    } else if (flatlistRef.getNode) {
        flatlistRef.getNode().scrollToOffset({ offset: offset });
    }
}

Then preserve the patch with:

npx patch-package react-native-draggable-flatlist
0reactions
computerjazzcommented, May 17, 2021
Read more comments on GitHub >

github_iconTop Results From Across the Web

FlatList ref scrollToIndex is not a function - Stack Overflow
So let use function scrollTo with ScrollView or scrollToOffset with FlatList and it works normal. Share.
Read more >
Can't scrollToOffset() FlatList when use with Animated ...
FlatListRef.current.scrollToOffset is normal function, problem occurs when you add params to that funciton. Function becomes undefined.
Read more >
FlatList - React Native
FlatList. A performant interface for rendering basic, flat lists, supporting the most handy features: Fully cross-platform.
Read more >
Deep Linking in React Native — Scroll to Element - Ars Futura
Referring to that list inside your component and execute functions: this.flatListRef.scrollToIndex({ animated: true, index: itemIndex, });.
Read more >
React Native FlatList scrollToIndex with Fixed or ... - Syntax Byte
Use the react-native FlatList scrollToIndex function to scroll a list ... For lists where the row size is dynamic and not easy to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found