Omit renderItem from TCarouselProps<T> causes mode prop to be incompatible.

[ItsMeJules]

Describe the bug
When omitting the renderItem prop from the Carousel it causes the mode prop to turn incompatible with the required props.

Here's a working example that should show the error.

type CustomCarouselProps = Omit<TCarouselProps<CarouselMedia>, 'renderItem'> & {
  showSteps?: boolean;
  isFullScreen?: boolean;
  quitButton?: {
    onPress: () => void;
  };
};

export const CustomCarousel = (props: CustomCarouselProps) => {
  const {
    showSteps = true,
    isFullScreen = false,
    quitButton,
    data,
    onSnapToItem,
    defaultIndex,
  } = props;

  return (
      <Carousel
        {...props}
        renderItem={({ item }) => {
          return item.renderItem();
        }}
      />
    ...
  )

To Reproduce
Steps to reproduce the behavior:

1. Open a new file
2. Copy/paste the code given above
3. The typescript error should appear on the Carousel node

Expected behavior
It shouldn't give me a warning when omitting a prop from the props.

Screenshots

Type '{ onSnapToItem: (index: number) => void; renderItem: ({ item }: CarouselRenderItemInfo<CarouselMedia>) => any; ref?: Ref<ICarouselInstance> | undefined; ... 32 more ...; quitButton?: { ...; } | undefined; }' is not assignable to type 'IntrinsicAttributes & PropsWithChildren<TCarouselProps<CarouselMedia>>'.
  Type '{ onSnapToItem: (index: number) => void; renderItem: ({ item }: CarouselRenderItemInfo<CarouselMedia>) => any; ref?: Ref<ICarouselInstance> | undefined; ... 32 more ...; quitButton?: { ...; } | undefined; }' is not assignable to type '{ mode?: "horizontal-stack" | "vertical-stack" | undefined; modeConfig?: ILayoutConfig | undefined; }'.
    Types of property 'mode' are incompatible.
      Type '"parallax" | "horizontal-stack" | "vertical-stack" | undefined' is not assignable to type '"horizontal-stack" | "vertical-stack" | undefined'.
        Type '"parallax"' is not assignable to type '"horizontal-stack" | "vertical-stack" | undefined'.

Versions (please complete the following information):

• react: v18.1.0
• react-native: v0.70.0
• react-native-reanimated: v3.8.1
• react-native-reanimated-carousel: v3.5.1
• react-native-gesture-handler: v2.6.0

Smartphone (please complete the following information):

• Device: iPhone 15 Pro
• OS: iOS 17.2

Additional context
Add any other context about the problem here.

[dosubot]

The issue you're facing stems from a TypeScript type incompatibility related to the mode prop in your CustomCarouselProps. The mode prop in TCarouselProps<T> expects either "horizontal-stack", "vertical-stack", or undefined. However, your implementation suggests that "parallax" is being used or allowed, which is not compatible with the expected types for mode.

To resolve this, you can define a new type that includes "parallax" along with the other valid mode values and then use this type for the mode prop in your CustomCarouselProps. Here's how you can adjust your types:

type CustomCarouselMode = "parallax" | "horizontal-stack" | "vertical-stack";

type CustomCarouselProps = Omit<TCarouselProps<CarouselMedia>, 'renderItem' | 'mode'> & {
  mode?: CustomCarouselMode;
  showSteps?: boolean;
  isFullScreen?: boolean;
  quitButton?: {
    onPress: () => void;
  };
};

This approach omits both renderItem and mode from TCarouselProps<CarouselMedia> and introduces a new mode prop that accommodates "parallax" as a valid value. Ensure that the react-native-reanimated-carousel component can handle the "parallax" mode if you intend to use it.

Details

Sources

• src/components/Carousel.tsx
• src/types.ts
• src/hooks/useInitProps.ts
• src/components/BaseLayout.tsx
• example/app/src/pages/stack/index.tsx

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[ItsMeJules]

Any infos on how should I fix this?

[dosubot]

To fix the TypeScript error you're encountering, you need to adjust your CustomCarouselProps type definition to correctly handle the mode prop. The solution involves creating a new type that includes "parallax" as a valid value for mode, alongside the other values accepted by the original TCarouselProps<T>. Here's a step-by-step guide:

1. Define a New Mode Type: Create a type that includes "parallax" along with the other modes accepted by the carousel component. This will allow you to use "parallax" without TypeScript errors.

type CustomCarouselMode = "parallax" | "horizontal-stack" | "vertical-stack";

2. Adjust CustomCarouselProps: Modify your CustomCarouselProps to use the new CustomCarouselMode type for the mode prop. Also, ensure you omit mode from the original TCarouselProps<T> to avoid type conflicts.

type CustomCarouselProps = Omit<TCarouselProps<CarouselMedia>, 'renderItem' | 'mode'> & {
  mode?: CustomCarouselMode;
  showSteps?: boolean;
  isFullScreen?: boolean;
  quitButton?: {
    onPress: () => void;
  };
};

3. Implement the CustomCarousel Component: When implementing your CustomCarousel component, you can now safely use the mode prop with "parallax" or any other supported mode without encountering type errors.

Ensure that the rest of your component implementation correctly passes the mode prop to the underlying carousel component. If the carousel component you're using does not natively support "parallax", you'll need to verify that it can be extended or customized to handle this mode appropriately.

By following these steps, you should be able to resolve the TypeScript error and use the mode prop with more flexibility in your custom carousel component.

Details

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.