I'm using React Native SectionList with different data structure with the following below
const firstObject: FirstObject = [{ id: 1, age: null, breed: null, gender: 'female', isCastrated: false, isCrossbreed: false, }, ...]const secondObject: SecondObject = [{ id: 1, text: "qwrqwr12r", callDuration: 15, callAt: "2022-12-22T11:09:07Z", completionDeadline: "2022-12-24T11:09:07Z", consultationFreeLength: 1, }, ...]It works but I got a typescript error that I can't figure out? And it seems it only allowed 1 typing for the section data. What I need is every data from the section must be different. For now we only have 2 and its default the FirstObject and SecondObject its not dynamic
No overload matches this call. Overload 1 of 2, '(props: SectionListProps<SecondObject, DefaultSectionT> | Readonly<SectionListProps<SecondObject, DefaultSectionT>>): SectionList<...>', gave the following error. Type 'FC<ListRenderItemInfo<FirstObject>>' is not assignable to type 'SectionListRenderItem<SecondObject, DefaultSectionT>'. Types of parameters 'props' and 'info' are incompatible. Type 'SectionListRenderItemInfo<SecondObject, DefaultSectionT>' is not assignable to type 'ListRenderItemInfo<FirstObject>'. Types of property 'item' are incompatible. Type 'SecondObject' is missing the following properties from type 'FirstObject': userId, name, speciesId, speciesOther, and 9 more. Overload 2 of 2, '(props: SectionListProps<SecondObject, DefaultSectionT>, context: any): SectionList<SecondObject, DefaultSectionT>', gave the following error. Type 'FC<ListRenderItemInfo<FirstObject>>' is not assignable to type 'SectionListRenderItem<SecondObject, DefaultSectionT>'.ts(2769)My section list
<SectionList style={styles.container} contentContainerStyle={styles.contentContainer} ListEmptyComponent={<TranslatedNoData onClick={refetch} />} scrollEventThrottle={16} bouncesZoom={false} maxToRenderPerBatch={8} removeClippedSubviews refreshControl={<FlatListRefreshControl refreshing={isFetching} onRefresh={refetch} />} sections={[ { data: [], title: 'FirstObject', keyExtractor: ({id}) => id.toString(), renderItem: FirstObjectItem, // <- Error, If I removed the data below it works. ItemSeparatorComponent: () => <Box pt="12px" />, }, { data: currentData?.data || [], title: 'SecondObject', keyExtractor: ({id}) => id.toString(), renderItem: SecondObjectItem, ItemSeparatorComponent: () => <Box pt="12px" />, }, ]} renderSectionFooter={() => <Box h="32px" />} renderSectionHeader={({section: {title}}) => <Text>{title}</Text>} onScroll={ scrollOffsetY && Animated.event([{nativeEvent: {contentOffset: {y: scrollOffsetY}}}], {useNativeDriver: false}) } />My two components
const FirstObjectItem: FC<ListRenderItemInfo<FirstObject>> = ({item}) => { ...});const SecondObjectItem: FC<ListRenderItemInfo<SecondObject>> = ({item}) => { ....});