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 helpers
const 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",