I'm using a SectionList with the react-native-modalize lib to display it on a modal. Everything is working, but TypeScript is giving me this error on the 'sectionListProps' prop of the 'Modalize':
Type '{ keyExtractor: (item: SectionListData<Adhesion, DefaultSectionT>) => string; renderItem: ({ item }: { item: SectionListData<Adhesion, DefaultSectionT>; }) => JSX.Element; renderSectionHeader: ({ section: { title } }: ListDataProps) => JSX.Element; persistentScrollbar: true; sections: VehiclesGroup[] | undefined; }' is not assignable to type 'AnimatedProps<SectionListProps<any, DefaultSectionT>>'. Types of property 'sections' are incompatible. Type 'VehiclesGroup[] | undefined' is not assignable to type 'readonly WithAnimatedObject<SectionListData<any, DefaultSectionT>>[]'. Type 'undefined' is not assignable to type 'readonly WithAnimatedObject<SectionListData<any, DefaultSectionT>>[]'.ts(2322)
I tried to import some SectionList types like 'SectionListData' and 'SectionListProps' but the error persists.
The typing and code:
interface VehiclesGroup { title: string data: Adhesion[] | null}interface ListDataProps { section: SectionListData<{ title: string }>}interface VehicleObject { plate: string description: string type: string model?: string}interface Adhesion { id: number icon_color: string company_id: string vehicle: VehicleObject category: string}
const [vehiclesGroup, setVehiclesGroup] = useState<VehiclesGroup[] | null>([]);const [searchValue, setSearchValue] = useState<string | ''>('');const modalizeRef = useRef<Modalize>(null);// SectionList helpersconst sectionsData = { sections: vehiclesGroup?.filter((group) => group?.data?.some((item) => { const validPlate = item.vehicle.plate.toLocaleLowerCase().includes(searchValue); const validDesc = item.vehicle.description.toLocaleLowerCase().includes(searchValue); const validCategory = item?.category?.toLocaleLowerCase().includes(searchValue); return validPlate || validDesc || validCategory; })),};const keyExtractor = (item: SectionListData<Adhesion>) => `${item.id}`;const renderItem = ({ item }: { item: SectionListData<Adhesion> }) => (<S.SectionContainer><S.SectionItem><S.SectionItemIcon bgColor={item.icon_color}><FontAwesomeIcon color={textColors.white} icon={faCar} size={25} /></S.SectionItemIcon></S.SectionItem><S.SectionItem><GText weight={400} size="lg"> {item.vehicle.description}</GText><GText weight={400} size="md" color="secundary"> {item.vehicle.plate}</GText></S.SectionItem></S.SectionContainer>);const renderSectionHeader = ({ section: { title } }: ListDataProps) => (<S.SectionHeader><GText weight={400} size="md" color="secundary"> {title}</GText></S.SectionHeader>);const memoizedItems = useMemo(() => renderItem, [vehiclesGroup]);const memoizedHeader = useMemo(() => renderSectionHeader, [vehiclesGroup]);return ( //...<Modalize ref={modalizeRef} withOverlay={false} handlePosition="inside" tapGestureEnabled modalTopOffset={100} sectionListProps={{ //Here typescript alerts the error ...sectionsData, keyExtractor, renderItem: memoizedItems, renderSectionHeader: memoizedHeader, persistentScrollbar: true, }} modalStyle={{ paddingTop: 20, paddingLeft: 30, paddingRight: 10, }} />)
"expo": "~45.0.0","typescript": "^4.7.4","react": "17.0.2","react-native": "0.68.2","react-native-modalize": "^2.1.1","react-native-reanimated": "~2.8.0",