I have a section list and i want to implement a solution to auto scroll to a certain section when clicking on a button. To start with i added a ref to my section list but it's giving out an error as Object is possibly 'undefined'
(I'm using typescript for my app).
<SectionList sections={groupActivities} keyExtractor={(item, index) => index.toString()} initialNumToRender={5} ref={(component) => { this.sectionList = component; // This is the line i'm getting the error (in 'this') }} .........
And i'm trying to use my ref as follows
function scrollToSection() { this.sectionList.scrollToLocation({ sectionIndex: 0, itemIndex: 5, viewPosition: 1, // viewOffset: 50, }); }
The documents i have referred states to use the ref like the way i did but i cannot figure out the issue here.
PS:
this is my new code
<SectionList sections={groupActivities} keyExtractor={(item, index) => index.toString()} initialNumToRender={5} ref={sectionList}
And
const sectionList = useRef<SectionList>(); function scrollToSection() { sectionList.current?.scrollToLocation({ sectionIndex: 0, itemIndex: 5, viewPosition: 1, }); }
I'm getting a type error is ref={sectionList}
line as follows
(JSX attribute) ClassAttributes<SectionList<any, DefaultSectionT>>.ref?: string | ((instance: SectionList<any, DefaultSectionT> | null) => void) | React.RefObject<SectionList<any, DefaultSectionT>> | null | undefinedNo overload matches this call. Overload 1 of 2, '(props: SectionListProps<any, DefaultSectionT> | Readonly<SectionListProps<any, DefaultSectionT>>): SectionList<...>', gave the following error. Type 'MutableRefObject<SectionList<any, DefaultSectionT> | undefined>' is not assignable to type 'string | ((instance: SectionList<any, DefaultSectionT> | null) => void) | RefObject<SectionList<any, DefaultSectionT>> | null | undefined'. Type 'MutableRefObject<SectionList<any, DefaultSectionT> | undefined>' is not assignable to type 'RefObject<SectionList<any, DefaultSectionT>>'. Types of property 'current' are incompatible. Type 'SectionList<any, DefaultSectionT> | undefined' is not assignable to type 'SectionList<any, DefaultSectionT> | null'. Type 'undefined' is not assignable to type 'SectionList<any, DefaultSectionT> | null'. Overload 2 of 2, '(props: SectionListProps<any, DefaultSectionT>, context: any): SectionList<any, DefaultSectionT>', gave the following error. Type 'MutableRefObject<SectionList<any, DefaultSectionT> | undefined>' is not assignable to type 'string | ((instance: SectionList<any, DefaultSectionT> | null) => void) | RefObject<SectionList<any, DefaultSectionT>> | null | undefined'. Type 'MutableRefObject<SectionList<any, DefaultSectionT> | undefined>' is not assignable to type 'RefObject<SectionList<any, DefaultSectionT>>'.ts(2769)index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<SectionList<any, DefaultSectionT>> & Readonly<...> & Readonly<...>'index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<SectionList<any, DefaultSectionT>> & Readonly<...> & Readonly<...>'