Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

ref object is possibly undefined in react native

$
0
0

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<...>'

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>