I'm building a React Native app using TypeScript. I'm trying to use a SectionList
. I followed the docs, and here is my code:
renderSectionHeader = ({ section: { title } }: { section: { title: string } }) => (<ListItem title={title} /> ); render() { const { sections } = this.props; return (<SafeAreaView style={styles.container}><SectionList keyExtractor={this.keyExtractor} sections={[ {title: 'Title1', data: ['item1', 'item2']}, {title: 'Title2', data: ['item3', 'item4']}, {title: 'Title3', data: ['item5', 'item6']}, ]} renderItem={this.renderItem} renderSectionHeader={this.renderSectionHeader} /></SafeAreaView> ); }
But the line renderSectionHeader={this.renderSectionHeader}
throws the following TSLint Error:
[ts]Type '({ section: { title } }: { section: { title: string; }; }) => Element' is not assignable to type '(info: { section: SectionListData<any>; }) => ReactElement<any> | null'. Types of parameters '__0' and 'info' are incompatible. Type '{ section: SectionListData<any>; }' is not assignable to type '{ section: { title: string; }; }'. Types of property 'section' are incompatible. Type 'SectionListData<any>' is not assignable to type '{ title: string; }'. Property 'title' is missing in type 'SectionListData<any>'. [2322]
Are the types of SectionList
broken? Or is the example wrong? Or am I doing something wrong?