@dooboo-ui/tinder-card

TinderCard

Preview

Props

	types	description	required	default
testID	string
errorTestID	string
data	T[ ]
renderCards	(item: T) => ReactElement
renderNoMoreCards	( ) => ReactElement
onSwipeRight	(item: T) => void
onSwipeLeft	(item: T) => void
onCancel	( ) => void
swipeRightLabelElement	( ) => ReactElement
swipeLeftLabelElement	( ) => ReactElement
swipeRightLabelStyle	ViewStyle
swipeLeftLabelStyle	ViewStyle
swipeLabelAlignStyle	ViewStyle
containerStyle	ViewStyle
frontCardStyle	ViewStyle
backCardsStyle	ViewStyle
shouldRotate	ViewStyle

Getting started

Installation

yarn add @dooboo-ui/core

Import

import { TinderCard } from '@dooboo-ui/core';
import { TinderCardDirection, TinderCardRef } from '@dooboo-ui/core/lib/TinderCard';

TinderCard

• TinderCard Component

• Example

  <TinderCard
      testID="tinderCard"
      ref={tinderCard}
      onSwipeRight={handleUnlike}
      onSwipeLeft={handleLike}
      onCancel={handleCancel}
      data={data}
      renderCards={_renderCards}
      renderNoMoreCards={_renderNoMoreCards}
      containerStyle={{ width: 300, height: 500 }}
      shouldRotate
      swipeRightLabelElement={(): ReactElement => <LikeLabel>Like!</LikeLabel>}
      swipeLeftLabelElement={(): ReactElement => 
        <UnlikeLabel>Unlike!</UnlikeLabel>
      }
      swipeLabelAlignStyle={{ justifyContent: 'center', alignItems: 'center' }}
  />
  

TinderCardDirection

• You can use this by importing on @dooboo-ui/core/lib/TinderCard

• Structure if you put swiping direction on event function, you can use this. For example, TinderCardDirection.RIGHT or TinderCardDirection.LEFT

  {
    RIGHT = 'right',
    LEFT = 'left'
  }
  

TinderCardRef

• This make us to use function in TinderCard.

    {
      handleCancel: () => void;
      forceSwipe: (direction: TinderCardDirection) => void;
    }
  

• Usage

  1. Import module TinderCardRef First of all, you should import module TinderCardRef in @dooboo-ui/core/lib/TinderCard.

     import { TinderCardRef } from '@dooboo-ui/core/lib/TinderCard';
     

  2. Allocate useRef() having type TinderCardRef Object.

     import React, { useRef } from 'react';
     
     ...
     
     const tinderCard = useRef<TinderCardRef>(null);
     

  3. Write this where you want to use.

     <TouchableOpacity
       onPress={(): void => {
         tinderCard.current.forceSwipe(TinderCardDirection.LEFT);
       }}
     >
       Button
     </TouchableOpacity>
     

     If you are difficult to understand useRef, you can read this tutorial.

Declare interface T for props data.

interface Item {
  id: string;
  title: string;
  content: string;
  image: ImageSourcePropType;
}

Full code of example

import { TinderCard } from '@dooboo-ui/core';
import { TinderCardDirection, TinderCardRef } from '@dooboo-ui/core/lib/TinderCard';

interface Item {
  id: string;
  title: string;
  content: string;
  image: ImageSourcePropType;
}

function Page(): React.ReactElement {
    const tinderCard = useRef<TinderCardRef>(null);

    return (
      <Container>
        <TinderCard
          testID="tinderCard"
          ref={tinderCard}
          onSwipeRight={handleUnlike}
          onSwipeLeft={handleLike}
          onCancel={handleCancel}
          data={data}
          renderCards={_renderCards}
          renderNoMoreCards={_renderNoMoreCards}
          containerStyle={{ width: 300, height: 500 }}
          shouldRotate
          swipeRightLabelElement={(): ReactElement => <LikeLabel>Like!</LikeLabel>}
          swipeLeftLabelElement={(): ReactElement => <UnlikeLabel>Unlike!</UnlikeLabel>}
          swipeLabelAlignStyle={{ justifyContent: 'center', alignItems: 'center' }}
        />
        <View style={{
          position: 'absolute',
          bottom: 0,
          flexDirection: 'row',
          width: '100%',
          justifyContent: 'space-between',
        }}>

          <ButtonWrapper
            style={{ backgroundColor: '#ff7676' }}
            onPress={(): void => {
              tinderCard.current.forceSwipe(TinderCardDirection.LEFT);
            }}
          >
            <StyledText style={{ fontSize: 15 }}>UNLIKE</StyledText>
          </ButtonWrapper>

          <ButtonWrapper
            onPress={(): void => {
              tinderCard.current.handleCancel();
            }}
          >
            <StyledText style={{ fontSize: 15 }}>UNDO</StyledText>
          </ButtonWrapper>

          <ButtonWrapper
            style={{ backgroundColor: '#44d1a6' }}
            onPress={(): void => {
              tinderCard.current.forceSwipe(TinderCardDirection.RIGHT);
            }}
          >
            <StyledText style={{ fontSize: 15 }}>LIKE</StyledText>
          </ButtonWrapper>
        </View>
      </Container>
    );
}

export default Page;