How to properly type a React-Native SectionList with flowjs

171 views Asked by At

I'm trying to properly type a SectionList call on React-Native 0.66.1 with flow-bin 0.158.0

I have the following code:

// @flow
import React from 'react';
import type {Node} from 'react';
import {SafeAreaView, SectionList} from 'react-native';

type Props = {
  sections: $ReadOnlyArray<{
    title: string,
    data: $ReadOnlyArray<{a: string}>,
  }>,
};

const App: (props: Props) => Node = ({sections}) => {
  return (
    <SafeAreaView>
      <SectionList sections={sections} renderItem={({item}) => null} />
    </SafeAreaView>
  );
};

export default App;

When I run the flowjs check I get 20 errors:

Cannot create SectionList element because property ItemSeparatorComponent is missing in object type [1] but exists in
SectionBase [2] in type argument SectionT. [prop-missing]


Cannot create SectionList element because property key is missing in object type [1] but exists in SectionBase [2] in
type argument SectionT. [prop-missing]

Cannot create SectionList element because property keyExtractor is missing in object type [1] but exists in
SectionBase [2] in type argument SectionT. [prop-missing]


Cannot create SectionList element because property renderItem is missing in object type [1] but exists in
SectionBase [2] in type argument SectionT. [prop-missing]

Here a screenshot: Screenshot of error

The error is pointing me here: https://github.com/facebook/react-native/blob/1465c8f3874cdee8c325ab4a4916fda0b3e43bdb/Libraries/Lists/VirtualizedSectionList.js#L43

The SectionBase definition there has key, renderItem, ItemSeparatorComponent and KeyExtractor all set to optional.

So what would be a correct type definition for my sections prop?

0

There are 0 answers