react-native-copilot icon indicating copy to clipboard operation
react-native-copilot copied to clipboard

Unable to use with SectionList

Open sergey-king opened this issue 3 years ago • 3 comments

When used with react-native SectionList and called with ref to enable scrolling like: props.start(false, refSectionList.current); - getting a TypeError as below;

TypeError: scrollView.scrollTo is not a function. (In 'scrollView.scrollTo({ y: yOffsett, animated: false })', 'scrollView.scrollTo' is undefined) at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0

React-Native SectionList Inherits ScrollView Props since it's a wrapper around <VirtualizedList>, and thus inherits its props (as well as those of <ScrollView>), so I believe this should work? @mohebifar

sergey-king avatar Oct 14 '21 20:10 sergey-king

Looks like '.scrollTo()' method is not available on SectionList. Is there a way to add SectionList scrollToLocation() method support. Thanks!

sergey-king avatar Jan 18 '22 20:01 sergey-king

@sergey-king for what it's worth, you can use the getScrollResponder() method on a sectionlist ref as the scrollview ref for the tour. It's not ideal, but it works and exposes the methods you need.


const Thing = ({ start }: CopilotWrappedComponentProps) => {
  const scrollRef = useRef<ScrollView | undefined>().current;

  useEffect(() => {
    if (start && scrollRef) {
      start(false, scrollRef);
    }
  }, [])

  return <SectionList
    ref={(ref) => {
      scrollRef = ref?.getScrollResponder();
    }}
    // ...
  />
}

jakequade avatar Mar 05 '23 23:03 jakequade

Good solution! Ended up switching the library

On Sun, Mar 5, 2023 at 6:37 PM jake @.***> wrote:

@sergey-king https://github.com/sergey-king for what it's worth, you can use the getScrollResponder() method on a sectionlist ref as the scrollview ref for the tour. It's not ideal, but it works and exposes the methods you need.

const Thing = ({ start }: CopilotWrappedComponentProps) => { const scrollRef = useRef<ScrollView | undefined>().current;

useEffect(() => { if (start && scrollRef) { start(false, scrollRef); } }, [])

return <SectionList ref={(ref) => { scrollRef = ref?.getScrollResponder(); }} // ... />}

— Reply to this email directly, view it on GitHub https://github.com/mohebifar/react-native-copilot/issues/245#issuecomment-1455245549, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALSTK2EC5RHSE3F5QGQNFT3W2UPSLANCNFSM5GARAHVQ . You are receiving this because you were mentioned.Message ID: @.***>

sergey-king avatar Mar 06 '23 01:03 sergey-king