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]
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?
