Making a FlashList custom component in RN

85 views Asked by At

Sure we are all good. I am using FlashList in react native as a custom component so that it can be use across all screens but I am having an error.

**********FlashList Custom Component

The Props are the following:

  1. The "dataObject" is the api response that will be passed to the data property of the FlashList

  2. The "dataList" is another component designed to be rendered in the renderItem property of the FlashList i.e a component that is styled to display the data returned by the dataObject Props at the above and it takes item as parameter.

  3. The estimatedItemSize is the number of item to be fetched for the screen at first fetched as specified and instructed by FlashList.

import React, {PropsWithChildren} from 'react'
import {FlashList} from '@shopify/flash-list';

type FlashListProps = {
    dataObject: any[];
    dataList: React.ReactNode;
    estimatedItemSize: number;  
  }

const DataFlashList = (Props: PropsWithChildren<FlashListProps>) => {
  return <>
        <FlashList 
  data={Props.dataObject}
  renderItem={({item}) => {
    {Props.children}
}}

  estimatedItemSize={Props.estimatedItemSize}

/>
  </>
}

export default DataFlashList

*******ERROR 

The renderItem property of the FlashList is underlined as error that goes below :

Type '({ item }: ListRenderItemInfo<any>) => void' is not assignable to type 'ListRenderItem<any>'.
  Type 'void' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | null'

The expected type comes from property 'renderItem' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<FlashList<any>> 

***MY EXPECTATION

Even aside the error i encountered, i was thinking about how to pass the "item" parameter in the "Props.Children" as usual because I will use it to get the properties of the "Props.dataObject" returned from the api.

Thank you for your assistance.

0

There are 0 answers