React Native SectionList: What are the correct TypeScript types

Question

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?

Answer 1

interface Data {
...
}

const MySectionList = SectionList as SectionList<Data>;

<MySectionList
...
/>

worked for me

Answer 2

[
  { title: "Title1", data: ["item1", "item2"] },
  { title: "Title2", data: ["item3", "item4"] },
  { title: "Title3", data: ["item5", "item6"] },
]

first you need to define the Section Type & the date item Type.

I'll use an interface here to define them.

type Item = string

interface Section {
  title: string;
  data: Item[]
}

now you need to define your `SectionList` `renderItem` function

const renderItem: SectionListRenderItem<Item, Section> = ({ item }) => {
  // make sure you return some sort of a component here.
};