Swipeable cards

[avishain]

Description

New component - addition to existing library.

The component name is SwipeableCards.
It receives the following props:

• currentItem: T;
• nextItems: T[];
• onSwipe?: SwipeableCardProps['onSwipe'];
• currentIndex: number;
• renderNextCard: (nextItem: T) => JSX.Element;
• renderRightCard: () => JSX.Element;
• renderLeftCard: () => JSX.Element;
• renderMainCard: () => JSX.Element;

Changelog

SwipeableCard - new component

Usage example

interface MyUseCaseSwipeableCardsProps extends MyUseCaseItemProps {
  items: MyUseCaseItem[];
  currentIndex: number;
}

const MyUseCaseSwipeableCards = (props: MyUseCaseSwipeableCardsProps) => {
  const {items, currentIndex} = props;

  const currentItem = items[currentIndex];
  const nextFeedItems = items.slice(currentIndex + 1, currentIndex + 5);

  const onSwipe = {
    right: () => {
      // DO SOMETHING 1
    },
    left: () => {
      // DO SOMETHING 2
    },
  };

  const renderMainCard = () => {
    return (
      <MyUseCaseItem item={currentItem} />
    );
  };

  const renderLeftCard = () => {
    return (
      <View flex center backgroundColor={Colors.red40}>
        <Text text20BL white>LEFT</Text>
      </View>
    );
  };
  const renderRightCard = () => {
    return (
      <View flex center backgroundColor={Colors.yellow40}>
        <Text text20BL white>RIGHT</Text>
      </View>
    );
  };

  const renderPlaceHolderCard = (item: MyUseCaseItemType) => {
    return (
      <View flex center>
        <Text text20BL white>{item.id}</Text>
        <Image source={Assets.illustrations.placeholderCover} size={125} />
      </View>
    );
  };

  return (
    <SwipeableCardsView
      nextItems={nextFeedItems}
      renderMainCard={renderMainCard}
      onSwipe={onSwipe}
      currentIndex={currentIndex}
      currentItem={currentItem}
      renderLeftCard={renderLeftCard}
      renderRightCard={renderRightCard}
      renderPlaceHolderCard={renderPlaceHolderCard}
    />
  );
};

export default MyUseCaseSwipeableCards;

Visuals

Additional info

None