meliorence / meliorence/react-native-snap-carousel

renderItem typescript error with item unknown

Open
#754 6 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
2.3k
PR merge metrics
No merged PRs in 30d

Description

Really love this snap carousel. I'm having an issue where I get TypeScript error on renderItem.

import MealCarousel from 'react-native-snap-carousel';

const RestaurantListRow: React.FC<Restaurant> = React.memo(
  (item) => {
    const {
      ...
      meals,
    } = item;
    const renderItem = React.useCallback(
      ({ item, index }: { item: Meal; index: number }) => {
        return (
          <TouchableWithoutFeedback
            onPress={() => ...}>
            <RestaurantMeal meal={item} />
          </TouchableWithoutFeedback>
        );
      },
      [meals, ...]
    );
return(
  ...
  <MealCarousel
    data={meals}
    renderItem={renderItem}
    sliderWidth={width}
    itemWidth={width - 30}
    removeClippedSubviews={false}
  />
...

I am importing meals, which is a Meal[] that cannot contain unknown objects.
When I hover on top of item in the render function, I can see the item is of type Meal.

The full error I am getting is:

Type '({ item }: { item: Meal; }) => JSX.Element' is not assignable to type '((baseData: { index: number; dataIndex: number; item: unknown; }, parallaxData: { scrollPosition: Value | undefined; carouselRef: ScrollView | FlatList<unknown> | null; vertical: false; itemWidth: number; sliderWidth: number; }) => ReactNode) | ((baseData: { ...; }, parallaxData: { ...; }) => ReactNode)'.
  Type '({ item }: { item: Meal; }) => JSX.Element' is not assignable to type '(baseData: { index: number; dataIndex: number; item: unknown; }, parallaxData: { scrollPosition: Value | undefined; carouselRef: ScrollView | FlatList<unknown> | null; vertical: false; itemWidth: number; sliderWidth: number; }) => ReactNode'.
    Types of parameters '__0' and 'baseData' are incompatible.
      Type '{ index: number; dataIndex: number; item: unknown; }' is not assignable to type '{ item: Meal; }'.
        Types of property 'item' are incompatible.

However, if I simple render a snap carousel using an simple array of items from a local file, then I don't get this error.

What am I doing wrong?

I should also mention that when I run tsc I am getting an error for the typescript definition file of the library as well and for renderItem as well:

node_modules/react-native-snap-carousel/lib/typescript/carousel/types.d.ts:58:5
    58     renderItem: (baseData: {
           ~~~~~~~~~~
    The expected type comes from property 'renderItem' which is declared here on type '(IntrinsicAttributes & IntrinsicClassAttributes<Carousel<unknown>> & Pick<Readonly<CarouselBaseProps<unknown> & HorizontalCarouselProps<...> & Pick<...>> & Readonly<...>, "data" | ... 18 more ... | "renderItem"> & Partial<...> & Partial<...>) | (IntrinsicAttributes & ... 3 more ... & Partial<...>)'

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the report with tsc and inspect node_modules/react-native-snap-carousel/lib/typescript/carousel/types.d.ts around line 58, where renderItem is declared. Trace how the carousel's data and renderItem types are inferred, then verify that a Meal[] with the shown callback type-checks without errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.