Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Typescript error on SectionList props "is not assignable to type 'AnimatedProps'"

$
0
0

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

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>