react-native-copilot
react-native-copilot copied to clipboard
Unable to use with SectionList
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
Looks like '.scrollTo()' method is not available on SectionList. Is there a way to add SectionList scrollToLocation()
method support. Thanks!
@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();
}}
// ...
/>
}
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: @.***>