How should SectionList be properly typed? I am encountering an issue where this code works (taken from the official documentation example):
<SectionList
renderItem={({item, index}) => <Text key={index}>{item}</Text>}
renderSectionHeader={({section: {title}}) => (
<Text style={{fontWeight: 'bold'}}>{title}</Text>
)}
sections={ticksData}
keyExtractor={(item, index) => item + index}
/>;
However, the following code does not work:
const renderSectionHeader=({section: {title}}) => (
<Text style={{fontWeight: 'bold'}}>{title}</Text>
);
return (
<SectionList
renderItem={({item, index}) => <Text key={index}>{item}</Text>}
renderSectionHeader={renderSectionHeader}
sections={ticksData}
keyExtractor={(item, index) => item + index}
/>;
An error is thrown with the message:
Types of property 'renderSectionHeader' are incompatible. Type '({ section: { title } }: { section: { title: any; }; }) => Element' is not assignable to type '(info: { section: SectionListData; }) => ReactElement'. Types of parameters '__0' and 'info' are incompatible. Type '{ section: SectionListData; }' is not assignable to type '{ section: { title: any; }; }'. Types of property 'section' are incompatible. Type 'SectionListData' is not assignable to type '{ title: any; }'. Property 'title' is missing in type 'SectionListData'.