TypeScript + React Native SectionList

Question

No overload matches this call. Overload 1 of 2, '(props: Readonly<SectionListProps>): SectionList', gave the following error. Property 'sections' is missing in type '{ children: any[]; }' but required in type 'Readonly<SectionListProps>'. Overload 2 of 2, '(props: SectionListProps, context?: any): SectionList', gave the following error. Property 'sections' is missing in type '{ children: any[]; }' but required in type 'Readonly<SectionListProps>'.

    <SafeAreaView>
    <SectionList>
      ListHeaderComponent={() => (
        <>
        <BarApresentation bar={bar}/>
        <CategoryList/>
        <HightlightList/>
        </>
      )}
      sections={organizedDishes}
      keyExtractor={(item: { id: number; }) => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>
            {item.name}
          </Text>
        </View>
      )}
      renderSectionHeader={({ sections }) => (
        <Text>{Title}</Text>
      )}
    </SectionList>
    
    </SafeAreaView>```

Answer 1

You are passing your props as children rather than props of SectionList. Try the following:

    <SafeAreaView>
    <SectionList
      ListHeaderComponent={() => (
        <>
        <BarApresentation bar={bar}/>
        <CategoryList/>
        <HightlightList/>
        </>
      )}
      sections={organizedDishes}
      keyExtractor={(item: { id: number; }) => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>
            {item.name}
          </Text>
        </View>
      )}
      renderSectionHeader={({ sections }) => (
        <Text>{Title}</Text>
      )}
    />
    
    </SafeAreaView>