Typescript error on SectionList props "is not assignable to type 'AnimatedProps<SectionListProps<any, DefaultSectionT>>' "

Viewed 21

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",
0 Answers
Related