No scrollTo method provided. This may be because you have two nested VirtualizedLists with the same orientation, or because you are using a custom component that does not implement scrollTo.

[Rc85]

Description

Cannot programmatically scroll nested SectionList inside SectionList.

What I'm trying to accomplish is a horizontal bar with categories that will be stickied to the top of the screen, this requires a SectionList. Below it is another SectionList and for this, I render it inside renderItem. If I press on a category in the horizontal bar, it should scroll the nested SectionList so that the category will be view.

I've tried many different implementations, such as wrapping the nested SectionList with a horizontal ScrollView.

Version

0.70.2

Output of npx react-native info

System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
    Memory: 8.89 GB / 31.93 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20210102.202219.0 - C:\Users\roger\watchman\bin\watchman.EXE
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: AI-212.5712.43.2112.8815526
    Visual Studio: 15.9.28307.1401 (Visual Studio Community 2017)
  Languages:
    Java: 17.0.1
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^18.2.0 => 18.2.0
    react-native: Not Found
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

See snack

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/yMDRoSATG

Click on tab 1 will show warning in the log and will not scroll to the last section.

[mohitarora777]

Hey any soln ?

[Rc85]

Nope. Need to reconsider your implementation or just let the error happen if it doesn't interfere with UI/UX.

[Ikalli]

I got the same error when Flatlist nested under VirtualizedList.

RN: 0.69.6

A.tsx

function ComponentA = () => {
  return <VirtualizedList ... />
}

B.tsx

function ComponentB = () => {
  const ref = useRef<FlatList>(null)

  useEffect(() => {
    // got 'No scrollTo method provided' warning here
    ref.current?.scrollToOffset({ offset: 100, animated: false })
  }, [])

  return (
    <View>
      <FlatList ref={ref} ... />
    </View>
  )
}

[nandychu]

Any updates on this?

[minhna]

I have this warning when calling scrollToEnd() method in nested FlatList. React native 0.71.1, React 18.2.0

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.