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;