React Native SectionList has incomprehensible flow type error

Question

If have this simple SectionList definition in my code:

const s = (
  <SectionList
    renderItem={({ item }) => <Text>abc</Text>}
    renderSectionHeader={({ section }) => <Text>abc</Text>}
    sections={[{ data: [1, 2, 3], title: 'abc' }]}
  />
);

And flow generates this error message which refers to the whole "tag block" (it is actually copy pasted from VSCode):

[flow] props of React element `SectionList` (This type is incompatible with See also: React element `SectionList`)

What is happening here?

EDIT I am using

flow-bin: 0.56.0
react: 16.0.0
react-native: 0.49.1

EDIT2 So the example can be reduced to this simple line (without impacting the error message):

<SectionList sections={[]} />;

EDIT3 I just discovered that flow complains about several types that are defined in the React Native library (mainly about missing type arguments for generic types). I am wondering if I should use an older flow-bin version. Is there a compatibility table for React Native and flow?

Answer 1

I had a similar problem with react-native: 0.49.3 and flow-bin: 0.53.0. After checking the type definitions from the SectionList source, got it to work without type warnings as follows:

type Row = {
  name: string,
}

type Section = {
  title: string,
  data: $ReadOnlyArray<Row>,
}

const mySections: $ReadOnlyArray<Section> = [...] // your data here

<SectionList sections={mySections} />

So the key for me was to use $ReadOnlyArray<T> instead of Array<T>. Perhaps this helps you!