Type issue: 'Swiper' cannot be used as a JSX component.

[ElviraBurchik]

Hi!

First of all, thank you so much for your library and amazing work behind it!

I have a question about typescript issue I get after upgrading to v2.0.2 (might be unrelated, but worth to mention). I migrated the code to Swiper and now type check fails with this error:

error TS2786: 'Swiper' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.

140         <Swiper
             ~~~~~~

As I understand, since Swiper's type might be undefined, it's incompatible with expected by JSX 'Element | null' type

const Swiper: <T>(props: SwiperOptions<T> & React.RefAttributes<{
    swipeRight: () => void;
    swipeLeft: () => void;
    swipeBack: () => void;
    swipeTop: () => void;
} | undefined>) => React.ReactNode
import Swiper

My guess is changing SwiperCardRefType to .. | null instead of .. | undefined should address that, but I'm not sure.

Would love to hear your thoughts and can help bringing the fix!

[Skipperlla]

I will take note of this problem and will look into it with the new update

[Skipperlla]

@ElviraBurchik can you send me the code snippet where you are getting the current ts error so that I can debug it faster when testing this issue?

[Skipperlla]

I would also like to listen to your extra advice with pleasure

[ElviraBurchik]

@Skipperlla here is the code that throws an error (at least for me), it can be copied as is:

import React, { useCallback, useState } from 'react';
import { View, Text } from 'react-native';
import { Swiper } from 'rn-swiper-list';

export const TestScreen = () => {
  const [cards] = useState<string[]>(['1', '2', '3', '4', '5']);

  const OverlayTop = () => {
    return <Text>OverlayTop</Text>;
  };

  const OverlayLeft = () => {
    return <Text>OverlayLeft</Text>;
  };

  const OverlayRight = () => {
    return <Text>OverlayRight</Text>;
  };

  const renderCard = useCallback(() => {
    return <Text>Test test</Text>;
  }, []);

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
      }}
    >
      <Swiper
        data={cards}
        OverlayLabelRight={OverlayRight}
        OverlayLabelLeft={OverlayLeft}
        OverlayLabelTop={OverlayTop}
        renderCard={renderCard}
      />
    </View>
  );
};

[Skipperlla]

I will look into this problem this weekend thank you 🙌

[Skipperlla]

hi i tried the code you gave me exactly but i didn't encounter any typescript errors. could your versions be outdated? if you can send me a video or photo i can debug it much faster @ElviraBurchik